3 Recipe Page Low-Fidelity Prototypes

Version 1

Explores possible use of columns on the desktop version and the use of blocks to distinguish/highlight information in both.

Desktop Version 1 Mobile Version 1

Version 2

Explores hierarchy by highlighing the "ingredients" part for users' convenience when shopping. Sections are more clearly divided by lines breaks. Blocks are used also for highlighting key information.

Desktop Version 2 Mobile Version 2

Version 3

This version explores the possibility of eliminating as much scrolling as possible, by establishing a hierarchy to display key information on one side with the rest occupying the margins. The mobile version, in which the dimensions do not work well if multi-columns are used, places all information in a single column but tries to reduce too much scrolling.

Desktop Version 3 Mobile Version 3