Introduction to Information Architecture and Design - SVA Workshop 06/22/13

  • 1,629 views
Uploaded on

Introduction to Information Architecture and Design - As presented by Robert Stribley, 06/22/13, SVA

Introduction to Information Architecture and Design - As presented by Robert Stribley, 06/22/13, SVA

More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,629
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
19
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • Introduction to Information Architecture & DesignSchool of Visual Arts | Winter 2010Robert StribleyMail Box Planes - Photo: Flickr.com/stribs
  • Aussie-Style Liquorice,Razorfish War Room
  • Aussie-Style Liquorice,Razorfish War Room
  • Butterfly on the New York City HighlinePhoto: Flickr.com/stribs
  • Butterflies at the American Museum of Natural History’s Butterfly Conservatory.  Photo: Flickr.com/stribs
  • Butterflies at the American Museum of Natural History’s Butterfly Conservatory.  Photo: Flickr.com/stribs
  • Navigation, interaction design, art/science, discipline/community
  • Or not.
  • Using architectural plans as a metaphor for an IA’s work
  • The 2010 Summit is in Phoenix, AZPartially adapted from: “A brief history of information architecture” by Peter MorvilleInformation Architecture: Designing information environments for purpose, edited by Alan Gilchrist and Barry Mahon
  • Photo: Flickr.com/stribs
  • User Research in Copenhagen’s Elderly Homes - http://www.localhiddenvariable.com/ciid/user-research-in-copenhagens-elderly-homes/
  • Discovery: Competitive Review – or Audit
  • We review each of these sites live during class
  • Goals and data from focus groups, stakeholder interviews, etc – including user behaviors and opinions
  • Wikipedia: Cluster analysis or clustering is the assignment of a set of observations into subsets (called clusters) so that observations in the same cluster are similar in some sense
  • As part of our analysis of the user research, we mapped the participants onto the behavioral matrix identified. The mapping revealed clusters of people with a similar observed behavior. These clusters helped us to determine key attributes for the personas.
  • Ordering lunch on a Virgin America flight - http://www.flickr.com/photos/stribs/sets/72157603319502113/ - Photo: stribs
  • http://www.flickr.com/photos/cannedtuna/
  • Nathan Shedroff is Program Director of the MBA in Design Strategy program at the California College of the Arts. His books include Experience Design 1, Making Meaning, and contributing to Richard Saul Wurman's Information Anxiety 2. Advisor for Rosenfeld Media
  • http://websort.nethttp://www.optimalworkshop.com/
  • Home page, category page, details page/product page
  • Home page, category page, details page/product page
  • Home page, category page, details page/product page
  • Home page, category page, details page/product page
  • Adapted from Atsushi HASEGAWA’s The 7 Navigation Types of Web Siteshttp://www.slideshare.net/atsushi/the-7-navigation-types-of-web-site
  • Adapted from Atsushi HASEGAWA’s The 7 Navigation Types of Web Siteshttp://www.slideshare.net/atsushi/the-7-navigation-types-of-web-site
  • Adapted from Atsushi HASEGAWA’s The 7 Navigation Types of Web Siteshttp://www.slideshare.net/atsushi/the-7-navigation-types-of-web-site
  • Head of design at Braun, the German consumer electronics manufacturer, DIETER RAMS (1932-) was one of the most influential industrial designers of the late 20th century

