How to Wireframe an App: Guide - Stormotion

An App wireframe is a two-dimensional illustration of a screen's interface, which shows how people will use the product. The need to create an app wireframe ... ServicesServicesDigitalProductDevelopmentITStaffAugmentationWebDevelopmentMobileAppDevelopmentFrameworksReactNativeAppDevelopmentReactWebDevelopmentPlatforms&TechnologiesAndroidAppDevelopmentiOSAppDevelopmentIoT&BLEHealthProvidersAPIIntegrationExpertiseKey-ExpertiseFitnessYogaHealthTechandMedTechMentalHealthIndustriesExecutiveCoaching&PersonalDevelopmenteLearningMeditationMembership&LoyaltyDigitalTransformationOn-Demand&DeliveryVideo&AudioStreamingTravelTechFinTechPortfolioCompanyAboutUsCareersBlogLibraryContactUsContents1.🤔WHATAREMOBILEAPPWIREFRAMES?SeemoreBLOGShare:PRODUCTSTRATEGYHowtoWireframeanApp:GuideRomanBordCo-Founder@StormotionContents1🤔WhatAreMobileAppWireframes?2🗂SketchvsWireframevsMockupvsPrototype:WhatistheDifferenceandWhenDoYouNeedThem?3👍WhyIsItImportanttoCreateaWireframeForanApp?4📋Guide:HowDoWeCreateanAppWireframeatStormotion?5🔎WireframeExamples6💡TakeawaysWireframingisoneoftheearliestandmostessentialactivitiesinyourProductDevelopmentLifecycle.Itsaimistoprovideallstakeholderswithaclearvisionofhowyourwebsiteormobileapplicationwillbeused-nomatterwhetheryou’reaStartupordevelopaProductforyourexistingbusiness. Beforeyouactuallymakeawireframeforanapp,let’slearnwhatitexactlymeansandhowit’sdifferentfromothersimilarconcepts-likeSketch,Mockup,andPrototype.Let’sgetitstarted! 🤔WhatAreMobileAppWireframes? Theideaoftheappwireframingprocessoriginallycamefromwebdesign.IfyoucheckitonWikipedia,you’llfindthefollowingdefinition: Awebsitewireframe,alsoknownasapageschematicorscreenblueprint,isavisualguidethatrepresentstheskeletalframeworkofawebsite. Ingeneral,thewholeideaisthesameformobileapplications: AnAppwireframeisatwo-dimensionalillustrationofascreen’sinterface,whichshowshowpeoplewillusetheproduct. Theneedtocreateanappwireframecomesoutduringtheearlieststageswhenyouarealreadythinkingovertheideabutthedevelopmentitselfhasn’tstartedyet. Wireframeexample(imagebyLeandroMoreno) Manybelievethatmobileappwireframesareusedtodemonstratehowtheapplicationwilllooklike.Whileit’strueinsomeway,themainaimistoshowhowyourproductwillwork. Thewireframeforamobileappincludesaminimumamountofinformationneededtosolvethefollowingtasks: Toshowhowexactlytheapplicationwillhelpyouraudience. ToillustrateeachstepoftheUser’sJourneywithinyourapptopinpointpossiblepitfallsbeforedevelopmentstarts. Toallocateallmainobjects,pageelements,content&navigationareasonscreens. Togetallofyourteammembersandstakeholdersonthesamepageofwhatyou’rebuilding. Therefore,there’squitealimitednumberofelementsthataresketchedonmobileappwireframes: ✅AppWireframeIncludes: ❌AppWireframeDoesn'tInclude: Pageelements Designelements Objectcategories Colors Conversionandnavigationareas Fonts Contentprioritization Stylizedgraphicsandimages Possibleactions Logos ThinkofaMobileAppWireframeasofahouseblueprint:itshowshowrooms,doors,andwindowsareplacedaswellassomein-houseinfrastructure(likeplumbingandelectricity)butdon’tshowfurnitureandflowerpotsonwindowsills. 🗂SketchvsWireframevsMockupvsPrototype:WhatistheDifferenceandWhenDoYouNeedThem? Atthesametime,thereareafewrelatedconceptsthatmayalsocomeinhandyduringtheearlystages.I’mtalkingaboutsketches,mockups,andprototypes. Inanutshell,allthesetermsdescribedifferentstagesofweb/mobileblueprinting: Sketch➡️Wireframe➡️Mockup➡️Prototype Thekeyideaofthisscaleissimpleasthat:theclosertheconcepttotherightside,themoredetailedanddefiniteresultyoumayexpect. ASketchisthesimplestformofprojectvisualization.It’sjustahanddrawingofyourapp/websiteinterfacethatwasbornasaresultofsuddeninspirationorbrainstormingwithyourteam. WhenmayyouneedaSketch?Themosttypicalsituationiswhenyoucaughttheideaandneedtorapidlydrawitsoyouwouldn’tforgetitlater. TheSketch(imagebyYuriyZavodnyy) MobileappWireframeissomethingmoreserious.It’saresultofdeepthinkingprocesswhichendsupwithquiteanaccurateillustrationofyourdigitalproductstructureandfunctionality.We’vealreadyrevieweditscorequalitiessolet’snotspendtoomuchofourtimehere. Abitlateryoumayneedthefullestandmostaccurateperspectiveofyourproduct,includingUIdetails.It’ssomethingcalledMockup.Toputitshortandsimple,thisisawireframewhichincludesallpreviouslyavoideddesignfeatures:logos,UIelements,colors,fontsetc. However,whilewireframesareusuallypresentedasamindmapandincludeallpossiblescreensintheappaswellasconnectionsbetweenthem(sinceyourmainaimistoshowthestructureandfunctionality),mockupsareusuallycreatedfor1-2screenswithcorefeatures. Mockupsareneededtogetaclose-to-finalvisionofyourmobileproduct,testvisualdetailsandfacilitatedesignimplementationinthefuture.Ofcourse,theycanbealsopresentedtoinvestorsduringpitching. Mockupsusuallyhavecolors,logos,customfontsandotherdesignelements(imagebyNasirUddin) Whatiscommonbetweensketches,wireframes,andmockups?TheseallarestaticillustrationsthatmoreorlessshowyouthestructureandfunctionalityofyourProductbutdon’tletyouinteractwithit.Wanttogetclosetothereal-lifeexperience?That’swhenprototypescomeintothegame. APrototypeisaclickableblueprintofyourproductthatprovidesyouwithanideaandperspectiveofhowyourapporwebsitemayfeeltousers.Asaruleofthumb,itincludesclickablebuttonsandallowsyoutomovefromscreentoscreenjustlikeyourfutureuserswilldo.Bytheway,youcanfindanexampleoftheappprototypeinourPocketPromoterCaseStudy. ReadAlsoPocketPromoter:CaseStudyYet,sinceourarticleisdedicatedtowireframes,we’llfocusonitsfeatures: Ontheonehand,theyprovideyouwithalltheinformationyouneedtodiscoverpossiblepitfallsearly,ensuregoodCustomerExperienceandcanbepresentedtootherstakeholdersforgatheringtheirfeedback. Ontheotherhand,theydon’tincludeanythingthatisusuallynotessential-likecolorsandlogos-whichallowscatchingonlythemostimportantfunctionality,leavingadditionaldetailsaside. Whataretheotherreasonstocreateanappwireframe?Let’sreviewthemrightnow! 👍WhyIsItImportanttoCreateaWireframeForanApp? Reason#1:ToseehowexactlyyourProductcanhelpcustomers ThemostimportantreasontomakeawireframeforanappisthatitprovidesyouwithaclearvisionofhowyourcustomerswilluseyourProduct.Withoutknowinghowyou’regoingtosolvetheirpain-pointsyoucanhardlyachieveanysuccess. Wireframinghelpstoanswerthecorequestion:“CanmyProductsolvetheproblemsofmycustomers?”. Reason#2:Tomakeashowableblueprintofyourapplication Havinganappideaisgood.It’sevenbetterifit’sagoodidea.However,thereprobablywasn’tanyproductthatmadeitswayfromthesmallideatoasuccessfulmarketbreak-throughwithoutanychanges.Andthat’swhenitwillbequiteusefultocreateanappwireframe. Actually,theappwireframingprocessprovidesyouwithananswertothecorequestion:howexactlydoesmyproductsolvetheproblemofmycustomers?Withoutansweringthisquestionyoucan’tknowwhetheryourproductisreallyneededandlikelytobeusedbyyourtargetaudience. Wireframesshowthatyouhavemadesomestepsfromtheideaitselftoactions(imagebyKishore) Thus,you’reabletosharethisvisionwithotherstakeholders-forexample,showwireframestoinvestorsduringyourpitchandreceivefundingorgetapprovalfromadecision-makingpersonwithinyourorganization. GarryTan,theco-founderofInitializedCapitalandadesignexpert,putsitasfollows: *Onceyouhavethewireframeyoucanstartdoingusabilitytesting.Youcanprintitoutandsitdownwithpeoplewhohaveneverseenitbeforeandjustwalkthemthroughit.Orevenbetter:justaskopen-endedquestions.Like“whatarewelookingat?”,“whatareyougoingtoclicknext?”. Beforeyouevenwritealineofcodeyoucandoalottotestwhetherthisthingisgoingtowork.Andit’swaycheapertodoitatthisstagethanfixthisasabugincodelater.* Reason#3:FastiterationstoaperfectProductandavoidingpitfallsinthefuture Whenyoucreateanappwireframe,yourmaingoalistoensurethepain-pointofyourusersissolvedandalsomapoutagreatUXforthem.However,youmaynotreachtheperfectresultfromthefirstshot. Whatisgreatabouttheappwireframingprocessisthatitdoesn’ttakemuchtime.Therefore,wireframesareperfectforfastiterations.Thewholecyclelooksasfollows: Youoryourteammakeawireframeforanapporit’spart. Youshowittootherstakeholders-e.g.adecision-makingpersonwithinyourorganization,investorsoracustomerfocusgroup-togathertheirfeedbackanddiscoverpossiblepitfallsearly. Updateyourwireframesaccordingtothecollectedfeedback. Repeatthissequenceasfastaspossibleandasmanytimesasneededtoreachyourintendedgoal. Ifyouneedtoinvolveinvestorsinyourproject,youwillhaveanicevisualmaterialyoucanuseforpresentationsandpitchesrightaway. It’smucheasiertoexecuteiterationsatthisstagesthanfacethisneedlaterwhenthedevelopmentwillbealreadyinprogress. Reason#4:WireframingHelpstoAvoidMistakes AnothergoodreasontomakeawireframeforaniOSapp(orAndroid,itdoesn’tactuallymatter)isthatithelpstolayoutthefunctionalityofeachscreen. Whatfeaturesshouldgofirst?IsthereenoughspaceonthescreenNtoplaceeverythingyouwanttoseethere?Wouldn’titlooktootacky?Withamobileappwireframe,youcaneasilyanswertheseandmanyothersimilarquestions. Wireframinghelpstospotmistakesearly(imagebyXaviNadal) Theyalsoallowyoutoplayabitwithcontentprioritization.Bydesigningthehierarchyofelementsoneachscreenyou’reabletocheckwhetheryourcontentguidesusersintherightdirectionor,ontheotherhand,distractsthemfrommovingalongthebuyer’sjourney. Onceyouhavefinishedthewireframes,youcanshowthemtoyourpotentialusers,gatherfeedbackandimproveyourwireframes.Also,youcaniterateinsuchaway,tillyoustartreceivingpositivefeedback-thiswillhelpyoutoavoidexpensivemistakes. Reason#5:ItSavesYourMoney&TimeduringDevelopment Aswe’vefigureditoutearlier,wireframingallowsyoutopinpointmistakesandfixthembeforethey’reconvertedintocode.Inthelong-termrun,youcangetevenmorebenefits. Forexample,itsavesalotoftimeduringthefollowingdevelopmentstages.Herearejustafewexamples: Yourdevelopmentteamwillhaveaclearvisionandunderstandingwhatthey’rebuildingandhowyourproductworksandhelpsthetargetaudience. Thecontentcreationprocesswillbecomeclearersinceit’smorestructuredandorganized.Itleavesnoroomforquestionslikewhatandwhereshouldbeplaced. It’llbeeasiertoestimateyourdesigns.Ratherthentrytoexplainyourappinsimpleterms,youcanjustshowyourmobileappwireframetothedevelopmentteam(ifit’snottheonethatcreateditforyou)andtheywillhavehigherchancestoprovideyouwithanaccurateestimate. Earlypreparationsandflawsspottingwillalsosaveyoualotofmoneythatotherwisewouldbespentonapplyingchangesduringthedevelopmentprocessorevenaftertherelease. So,thesewerebenefitsthatyoucangetafteryoubuildawireframeforanAndroidapp(oriOS).Howtoorganizethisprocesssoitflowssmoothly?Here’sourownexperience! 📋Guide:HowDoWeCreateanAppWireframeatStormotion? WireframingisanessentialpartoftheDiscoveryStagethatweholdwitheverynewclientatStormotion.It’sapartofourlong-termcooperationstrategy,whichhelpsustounderstandwhatandforwhomwe’rebuilding. ReadAlsoProjectDiscovery:WhatisitandWhyDoYouNeedit?Inanutshell,wireframesareusuallypreparedtogetherwithotheressentialproduct-relateddataduringtheDiscoverystage:userstories,usecases,aUX-mindmapetc.Ithelpstogetabetterperspectiveofyourtargetaudience,theirneedsandwaysyourProductcanhelpthem. Whataboutthecost? TobuildawireframeforanAndroidapp(oriOS)usuallyrequiresfromusbetween40and70hours.MultiplythisnumberbythehourlyrateofyourDevelopmentPartnerandyou’llgetanapproximatecostofanappwireframe. Whatdowedoduringthistime?Let’sseeourstep-by-stepguideonhowtowireframeanapp! Step1:FiguringOuttheBasics TheappwireframingprocessatStormotionstartswithathoughtfulimmersioninourclient’sprojectidea.Beforedrawinganyblueprintsweneedtounderstandwhatarewegoingtoworkon.Thebestwaytodothisistoanswerafewfollowingquestions: Whoisyourtargetaudience?Howeasyareyourcustomerstofind? Whichcustomersshouldwegoafterfirst?Whichcustomersshouldwestayawayfrom? Whatproblemsdoyourcustomershaveandexpecttosolvebyusingyourproduct?Canwedefineitnarrowly? DoesourMVPactuallysolvetheproblem? Howoftendotheyhavetheproblem?Howintenseistheproblem? Howcanyourbusiness/startupsolvetheproblemofyourtargetaudience? Whatfunctionalitydoyourcustomersexpecttoseeinyourapplication?Whatfeaturesareneededtosatisfythem? HowshouldtheBuyer’sJourneylooklike?Howtomakeitasshortaspossible? Isyourtargetaudiencewillingtopayforyourproducttosolvetheirproblem? Onlyafterwegatherthisdata,wemovetothenextstage. Step2:MakeaContentSpreadsheet Withaclearvisionofyourprojectinourminds,westarttolookforthebestandshortestwaytoyourgoals. DuringStep2,ourUX-magicianscreateaspreadsheetwherealltheexpectedfeaturesandpiecesofcontentarelisted.Ithelpsusinafewways: Ontheonehand,itensuresthatwewon’taccidentallylosesomethingimportantbeforewestarttodrawawireframeforyourmobileapp. Ontheotherhand,weusethislisttoprioritizefeatures,screensandothercontentpieces,buildingasmoothuser’sjourneywithintheappandbringingthemostimportantelementsupfront. Forthemaximumeffectivenesswearrangethisprocessasfollows: Listallthekeyfeaturesandcontentpieceswithashortdescription(ifneeded). Prioritizeandlinkeachofthoseelementstoaspecificscreen,sowewon’thaveanyduplicatesormisssomethinginthefuture. Reviewthelistforexcessivecontentthatcanbeomittedattheinitialstage,leavingonlythemostessentialpieces. TheSpreadsheetmaylooklikethis(imagebyJoshClark) Whenthelogicalstructureofyourfutureproductisclearedout,it’stimetoturnitintosomenice-lookingblueprints! Step3:BasicMobileAppWireframe Duringthiswireframingstage,wemarkupthescreenswithspecificcontentblocks.Thekeyaimhereistodefinethebestspotfordifferentelements:forexample,whatshouldbeplacedontopofthescreenorwhatisthebestareaforvideocontent.ThisprocessisbasedaroundtheVisualHierarchyconcept. VisualHierarchyreferstothearrangementofelementsthatmatchestheorderinwhichusersprocessinformationonascreen. Atthisstage,weintentionallyusezoningasthemainapproachinsteadofdesigningallelementsatonce.Why?Becauselayingeverythingoutoftenleadstowastedtimeandbacktrackingsinceyouhavetosubtractsomethinglater. Afterwemakeupthegenerallayout,westartaddingmoredetails. Step4:DetailedWireframes Duringthisstep,wefinishcreatingawireframeforanapp.Previouslymarkedupzonesaredetailedwithbuttons,icons,placeholdersforimagesandvideos,textboxes,spacingandsoon. ImagebyKristieClementine AfewtipsthatareusedbyourUX-rockstarsaswell: Don’twastetimeonputtingsomerealimagesorvideopreviews.YoucanmarkboxesforimageswiththeXsandvideoplaceholderswiththe“Play”signs. Prioritizecontentbyapplyingboldanditalictotexts,changingtheirsizeandpositiononthescreen. Also,spacingcanbeusedtoprioritizecontentonthescreen. 🔎WireframeExamples Let’sexploresomegreatmobileappwireframeexamplesandshotstoseehowthementionedabovetipscanbeimplemented. Wireframeexample#1(imagebyStephanieJin) ThisshotfromDribbbleperfectlyillustrateshowagoodwireframeforamobileapplookslike.Payattentiontothesedetails: Thewireframesareinblackandwhite(I’mnottalkingaboutthecolorfulbackgroundsinceit’snotapartofwireframes,actually). Theydon’tincludeanylogos,specialUIelementsorcustomfonts. Youcannoticeimageplaceholderswhichdon’tincludeanyspecificpics. Contentprioritizationisachievedbyapplyingboldtotextandplayingwithitssize. Wireframeexample#2(imagebyKishore) Thisshotcanalsosupplementthecollectionofmobileappwireframeexamples.Soasnottorepeatourselves,let’spayattentiontodetailsthatweren’tmentionedinthepreviousexample: Youcanclearlyseenavigationareasatthebottom(atabbar)andatthetop(a“back”button)ofthescreens. Imagesarealsoreplacedwithdummyplaceholders. Thefirstscreenprovidesagreatperspectiveonhowyoucanusespacingtozoneyourapplication. Anotheradvantageofthiswireframesisthattheyallowyoutoclearlyseethestructureofscreensanditskeyfeatures-forexample,mainitemcategories,searchingandfilteringoptions. 💡Takeaways Itseemswe’vesharedeverythingyouneedtogetaclearpictureofhowtowireframeanapp.Asyoucouldsee,wireframingcancontributealottothesuccessofyourproject.Let’sbrieflyrecallafewkeyideashighlightedinthisarticle: Firstandforemost,wireframingisabouthowyourapporwebsiteworksandsatisfiescustomers’needs.Andonlythenit’sabouthowitlooks. Therefore,omitcustomandspecificUIelementsduringtheappwireframingprocess. Showyourwireframestootherstakeholdersandcustomerfocusgroupstogathertheirfeedbackanddiscoverpossiblepitfallsearly. It’satrickytasktoestimatethecostofanappwireframesinceitmaygothroughseveraliterationsandconsideredtobeapartofthegeneraldevelopmentprocess. AreyoulookingforaskillfulandreliablepartnerincrimetomakeawireframeforyouriOS,AndroidorWeb-App?Justreachoutusingthebuttonbelowandwe’llgettheballrolling. Let'sBuildYourProductTogether!Wasithelpful?ReadalsoHowtoDevelopaDroneControlApplication?DEVELOPMENTCASESTUDYPRODUCTSTRATEGY20MINREADTopIoTSecurityChallengesandHowtoDealwithThemPRODUCTSTRATEGY7MINREADCaseStudy:HowtoDeliveraPoCforaHealthCareProductinLessThan2WeeksCASESTUDYPRODUCTSTRATEGY4MINREADHowcanwehelpyou?NameEmailPleasetellusaboutyourprojectHowdidyoufindus?GoogleFacebookReferencefromafriendorcollegueAnarticlefromanotherwebsiteOurclientssayWhenIwasworkingwithStormotion,Iforgottheywereanexternalagency.Theyputsucheffortintomyproductitmightaswellhavebeentheirown. I’veneverworkedwithsuchaclient-focusedcompanybefore.AlexanderWolff,CPOSjut