Application Tiles

Visual design for application tiles in Software.

Goals

  • More visually appealing app tiles that are distinctive
  • Converge upstream and Endless designs
  • Things that the tiles need to communicate:
    • Application identity - icon, name
    • Application developer?
    • Whether the application is installed
    • Hint what the application does? (Could be a label or tags?)
    • Differentiate multiple instances of the same application? (Example: two repositories containing the same application.)
    • Star ratings (and number of ratings?)
    • Indicate if the app is a web app
    • Price?
  • Varieties of tiles that are required:
    • Applications
    • Featured applications, on the category pages (larger, more visually engaging tiles)
    • Codecs
    • Fonts
    • Extensions
    • Input sources
    • Languages
  • Tile layout needs to be responsive, so they can resize to fit the available space

Constraints

  • The only asset we typically have available for an app is its icon
  • The comment field from the desktop file, which provides a short summary of what the app does, can get long when it's translated
  • We don't currently have a good tagging system for apps. The current system uses categories, and a high proportion of apps are placed in the "other" subcategory (see this analysis

Relevant Art

Android

http://cdn02.androidauthority.net/wp-content/uploads/2017/06/android-aurhority-google-play-store-apps3-840x483.jpg

Google Play Web

https://thenextweb.com/wp-content/blogs.dir/1/files/2013/07/Screen-Shot-2013-07-15-at-4.36.53-PM.png

iOS

https://fthmb.tqn.com/BqwGK42dy3QMRDmuLfPcBYEe1j0=/768x0/filters:no_upscale()/app_store-56a533825f9b58b7d0db7393.png

Mac

https://cdn2.macworld.co.uk/cmsdata/slideshow/3543460/top-charts-mac-app-store.jpg

GNOME 3.26

Upstream GNOME ships with plain tiles that cocentrate on the app icon to distinguish between apps.

small_tiles_upstream.png big_tiles_upstream.png

Prototype

dominant-color.gif Using dominant color from the icon as a backdrop and label border

Research

Color

Complimentary Color Sets -- https://color.adobe.com/create/color-wheel/

Discussion

There's some old design work at: https://raw.githubusercontent.com/gnome-design-team/gnome-mockups-software/master/wireframes/category-pages.png

An exploration of the various tile types that we have: https://raw.githubusercontent.com/gnome-design-team/gnome-mockups-software/master/wireframes/app-tiles.png

Tentative Design

See Also

Comments

Design/Apps/Software/TileDesign (last edited 2017-10-17 09:35:41 by AllanDay)