Wireframes for the Wicked

Download Wireframes for the Wicked

Post on 21-Apr-2017




0 download


  • Wireframes for the WickedMichael Angeles, Nick Finck and Donna SpencerMarch 16, 2009

    Use #wickedwire when commenting on twitter

    SXSW Interactive 2009 - Austin, TX


  • Michael Angelesis an interaction designer living in Brooklyn, NY. He is Director of User Experience at Traction Software and publishes the UX design site Konigi.


    Nick Finckis the Director of User Experience at Blue Flavor, a web design company that focuses creating web experiences. He lives and plays in Seattle, WA.


    Donna Spenceris an information architect, interaction designer, writer, teacher for Maadmob (her company) in Canberra, Australia.


  • What is a Wireframe?

  • Who are they for?

  • Design team- Discuss ideas and approaches- Critique each others work

    Business people- How will it affect their day- Have you understood the

    business rules & context

    Users of documentationManagers

    - Is the overall approach a good oneDevelopers

    - Exactly how should this work and how will I implement it

  • What is the process?

  • Moving from Sketching to Wireframing

    Adaptation from Sketching the User Experience by Bill Buxton

  • Types of Wireframes

  • Reference ZonesLow FidelityHigh FidelityStoryboardsStandaloneSpecification

    Types of Wireframes

  • Reference Zones

  • What it is- Shows just major positioning of content blocks

    Use to- Discuss a big idea or concept early in a project- Show the overall structure of particular pages- Show how a family of pages work together

    Watch out for- Some people can't think abstractly

    Reference Zones

  • Reference Zones

  • High Fidelity Wireframes

  • What it is- Shows a lot of detail, as much as in the built


    Use to- Work through the detail of how an interaction

    (or part of one) will work

    - Ensure the designer and stakeholders both have the same idea about how something


    Watch out for- Readers get bogged down in detail- Leave time to absorb the detail

    High Fidelity Wireframes

  • High Fidelity Wireframes

  • High Fidelity Wireframes

  • High Fidelity Wireframes

  • Storyboards

  • What it is- A sequence of 'screens' that show the flow

    across time

    Use to- Show how the wireframes fit together- Show how a user will experience a workflow- Demonstrate a task end-to-end

    Watch out for- Show tasks before & after for a whole context- Demonstrate core tasks in one flow- Demonstrate exceptions in a separate flow


  • Storyboards

  • Storyboards

  • Storyboards

  • Standalone Wireframes

  • What it is- A wireframe that can be understood without

    you there

    Use to- Communicate any of the wireframe types we've

    discussed, but in a way that means they can

    be understood without you

    - Document for future reference and useWatch out for

    - Everything has to be included- Lots of annotations are needed- It can be hard to follow linkages between


    Standalone Wireframes

  • Standalone Wireframes

  • Standalone Wireframes

    Wireframe by Tom Watson of Blue Flavor

  • Specification Wireframes

  • What it is- A wireframe with enough detail to be built

    Use to- Development

    Watch out for- Everything has to be included

    - all states (logged in, logged out, error)- data sources and destinations- all actions- all validations

    - It must stand alone- Talk to your developers to make it usable for


    - Never show this to business people or users

    Specification Wireframes

  • Specification Wireframes

  • Specification Wireframes

  • Sketch Style Wireframes

  • Sketch Style Wireframes

    Balsamiq.com - Balsamiq Mockups

  • Sketch Style Wireframes

    Konigi.com OmniGraffle Sketch Stencils

  • Thank you!

  • Thank you!

    Come to our party tonight, well get you drunk!

  • ?Questions?