• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Wireframes for the Wicked
 

Wireframes for the Wicked

on

  • 76,180 views

Wireframes beyond the basics, not for the weak at heart. In this panel, three experienced designers will share their tried and true tips for making wireframes really work. We'll talk about how to ...

Wireframes beyond the basics, not for the weak at heart. In this panel, three experienced designers will share their tried and true tips for making wireframes really work. We'll talk about how to sketch a wireframe on the fly to demonstrate an idea and how to create a standalone wireframe deliverable; when to show a concept and when to describe nitty-gritty detail; how to make a narrative wireframe and how to make a specification wireframe. And best of all, we'll show you plenty of examples.

Statistics

Views

Total Views
76,180
Views on SlideShare
54,327
Embed Views
21,853

Actions

Likes
317
Downloads
2,160
Comments
14

151 Embeds 21,853

http://eng.designerbreak.com 5558
http://www.45royale.com 5519
http://www.superfiction.net 2549
http://www.nickfinck.com 1873
http://la-gestion-de-projet.colas-fournier.com 1150
http://wireframes.tumblr.com 923
http://designerbreak.com 636
http://alisanatvur.com 494
http://konigi.com 439
http://www.rizwanjavaid.com 268
http://uwwebfoundations.wordpress.com 258
http://wireframes-usability.com 238
http://paperarrow.com 111
http://www.slideshare.net 96
http://esouillat.wordpress.com 96
http://incsub.org 90
http://superfiction.net 79
http://icm501fall2011.tumblr.com 73
http://blog.pidoco.com 72
http://ramirezdaniel11.blogspot.com 71
http://501dc-sp12.quicm.net 70
http://www.usercentered.de 57
http://thehotstrudel.blogspot.com 57
http://www.themechanism.com 53
http://com585.wordpress.com 51
http://www.techgig.com 43
http://www.stevemathew.com 42
http://bullishchina.posterous.com 42
http://501dc-fa11.quicm.net 38
http://elclerigo.com 37
http://nickfinck.com 36
http://www.derrickfulkerson.com 34
http://paper.li 34
http://sanjaykumarux.blogspot.com 33
http://a.parsons.edu 33
http://blog.hotgloo.com 32
http://translate.googleusercontent.com 29
http://www.pixelboy.fr 27
http://www.sortega.com 25
http://blog.hot-gloo.com 25
http://mattbalara.com 25
http://501dc.quicm.net 22
http://www.designrific.com 21
http://apprentieweb.blogspot.com 20
http://localhost 19
http://quicm501.tumblr.com 19
http://www.edmodo.com 16
http://themechanism.com 13
http://www.more-onion.at 13
http://muff.tumblr.com 13
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

110 of 14 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Nice approach to the whole subject. I like it.
    Are you sure you want to
    Your message goes here
    Processing…
  • Is the backlog of Q&A that couldn't be covered posted somewhere? Thanks
    Are you sure you want to
    Your message goes here
    Processing…
  • Thanks for sharing such an amazing explanation through nicely built presentation. I have two websites: http://www.stage2pilotage.com/ and http://www.offres-internet-haut-debit.com/ that I wish to embed this slide into them. I hope you don’t mind. Thanks.
    Are you sure you want to
    Your message goes here
    Processing…
  • Nice de-mystification for users and sponsors: helps us ask good questions and avoid pitfalls!
    Are you sure you want to
    Your message goes here
    Processing…
  • Audio has now been added to the Wireframes for the Wicked. I did my best to map it to the slides. Enjoy and please share! :D
    Are you sure you want to
    Your message goes here
    Processing…

110 of 14 previous next

Post Comment
Edit your comment

    Wireframes for the Wicked Wireframes for the Wicked Presentation Transcript

    • Wireframes for the Wicked Michael Angeles, Nick Finck and Donna Spencer March 16, 2009 Use #wickedwire when commenting on twitter SXSW Interactive 2009 - Austin, TX
    • Michael Angeles Nick Finck Donna Spencer is an interaction designer is the Director of User is an information architect, living in Brooklyn, NY. He is Experience at Blue Flavor, a interaction designer, writer, Director of User Experience web design company that teacher for Maadmob (her at Traction Software and focuses creating web company) in Canberra, publishes the UX design site experiences. He lives and Australia. Konigi. plays in Seattle, WA. @maadonna @jibbajabba @nickf
    • What is a Wireframe?
    • Who are they for?
    • Users of documentation • Design team • Managers - Discuss ideas and approaches - Is the overall approach a good one - Critique each others work • Developers • Business people - Exactly how should this work and - How will it affect their day how will I implement it - Have you understood the business rules & context
    • What is the process?
    • Moving from Sketching to Wireframing Adaptation from Sketching the User Experience by Bill Buxton
    • Types of Wireframes
    • Types of Wireframes • Reference Zones • Low Fidelity • High Fidelity • Storyboards • Standalone • Specification
    • Reference Zones
    • 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
    • High Fidelity Wireframes
    • 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
    • Storyboards
    • 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
    • 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 use • Watch 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 Wireframe by Tom Watson of Blue Flavor
    • Specification Wireframes
    • 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
    • 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, we’ll get you drunk!
    • ? Questions?