Wireframes for the Wicked

Download Wireframes for the Wicked

Post on 21-Apr-2017

97.400 views

Category:

Technology

0 download

TRANSCRIPT

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

    Use #wickedwire when commenting on twitter

    SXSW Interactive 2009 - Austin, TX

    http://www.bizjamseattle.com/schedule/entrepreneurial-success-by-design/http://www.bizjamseattle.com/schedule/entrepreneurial-success-by-design/

  • 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.

    @jibbajabba

    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.

    @nickf

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

    @maadonna

  • 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

    product

    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

    works

    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

  • 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

    screens

    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

    them

    - 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?