Wireframes Samples – iPhone App for Zoo Visitors
With the bulk of the text done, I’m going to start posting some of the illustrations here. First up, a few screens from the iPhone app I designed to illustrate the Wireframes chapter.
Tools of choice
These wireframes were created from scratch in OmniGraffle Pro 5.2.3. I downloaded some animal silhouettes to use in the high fidelity version of some of the wireframes. Any photos were taken by me (or my wife).
Illustrating the use of wireframes
The chapter uses these examples to illustrate the difference between high fidelity and low fidelity wireframes and to demonstrate different kinds of annotations. Other chapters make use of these wireframes to describe how they might appear in different kinds of documents.
Download the OmniGraffle Files (8.2MB)
Excerpt: About the Examples
My family has become intimately familiar with The National Zoo in Washington, DC. Just a few stops away on the Metro and free to enter, it is an easy, inexpensive trip for us that doesn’t have to soak up a whole day. It quickly became a favorite of my son’s, and there are some months where we visit more than once.
The Zoo’s newest exhibit is Asia Trail, which includes these adorable bears called Sloth Bears. In one visit to the Zoo last year, I recall standing in front of the Sloth Bear enclosure, pulling out my iPhone with the urge to learn more about them. Reaching for my phone has become a habit, and while I could have looked up sloth bear on WikiPedia, I knew I wanted more:
- The phone should know where I am in the zoo, and bring up the relevant exhibit right away.
- The information about the exhibit should tell me about these exact bears.
- The phone should tell me where I can go next or where (as is always the need) the nearest bathroom is.
The National Zoo iPhone app was born: in my head, anyway. The examples in this chapter have screens from this imaginary iPhone application. (Wireframing challenges remain consistent regardless of the size of the screen.) To demonstrate web page wireframes, however, I’ve also mocked up some concepts for a companion application on nationalzoo.si.edu.
