Wireframe Design & Prototype Must-Knows | Adobe XD Ideas

Wireframes use simple shapes to create visual representations of page layouts. They're used to communicate the structure of individual pages ( ... AdobeSkiptocontentLogo-fullLogo-fullProcessWorkingmethods,bestpractices,tipsandtricksInformationArchitecturePrototypingUIDesignUserResearchUserTestingWireframingPrinciplesFoundationalandemergingconceptsAppDesignDesignSystemsEmergingTechnologyHumanComputerInteractionWebDesignPerspectivesUniqueinsights,designstories,theimpactofdesignInterviewsLeadershipInsightsSocialImpactSoDASeriesLearnXDStartFreeXDTrialLogo-fullStartFreeXDTrialProcessPrinciplesPerspectivesDesignCircleBuyXDXDIdeas  /  Process  /  Wireframing  /  EverythingYouNeedtoKnowAboutWireframeDesignandPrototypesEverythingYouNeedtoKnowAboutWireframeDesignandPrototypesNickBabichNov24,2020IllustrationbyEricaFasoliWireframesandprototypesarethetwodesigndeliverablesmostoftenassociatedwithUXdesign.Alotofpeopleinthefieldofdigitaldesignusetheterms“wireframe”and“prototype”interchangeably,buttherearesignificantdifferencesbetweenthetwo:theylookdifferent,theycommunicatedifferentthings,andtheyservedifferentpurposes.So,whatexactlyisawireframeindesign?What’sthedifferencebetweenawireframeandaprototype?ThisarticlewillexplainthebasicsbehindthesetwotermsandexplorehowtheyfitintotheUXdesignprocess.WireframesAwireframe(alsoknownas“skeleton”)isastatic,low-fidelityrepresentationofthedifferentscreensandpagesthatformaproduct.Wireframesusesimpleshapestocreatevisualrepresentationsofpagelayouts.They’reusedtocommunicatethestructureofindividualpages(howthepiecesofthepageworktogetherandwherethecontentwillbe)andhowthosepagesconnect(howtheinterfacewillworkfromauserperspective).Atthecore,wireframesarestoriesaboutthefuture.Theyaresimilarinpurposetoanarchitecturalblueprint(adetailedplanofabuilding-to-be).Ifyouwanttoexplorevariouswireframestyles,checkoutthiscollectionofwireframeexamplesforwebsitesandmobileapps.Whatdoesawireframelooklike?Wireframeshaveverylimitedvisualcharacteristics,sincethemajorityofdesignelements(likeimages,videos,colors,realtext,etc.)aren’tincluded.Insteadofthesespecificdesignelements,designersuseplaceholders.Forexample,aboxwithacrossinitrepresentsanimage.Designersfollowthisapproachforapurpose—objectplaceholdersandagrayscalecolorpalettehelpteammembersfocusonthelayoutandstructureofthepage,ratherthanthevisualaspectsofthedesign.Atypicalwireframedesignstickstoaverylimitedblack&whiteorgrayscalecolorscheme.ImagecreditAdobeStock.Whatistheprimarypurposeofwireframing?Theroleofawireframeistocreateafoundationforyourfinaldesign.Designerscreatewireframesandvalidatethemtoensurethatthewireframedesigncontainsalltheessentialelements.Alimitednumberofvisualelementsenabletheteamtofocussolelyoncoredesigndecisionsbeforedivingintothedetails.Whenshouldyoucreateawireframe?Designerstypicallycreatewireframesearlyoninthedesignprocess,beforetheteamstartsworkingonthevisualdetails.Atthewireframingstage,it’smucheasiertomakebigchanges.Sincewireframesarerelativelyquickandcheaptoproduce,designerscanexperimentwithaddingorremovingobjects,movingcontentandobjectsaround,andgroupingitemstogether.ThebenefitsofwireframingWireframeshelpdesigners:Communicateideas.Apictureisworthathousandwords.Wireframescommunicatedesigndecisionstoteammates;bylookingatawireframe,theyshouldhaveagoodideaofwhatscreensanapporwebsitewillhave.Evenawebsiteormobileappwireframefullofplaceholdersstillhelpstheteamseehowthedesignisshapingup.Prepareprojectdocumentation.Wireframesalsoactasareferencepointforfunctionalspecifications.Designerscansharethewireframeswiththeentireteamsothateveryone’sonthesamepageregardingtherequirementsforthedesign.ThelimitationsofwireframingSincewireframedesignisaschematicrepresentationofthefinaldesign,wireframesaren’tgoodforusabilitytesting.Althoughtheymayhelpyougatherfeedbackduringtheinitialresearchphase(whenyouwanttoexplorewhatyourusersthinkaboutyouridea),thefactthatthey’restaticmakesitverydifficulttousethemtoassessoveralluserexperience.Testparticipantshavetorelyontheirimaginationtounderstandhowthefinaldesignwillwork.Asaresult,youreceiveverylimitedfeedbackduringwireframetesting.Wireframesalsoaren’tthebesttoolfordemonstratingaconcepttostakeholders.Similartoyourtestparticipants,stakeholdersmighthaveproblemsunderstandingwhatthefinaldesignwilllooklike.Ifyouuseawireframeduringthisstage,expectquestionslike“Whyisthisdesignsoblackandwhite?”fromyourstakeholders. Lastly,wireframeswon’thelpyouifyouneedtodescribecomplexdesignideas,likeanimatedeffects,complextransitions,orgestures.Whileapairofwireframescanshowwhereinteractionbeginsandends,itdoesn’tdescribewhathappensinbetween.Ifyouneedtodescribeanydynamiceffects,it’sbettertouseahigh-fidelityinteractiveprototype,whichwillmakethatbehaviorexplicitandremoveanyguessworkfortheviewers.MethodsofwireframingYoucancreateyourwireframedesignusingoneofthefollowingmethods:Sketching.Hand-drawnsketchesarequicktocreateandquicktoiterateon.Sketchingisespeciallygoodforbrainstormingsessionswhendesignersneedtoquicklyvisualizedifferentideas(e.g.exploreavarietyoflayoutsforacertainview).Sketchingisaquickwaytovisualizeanidea,likeanewinterfacedesign.ImagecreditNicholasSwanson.Graphicdesignsoftware.It’sfairlyeasytocreatewireframeswithsoftwarelikeAdobePhotoshoporAdobeIllustrator.ExampleofawireframecreatedinAdobeIllustrator.ImagecreditMackenzieChild.UXdesignsoftware.Themajoradvantageofusingspecialsoftwareisthatyoucanmoveseamlesslyfromwireframestoprototypeswithoutswitchingtoanothertool.WithtoolslikeAdobeXD,designerscanturntheirwireframesintolow-fidelityprototypesinamatterofminutes.WithAdobeXD,youcanmovefromwireframestoprototypesquicklyandefficiently.ImagecreditTomGreen.PracticalrecommendationsforwireframedesignHereareafewtipstoconsiderwhendesigningwireframes:Donottrytomakewireframespixel-perfect.Thegoalofwireframingistoevaluatethestructureofindividualpages,nottopolishvisualdesigndetails.Beawareofcommonwireframingissuesandfocusinsteadonspeedandsimplicity.Donotaddtoomanydetails.Wireframesarethebarebonestructureoftheproduct,soonlyaddtheessentialelements.Usecolortodrawattention.Wireframestraditionallyuseblack&whiteorgrayscale,butfeelfreetouseacontrastingcolortocreatevisualaccents.Useshortandto-the-pointannotations.Ifyouplantopresentawireframetotheteam,alwaysincludewrittenannotations.Annotationshelpcreatecontextandquicklydeliverkeyideas.Examplesofannotatedwireframes.ImagecreditChaymaeLougmani.Encouragefeedback.Sharingyourwireframesandencouragingfeedbackfromyourteammembersisasurewaytoimprovethem.Usewireframetemplates.It’seasiertodesignwireframeswhenyouhavevisualreferences.We’vecreatedaveryusefulcollectionofwireframingtemplatesthatwillhelpyougetstarted.Useawireframekit.GetstartedonyourwireframewithWiresorfreeUIkitsfromAdobeXD.PrototypesPrototyping,ontheotherhand,istheprocessofbuildinganinteractiveexperience.Aprototyperepresentsthefinalproduct,includingsimulationsoftheuserinterfaceinteractions.Prototypingisthefirstphaseinwhichdesignerscanactuallyinteractwiththeircreations.Whatdoesaprototypelooklike?Unlikewireframes,whichoftenlooksimilar,prototypescanvarysignificantly.Prototypescanbesimpleartifactsthatresemblejustbasicinteractionsallthewayuptocodedprototypesthatlookandworkalmostlikearealproduct.Therearetwomaintypesofprototyping:low-fidelityandhigh-fidelityprototyping.Alow-fidelityprototypeisaroughrepresentationofadesignconceptthathelpsdesignersvalidatethemearlyoninthedesignprocess.Low-fidelityprototypesaregenerallylimitedinfunctionandinteraction.Anexampleofalow-fidelityprototypeisaclickableprototypecreatedfromsketchesorwireframes.Designerscancreatealow-fidelityprototypebylinkingwireframes.ImagecreditTheresaChoi.Ahigh-fidelityprototypeisaninteractiveprototypethatsimulatestherealwebsiteorapp’sfunctionalityanddesigndetails.High-fidelityprototypinghelpsusersunderstandthelookandfeelofafutureproduct.Ahigh-fidelityprototyperepresentsthedesignasclosetothefinalproductaspossible.ImagecreditAdobeXD.Whatistheprimarypurposeofaprototype?Prototypesactasabridgetotheactualproduct.Thegoalofaprototypeistosimulatetheinteractionbetweentheuserandtheinterfaceandunderstandhowthefinalproductwillfunction.Thismakesitgoodfortestingwithrealusers—prototypeslettestparticipantsinteractwithadesignjustliketheywouldinteractwithafinishedproduct.Itallowsdesignerstotestboththeusabilityandfeasibilityofproductdesigns.Whenshouldyoucreateaprototype?Theactualmomentwhenacreativeteamneedsaprototypewillvarybasedontheproject.Generally,theteamneedstohaveaprototypewhentheywanttotievisualandinteractiondesigntogether,beforemovingtotheactualdevelopment.ThebenefitsofprototypingPrototypesareespeciallyvaluable:forpitchingideas.Asimpleinteractiveprototypecansellanideabetterthanatextdescriptionofthedesign.High-fidelityprototypesaregreatforstakeholdersbecausetheycanseehowthedesignwilllookandwork.It’seasiertogetbuy-infromthembecausethey’reabletotrytheproduct.asavalidationtool.Prototypesaregreatforusabilitytesting.ShowingaprototypetousersandaskingthemtogothroughregularuserflowshelpsdesignerstesttheflowsandidentifypotentialUXproblems.duringuserresearch.Prototypesaregreatforunderstandingthepreferencesofyourtargetaudience.Wheneverproductteamshaveanideaaboutanewfeature,theycancreateaprototypeandvalidateitwiththetargetaudienceearlyintheproductlifecycletoensurethatthefeatureresonateswiththem.ThelimitationsofprototypingPrototypingisanexpensiveandtime-consumingdesigndeliverable.Incomparisonwithwireframing,creatingprototypestakesmoretime,especiallyforhigh-fidelityprototypes.Also,creatingprototypesrequiressomedesignskills,whichnoteveryonecando.MethodsofprototypingWhileyoucanuseapieceofpaperoradigitaldesigntooltocreateawireframe,prototypesrequiredigitalsoftware.Herearetwoofthemostcommonmethods:Designsoftware:Modernprototypingtoolsofferalotoffeaturesthatallowyoutocreateinteractiveprototypes.Plus,theyofferanadditionalbenefit:teamcollaboration.Differentteammemberscancommentonthesamedocument,creatingagoodfeedbacklooprightfromthestart.Anexampleofahigh-fidelityinteractiveprototypecreatedinAdobeXDandmirroredonaniPhone.ImagecreditAdobeXD.Nativeprototype:Nativeprototypingmeanswritingcode.WhenyoucreateanativeprototypeofanAndroidapp,youwriteJavacode.Nativeprototypingisessentialwhenyourproductinvolvestechnologiesthatarehardtoprototypeusingappdesignsoftware,likeifyou’rebuildingamobileappthatrequiresrealGPSdata.PracticalrecommendationsforprototypingHereareafewthingstoconsiderwhendesigningprototypes:Don’tsettleonasingledesignideaforyourprototype.Manydesignersfallinlovewiththefirstideathatseemstobetherightone.However,thisisn’tthebestapproachfordesign.Why?Becauseyourideamightnotactuallybethebestone.Instead,tryasmanydifferentideasaspossibleandselectthemostprominentideaafterevaluatingthemallwithteammembersand/ortestingideaswithusers.Selecttherightfidelityforyourproject.InhisarticleFivePrevalentPitfallswhenPrototyping,JaredSpoolmentionsthatworkinginthewrongfidelitycanbeamajorpitfallduringprototyping.Thefidelityofyourdesignshouldmatchthefidelityofyourthinking,thematurityofyouridea,andtheavailableresources.Usehigh-fidelityprototypestovisualizecomplexanimatedtransitions.High-fidelityprototypesaregreatduringdesignhandoffbecausetheyallowdeveloperstoseehowtheanimationwillwork.Thishelpsthemtransferthebehaviorintocode.Practicerapidprototypinganditerativedesign.Quickiterationsofthebuild-measure-learnprocessareapopularwaytocreateproducts.Whenateampracticesthisapproach,theystartwithalow-fidelityprototypeandthenprogressivelyiterateitintohigh-fidelityversions.Feedbackfromusersplaysakeyroleinthisprocess,sincetheteamcanevaluateeverydecisionaccordingtotestingwithusers.Practicenativeprototyping.Noteverythingthatdesignerscreatecanbeeasilyturnedintocode.Butwhendesignerswritecode,theriskoftechnicalfeasibilityproblemsismuchlower.ConclusionWireframedesignandprototypingareanintegralpartofyourdesignprocess.Themostimportantthingtorememberwhencreatingthem:don’teverwireframeorprototypeaproductwithouttheuserinmind.Theusershouldalwaysbeattheheartofanydesignyoucreate.Thiswillhelpyoubuildbetterproductsthatyouruserswilllove.WireframingPrototypingWordsbyNickBabichNickBabichisUXarchitectandwriter.Nickhasspentthelast10yearsworkinginthesoftwareindustrywithaspecializedfocusonresearchanddevelopment.Hecountsadvertising,psychology,andcinemaamonghismyriadinterests.→GetXDIdeasdeliveredweeklytoyourinbox.Free.SignUpRelatedContent→WireframingCombiningWireframes&SitemapsforCreatingEffectiveUserFlows ByNickBabichLearnhowtomatchyourwireframedesignwithyoursitemapandofferagreatuserexperience.WireframingWireframeDesign101:6StepstoCreateaWireframe ByVincentBrathwaiteLearnaboutthe6easystepsfordesigningawireframe.UserResearchAComprehensiveGuidetotheUXResearchProcessinProductDesign ByAlexandraStrawnFindstep-by-stepinstructionsandresourcestotakeyourUXdesignfromconceptthroughdevelopment.DesignSystemsEmanuelaDamianiofMozillaonFirefox’sPhotonDesignSystem ByPatrickFallerLearnhowEmanuelaDamianiofMozillausesadesignsystemtocollaborateacrossborders.Let'sXDtogether.Whereteamscreatetheworld’sbestexperiencesatscale,poweredbytheleaderincreativetools.StartFreeXDTrialLogo-fullGetXDIdeasdeliveredtoyourinbox.Free.SignUpProcessPrinciplesPerspectivesDesignCircleAboutInspirationGuidesCareerTipsCopyright©2019-2021Adobe.AllRightsReserved./Privacy/Termsofuse/CookiePreferences/Donotsellmypersonalinformation