What Are Wireframes? - Balsamiq

The designs you received are called wireframes (sometimes called wires, mockups, or mocks). A wireframe is a schematic, a blueprint, useful to help you and ... BalsamiqWireframingAcademy Articles Videos Courses UIControlGuidelines Resources Articles ›WhatAreWireframes? 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 WhatAreWireframes? Awireframeisaschematicorblueprintthatisusefulforhelpingyou,yourprogrammersanddesignersthinkandcommunicateaboutthestructureofthesoftwareorwebsiteyou'rebuilding. Inthisarticle: Whatarewireframesallabout? Whyusewireframes? Whydowireframeslookthewaytheydo? Gettingstartedwithwireframes Whatarewireframesallabout? Thedesignsyoureceivedarecalledwireframes(sometimescalledwires,mockups,ormocks). Awireframeisaschematic,ablueprint,usefultohelpyouandyourprogrammersanddesignersthinkandcommunicateaboutthestructureofthesoftwareorwebsiteyou'rebuilding. Whyusewireframes? Thesamescreencanbebuiltinalotofdifferentways,butonlyafewofthemwillgetyourmessageacrosscorrectlyandresultinaneasy-to-usesoftwareorwebsite.Nailingdownagoodinterfacestructureispossiblythemostimportantpartofdesigningsoftware. Doingthisworknow,beforeanycodeiswrittenandbeforethevisualdesignisfinalized,willsaveyoulotsoftimeandpainfuladjustmentworklater.Formoreinformationaboutwhypeoplechoosetowireframe,readaboutTheTwoPhasesofWireframing,orwatchourdetailedWireframingforNewbiesvideoorthequicksummarybelow. Summary: Wireframeshelpgetyourmessageacross Wireframeshelpyounaildowntheinterface Wireframesresultineasytousesoftwareandwebsites Wireframessaveyoutimeandadjustmentworklater Whydowireframeslookthewaytheydo? Wireframestypicallyhaveanintentionallow-fidelitylookandfeeltothem,forthefollowingreasons. 1.Wireframesmakeitclearthatthisisnotthefinaldesign Noonecouldmistakeawireframeforthefinallookandfeelofyourapplication.Low-fidelityandfewcolorsforceyoutofocusonstructureoverdetails.Therewillbelotsoftimeforvisualdesignoncethestructureisfinalized. 2.Wireframesconveythat"thisisallupfordiscussion" Theroughfeelencouragesdiscussion.Wecallitalooknooneisafraidtocriticize.Wireframesarereallyquicktomake,sodon'tbeshywithgivingfeedback!Eachscreenprobablyonlytookafewminutestomake;don'tworry,theirauthorwon'tminddoingthemoverfromscratch.Whatmattersthemostatthispointisthefinaleaseofuse,sogoingthroughafewiterationsisnormalandexpected. 3.Wireframesmakeitclearthatnocodehasbeenwrittenyet Ifyourcustomerorstakeholderreceivedsomescreensthatlookedlikescreenshotsofthefinalapp,insteadofawireframe,theymightassumethatallthecodebehindthosescreenshotshadalreadybeenwritten.Thisismostoftennotthecase.Wireframesdon'thavethisdanger. Gettingstartedwithwireframes Withgreatpowercomesgreatresponsibility.Justbecausewireframingtoolsmakeiteasytocomeupwithuserinterfaces,itdoesn'tmeanthatcreatinggooduserinterfacesiseasy. That'swhywe'vecreatedeverythingyouneedtomakegreatwireframesandlearnjustenoughuserinterfacedesignalongtheway. Ifyouhaven'talready,startordownloadafreetrialofBalsamiqWireframesforDesktoporBalsamiqCloud,thenvisitoneofthelinksbelow. IntroductiontoUserInterfaceDesignThroughWireframes StartyourjourneyintoUIdesignwiththiseasy-to-followguide. HowtoStartaWireframeProject Learnthetechniquesweusetogofromnothingtosomething.PartofourseriesonWireframingforBeginners. BalsamiqTutorials Lessonsonusingourtool,plustipsandtricks.YoumightwanttostartwithCreatingYourFirstWireframe. Youcanalsostartbybrowsingourarticlesorcourses.HappyWireframing! [email protected]. ←DesigningforAction:BestPracticesforEffectiveButtons FiveStepstoCreatingGreatWireframes→