I’ll be discussing two websites today: Tendergreens. com and Urbanplates. com.
For the first analysis, the Tender Greens menu page is what I’ll be discussing.
Overall, I feel the page’s design guides you through the process of putting together a meal, especially if you’ve never been to the restaurant before.
Similarity The use of similarity is demonstrated in the use of color and size.
Continuity: The grouping of the navigation bar options demonstrates continuity.
Closure: There is no demonstration of closure on this page.
Proximity: This page demonstrates proximity through the text and descriptions, spacing between the sections, and the grouping of the menu items.
Figure/Ground This page demonstrates the use of figure/ground through menu items as figures, the contrast in the typography, and the food images.
Symmetry/Order: This page demonstrates symmetry and order through balanced white space, a consistent layout, grid-based organization, and typography and its alignment.
Common Fate: This page demonstrates common fate by using directional cues from how menu items move together when scrolling. The alignment is consistent, and the items shift or expand when interacted with.
I enjoy the design and feel the page I’m analyzing communicates the intended message, which is explaining both the process and options for putting together a meal. The use of similarity and continuity primarily guides the user through the process. I think a video demonstrating the process might also be helpful regarding elevation.
For the second analysis, I’ll discuss the Urban Plates menu page.
Similarly: This website demonstrates similarity by using shapes and colors to create food groups.
Continuity: The page demonstrates continuity by using a grid formation for all of the menu photos.
Closure: The page demonstrates the use of overlay and transparent effects and the use of partial images that the brain automatically fills in.
Proximity: The page demonstrates proximity through grouping the menu items, text with descriptions, buttons with appropriate actions, and navigation and filtering options.
Figure/Ground: The principle of figure/ground is represented through the contrast between the text and the background, food pictures as the figure, and popups and overlays.
Symmetry/Order: The page demonstrates the principle of symmetry and order through even spacing and alignment, consistency with the typography, and the layout of the menu items.
Common Fate The principle of common fate is demonstrated on the page through the animation of the buttons and hover effects of the menu items.
Honestly, I like their website as much as their food! I don’t see any room for immediate improvement. The message is to convey what the business has to offer via their menu, and they definitely nailed it.