Purpose

A high-fi prototype is used to take the design from wireframes, where information organization is emphasized, to the actual user experienced design. The look and feel of the web site is established here as is the branding of it. Once this has been created, the design can move to implementation.

Process

We started out by referring to our mood board and prior research to create a branding language. This included the choice of colors, graphical style, and font selection. We then iteratively created the look and feel of specific web page elements, using the recently established branding language. Lastly, we created a logo and tagline, which embodied our web site's user-driven purpose. We combined these elements to create a consistent look and feel that unified the elements and interactions throughout the entire web site.

Final Hi-fi Prototypes

We created hi-fi prototypes of our web page design for the recipe search, cookbook search, and the recipe detail web pages. Since we felt that these established the design language well, we were able to create the cookbook detail page using the same widgets and style-sheets, along with its wireframe.