Grid Views#
Grid views present a grid of images. Examples include a document browser, with a grid of document thumbnails that can be opened, or a background chooser, with a grid of images from which the user can select.
Guidelines#
Wherever possible, each grid item should have a unique thumbnail.
Order the items in the grid according to what will be most useful to users. Ordering content according to most recently added is often the best arrangement.
The visual styling of the grid should be appropriate to the type of content being displayed. In general, the goal should be to minimize visual distractions and allow the content itself to shine. However, in cases where grid images have irregular shapes or inconsistent appearance, it may be necessary to outline each grid cell.
A list view option can be offered, to show a different view on the same content collection. Here, the list view can be useful for displaying additional metadata for each content item, such as creation dates or authorship.
Most grids will be contained within resizable windows, and should therefore be tested to ensure they look good at the range of expected window sizes and screen resolutions. Often, grid views should be given a maximum width, in order to prevent uncomfortably long rows.