Wireframes for the Wicked

Download Wireframes for the Wicked

Post on 21-Apr-2017




0 download

Embed Size (px)


<ul><li><p>Wireframes for the WickedMichael Angeles, Nick Finck and Donna SpencerMarch 16, 2009</p><p>Use #wickedwire when commenting on twitter</p><p>SXSW Interactive 2009 - Austin, TX</p><p>http://www.bizjamseattle.com/schedule/entrepreneurial-success-by-design/http://www.bizjamseattle.com/schedule/entrepreneurial-success-by-design/</p></li><li><p>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.</p><p>@jibbajabba</p><p>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.</p><p>@nickf</p><p>Donna Spenceris an information architect, interaction designer, writer, teacher for Maadmob (her company) in Canberra, Australia.</p><p>@maadonna</p></li><li><p>What is a Wireframe?</p></li><li><p>Who are they for?</p></li><li><p>Design team- Discuss ideas and approaches- Critique each others work</p><p>Business people- How will it affect their day- Have you understood the </p><p>business rules &amp; context</p><p>Users of documentationManagers</p><p>- Is the overall approach a good oneDevelopers</p><p>- Exactly how should this work and how will I implement it</p></li><li><p>What is the process?</p></li><li><p>Moving from Sketching to Wireframing</p><p>Adaptation from Sketching the User Experience by Bill Buxton</p></li><li><p>Types of Wireframes</p></li><li><p>Reference ZonesLow FidelityHigh FidelityStoryboardsStandaloneSpecification</p><p>Types of Wireframes</p></li><li><p>Reference Zones</p></li><li><p>What it is- Shows just major positioning of content blocks</p><p>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</p><p>Watch out for- Some people can't think abstractly</p><p>Reference Zones</p></li><li><p>Reference Zones</p></li><li><p>High Fidelity Wireframes</p></li><li><p>What it is- Shows a lot of detail, as much as in the built </p><p>product</p><p>Use to- Work through the detail of how an interaction </p><p>(or part of one) will work</p><p>- Ensure the designer and stakeholders both have the same idea about how something </p><p>works</p><p>Watch out for- Readers get bogged down in detail- Leave time to absorb the detail</p><p>High Fidelity Wireframes</p></li><li><p>High Fidelity Wireframes</p></li><li><p>High Fidelity Wireframes</p></li><li><p>High Fidelity Wireframes</p></li><li><p>Storyboards</p></li><li><p>What it is- A sequence of 'screens' that show the flow </p><p>across time</p><p>Use to- Show how the wireframes fit together- Show how a user will experience a workflow- Demonstrate a task end-to-end</p><p>Watch out for- Show tasks before &amp; after for a whole context- Demonstrate core tasks in one flow- Demonstrate exceptions in a separate flow</p><p>Storyboards</p></li><li><p>Storyboards</p></li><li><p>Storyboards</p></li><li><p>Storyboards</p></li><li><p>Standalone Wireframes</p></li><li><p>What it is- A wireframe that can be understood without </p><p>you there</p><p>Use to- Communicate any of the wireframe types we've </p><p>discussed, but in a way that means they can </p><p>be understood without you</p><p>- Document for future reference and useWatch out for</p><p>- Everything has to be included- Lots of annotations are needed- It can be hard to follow linkages between </p><p>screens</p><p>Standalone Wireframes</p></li><li><p>Standalone Wireframes</p></li><li><p>Standalone Wireframes</p><p>Wireframe by Tom Watson of Blue Flavor</p></li><li><p>Specification Wireframes</p></li><li><p>What it is- A wireframe with enough detail to be built</p><p>Use to- Development</p><p>Watch out for- Everything has to be included</p><p>- all states (logged in, logged out, error)- data sources and destinations- all actions- all validations</p><p>- It must stand alone- Talk to your developers to make it usable for </p><p>them</p><p>- Never show this to business people or users</p><p>Specification Wireframes</p></li><li><p>Specification Wireframes</p></li><li><p>Specification Wireframes</p></li><li><p>Sketch Style Wireframes</p></li><li><p>Sketch Style Wireframes</p><p>Balsamiq.com - Balsamiq Mockups</p></li><li><p>Sketch Style Wireframes</p><p>Konigi.com OmniGraffle Sketch Stencils</p></li><li><p>Thank you!</p></li><li><p>Thank you!</p><p>Come to our party tonight, well get you drunk!</p></li><li><p>?Questions?</p></li></ul>