Application Tiles
Contents
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
Google Play Web
iOS
/app_store-56a533825f9b58b7d0db7393.png "https://fthmb.tqn.com/BqwGK42dy3QMRDmuLfPcBYEe1j0=/768x0/filters:no_upscale()/app_store-56a533825f9b58b7d0db7393.png")
Mac
GNOME 3.26
Upstream GNOME ships with plain tiles that cocentrate on the app icon to distinguish between apps.
Apps(2f)Software(2f)TileDesign/small_tiles_upstream.png "small_tiles_upstream.png")
Apps(2f)Software(2f)TileDesign/big_tiles_upstream.png "big_tiles_upstream.png")
Prototype
Apps(2f)Software(2f)TileDesign/dominant-color.gif "dominant-color.gif")
Using dominant color from the icon as a backdrop and label border
http://jimmac.musichall.cz/stuff/software-tiles/ -- plain icons
http://jimmac.musichall.cz/stuff/software-tiles2/ -- dynamic background color (slow prototype, sorry)
http://jimmac.musichall.cz/stuff/software-tiles3/ -- dominant color backdrop; subtle app icon that solidifies on hover.
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