• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
The Life Cycle of a Wireframe
 

The Life Cycle of a Wireframe

on

  • 25,916 views

In this presentation, Nick Finck will dive deep into the process he uses to create wireframes, a key deliverable for user experience designers. He'll talk about the principles that guide his process, ...

In this presentation, Nick Finck will dive deep into the process he uses to create wireframes, a key deliverable for user experience designers. He'll talk about the principles that guide his process, how to create great wireframes (all the way down to the nitty gritty page or screen level), and how to identify and deliver solutions that meet your clients' business goals and solve their problems.

You'll walk away with a better understanding of what delivering awesome wireframes entails--from methodology, to process, to delivery--and how to do it yourself.

If you're an information architect, interaction designer, visual designer, or regular old user experience-curious creature: this one's for you.

Statistics

Views

Total Views
25,916
Views on SlideShare
17,822
Embed Views
8,094

Actions

Likes
191
Downloads
1,390
Comments
4

112 Embeds 8,094

http://www.nickfinck.com 1732
http://uxfactory.com 1695
http://www.tanek.fr 728
http://zankke.tistory.com 519
http://www.paperandpencil.info 501
http://wireframes.tumblr.com 495
http://konigi.com 413
http://imarket.tistory.com 299
http://www.uxfactory.com 209
http://www.visualremedies.com 206
http://dm203.billyblueinteractive.net 193
http://storify.com 146
http://www.conseilsmarketing.com 110
http://www.webheadneeded.com 106
http://fresh.gui.ru 68
http://www.usercentered.de 68
http://www.dymecki.pl 59
http://di2t.tumblr.com 58
http://www.slideshare.net 44
http://www.hanrss.com 42
http://blog.graustufen.de 31
http://blog.justinmind.com 31
http://karisina.egloos.com 26
http://d.tumblr.com 21
http://techniques-infographiques-multimedia.blogspot.com 20
http://csharksgames.blogspot.com 18
http://nickfinck.com 17
http://www.felgner.ch 16
http://dityarachmawan.blogspot.com 16
http://www.justinmind.com 14
http://ubware.ubcare.co.kr 11
http://uxfactory.tistory.com 9
http://anabubula.com 8
http://translate.googleusercontent.com 8
http://static.slidesharecdn.com 7
http://apprentieweb.blogspot.com 7
http://techniques-infographiques-multimedia.blogspot.fr 7
http://blog.kuehlhaus.com 7
http://feeds.feedburner.com 6
http://www.konigi.com 6
file:// 5
http://wsvdmeer.blogspot.com 5
http://safe.tumblr.com 4
http://nana.co.in 4
http://wildfire.gigya.com 4
http://letas.tsailly.net 3
http://a0.twimg.com 3
http://web.archive.org 3
http://darrens.posterous.com 3
http://www.di2t.tumblr.com 3
More...

Accessibility

Categories

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

