Introduction to Building Wireframes (with Keynote)

  • Published on

  • View

  • Download


INTRODUCTION TO BUILDING WIREFRAMESDavide Folletto CasaliUX Redirector AdvisorNIGHT.EUPART IWIREFRAMES@hjmediastudiosTHE IDEA OF WIREFRAME COMES FROM 3D MODELLINGA website wireframe is a visual guide that represents the skeletal framework of a websiteWikipedia:Wireframing is a low-cost, rapid iterative design technique that offers one of the best methods for gaining design insight earlyNielsen/Norman Group: ARE DIFFERENT QUALITIES OF WIREFRAMESEven if wireframes display a single interface/page they are less like photos and more like movie stillsWIREFRAMES AS JOURNEYS Ivor Beddoes@awfulshot AS STORYBOARDS FOR INTERFACES Ivor BeddoesDIFFERENT WAYS TO TELL A STORY frame by frame, drawings key frames, textual descriptions video, spoken narrativeEven if the storyboard is not visible its still the foundation of wireframesWireframes are a static representation of a dynamic non-linear flow of activityLets build a journey. Imagine Twitters registration process.Home Reg. Form ConfirmationLOGIN PROCESS The main steps of the journeyHome Reg. Form Confirmation Your PageLOGIN PROCESS How do we guide the user to the value??Home Reg. Form ConfirmationEmailYour PageLOGIN PROCESS An e-mail based approachHome Reg. Form ConfirmationEmailYour PageLOGIN PROCESS A more direct way to engage the userHome Reg. Form ConfirmationEmailYour PageLOGIN PROCESS Review journeys for the edge cases: errors, problems, etc!!LOGIN PROCESS The story is even bigger in realityHome Reg. Form ConfirmationEmailYour PageTweetThird party Third partyThe wireframe represents also the very first moment when the project team sees everything coming together.The minimal visual building block of a wireframe is the box.BoxBoxes usually contain a uniform kind of content, not the individual elements. However, its important to choose the right level of breakdown to support the discussion.BoxContentBoxBoxBoxNavigationLogoSome examplesHeader ImageNavigationStats NavigationAvatarProfileMediaTweetTweetTweet FiltersInvite FriendsFind FriendsNavigationPin PinPinPinPinN N NC CS SBoxBoxBoxBoxBoxBoxBoxBoxThis high level box view is implicit most of the time, but its incredibly useful when applied on a number of pages to ensure consistency and reusability.ButtonBoxLorem ipsum gaium sit amet isciquitur elit in ellam lacustre pulzella.TEXTBUTTONSIMAGESMORE...BoxThomas Talker:Lorem ipsum gaium sit amet isciquitur elit in ellam lacustre pulzella.ExpandThomas Talker:Lorem ipsum gaium sit amet isciquitur elit in ellam lacustre pulzella.ExpandThomas Talker:Lorem ipsum gaium sit amet isciquitur elit in ellam lacustre pulzella.ExpandThomas Talker:Lorem ipsum gaium sit amet isciquitur elit in ellam lacustre pulzella.ExpandThomas Talker:Lorem ipsum gaium sit amet isciquitur elit in ellam lacustre pulzella.ExpandThomas Talker:Lorem ipsum gaium sit amet isciquitur elit in OFTEN EACH HIGH-LEVEL BOX CONTAINS A REPEATING PATTERNTRY WORKING WITH PATTERNS AS MUCH AS POSSIBLE TO SUPPORT MEMORY AND LEARNING, MAKING THE INTERFACE TRUSTWORTHY1 / Wireframes as stories2 / From boxes to elementsPART IITHE PROCESSWireframes are made to be thrown away. They are steps in the process of design. Only the final one stays... until it gets developed.In other words: they can be delivered as documentation but they are not for most of the processTHE INTERMEDIATE STEPS ARE VALUABLE: THEY SUPPORT COMMUNICATION AND CONSENSUSAT EACH STEP YOU CAN test the journey discuss with management discuss with technical team share with other partiesNAPKINSWHITEBOARDSHIGH LEVELDETAILED HDASK YOURSELF Whats the level of detail I need to communicate effectively?PAPER SKETCHWORK IN ITERATIONSdoobservethinkdotL OOPThis works from startups to big enterprisesGot 4 weeks?WEEKLY ITERATION Helps with project activities scoping, clarifies expectations, supports continuos progress review.WEEKLY MEETING Sets formal progress steps to help the client keeping the pace while being in touch with the project progressLets see an examplePREPARE The first iteration is about understanding the problem.Lets see an exampleWORKSHOP First wireframes made collaboratively by the stakeholders in a workshop, in groups.WHITEBOARDLets see an exampleTEST WITH USERS Take the whiteboards and formalize them in individual proposals to be tested.Lets see an exampleREVIEW ALTERNATIVES In this review propose a few alternatives refining the solutions from the workshop.PAPER SKETCHLets see an exampleTEST WITH USERS Yup, again, if its possible. Try a more guerrilla approach maybe.Lets see an exampleREVIEW FIRST DRAFT Ask explicitly to involve developers if it didnt happen before the review.HIGH LEVELPROJECT PLAN 2012-11-0829 OCT 5 NOV612 NOV1426 NOV303 DEC 10 DEC10 1417 DEC2124 DEC 31 DEC47 JAN1114 JAN1821 JAN2528 JAN14 FEBSTRATEGYPREPARATIONPlanning anddata gatheringSTRATEGYPlanning workshops &researchSTRATEGYCampaign and challenges details19 NOV2311 FEB 18 FEB 25 FEB 4 MAR 11 MAR 18 MAR 25 MAR 1 APR 8 APR 15 APR 22 APR 29 APRUX DESIGNCreativity and planningworkshopsUX DESIGNHigh-level wireframes and interactionsDESIGNVISUAL DESIGNDifferent proposals for brainstormingVISUAL DESIGNConsolidation of a single choiceVISUAL DESIGNPreparation of master documentsWireframes Visual layoutsDEVELOPMENTSprint 1CONTENTPreparation of basic copywritingDEVELOPMENTSprint 2CONTENTPreparation of basic translationsDEVELOPMENTSubmission launchDEVELOPMENTSprint 3DEVELOPMENTDEVELOPMENTSprint 4DEVELOPMENTFinal QA and testingSubmission page ReadyDEVELOPMENTReleaseInternal LaunchEXECUTIONCOMMUNITYLaunch supportCOMMUNITYLaunch supportSubmission launch Voting starts Challenges startAWARENESSCOMMUNITYLaunch supportCOMMUNITYSubmission supportCOMMUNITYSubmission supportCOMMUNITYSubmission supportCOMMUNITYVoting supportCOMMUNITYVoting supportCOMMUNITYChallenge anticipationCOMMUNITYChallenge executionCOMMUNITYChallenge executionCOMMUNITYChallenge executionCOMMUNITYChallenge executionMARKETINGMoment 1MARKETINGMoment 2MARKETINGMoment 3MARKETINGMoment 5MARKETINGMoment 4MARKETINGMoment 6MARKETINGMoment 7COMMUNITYChallenge executionVoting endsMARKETINGStrategy developmentMARKETINGStrategy developmentMARKETINGStrategy developmentMARKETINGStrategy development5Closing evaluationConcept DefinitionCampaign Strategy Channel Strategy Content CalendarKPI DefinitionAudience ValidationIn this way you can build clear, large scale plans.Got 1 week?MONDAY UNPACKTUESDAY SKETCHWEDNESDAY DECIDETHURSDAY PROTOTYPEFRIDAY TESTTHE DESIGN SPRINTGot 10 minutes?6 Up Idea Generation Technique1 2 34 5 61 ITERATION = No reviewNEVER.3 / Choose level of detail4 / Iterative approachPART IIIKEYNOTE PROTOTYPING BASICSKeynote1Setup pagesChoose the size you need, desktop or mobile.2Build your journeyAdd all the screens of your journey as slides2Build your screensWelcome screenWelcome toNote TakerAdd noteAddYou have no notesCreate3Link your screensLinkFormat Add Link Cmd+K4Build your animationsMAGIC MOVESlide 1 Slide 2If the same object appears on two pages, it transitions moving and scalingCreate new note+|ADDCANCELMenuHomeWriteProfile5Test your wireframePlay6Export your videoRecordPlay Record Slideshow5 / Basics of Keynote prototyping6 / Basics of Keynote animationBruno MunariTo complicate is easy, to simplify is hard. To complicate, just add, everyone is able to complicate. Few are able to simplify.Thanks.@FollettoINTENSEMINIMALISM.COM