Purpose

Wireframes are a visualization tool used for presenting the layout of a page including the content, navigation, header/footers, etc.They can be created very quickly and focus the primary design on where information will be presented and how users can interact with various elements of the page.

Process

After we had created detailed personas, we wrote out the information that they would require from our web site in order to achieve their goals. After understanding their informational requirements we sketched out various pages to better understand how this information could be presented and located. This information was iteratively combined, until we had collapsed them into five web pages.

Final Web Page Wireframes

Once we had created initial wireframes that satisfied our personas' goals and agreed with existing web conventions, we prototyped our initial web page designs by constructing the wireframes below.

Homepage/Default Recipe Search

Recipe Search (Main Category 1 - Constraint Chosen)

Recipe Detail

Menu Builder Recipe Search

Cookbook Search

Cookbook Detail