What Exactly Is Wireframing? A Comprehensive Guide

Wireframing is a practice most commonly used by UX designers. This process allows all stakeholders to agree on where the information will be ... UXDesignUIDesignWebDevelopmentDataAnalyticsDigitalMarketingMoreCategoriesProductManagementCareerChangeUXDesignUIDesignMoreCategoriesWebDevelopmentDataAnalyticsDigitalMarketingProductManagementCareerChangeSeeourblogcategoriesUXDesignUIDesignWebDevelopmentDataAnalyticsDigitalMarketingProductManagementCareerChangeStartyourfreeUXdesigncourseStartyourfreeUXdesigncourseIfyou’vedippedyourtoesintothefascinatingfieldofUXdesign,you’velikelyheardtheword‘wireframes’tossedaround.Wireframingisacrucialpartoftheproductdesignprocess—butwhatactuallyarewireframes,andwhyaretheyimportant?Inthisblogpost,we’lltakeyouthrougheverythingyouneedtoknowaboutwireframes.We’llstartoffbydissectingtheanatomyofawireframe—fromwhatitis,towhereitfitsintotheproductdesignprocess,towhatfeaturesareincludedwithinone.We’llthentakealookatthedifferenttypesofwireframes,whattoolsarerequiredtobuildthem,andfinishoffwithsomewireframingexamplestoshowcasetheirversatility.Ifyou’reintoyouraudiovisualexperiences,besuretocheckoutthevideobelowinwhichseniorUXdesignerDeeScaranopresentstheultimatebeginner’sguidetowireframing.Withoutfurtherado,let’stakeyoufromwireframingnovicetobonafideexpert!Here’sasummaryofwhatwe’regoingtocover:Whatisawireframe?Whendoeswireframingtakeplace?Whatisthepurposeofwireframing?Whatarethedifferenttypesofwireframes?Whatisincludedinawireframe?Websitewireframesvs.mobilewireframesWhattoolsareusedtocreatewireframes?ExamplesofwireframesConclusionReadytoliftthelidonthewonderfulworldofwireframes?Offwego!1.Whatisawireframe?Let’sstartwiththeobviousquestion:whatisawireframe?Notdissimilartoanarchitecturalblueprint,awireframeisatwo-dimensionalskeletaloutlineofawebpageorapp.Wireframesprovideaclearoverviewofthepagestructure,layout,informationarchitecture,userflow,functionality,andintendedbehaviors.Asawireframeusuallyrepresentstheinitialproductconcept,styling,color,andgraphicsarekepttoaminimum.Wireframescanbedrawnbyhandorcreateddigitally,dependingonhowmuchdetailisrequired.WireframingisapracticemostcommonlyusedbyUXdesigners.Thisprocessallowsallstakeholderstoagreeonwheretheinformationwillbeplacedbeforethedevelopersbuildtheinterfaceoutwithcode.2.Whendoeswireframingtakeplace?Thewireframingprocesstendstotakeplaceduringtheexploratoryphaseoftheproductlifecycle.Duringthisphase,thedesignersaretestingthescopeoftheproduct,collaboratingonideas,andidentifyingbusinessrequirements.Awireframeisusuallytheinitialiterationofawebpage,usedasajumping-offpointfortheproduct’sdesign.Armedwiththevaluableinsightsgatheredfromtheuserfeedback,designerscanbuildonthenext,moredetailediterationoftheproduct’sdesign—suchastheprototypeormockup.Tolearnmore,headtoourblogpostexplainingthedifferencebetweenawireframe,aprototypeandamockup.3.Whatisthepurposeofwireframing?Wireframesservethreekeypurposes:Theykeeptheconceptuser-focused,theyclarifyanddefinewebsitefeatures,andtheyarequickandcheaptocreate.Let’stakealookateachofthesepurposesinmoredetail.Wireframeskeeptheconceptuser-focusedWireframesareeffectivelyusedascommunicationdevices;theyfacilitatefeedbackfromtheusers,instigateconversationswiththestakeholders,andgenerateideasbetweenthedesigners.Conductingusertestingduringtheearlywireframingstageallowsthedesignertoharborhonestfeedback,andidentifykeypainpointsthathelptoestablishanddeveloptheproductconcept.Wireframingistheperfectwayforthedesignerstogaugehowtheuserwouldinteractwiththeinterface.ByusingdevicessuchasLoremIpsum,apseudo-Latintextthatactsasaplaceholderforfuturecontent,designerscanpromptuserswithquestionslike“whatwouldyouexpectwouldbewrittenhere?”Theseinsightshelpthedesignertounderstandwhatfeelsintuitivefortheuser,andcreateproductsthatarecomfortableandeasytouse.WireframesclarifyanddefinewebsitefeaturesWhencommunicatingyourideastoclients,theymaynothavethetechnicallexicontokeepupwithtermslike“heroimage”or“calltoaction.”Wireframingspecificfeatureswillclearlycommunicatetoyourclientshowthey’llfunctionandwhatpurposethey’llserve.Italsoenablesallstakeholderstogaugehowmuchspacewillneedtobeallocatedforeachfeature,connectthesite’sinformationarchitecturetoitsvisualdesign,andclarifythepage’sfunctionality.Seeingthefeaturesonawireframewillalsoallowyoutovisualizehowtheyallworktogether—andmayevenpromptyoutodecidetoremoveafewifyoufeelthey’renotquiteworkingwiththerestofthepage’selements.Thewireframingstageiswhenstakeholderscanbebrutal!WireframesarequickandcheaptocreateThebestpartaboutwireframes?They’reincrediblycheapandeasytocreate.Infact,ifyouhaveapenandpapertohand,youcanquicklysketchoutawireframewithoutspendingapenny.Theabundanceoftoolsavailablemeansyoucanalsobuildadigitalwireframewithinminutes(we’lltalkmoreaboutthatalittlelateron!).Often,whenaproductseemstoopolished,theuserislesslikelytobehonestabouttheirfirstimpressions.Butbyexposingtheverycoreofthepagelayout,flawsandpainpointscaneasilybeidentifiedandrectifiedwithoutanysignificantexpenditureoftimeormoney.Thelateritgetsintheproductdesignprocess,theharderitistomakechanges!4.Whatarethedifferenttypesofwireframes?Therearethreemaintypesofwireframes:low-fidelitywireframes,mid-fidelitywireframes,andhigh-fidelitywireframes.Themostsignificantdistinguishingfactorbetweenthesewireframesistheamountofdetailtheycontain.Let’slookatthesemoreclosely:Low-fidelitywireframesLow-fidelitywireframesarebasicvisualrepresentationsofthewebpageandusuallyserveasthedesign’sstartingpoint.Assuch,theytendtobefairlyrough,createdwithoutanysenseofscale,grid,orpixel-accuracy.Low-fidelitywireframesomitanydetailthatcouldpotentiallybeadistractionandincludeonlysimplisticimages,blockshapes,andmockcontent—suchasfillertextforlabelsandheadings.Lowfidelitywireframesareusefulforstartingconversations,decidingonnavigationlayout,andmappingtheuserflow.Inshort,low-fidelitywireframesareidealifyou’vegotstakeholdersorclientsintheroomandyouwanttosketchsomethingupwithapenmid-meeting.They’realsoincrediblyusefulfordesignerswhohavemultipleproductconceptsandwanttoquicklydecidewhichdirectiontogodown.Mid-fidelitywireframesThemostcommonlyusedwireframeofthethree,mid-fidelitywireframesfeaturemoreaccuraterepresentationsofthelayout.Whiletheystillavoiddistractionssuchasimagesortypography,moredetailisassignedtospecificcomponents,andfeaturesareclearlydifferentiatedfromeachother.Varyingtextweightsmightalsobeusedtoseparateheadingsandbodycontent.Thoughstillblackandwhite,designerscanusedifferentshadesofgreytocommunicatethevisualprominenceofindividualelements.Althoughtheyarestillrelevantinaproduct’searlystages,mid-fidelitywireframesareusuallycreatedusingadigitalwireframingtool,suchasSketchorBalsamiq.Source:KatherineLu’sportfolioHigh-fidelitywireframesFinally,high-fidelitywireframesboastpixel-specificlayouts.Wherealow-fidelitywireframemayincludepseudo-Latintextfillersandgreyboxesfilledinwithan‘X’toindicateanimage,high-fidelitywireframesmayincludeactualfeaturedimagesandrelevantwrittencontent.Thisaddeddetailmakeshigh-fidelitywireframesidealforexploringanddocumentingcomplexconceptssuchasmenusystemsorinteractivemaps.High-fidelitywireframesshouldbesavedforthelatterstagesoftheproduct’sdesigncycle.5.Whatisincludedinawireframe?Aswetouchedonearlier,howmanyfeaturesareincludedinawireframedependslargelyonwhetherthewireframeislow,midorhighfidelity.However,elementsthataretypicallyfoundinwireframesincludelogos,searchfields,headers,sharebuttons,andpseudo-Latin(LoremIpsum)placeholdertext.High-fidelitywireframesmayalsoincludenavigationsystems,contactinformation,andfooters.Typographyandimageryshouldnotbepartofalowormid-fidelitywireframe—butdesignersoftenplaywiththesizingofthetexttorepresenttheinformationhierarchyorindicateaheader.Wireframesaretraditionallycreatedingreyscale,sodesignersoftenplayaroundwithshading—usinglightershadesofgreytorepresentlightcolors,anddarkershadingtorepresentboldercolors.Inhigh-fidelitywireframes,designersmaythrowintheoccasionalcolor;suchasredtoindicateawarningorerrormessage,ordarkbluetorepresentanactivelink.Aswireframesaretwo-dimensional,it’simportanttobearinmindthattheydon’tdowellwithshowinginteractivefeaturesoftheinterfacelikedrop-downs,hoverstates,oraccordionsthatimplementshow-hidefunctionality.6.Websitewireframesvs.mobilewireframesWhenwethinkofwireframes,weoftencastourmindstodesktopwebsitewireframes.Butmobilewireframesrequirespecialconsiderations.Sowhatarethecoredifferencesbetweenthetwo?SizeDuetothesizedifferencesbetweenmobileappsanddesktopwebsites,layoutshavetobethoughtaboutverycarefully.Duetothescreenwidthonadesktopwebsite,forexample,yourwebsitewireframemightfeaturealayoutthatspreadsovermultiplecolumns.Onamobileapp,thenumberofcolumnsisusuallyrestrictedtooneortwocolumnsmaximum.You’llneedtodecidewhethertheyseeaninfinitescroll,orwhetheryouwanttodecreasethenumberofitemsperpageinordertodisplayothercontentbeneath.BehaviourThesecondcoredifferenceisthebehaviorofthemobileapporwebsite.Onawebsite,theuserwilluseamouseortrackpadtonavigatethepage.Theusercanalsoclickoncertainfeaturestorevealadditionalpiecesofinformation,orevenhoverovercertaininteractionstorevealmenus.Onamobileapp,however,userswillhavetotapthescreentoopenafeature.Whenwireframingformobileapps,thismeansthinkingmorecarefullyabouthowyouwillencourageyouruserstotapaspecificbuttontoreachaspecificgoal.InteractionThewaythatusersinteractwithmobileappsdiffersvastlyfromhowtheyinteractonadesktop.TheappmaypullcontentanddatafromtheInternetinasimilarfashiontoawebsite,butmanyappsalsooffertheusertheoptiontodownloadcontentforofflineuse.These“offlinemodes”specifictomobileapplicationsshouldbereflectedinyourwireframe.Tolearnmoreaboutcreatingwireframesformobileappsandwebsites,headhere!7.Whattoolsareusedtocreatewireframes?Intoday’stechnology-abundantlandscape,designershaveamyriadofadvancedwireframingtoolsandprogramsattheirfingertips.Built-inUIcomponents,suchasformelements,buttonstates,andnavigationallowdesignerstotakeadvantageofpre-madedesigndecisionsandcreatewireframesinafractionofthetime.Oneofthebest-knownwireframingtoolsonthesceneisSketch,whichusesacombinationofartboardsandvectordesignshapestoenabledesignerstoeasilycreatewireframesonapixel-basedcanvas.SketchalsohasaconvenientSymbolsfeature,meaningyou’llbeabletoreuseUIelementsoncethey’vebeencreated.Needsomethingmoreprofessionalthanapaperwireframebutaren’tstrivingforpixelperfection?OptfortheequallypopularBalsamiq,atoolwhichenablesdesignerstofocusonthelayout,intuitiveinteractiondesign,andbasicinformationarchitectureratherthantheaestheticquality.Tolearnmoreaboutwireframingtools,checkoutourtakeonthe 8bestwireframingtoolsthateveryUXdesignershouldknow.8.ExamplesofwireframesTogiveyouanideaofthevarietyofwayswireframescanbecreated(andtoprovideyouwithsomewell-neededinspirationforyourownwireframes)let’stakealookatsomewireframingexamples:MonicaGalvanshowsusthetransitionfromlow-fidelitywireframetohigh-fidelitywireframe,rightthroughtothefinalUIforherImpossibleproject.ElviraHellenpart’swireframesfortheVocabAppproject,createdaspartoftheCareerFoundryUXFundamentalsProgram.“Startingwithlow-fidelityink-on-paperwireframesandamobile-firstdesignapproach,Ibegantoiteratemywaytoahigher-fidelityprototype”saysUXalumnus AaronAkbariMortabouthisInktankproject.9.ConclusionSotherewehaveit:everythingyouneedtoknow(andthensome)aboutwireframes.Theymayseembasicenoughtobeoverlooked,butwireframeswillenableyoutogetvitaluser,client,andstakeholderapprovalwhenitcomestothelayoutandnavigationoftheproduct’skeypages.Armedwiththisapproval,youcanmoveforwardwiththeconfidencethatyou’redesigningsomethingthatyourclientsanduserswilllove.Thebonus?Wireframessaveheapsoftimeandmoneyinthelongrun!Readytostartcreatingyourownwireframes?Readourdefinitiveguideonhowtocreateyourfirstwireframe.FurtherReadingUXDesignResourcesForBeginnersWhatIsUXResearch,AndWhat’sItsPurpose?ClassicUXDesignFails—AndHowToAvoidThem8BestwireframingtoolsforUXdesignersRelatedUXDesignArticlesUXDesignCanYouTeachYourselfUXDesign?Here’sHowJune24,2022-13minutesreadUXDesignApplyingDesignThinkingtoWickedProblemsJune10,2022-14minutesreadUXDesignWhat’stheDifferenceBetweentheGoogleUXDesignCertificateandtheCareerFoundryUXDesignProgram?June24,2022-15minutesread