Lecture Date: Monday, November 5

Now that we have looked at some user interfaces, we're going to discuss how to start making our own.

How do we go about coming up with an interface wireframe?

Make sure to have read the reading for today from!

Step 1. Define the use cases

How are users going to be using your app? What will they want to do? Come up with a list!

Step 2. Create a screen list

Based on the features above, come up with a screen for each feature.

Step 3. Refactor the screens

Now that you have the screens, how can you reorganize or revise them to combine similar features, link things together, etc.

Step 4. Figure out the screen relationships

Which screens are "siblings," in that they appear on the same tab bar and users can flip between them? Which screens are parent/child, such as a list of items and then the details of a particular item? Decide on these relationships and map them out!

Step 5. Plan your navigation and transitions

Where do you have "lateral" navigation between sibling screens? Where do you have "descendent" navigation to child screens? How will you make these transitions? Lay them out on your wireframe! Now, how do you go from one screen to the next? Tabs? Swipe left to right? A list of items? A button? How do you show your current state/location?

Step 6. Plan your reverse navigation

When do you want to go back a screen in the order you opened them, and when do you want to go "up a level" in your navigation tree? When is each appropriate? How do you know what the user wants? (i.e. temporal navigation vs. ancestral navigation)

Step 7. Draw it up!

Physical wireframes are great for getting your ideas down quickly! You can transfer to digital later too for more interactive designs to show clients.

Step "Should do this along the way"

Consider different screen sizes and orientations. You can repeat this process for each permutation as needed or you can do them as you go.

In-Class Activity

Today, you should work with a partner (anyone is fine) to draw a wireframe!

We are going to design an app for people to order food in a movie theater. Let's pretend that in this high-end theater you can order drinks, snacks, and meals right from your seat on your phone and a server will bring it to you. Consider a few things:

  • How would you show the menu?
  • How would you indicate where you are seated? (let's assume the theaters are relatively small and the seats are large with swing-up tables)
  • How would you pay? How would you give a tip?
  • How would the user do all this quickly without distracting people around them?

You can use your imagination to add features/constraints for your design. For instance, you might want to assume people purchased assigned seats in the theater or can link their ticket to the app.

Draw your app on the handouts provided and then you'll be called up front to share your designs!

Example Wireframes