14 of 4 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    The Life Cycle of a Wireframe The Life Cycle of a Wireframe Presentation Transcript

    • The Life Cycle of a Wireframe Nick Finck May 28, 2009 Use #pssigchi when commenting on twitter Puget Sound SIGCHI - Seattle
    • ? Who the f#@k is this dude? Puget Sound SIGCHI - Seattle
    • Nick Finck • Principle & Director of User Experience at Blue Flavor • Based in Seattle, Washington • Over 13 years of experience working in the web field • Projects: Adobe, Cisco, CitiBank, Converse, FDIC, HP, IBM, Intel, Microsoft, Oprah, PBS, Peet’s Coffee • Co-Organizer of Refresh Seattle • Former publisher of Digital Web Magazine Puget Sound SIGCHI - Seattle
    • 3 IA is a three step process Puget Sound SIGCHI - Seattle
    • Understanding the Problem Puget Sound SIGCHI - Seattle
    • Puget Sound SIGCHI - Seattle
    • Bu sin ds ess ee N Co er ns Us tra int s Technical Requirements Puget Sound SIGCHI - Seattle
    • Finding a Solution Puget Sound SIGCHI - Seattle
    • Photo by DrJoanne - http://www.flickr.com/photos/drjoanne/10026716/ Puget Sound SIGCHI - Seattle
    • Presenting the Solution Puget Sound SIGCHI - Seattle
    • ? What makes a good Wireframe? Puget Sound SIGCHI - Seattle
    • 4 Wireframes in four parts Puget Sound SIGCHI - Seattle
    • Part One: Navigation & Wayfinding Puget Sound SIGCHI - Seattle
    • Questions Puget Sound SIGCHI - Seattle
    • ? Where am I? Puget Sound SIGCHI - Seattle
    • ? Is what I am looking for here? Puget Sound SIGCHI - Seattle
    • ? Where do I want to go next? Puget Sound SIGCHI - Seattle
    • ? Where have I already been? Puget Sound SIGCHI - Seattle
    • Inputs Puget Sound SIGCHI - Seattle
    • Content Inventory Puget Sound SIGCHI - Seattle
    • Content Audit Puget Sound SIGCHI - Seattle
    • Content Strategy Puget Sound SIGCHI - Seattle
    • Sitemap About SXSW Contact SXSW Site Structure New Site Structure Market at SXSW Tools History SXSW SMS SXSW.com Gydget Sponsors Sustainability Facebook News & Register Getting Around Trade Shows Merchandise Interactive Film Music Information Opera Mini Glossary Brochures and Hotels for Utterz Austin Map Music Exhibition Forms (PDFs) SXSWeek 2008 Music Music Player Conference Mailing Lists Travel Discounts iF! Exhibition Center News & Flatstock Poster Schedule Talks Shows Parties & Play Getting Around Press Information Show Subscribe International Carver Center The Daily Chord Talks Speakers Artists Austin Map Press Releases SXSWorld Online Reg Day Stage Cafe Magazine Directory Keynote Conference FAQ Shows SXSW Live Press Kit Auditorium Center My SXSWorld Mentor Sessions Shores Stage Stories Video Parties & Play Quickies Sessions FAQ Any additional Demo Listening venues Podcasts Sessions Press Credentials CLE Photo Policy Interactive News & ScreenBurn Schedule Talks Parties & Play Web Awards Getting Around Press Information Gaming Fest Interactive Hub Talks Speakers Winners Austin Map Press Releases Opening Remarks Conference FAQ Parties & Play Finalists Press Kit Center Keynotes Video Ceremony FAQ Book Readings Film Core Podcasts Dewey Award Press Credentials Conversations News & Schedule Talks FIlms Parties & Play Global Doc Days Getting Around Press Information Speaking Opportunities Photo Policy The News Reel Talks Speakers Film Trailers Austin Map Press Releases Panel Picker Speaking Conference FAQ Films Past Winners Press Kit Opportunities Center Key Video Parties & Play FAQ Panel Picker Primary navigation Podcasts Press Credentials a Secondary navigation a Link to separate section Photo Policy a Separate sub-site a Future navigation Modified: Tue May 27 2008 Puget Sound SIGCHI - Seattle
    • Process Flow Puget Sound SIGCHI - Seattle
    • Navigation Principals Puget Sound SIGCHI - Seattle
    • Higher Priority Reading Pattern Written english is read left to right, top to bottom. The top left is the first location the reader looks. Lower Priority Puget Sound SIGCHI - Seattle
    • Fitts’s Law The time to acquire a target is a function of the distance to and size of the target. Puget Sound SIGCHI - Seattle
    • The Scent of Information The organization of information to reassure a user they are are on the right path for locating the information they are looking for. Jared Spool User Interface Engineering Puget Sound SIGCHI - Seattle
    • ! The Navigation Schema Puget Sound SIGCHI - Seattle
    • Global Navigation Navigation Schema GiantCampus.com Information Architecture Navigation Schema 888-904-2267 | Live Help | Contact | Sign In / Sign Up Search Primary Navigation Home Courses Programs Locations Our Difference Community About Home Courses Programs Locations Our Difference Community About Secondary Navigation Game Design Game Design Game Design 3D Modeling 3D Modeling 3D Modeling Digital Photography & Graphics Digital Photography & Graphics Digital Photography & Graphics Flash Animation & Web Design Flash Animation & Web Design Flash Animation & Web Design Video Production Video Production Video Production Programming & Robotics Programming & Robotics Programming & Robotics General Computing General Computing General Computing Our Approach Our Approach Our Approach Breadcrumb Navigation Home > Courses > Flash Animation & Web Design > Web Design with Dreamweaver Footer Navigation Feedback | Legal | Careers | Press Room 888-904-2267 | Live Help | Contact Puget Sound SIGCHI - Seattle
    • Part Two: Layout & Page Structure Puget Sound SIGCHI - Seattle
    • Questions Puget Sound SIGCHI - Seattle
    • ? What do I notice first? Puget Sound SIGCHI - Seattle
    • ? How is this information organized? Puget Sound SIGCHI - Seattle
    • ? What seems to be related? Puget Sound SIGCHI - Seattle
    • Inputs Puget Sound SIGCHI - Seattle
    • Personas Puget Sound SIGCHI - Seattle
    • Page Description Diagram Sample Company Name Home Page Page Description Diagrams 1 2 3 Main call to action Search About company Notes Gets users thinking about the brand A useful site search should always be An outline of what your company is all The homepage has been shifted to and specific actions they can make. available on the page to allow users an about. emphasize content that’s currently alternative method for finding your buried elsewhere in your site. The pro- Sign-up content. Privacy, Terms of Use, Etc. posed navigation structure reinforces A call to action that encourages peo- Most of the information that is cur- this goal. ple to sign up for recently added con- Link list rently listed in the footer should re- tent on the site. A list of semi-recently added link con- main there. The contact and address The home page should provide a tent. This list should contain 5-7 links information can easily be moved to clean path to the various sections of Featured article or essay with date and comment meta infor- the contact page, though. We also the site. Shows the first paragraph of an article mation for each. recommend adding in some naviga- with associated image, as well as the tional links, where possible. day it was published and the number of comments made. Latest entries A short listing of the latest articles or essays that have been posted. There should be between 5-7 shown on the home page. The featured article should not be displayed in this list. Highest Priority Lowest Priority Monday, September 24, 2007 Puget Sound SIGCHI - Seattle
    • Layout Principals Puget Sound SIGCHI - Seattle
    • Common Location of web Objects Michael L. Bernard Software Usability Research Laboratory, Wichita State University Puget Sound SIGCHI - Seattle
    • Law of Closure The mind may experience elements it does not perceive through sensation, in order to complete a regular figure (that is, to increase regularity). Puget Sound SIGCHI - Seattle
    • Law of Similarity The mind groups similar elements into collective entities or totalities. This similarity might depend on relationships of form, color, size, or brightness. Puget Sound SIGCHI - Seattle
    • Law of Proximity Spatial or temporal proximity of elements may induce the mind to perceive a collective or totality. Puget Sound SIGCHI - Seattle
    • [ ][ ][ ] Law of Symmetry Symmetrical images are perceived collectively, even in spite of distance. Puget Sound SIGCHI - Seattle
    • Law of Continuity The mind continues visual, auditory, and kinetic patterns. Puget Sound SIGCHI - Seattle
    • Law of Common Fate Elements with the same moving direction are perceived as a collective or unit. Puget Sound SIGCHI - Seattle
    • Law of Common Fate Elements with the same moving direction are perceived as a collective or unit. Puget Sound SIGCHI - Seattle
    • ! The Zone Diagram Puget Sound SIGCHI - Seattle
    • Zone Diagram Puget Sound SIGCHI - Seattle
    • Part Three: Page Detail & Content Integration Puget Sound SIGCHI - Seattle
    • Questions Puget Sound SIGCHI - Seattle
    • ? What is here? Puget Sound SIGCHI - Seattle
    • ? What can I do? Puget Sound SIGCHI - Seattle
    • Inputs Puget Sound SIGCHI - Seattle
    • Content Strategy Puget Sound SIGCHI - Seattle
    • Sitemap About SXSW Contact SXSW Site Structure New Site Structure Market at SXSW Tools History SXSW SMS SXSW.com Gydget Sponsors Sustainability Facebook News & Register Getting Around Trade Shows Merchandise Interactive Film Music Information Opera Mini Glossary Brochures and Hotels for Utterz Austin Map Music Exhibition Forms (PDFs) SXSWeek 2008 Music Music Player Conference Mailing Lists Travel Discounts iF! Exhibition Center News & Flatstock Poster Schedule Talks Shows Parties & Play Getting Around Press Information Show Subscribe International Carver Center The Daily Chord Talks Speakers Artists Austin Map Press Releases SXSWorld Online Reg Day Stage Cafe Magazine Directory Keynote Conference FAQ Shows SXSW Live Press Kit Auditorium Center My SXSWorld Mentor Sessions Shores Stage Stories Video Parties & Play Quickies Sessions FAQ Any additional Demo Listening venues Podcasts Sessions Press Credentials CLE Photo Policy Interactive News & ScreenBurn Schedule Talks Parties & Play Web Awards Getting Around Press Information Gaming Fest Interactive Hub Talks Speakers Winners Austin Map Press Releases Opening Remarks Conference FAQ Parties & Play Finalists Press Kit Center Keynotes Video Ceremony FAQ Book Readings Film Core Podcasts Dewey Award Press Credentials Conversations News & Schedule Talks FIlms Parties & Play Global Doc Days Getting Around Press Information Speaking Opportunities Photo Policy The News Reel Talks Speakers Film Trailers Austin Map Press Releases Panel Picker Speaking Conference FAQ Films Past Winners Press Kit Opportunities Center Key Video Parties & Play FAQ Panel Picker Primary navigation Podcasts Press Credentials a Secondary navigation a Link to separate section Photo Policy a Separate sub-site a Future navigation Modified: Tue May 27 2008 Puget Sound SIGCHI - Seattle
    • Global Navigation Navigation Schema GiantCampus.com Information Architecture Navigation Schema 888-904-2267 | Live Help | Contact | Sign In / Sign Up Search Primary Navigation Home Courses Programs Locations Our Difference Community About Home Courses Programs Locations Our Difference Community About Secondary Navigation Game Design Game Design Game Design 3D Modeling 3D Modeling 3D Modeling Digital Photography & Graphics Digital Photography & Graphics Digital Photography & Graphics Flash Animation & Web Design Flash Animation & Web Design Flash Animation & Web Design Video Production Video Production Video Production Programming & Robotics Programming & Robotics Programming & Robotics General Computing General Computing General Computing Our Approach Our Approach Our Approach Breadcrumb Navigation Home > Courses > Flash Animation & Web Design > Web Design with Dreamweaver Footer Navigation Feedback | Legal | Careers | Press Room 888-904-2267 | Live Help | Contact Puget Sound SIGCHI - Seattle
    • Personas Puget Sound SIGCHI - Seattle
    • Page Description Diagram Sample Company Name Home Page Page Description Diagrams 1 2 3 Main call to action Search About company Notes Gets users thinking about the brand A useful site search should always be An outline of what your company is all The homepage has been shifted to and specific actions they can make. available on the page to allow users an about. emphasize content that’s currently alternative method for finding your buried elsewhere in your site. The pro- Sign-up content. Privacy, Terms of Use, Etc. posed navigation structure reinforces A call to action that encourages peo- Most of the information that is cur- this goal. ple to sign up for recently added con- Link list rently listed in the footer should re- tent on the site. A list of semi-recently added link con- main there. The contact and address The home page should provide a tent. This list should contain 5-7 links information can easily be moved to clean path to the various sections of Featured article or essay with date and comment meta infor- the contact page, though. We also the site. Shows the first paragraph of an article mation for each. recommend adding in some naviga- with associated image, as well as the tional links, where possible. day it was published and the number of comments made. Latest entries A short listing of the latest articles or essays that have been posted. There should be between 5-7 shown on the home page. The featured article should not be displayed in this list. Highest Priority Lowest Priority Monday, September 24, 2007 Puget Sound SIGCHI - Seattle
    • Zone Diagram Puget Sound SIGCHI - Seattle
    • Information Architecture Principals Puget Sound SIGCHI - Seattle
    • Magic Number Seven Perceived channel capacity of a number of human cognitive and perceptual tasks. George A. Miller Department of Psychology, Princeton University Puget Sound SIGCHI - Seattle
    • Simon’s Law Hierarchical structures reduce complexity - the better you manage to provide users with a sense of visual hierarchy, the easier your content will be to perceive. Puget Sound SIGCHI - Seattle
    • Progressive Disclosure Progressive disclosure defers advanced or rarely used features to a secondary screen, making applications easier to learn and less error-prone. Jakob Nielsen Nielsen Norman Group Puget Sound SIGCHI - Seattle
    • The Knowledge Gap Increasing gap between higher and lower educated people Tichenor, Donohue and Olien University of Minnesota Puget Sound SIGCHI - Seattle
    • Clear Calls to Action Draw the user to the goal of the page. Encourage the next action to be taken. Puget Sound SIGCHI - Seattle
    • Use Patterns First, Innovate Last. Know the rules before you break them. Puget Sound SIGCHI - Seattle
    • ! The Wireframe Puget Sound SIGCHI - Seattle
    • Wireframe Puget Sound SIGCHI - Seattle
    • Part Four: Interaction & Dynamic Elements Puget Sound SIGCHI - Seattle
    • Questions Puget Sound SIGCHI - Seattle
    • ? What happens when I do this? Puget Sound SIGCHI - Seattle
    • ? How long will this take? Puget Sound SIGCHI - Seattle
    • ? What just happened? Puget Sound SIGCHI - Seattle
    • ? Can I undo this? Puget Sound SIGCHI - Seattle
    • Inputs Puget Sound SIGCHI - Seattle
    • Process Flow Puget Sound SIGCHI - Seattle
    • Wireframe Puget Sound SIGCHI - Seattle
    • Interaction Principals Puget Sound SIGCHI - Seattle
    • Consistency Interactions that are the same in principal should be consistent in behavior system wise. Be consistent with the user’s expectations. Puget Sound SIGCHI - Seattle
    • Latency Reduction Allow for apparent quicker response times. Use AJAX, Cache information, etc. Anticipate the user’s next action. Puget Sound SIGCHI - Seattle
    • Show State Always communicate what state the current interaction is at (active/inactive). Puget Sound SIGCHI - Seattle
    • Do No Harm Allow users to be able to undo what they have done. Auto-save for the user so information is not lost. Repopulate form fields where appropriate. Puget Sound SIGCHI - Seattle
    • ! The Storyboard Puget Sound SIGCHI - Seattle
    • Storyboard Manage Account Manage Account Manage Account Manage Account Manage Account Manage Account ! Rename account ! Rename account ! Rename account ! Rename account ! Rename account ! Rename account Home Checking Rename ! Stop check ! Stop check ! Stop check ! Stop check ! Stop check Use this form to place a stop check on a ! Order checks ! Order checks ! Order checks ! Order checks ! Stop check check that has been issued. Amount of the check will be credited back to your account Order new checks for this account? ! Order check card ! Order check card ! Order check card ! Order checks (more info) Order Checks Note: If your card was lost or stolen please ! Manage Statements ! Manage Statements ! Order check card Account #: ...4324 call 800-637-0852 to ensure deactivation. ! Order check card (more info) Paper Statements ! Download ! Manage Statements From Check #: To Check #: ! Manage Statements Reason: Damaged check card Go Paperless Select file format... ! Download Reason: Lost check ! Download Rush Delivery? Note: these changes will impact your Download Now Note you will be chaged a $45.00 fee for a savings account(s) as well. (more info) Note you will be chaged a $8.00 fee for each stop check order. (more info) rush delivery of a check card. (more info) ! Download Stop Check Charge to account: Home checking (5423) Order ! Order checks ! Order check card ! Manage Statements ! Manage Statements ! Download ! Download Puget Sound SIGCHI - Seattle
    • ! The Annotated Wireframe Puget Sound SIGCHI - Seattle
    • Annotated Wireframe Puget Sound SIGCHI - Seattle
    • Photo by Dan Buczynski http://www.flickr.com/photos/macwagen/225493960/ Puget Sound SIGCHI - Seattle
    • Relax, there is a map! Peter Morville and Jeffery Callender Puget Sound SIGCHI - Seattle
    • ...and Books! Puget Sound SIGCHI - Seattle
    • Thank you! Puget Sound SIGCHI - Seattle
    • Thank you! Remember, comment on twitter with #pssigchi Puget Sound SIGCHI - Seattle
    • ? Questions? Puget Sound SIGCHI - Seattle
    • The Life Cycle of a Wireframe Nick Finck nick@blueflavor.com Blue Flavor - http://blueflavor.com Personal - http://nickfinck.com Puget Sound SIGCHI - Seattle