Fotag: Interaction Design
Users can view the images in two modes — grid layout (which arranges the photos in a grid format) or list layout (which arranges the photos one after another, along with the metadata for each photo). To switch between these two layout modes, users can click a button found in a toolbar that is fixed to the top. The two view selection buttons should be image-based toggle buttons: when pressed, a button should appear and remain depressed until the other button is pressed.
Your application should also be responsive to the user’s display. More specifically, it must render differently on smaller displays/screens/windows than on larger displays/screens/windows (effectively, this means there are two visual designs for your app, one for small sizes, one for large sizes). These differences should be handled entirely by CSS designed for the two different sizes (the breakpoint is defined below). When displayed on a mobile device:
- the grid layout should size to the screen,
- the list layout should show the metadata below, instead of beside, each image, and
- any labels you provide for metadata should appear on lines separate from the metadata itself (for example, if you have a “File name:” label, it should appear on a line separate from the file name; note that there are no labels in any of the wireframes provided, and they’re entirely optional).
In no case, should a horizontal scrollbar appear (for small or large displays).
See the following mock-ups for an idea of what the application should look like.
The grid view:
The list view:
A responsive view:
Users can rate each image by selecting the number of stars to assign to that image. They should also be able to filter images with a minimum rating (e.g., 3-star) by clicking on the search filter on the top right of the screen, in the toolbar. Note that you will need to determine whether it is useful for the user to be able to clear a rating after it is given, and if so, how that should be done.
By default, the images should be displayed as smaller thumbnails. Clicking on an image should enlarge it. However, it should never be larger than the width of the screen. You should also provide a mechanism to return the image to a smaller size. You may choose the means of displaying the larger image, but it should be your own code (not code taken from the web).
