allrecipes.com site interaction analysis

When approaching this project, my first inclination was to somehow break away from the standard grid progression of screenshots. My sequence requires the user to interact with both a webpage and an integrated mobile app. In order to combine the two screen sizes, I had to choose a layout that did not rely on consistent screenshot ratios. The arrangement I ended up with is a bit like a cascade of windows flowing from top left to bottom right.

The colour palette was an easy choice. I simply borrowed the four orange hues used throughout the site. The backgrounds are a subtle shade of grey that is less bleak than a pure white.

My font choice was made to resemble the sans typeface used on the site. I paired Myriad with Minion, which creates a familiar balance between sans and serif. Minion Bold and Myriad Regular are a widely accepted pairing.

In order to connect text to the somewhat chaotic arrangement of windows, I chose to add dominant circles with bold numerals to indicate the sequence, and to map my text blocks to the appropriate windows. Bold Minion numerals indicates the connection between the text and the windows.