Transcript

  • 1. Introduction to Information Architecture & DesignSchool of Visual Arts | June 22, 2013Robert StribleyPhoto by Michael Wolf from his Life in Cities series
  • 2. IntroductionToday‘s presentation will be available onSlideShare following the workshop:www.slideshare.net/stribs
  • 3. Chocolate display, Xocolatti, SoHo, New York
  • 4. Body Gel, Sabon, SoHo, New York
  • 5. Butterfly on the New York City HighlinePattern Recognition:In cognitive psychology, the abilityto identify familiar forms within acomplex arrangement of sensorystimuli
  • 6. Butterflies at the American Museum of Natural History‘s Butterfly Conservatory.
  • 7. Butterflies at the American Museum of Natural History‘s Butterfly Conservatory.
  • 8. IntroRobert Stribley•I‘m an Associate ExperienceDirector at Razorfish•I write music and arts reviews•I photograph various things•I drink coffeeIntroductionMy clients have included:• Bank of America, PNC, Wachovia• JPMorgan, Morgan Stanley,Oppenheimer Funds, Prudential, SmithBarney, T. Rowe Price• Boston Scientific, Nasonex• Choice Hotels• Computer Associates, EMC• Ford, Lincoln• Nextel• Red Cross• Pearson, Travel Channel, Women‘sWear Daily
  • 9. IntroAbout You• What‘s your name?• What do you do for work?• What do you do for fun?• Coffee, tea or bottled water?Introduction
  • 10. IntroGoals of this workshop• Understand the basic concepts of informationarchitecture• Experience the general process and techniques usedon a design project• Review the basic deliverables an information architectdevelops within a projectIntroduction
  • 11. Agenda
  • 12. AgendaMorning• Background• Design Process• Our Project• User Research• Competitive Review• Personas• LunchAgenda
  • 13. AgendaAfternoon•Card Sorting•Site Maps•Page Types•Navigation•Sketching•Wireframes•Q&AAgenda
  • 14. Background
  • 15. Backgroundin•for•ma•tion ar•chi•tec•ture n.Background: Defining IA• The combination of organization,labeling, and navigation schemes withinan information system.• The structural design of an informationspace to facilitate task completion andintuitive access to content.• The art and science of structuring andclassifying web sites and intranets to helppeople find and manage information.• An emerging discipline and community ofpractice focused on bringing principles ofdesign and architecture to the digitallandscape.Information Architecture for the World Wide Web (1st Edition), p. 4, Rosenfeld and MorvilleNavigationInteractionArt/ScienceDiscipline/Community
  • 16. Background―Its hard to say who really is aninformation architect. In somesense, we all are.‖— Alex Wright, Author GlutBackground: Defining IA
  • 17. userscontentcontextIABackground: Defining IA
  • 18. Interface(skin)information architecture(skeleton)Background: Defining IA
  • 19. Design Processmetaphor: architectural plansFlickr.com: Cornell University LibraryBackground: Defining IA
  • 20. Background: HistoryA Brief History of IA1975• Richard Saul Wurman coined the term―information architecture‖ to describe the fieldnow more likely described as ―informationdesign‖1994• Formation of Argus Associates in Ann Arbor,WI, the first firm devoted to IA1998• First edition of Peter Morville and LouRosenfeld‘s Information Architecture for theWorld Wide Web, affectionately known as―The Polar Bear‖ book
  • 21. Partially adapted from: ―A brief history of information architecture‖ by Peter Morville and Information Architecture:Designing information environments for purpose, edited by Alan Gilchrist and Barry MahonA Brief History of IA2000• First IA Summit, Boston, MA – DefiningInformation Architecture2002• Boxes & Arrows, online journal for informationarchitects goes live• 3 new books on IA published, including JesseJames Garrett‘s The Elements of UserExperience2014• 15th Annual IA Summit held in San Diego, CA,March 25-30Background: History
  • 22. Design Processsatire on project phasesby Harold Kerzner
  • 23. Design ProcessDiscovery Definition Design DevelopmentDesign Process
  • 24. Design ProcessDiscovery Definition Design Development• Stakeholder interviews• Business requirements• Competitive & comparative audits• User research• Site inventoryDesign Process
  • 25. Design ProcessDiscovery Definition Design Development• Personas• Content Audit• Card sorts• Use Cases• Sketching• Site Map• Creative Brief• UX BriefDesign Process
  • 26. Design ProcessDiscovery Definition Design Development• Site Map• Task Flows• Sketching• Wireframes• Stakeholder Reviews• Visual Design• Prototype• Usability Testing• Functional SpecificationsDesign Process
  • 27. Design ProcessDiscovery Definition Design Development• Site Development• User AcceptanceTesting (UAT)• QualityAssurance (QA)• Usability TestingDesign Process
  • 28. BackgroundIA Deliverablessite mapfeature/functionalityinventorycomparative/competitivereviewrequirements documentpersonassketchesuse casesuser flows prototypewireframesdiscover designdefineexperience briefDeliverables
  • 29. BackgroundIA Deliverablessite mapfeature/functionalityinventorycomparative/competitivereviewrequirements documentpersonasuse casesuser flows prototypewireframesdiscover designdefineexperience briefvisual designsketchesDeliverables
  • 30. Our Project
  • 31. What to do?Our Project
  • 32. Our ProjectEvents.com wants to revamp its website tobecome the go-to online resource for peoplewanting to attend or promote events acrossthe United States.Our Project
  • 33. Discover
  • 34. User ResearchUser Research in Copenhagen‘s Elderly Homes
  • 35. User Research―Through research, we aim to learn enoughabout the business goals, the users, and theinformation ecology to develop a solidstrategy.‖– Louis Rosenfeld & Peter MorvilleDiscovery: User Research
  • 36. User ResearchMethodology• Focus Groups• Surveys• InterviewsGoals• Identify patterns and trends in user behavior,tasks, preferences, obstacles.Discovery: User Research
  • 37. User ResearchClass Exercise: Survey Questions• How do you learn about events in NYC?• What type of events are you interested in?• What‘s more important to you:– Price– Type of Event– Location– Date• How often do you attend the events?• Do you ever need to promote an event?• Do you ever invite people to an event?Discovery: User Research
  • 38. Competitive Reviewimage bybrandon schauer
  • 39. Discovery: Competitive Audit―This type of assessment helps set anindustry ‗marker‘ by looking at what thecompetition is up to, what features andfunctionalities are standard, and how othershave solved the same problems you mightbe tasked with.‖– Dorelle RabinowitzDiscovery: Competitive Review
  • 40. Competitive ReviewHeuristic Evaluation… involves evaluators examining theinterface and judging its compliancewith recognized usability principles(the ‗heuristics‘)- WikipediaDiscovery: Competitive Review
  • 41. Competitive ReviewHeuristic EvaluationTen Usability Heuristics by Jakob NielsenDiscovery: Competitive Review•Recognition rather than recall•Flexibility and efficiency of use•Aesthetic and minimalist design•Help users recognize, diagnose,and recover from errors•Help and documentation•Visibility of system status•Match between system and thereal world•User control and freedom•Consistency and standards•Error preventionSelf StudyFor a more detailed explanation of these heuristics, see Nielsen‘s explanation here:http://www.useit.com/papers/heuristic/heuristic_list.html
  • 42. Competitive ReviewMethodology• Review and analyze competitor sites according toparticular criteria• Draw key findings, which can influence and guide IAthrough the design phase• Include a scorecard for a high-level depiction ofcomparison points across all sitesAlso:• Comparative ReviewsDiscovery: Competitive Review
  • 43. Competitive ReviewExamples of Usability CriteriaNote: These examples are not intended to provide a comprehensive listing. Appropriate criteria may depend on the projectto be completed.Home Page• Are home page elements appropriately weighted and distributed?• Is information clustered in meaningful ways?Navigation• Is the navigation structure concise and consistent?• Are paths to important information intuitive and unobstructed?Content• Is content current? Are there visible indications of content freshness?• Is content properly adapted for the Web? Is tone of voice consistent throughout content? Iscontent chunked appropriately?• Are headings and titles scannable?Design• Are colors appropriate to the Web? Is white space used appropriately? Is text readable?Search• Are search results relevant and cleanly presented?Functionality• Are functionality and forms efficiently designed?Messaging• Are errors messages clear on the site? Is help readily available to users?• Are there appropriate means for user feedback?Discovery: Competitive Review
  • 44. Competitive ReviewCompetitorsDiscovery: Competitive Review
  • 45. Competitive ReviewKey Findings• Search placed prominently on each site• Clear need for and emphasis upon filtering events• Calendars provide obvious benefit, but aren‘t alwaysprominent• Profiles and community features are also common, buthandled with varying degrees of detail, success• Free events are often highlighted• Event detail pages vary, may have maps, RSVP, sharing,rating, commenting functionality• Displaying other venues and restaurants adds utility• Maps prove helpful, especially to out-of-towners• The ability to add or promote an event is not alwayspresent or prominentDiscovery: Competitive Review
  • 46. Competitive ReviewWhat else have we learned?• Who are the audiences of these sites?• What are the strengths of these sites?• What are their weaknesses?• How might another event site differentiate itself from these sites?Discovery: Competitive Review
  • 47. Define
  • 48. PersonasCreated at Personas: http://personas.media.mit.eduPersonas is a component of the Metropath(ologies) exhibit, recentlyon display at the MIT Museum by the Sociable Media Group from theMIT Media Lab . It uses sophisticated natural language processingand the Internet to create a data portrait of ones aggregated onlineidentity. In short, Personas shows you how the Internet sees you.
  • 49. Personas―Personas summarize user research findingsand bring that research to life in such a waythat everyone can make decisions based onthese personas, not based on themselves.‖– Steve MulderDefinition: Personas
  • 50. PersonasCharacteristics of Effective Personas• Varied and distinct• Detailed• Not weighed down with minutiae• Tied into business-specific goals• Backed by dataDefinition: Personas
  • 51. PersonasMethodology• Cluster AnalysisGoals• Create a narrative based on real data toillustrate user behavior, motivations, goalsDefinition: Personas
  • 52. Small BudgetBig BudgetPlannerPromoterDefinition: Personas
  • 53. Definition: PersonasSabrinaJenny DonnyJerry
  • 54. Sabrina, 27The party plannerLocation:Gramercy ParkAttitude:Organized, outgoingFinancial Perspective:Generous, bit of spendthriftOnline Habits:Avid user of social networking sites,Twitter, Facebook, etcEvents:Wine tastings, gallery openingsQuote:―I love getting bunches of friendstogether to attend all these NYCevents. There‘s so much great stuff todo in this city!‖Small BudgetBig BudgetPlannerPromoterPersonasDefinition: Personas
  • 55. Jerry, 44The out-of-townerLocation:Cincinnati, OHAttitude:Casual, yet adventurousFinancial Perspective:Moderate spenderOnline Habits:Utilitarian use of the Web toresearch trips, read about the artsand pay billsEvents:Museums, visiting landmarks, toursQuote:―I‘m visiting the Big Apple with mywife and we want to check outsome art-related events.‖Small BudgetBig BudgetPlannerPromoterDefinition: Personas
  • 56. PersonasDonny, 38The local comedianLocation:East VillageAttitude:Laidback, loosely organizedFinancial Perspective:Frugal, paycheck to paycheckOnline Habits:Spends time networking, promoting hisact online, haunts comedy sitesEvents:Comedy slams, variety showsQuote:―I land a few comedy gigs around thecity and I want to promote them better.‖ Small BudgetBig BudgetPlannedPromoterDefinition: Personas
  • 57. Jenny, 33The professional promoterLocation:WilliamsburgAttitude:Busy, disciplined, professionalFinancial Perspective:Healthy budget for promotions andadvertisingOnline Habits:Heavy use of social networking sites bothprofessionally and personally, shops onlineEvents:Small gigs, big concerts, DJ setsQuote:―I manage a few bands and DJs and Ihave to ensure they‘re listed in the right,targeted places.‖PersonasSmall BudgetBig BudgetPlannedPromoterDefinition: Personas
  • 58. Class Exercise: PersonasDefinition: PersonasIn regards to Events.com,• What tasks might each persona attempt to complete on Events.com?• What features can you imagine each persona might like on such a site?• What obstacles or pain points might they encounter?SabrinaJenny DonnyJerry
  • 59. Lunch Break
  • 60. AgendaAfternoon• Card Sorting• Site Maps• Page Types• Navigation• Sketching• Wireframes• Q&AAgenda
  • 61. Card Sorting
  • 62. Card Sorting―There are often better ways to organizedata than the traditional ones that firstoccur to us. Each organization of thesame set of data expresses differentattributes and messages. It is alsoimportant to experiment, reflect, andchoose which organization bestcommunicates our messages.‖– Nathan Shedroff, Experience StrategistDefinition: Card Sorting
  • 63. Methodology• Grouping and labeling with index cards, post it notes• Two types:– Open – Participants sort cards with no pre-established categories.Useful for new architectures– Closed – Participants sort cards into predetermined, providedgroups. Useful for fitting content into existing architectures• Online card sorts– WebSort, OptimalSort, SocraticGoals• Organize content more efficiently• Find names for groups of content based on users‘ perspectivesDefinition: Card SortingSelf Study"Card sorting: a definitive guide" by Donna Spencer and Todd Warfel, Boxes and Arrows, 2004/04/07
  • 64. Case Studies:•Wachovia Wealth Management Group•American Red Cross•Automotive ManufacturerDefinition: Card Sorting
  • 65. Class Exercise: Card SortingAs individuals:• Take 5 minutes to think of all the events aperson could attend• Write each event you come up with on a Post-It noteDefinition: Card Sorting
  • 66. Class Exercise: Card SortingNow, as a group:• Take a few minutes to organize your eventsinto categories (group & label them)• Then we‘ll share some categoriesDefinition: Card Sorting
  • 67. Card Sorting: Next StepsWith the results of a card sort we then can:• Build consensus• Refine terminology• Create a site map• Help define navigationDefinition: Card Sorting
  • 68. Design
  • 69. Site Maps
  • 70. Conceptual DesignDesign: Site Maps―A site map is a high leveldiagram showing the hierarchyof a system. Site maps reflectthe information structure, butare not necessarily indicative ofthe navigation structure.‖- Step Two Designs
  • 71. Conceptual DesignDesign: Site Maps
  • 72. Conceptual DesignDesign: Site Maps
  • 73. Page TypesThe Mercator Atlas of EuropeFrom The British Library
  • 74. Conceptual DesignHome Page Category Page Details PageDesign: Page Types
  • 75. NavigationNavigation Bridge, USS Enterpriseby Serendigity, Flickr
  • 76. GridsTypes of Navigation• Site Structure – major nav• Hierarchical – product families• Function – sitemap privacy• Direct – banner ad/shortcut• Reference – related links• Dynamic – search results• Breadcrumb – location• Step Navigation – sequencethrough forms/results• Faceted Navigation – filtersresultsDesign: NavigationAreas of Navigation• Global – universal header/footer• Local – left nav/right nav• Local content – text links, buttonsStyles of Navigation• Rollover• Dropdown• Flyout• Tabs• AccordionSelf StudyAdapted from Atsushi Hasegagwa‘s The 7 Navigation Types of Web Sites
  • 77. GridsMega DropdownsDesign: Navigation
  • 78. GridsPower FootersDesign: Navigation
  • 79. SketchingOrnithopterby Leonardo da Vinci, 1485-1487
  • 80. Design: Sketching
  • 81. SketchingDesign: Sketching
  • 82. SketchingAny guesses whatthis is a sketch of?Design: Sketching
  • 83. “twttr sketch‖ Twitter.comSketchingTwitter[This sketch] has very special significance – its hanging in the office somewhere with one other page.Whenever Im thinking about something, I really like to take out the yellow notepad and get it down.– Jack Dorsey, TwitterDesign: Sketching
  • 84. Sketching―There are techniquesand processes wherebywe can put experiencefront and center in design.My belief is that the basisfor doing so lies inextending the traditionalpractice of sketching. ‖- Bill BuxtonDesign: SketchingBill BuxtonSketching UserExperiences
  • 85. Bill BuxtonSketching UserExperiencesSketchingAttributes of a Sketch•Quick•Timely•Inexpensive•Disposable•Plentiful•Clear vocabulary•Distinct gesture•Minimal detail•Appropriate degree of refinement•Suggest & explore rather than confirm•AmbiguityDesign: Sketching
  • 86. SketchingMethodology• Draw• Limit your time• Don‘t worry about mistakes or styleGoals• Benefit from the participation of yourcolleagues• Quickly generate ideas and refine throughiterationsDesign: Sketching
  • 87. Design: SketchingClass Exercise: SketchingIn teams, sketch your ideas.Create & Promote an Event1. Take 5 or so minutes first to discuss whatfeatures belong here• Is it a single page? Multiples steps?2. Time for silent sketching3. Time for sharing your sketchesDesign: Sketching
  • 88. Design: SketchingJenny DonnyDon‘t forget to keep your personas in mind
  • 89. Sketching Tools:The following apps are all for the iPad• Adobe Ideas ($9.99)• Bamboo Paper (Free)• Muji Notebook ($4.99)• Penultimate ($0.99)• SketchBook Pro ($4.99)InfoDesign: Sketching Tools
  • 90. Wireframesphoto & sculpture bypolly verity
  • 91. Wireframes―Web site wireframes are blue printsthat define a Web page‘s content andfunctionality. They do not conveydesign – e.g. colors, graphics, orfonts.‖- fatpurpleDesign: Wireframes
  • 92. Design: SketchingDesign: Wireframes - Exampleswireframe bymatthieu mingasson
  • 93. Design: SketchingDesign: Wireframes - Examplesscreencap fromThe Right way to Wireframeby Semantic Will
  • 94. Design: SketchingDesign: Wireframes - ExamplesiPad news app wireby F. Yamada
  • 95. Design: SketchingDesign: Wireframes - Examples
  • 96. Design: SketchingDesign: Wireframes - Examples
  • 97. Wireframing/Prototype Tools:• Adobe InDesign• Axure• Omnigraffle (Mac)• Microsoft Visio• Mockingbird (online, free)Also:• Adobe Proto (coming for iPad)• Balsamiq• iPlotz• iMockups (iPad)• Omnigraffle (iPad)InfoDesign: Wireframing ToolsSelf StudySmashing Magazine: 35 Excellent Wireframing Resources
  • 98. Design: SketchingClass Exercise: Final WireframeIn your teams, create your final deliverable:You‘ll each design a home page for Events.com1) Sketch your ideas for a homepage as a team2) Then each of you will create a final ―wireframe‖3) Be sure to incorporate your team mates‘ designideas and feedbackDesign: Wireframes
  • 99. Design: SketchingSabrinaJenny DonnyJerryDon‘t forget to keep your personas in mind
  • 100. Design: SketchingWireframe & Prototyping ToolsAxureDreamweaverInDesignVisioDesign: WireframesDevelop
  • 101. Books:• Information Architecture for the World WideWeb – Louis Rosenfeld, Peter Morville• Information Architecture: Blueprints for theWeb – Christina Wodtke, Austin Govella• The Elements of User Experience – JesseJames Garrett• Designing Web Navigation: Optimizing theUser Experience – James Kalbach, AaronGustafson• Design of Everyday Things – Donald NormanLocal Events:• IA Meetup• Content Strategy MeetupWeb Sites:• Alertbox• A List Apart• Boxes & Arrows• wireframes.tumblr.comInfoAdditional ResourcesOrganizations:• Human Computer Interactions (HCI)• Interaction Designers Association (IxDA)• Usability Professionals Association (UPA)Further Studies:• School of Visual Arts• Continuing Ed classes• MFA in Interaction Design• Adaptive Path• The Information Architecture Institute• The IA Summit• Pratt – Course in Information Design• Nielsen Norman Group• Rosenfeld Media• User Interface EngineeringVideo:The Right Way to Wireframe by Russ Unger (YouTube)
  • 102. Q&A
  • 103. Slideshare address:http://www.slideshare.net/stribsMy article on how to find an IA job:http://blog.onwardsearch.com/2012/08/information-architecture-a-guerilla-guide-to-breaking-in/@stribsInfoAdditional Info
  • 104. Design: SketchingWireframe & Prototyping ToolsAxureDreamweaverInDesignVisioDesign: WireframesAddendum:• Grids• Dieter Rams: 10 Principles of Good Design• Defining Wireframes vs. Sketches
  • 105. Grids
  • 106. Grids―The true benefit of using a grid is thatas you learn how to use a grid, youstart to think systemically about thesolutions you design. You start to tryand see how various details can echoone another, how different regions ofthe canvas can be reused or used forsimilar things, how like elements can begrouped together.‖– Khoi Vinh, former design Director, NYTimes.comDesign: Grids
  • 107. GridsDesign: Grids
  • 108. GridsDesign: Grids
  • 109. GridsDesign: Grids
  • 110. GridsSelf Study: Want to know more?Learn more about design by grids:960 Grid System960.gsDesign by Gridwww.designbygrid.comHashgridwww.hashgrid.comDesign: Grids
  • 111. Good design is…Good design is innovative.Good design makes a product useful.Good design is aesthetic.Good design makes a product understandable.Good design is unobtrusive.Good design is honest.Good design is long-lasting.Good design is thorough down to the last detail.Good design is environmentally friendly.Good design is as little design as possible.© Dieter Rams, amended March 2003 and October 2009Dieter Rams: 10 principles of good design
  • 112. Design: SketchingDefining Sketches Versus WireframesTemplates PagesApply to many different pages Specific, may apply to a singlepage or screenExamples:• basic page• product pageExamples:• homepage• ecommerce or transactionalformSketches WireframesQuick More time-consumingFew details Very detailedNot typically delivered Professional deliverable