Creating Mobile App Wireframes: A Step by Step Guide

Nine steps for wireframing a mobile app, from mapping out a user flow to ensuring your content scales well across screen sizes and testing your design ... BalsamiqWireframingAcademy Articles Videos Courses UIControlGuidelines Resources Articles ›CreatingMobileAppWireframes:AStepbyStepGuide HowtoHelpPeopleAvoidandRecoverFromErrorsinYourUIDesign HowtoWireframeYourWebsiteCopy.AStep-by-StepGuide WireframingWebsiteCopyforProductPeople HowtoDesignaSignUpFlow:BalsamiqCloudCaseStudy HowtoUseWireframesforContentModeling HowtoUseWireframestoCreateaServiceBlueprint DesigningEffectiveDataTables TenPrinciplesofEffectiveWireframes UsabilityTestingWireframeswithYourUsers EvaluatingWireframeswithUsabilityInspectionMethods SaaSWebsiteDesign:LessonsFromRealUsers HowandWhentoGetFeedbackonYourDesigns WireframingUserFlowwithWireflows BestPracticesforDesigningE-commerceSites FourSimpleRulesforEffectiveWebsiteForms BridgingtheGapBetweenContentandDesignWithWireframes HowtoUseVisualHierarchyandAlignmenttoImproveUIDesign DesigningforAction:BestPracticesforEffectiveButtons WhatAreWireframes? FiveStepstoCreatingGreatWireframes HowtoStartaWireframeProject CreatingMobileAppWireframes:AStepbyStepGuide PracticalTipsforCreatingBetterWireframes CopyinganExistingUItoLearnHowItWasDesigned TipsforPresentingYourWireframes HowProductManagersBuildHealthyRelationshipswithDesigners PerfectLandingPageWireframes WireframingMobileApplications SoftSkillsforUXDesigners HowWireframesCanImproveCommunicationWithFreelanceDevelopers WireframingforResponsiveDesign Content-FirstDesign:LettheContentDeterminetheDesign WireframingforSite-BuilderApplications TheTwoPhasesofWireframing:IdeationandValidation UsingWireframeswithAgileUserStories HowtoDesignaLandingPage:BalsamiqCloudCaseStudy HowtoUseWireframeswithDesignSystems HowtoTurnUserResearchIntoWireframes WhyWireframesAreStillRelevant CreatingPolishedWireframes WireframingKeyScreenstoKickstarttheDesignProcess WhentoUseButtonsandLinks HowtoUseTextinWireframes WireframingTipsforGetting"Unstuck" WhatAreWireframeAnnotationsandWhyUseThem? ThreeTechniquesforCreatingBetterWireframes CreatingMobileAppWireframes:AStepbyStepGuide 7min.read Mobile Ninestepsforwireframingamobileapp,frommappingoutauserflowtoensuringyourcontentscaleswellacrossscreensizesandtestingyourdesigndecisions. Wireframesarethebackboneofanyproject,andmobileappdesignisnotanexception.Wireframesserveasamiddlegroundbetweenlow-fidelitysketchesandfirstinteractiveprototypes.Theactualprocessofwireframingformobilevariesdrastically. Differentdesignersapproachwireframinganditstranslationtohi-fidesignindifferentways.Whilesomecompaniesadvocateforgoingtocodestraightfromsketches,thetypicaldesignprocesscontainsthefollowingsteps:Sketch(Conceptuallevel)→Wireframe(Componentlevel)→Mock/Prototype(Styleslevel/Interactionslevel)→Code. It'simportanttorememberthatproductdesignisamulti-stepprocess,andwireframingshouldnotbethefirststepinthisprocess.Beforecreatingwireframes,it’sessentialtoinvestenoughtimeinuserresearch.Qualitativeandquantitativeresearchdatawillactasareferenceduringwireframing. Forthisguide,IwillcreatewireframesofanativeiOSmobileappforfooddelivery. Stepsforwireframingamobileapp Startbymappingoutatargetuserflow Sketchoutthecorepartoftheuserflow StartwireframingbysettingaMobileFrame Determinelayoutusingboxes Usedesignpatterns Bringinactualcopy Ensureyourcontentscaleswell Connectthepagestogethertocreateaflow Testyourdesigndecisions BeforecreatingwireframesMapoutatargetuserflowBeforestartingwireframing,youneedtohaveaclearideaofhowmanyscreensyou’llneedtodesignandhowuserswillinteractwiththem.It’smucheasiertogetthisunderstandingwhenyouhaveatangibleuserflow. Auserflowisaseriesofstepsausertakestoachieveaspecificgoal.Theusergoalisacornerstoneelementofuserflow.Toachieveaparticulargoal,ausermighttryafewdifferentpaths;that’swhyuserflowsmaynotbelinear. Userflowswillhelpyouunderstandwhatwireframesyou’llneedtocreateandhowtheyshouldbeconnected. It’spossibletovisualizetheflowusingbasicobjectssuchasboxesandarrows.Userflowscanbecreatedeitheronpaperorinadigitaltool.BelowisasampleofauserflowforfooddeliveryappcreatedusingBalsamiq: Userflowofafoodorderingprocess SketchoutthecorepartoftheuserflowThenextstepafterdefiningtheuserflowisvisualizingit.Itmightbetemptingtousedigitalprototypingtoolforthat,butit’sbettertoresistthistemptation.Thegoalatthisstepistoletyourcreativityshineandexplorevariousdesigndirections.Inmanycasessketchingonpaperorusingadigitalsketchingtoolworksbetterforthat. Sketchesallowyoutocreatequickconceptsthatyoucansharewithotherpeople,getfeedback,anditerateuponit.Whensketchingalwaystrytothinkfromtheuserperspective—thinkaboutthegoalauserwantstoaccomplish.Thegoalofapersonwhousesafooddeliveryappistogettastyfoodassoonaspossible.Foreveryscreenyoudesign,ask: Whatisthepurposeofthispage? Howthispagehelpsauser/businessachieveitsgoal(s)? BelowisasketchofahomescreencreatedinBalsamiq.Noticethateveryimportantsectiononthispageisrepresentedasarectangle. Sketchingisagreatwaytofleshoutideas WireframingThesketchesyoucreatewillformafoundationforyourwireframes.Whenitcomestowireframing,strivetocreatemid-fidelitywireframes.Mid-fidelitywireframesareveryusefulduringdiscussionswiththeotherdesignersanddevelopers. SetamobileframeWhileit’spossibletouseasimplerectangleasaframeforyourmobiledesign,it’smuchbettertoselecttheframethathasdimensionsofanactualdeviceyoudesignfor.First,theframewillactasanaturalconstraint—itwillpreventyoufromputtingtoomanyelementsonthescreen.Second,aframewillcreateanillusionofanactualdesign. Usually,youhavearangeofdevicesyouneedtodesignfor.It’srecommendedtostartwiththedevicewithamiddlescreensize.Forinstance,ifyoudevelopanappforiOSin2019,youcanuseaniPhoneXSframe. FramesformobileiOSdevicesinBalsamiq DeterminelayoutwithboxesIntheearlystagesofwireframe,yourgoalistocreateaclearvisualhierarchy—setlayoutandstructure.Atthisstage,youdon’tfocusonthecontentitself,youneedtothinkabouthowit'spresented.Planthelayoutaccordingtohowyouwantyourusertoprocesstheinformationandstartbydrawingboxesonthecanvas. Putastrongfocusontheorderofinformationyouwanttopresenttoyourusers.Notethatpeoplescanwebpagesandphonescreensfromtoptobottom,fromlefttoright(F-shapedpatternworksbothfordesktopandmobilescreens). Belowisanexampleofawireframeforourapp’shomescreen.Noticehowwe’vedefinedthehierarchyofelementsusingthesizeofobjects. Creatingavisualhierarchyusingbasicshapes UsedesignpatternsFamiliarityisoneofthemostimportantpropertiesofgoodUXdesign.WhenpeopleseefamiliarUIelementsinanewproduct,theycanrelyontheirpreviousexperiencewheninteractingwiththisproduct.BothAndroidandiOShavenativedesignpatternsthatsimplifythetaskofcreatingafamiliarexperiencefordesigners.Designpatternsactasreusablecontentblocks—it’spossibletousethemtosolvecommonproblems(suchasglobalnavigation). AndroiddesignpatternsinBalsamiq Bottomtabbar,sidedrawerandFloatingActionButton(FAB)arethemostfrequentlyusedpatternsfortop-levelmobilenavigation.Ifyouwanttodesignclearandsimplenavigationpaths,useoneofthesepatternsinyourapp. Bottomtabbarnavigation BringinactualcopyAfteryouaresatisfiedwithyourvisualhierarchy,startreplacingplaceholdersanddummytextwithrealcontent(actualcopyortheonethatisrelevanttotheuser).Thereisanimportantreasonwhyweshouldavoiddummytextatthisstage—LoremIpsumdoesn’tcommunicatehowthepagesupportsusersinreachingtheirgoals.Also,alotofvisualelementswecreatearebasedonthecontentwehaveinourproducts.Asyoustartaddingactualcontent,youwillrealizethatsomeUIelements(orevenUIsections)arenotnecessaryforyourproduct. Sometimes,asyoufillyourwireframeswithrealdetail,youmaynoticethelayoutyouhaveisnotworkingwell.Inthiscase,it’simportanttoiterateandfindabetterwayofrepresentingtheinformationyouaretryingtocommunicate. Afteryoufillthepagewithactualcopy,testwhetherthepageflowsfortheuser.Somecontentonyourpagecouldbeoutoforder.Thisistheperfectmomenttoreorganizethecontentonthepageandimprovethecomposition. Belowisanexampleofourwireframeforourhomescreenthathasrealdata.DifferentfontsizesareusedtoprioritizesomeUIblocks(suchasfoodcategories): Byaddingactualcontentinyourwireframes,youwillgetanunderstandingofwhethertheinformationisbeingwell-structuredornot. EnsureyourcontentscaleswellIfyourdesignlooksgreatonamedium-sizephonescreenlikeiPhoneXS,itdoesn’tmeanthattheiPhone5andiPhoneXSMaxuserswillhavethesamegreatexperience.Whileit’sabsolutelyfinetostartwithamiddlesizescreenwhenwireframing,it’salsoessentialtocheckhowcontentlooksondifferentscreensizes(bothsmallerandlargerscreens)andadjustitifrequired. ThehomescreendesignoniPhoneXSandiPhone5 ConnectthepagestogethertocreateaflowWhileit’spossibletoshipyourdesignasacollectionofindividualscreens,it’sbettertocreateaflowoutofthem.UXflowsmakeiteasyfortheteamtounderstandthedetailsofinteractionscenarios—theycommunicatehowpeoplearesupposedtointeractwithaproduct. UXflowswillalsomakeyouthinkabouttheappfunctionalityasawhole.Forexample,aftervisualizingtheUXflow,youmightnoticethatyouneedtointroduceanextrastatebetweenthehomescreenandapagewithsearchresults(becausethebackendofyoursystemwilltakeafewsecondstoreturntheresults). It’salsoagoodideatogiveeachscreenareferencenumber.Referencenumberswillmakeyourlifemucheasierwhendiscussingtheprojectwithotherteammembersorstakeholders. Creatingasimpleflow TestyourdesigndecisionsTestingisthefinal(andoneofthemostimportant)stepsinwireframing.Testingimpliesuserinteractionsthat'swhythistermisoftenusedinthecontextofprototypes.Butit’spossibletoconductsimpletestingforaflowcreatedfromwireframes.UsingBalsamiq,it’spossibletocreatesimpleclickableprototypesbylinkingwireframestogether.Thegoalofsuchtestingistoseewhetherthescreensworktogether. ConclusionTheultimategoalofwireframingistoidentifytheoutlineofthecontentandcreateasolidfoundationforfuturestepsofthedesignprocess.Well-designedwireframesmakethevisualandinteractiondesignmucheasier. Aswithanydesignactivities,spendenoughtimeexperimentingwithdifferenttoolsandprocessesandyou’llfindyourownstyleforwireframing.Practicemakesperfect. [email protected]. RelatedArticles WireframingMobileApplications Wecoverthebasicsofmobilewireframing:designpatternsthatareuniquetophones,commonnativemobileinteractions,andtipsfordesigningyourapp. ByBillyCarlson Mobile UIDesignBasics 7min.read WireframingforResponsiveDesign Learnhowtocreatearesponsivedesignwireframesystemandmoveontodetailedwireframesusing2differenttechniques.Addedbonus:arealworldexample. ByMikeAngeles Tips&Tricks Mobile 6min.read OtherTopicsYouMightBeInterestedIn IntrotoWireframing UIDesignBasics ForProductManagers ForDevelopers MobileDesign Process Tips&Tricks GettheInsideScoop! Wanttogetexclusiveearlyupdatesonour Products,WireframingAcademy,andourCompany? SubscribetoourmonthlynewsletterandbepartofourInnerCircle! *IhavereadandagreetoBalsamiq’sPrivacy Policy. Seewhatpeoplethinkofourpastissues! "Ofallthee-mailnewslettersIget,@balsamiqistheoneIalwaysread,they're brilliant!"- Dazz Knowles "It'salwaysabigpleasurereceivingsuchaninspiringnewsletter.LovetheBalsamiqculture!"- M.Pesente "Anothergreatnewsletterfrom@balsamiq!!😁"- Jérémie André LookingformorewaystogetclosertoBalsamiq?JoinourResearchprogramorSlackcommunity!