Designing The Washington Post for iPad – Detailed Wireframes

Wed, Nov 10, 2010

Notes & Notes

Tackling navigation was a huge part of the detailed wireframing process. I immersed myself in the ways a user might get from one thing to another and how I could leverage iPad device capabilities. For weeks I walked around thinking things like… Should it be a tap or a swipe? Would any double mouse-clickers try double-tapping an iPad screen? Is there such a thing as a tap-flip? Do I use traditional navigational items like buttons or is this beyond the button? Am I going crazy?

A basic, but important step for me was figuring out events that would occur when a user touched a module — where would it take them and how would they get back? Sounds simple, but without conventional web browser controls, like the back button, it was difficult to grasp how someone might use the app controls and design to get from one thing to another.

Bottom line: It’s important to remember that everything on the screen is something a user can interact with. Navigating an iPad app is full of accidental discoveries — making it extremely important to design consistent flows and transitions. A tap should do one type of thing while a swipe should do a different type of thing. Similarities must align themselves with behaviors and user actions.

Beginning the Visual Design

Most visual design begins after wireframes are signed-off and ready to go. With the iPad project, there was no clear beginning because the detailed wireframes included real content and photography. (See? I am crazy…)

Here are some examples of how the home screen wireframes evolved:

, , , ,

This post was written by:

- who has written 6 posts on Sarah Sampsel.


Contact the author

14 Responses to “Designing The Washington Post for iPad – Detailed Wireframes”

  1. Tablazines Says:

    Great article. I wish it was just a bit more in depth (what tools being used, etc)but inspiring none the less.

  2. Tablazines Says:

    Forget my first comment. I came to this site through a Twitter link therefore I didn’t see that this was just 1 in a series.

  3. Eric Dolecki Says:

    Did you go through any usability testing at all? I mean beyond a few people in the office working on the application.

  4. Jef Says:

    Nice. What do you use to create your wireframes?

  5. Martin Staněk Says:

    I wonder why you use lorem ipsum in your wireframes. I do not use it anymore, because I find it visually misleading (article titles etc.). Do you see any value in using lorem ipsum?

  6. Brecht Says:

    A great tool for wireframing is Mockingbird (https://gomockingbird.com/mockingbird/) , unfortunately not free anymore…

  7. Christopher Neetz Says:

    Excellent article. Have you thought about giving the end user the ability to pick and choose how they would like to interact with the articles? On the unlocked iPhone there is an application called activator that allows users to program their own gestures for what ever they want to do. Just a thought.

    @neetzstudios

  8. Lewis North Says:

    Did you wireframe in portrait view as well or just landscape? It would be interesting to see how you planned for both eventualities.

  9. Flow Says:

    It’d be good to see the wireframes also for alternative layouts in portrait format. Are these are all designed for landscape viewing?

  10. Jessica Says:

    Nice work Sarah!

  11. Will Says:

    Really cool stuff here, although I like the second to last wireframe over the last one–it seems much more modern, and iPad-like.

    Just a note on the app itself though. I’ve noticed kind of two issues that come to mind after using it for a while.

    First, you’ve kind of lost the concept of an issue. It’s hard to tell what’s from this morning’s edition of the post, and what, if any, of the content has been updated. Also, there’s no way if I go to sit on the metro that I can use the app–I can’t, for example, just download the entire morning’s issue. With the Wall Street Journal, they base their application on that model.

    Second, I feel like you’ve lost a lot of WashingtonPost.com content. For example, the Chat House with Wilbon–I know its going away soon, but I would like to be able to read it in the easy to use way presented to me on the iPad, and not have to go digging on the website, which seems to be a mishmash of archaic systems and redesigned front pages.

    Overall though, its a great app. The navigation between articles (swipe over to get to the next one, scroll down to stay on the current one) is the most intuitive of all the newspaper apps I’ve seen, even ones that use the same standard. Good Job!

Trackbacks/Pingbacks

Leave a Reply