How to Build a Website Wireframe Using Google Docs

Google Docs can provide a basic, low-fidelity website wireframe that is easy to create and share. Utilizing features like tables within Google ... Skiptocontent Design HowtoBuildAWebsiteWireframeUsingGoogleDocs ByAmandaKlugJune7,2022NoComments Thereareamultitudeofwireframingtoolsoutthere,rangingfromhighandlowfidelity,freeandexpensive andsimpleandcomplex.However,dependingonthecomplexityofyourwebproject,there’sonetoolthatissimpletouse,freeandworkswellforcollaborationwhenbuildingawebsitewireframe:GoogleDocs.GoogleDocscanprovideabasic, low-fidelitywebsitewireframethatiseasytocreateandshare.UtilizingfeaturesliketableswithinGoogleDocsallowscontent,mainimagesandheaderstobeblockedoutineasy-to-understandlayouts.Plus,manypeoplehaveexperiencewithGoogleDocs,sothatmakessharingandcollaboratingeveneasier,allowingyoutoavoidteachingyourteamabrandnewtool.We’veupdatedthispostin2022togiveyoumoretipstohelpyoubuildevenbetterwireframesonGoogleDocs,faster. WhatisaWireframe? BeforebuildingawebsitewireframeusingGoogleDocs,it’shelpfultoknowwhatawireframeisandwhatit’smeanttoaccomplish.Awireframeisasimplified,visualrepresentationofaconceptorproduct.Wireframesareusedthroughoutthecomputerdesignworldinwebsites,smartphoneappsandothercomputerprograms.Awebsitewireframeshouldshow,approximately,whereandhowcontentisarrangedonthesite,andgivetheviewerabasicideaofhowthesitewilllook.Awebsitewireframeusuallydoesn’thaveactualfunctionality;featuresaren’tclickable,animationswon’tappear,submissionscan’tbemade.Thoughotherwireframingtoolsmightallowsimplefunctionality,thatwon’tbethegoalwhenbuildingawebsitewireframeusingGoogleDocs. Withthisinmind,agoodwebsitewireframeshould: Showwhatcontentexistsonthesite,andwhere Giveviewersageneralideaofhowthesitewilllook Allowdesignersandclientstomakechangesbeforethefullsitebuild-out Allowdesignersandclientstochooseandeditpictures,text,logos,colorsetc. Showthesite’sorganizationandhowpageswillbearranged AdvantagestoBuildingaWebsiteWireframeUsingGoogleDocs GoogleDocswasnotbuiltasawebsitewireframingtool,soitmayseemstrangetousethisinsteadofothertoolsthatwerebuiltforthepurposeofwireframing.However,GoogleDocsoffersanumberadvantages.Thetoolisveryeasytouse,makescollaborationandeditingsimple,anditcanbeusedanywhereinternetaccessisavailable.ThefollowingareafewofthereasonsourteamusesGoogleDocstowireframemanydifferentwebsites: Intuitive:GoogleDocsislaidoutinaverysimilarwaytoprogramslikeMicrosoftWord,whichmostpeoplearefamiliarwith.Thismakesiteasyforanyonetojumpinanduse. NoSoftware:GoogleDocsisfree,andweb-based.Itdoesn’trequireanysoftwaredownloadsorlicensepurchases,soallcollaboratorsonaprojectcanuseiteasily,hassle-free. Autosaves:Everyfewseconds,GoogleDocssaveschanges,sothere’snofearoflosinglotsofworkinanemergency. EasyCollaboration:Bysendinganinviteandchangingpermissions,youcaninviteorallowanyonetoview,commenton,oreditthedocument.However,thedocumentwillnotbeviewableorchangeablebyanyoneelse.We’lltalkmoreaboutthislaterintheblogpost. Herearestepstobuildinga websitewireframeusingGoogleDocs: CreatingtheSitemapinGoogleDocs Ifindithelpfultolistoutthewebsite’ssitemapatthetopofthedocument.Thiswillgiveanyoneelselookingatthewebsitewireframe,includingcollaboratorsoraclient,abriefoverviewofwhatpagesareonthesite,andwillalsoshowthepagehierarchy. Awell-organizedsitemapwillhelpvisitorstothesitefindwhatthey’relookingforfaster.Asageneralruleofthumb,avisitorshouldn’thavetomakemorethanthreeclickstogettowhattheyneed.Ifthesitemapis,atanypoint,morethanthreelayersdeep,itmightbeagoodtimetoconsideracontentaudit.Aclean,well-structuredsitehierarchywillhelpkeepthesiteorganized,anditwillhelpGoogle’sbotscrawlthepagesfaster,whichcanimproveSEOandhelpvisitorsactuallyfindthewebsitewhentheymakearelevantGooglesearch. CreateContentTablesinGoogleDocs ThetableswithinGoogleDocsareperfectforlayingoutcontent.Toaddatabletoyourwebsitewireframe,gotoTable>Inserttableandchoosethenumberofrowsandcolumnsyouwant.Fromthereyoucanusethespacestocreatecontentblocksthatwillfillyourpages.GoogleDocsworkwellforcontentbuildingbecauseyoucanhavemultiplepeoplecontributingwhilebeingabletoreferenceotherpagestokeepthesamevoice.Infact,upto200peoplecanviewthedocumentsimultaneously,andupto50peoplecaneditadocumentcollaboratively. BuildingtheHeader&PageElementsinGoogleDocs Onceyou’velaidoutthesitemap,you’llwanttomoveontolayingoutthemajorpageelements.Whileeverywebsiteisabitdifferent,mostwebsiteshavewebconventionsincommon.Usingwebsiteconventionsasyoubuildasitewillhelpyouorganizethecontentinawaythatusersarealreadyconditionedtounderstand.Someoftheseconventionsinclude;usingthelogointheupperleftcornerofthesite,whichshouldlinktothehomepage;placingnavigationlinksanddropdownmenusatthetopofthepage;placingalargeimageorvideoatthetopofapage,withthepage’stitleandsubheadingoverlaidonit.Whileyoucanup-endtheseconventions,dosocarefully.Websitesandthewebingeneraldon’tcomewithaninstructionmanual;theseconventionshelpusersunderstandhowtouseyoursite,andupendingtheseconventionscanconfusesitevisitors. Tostart,createaheaderwiththewebsitelogoontheleftandthenavigationontheright,byinsertinga2×1table. Then,makethefirstcolumnsmallerbyclickinganddraggingthecenterline.Thiswillgiveyouaspotforyourlogo.Justfillinthesmallerboxyou’vemadewiththeword“logo”andfillinyourprimarynavigationinthelargerbox.WhenmakingawebsitewireframeusingGoogleDocs,you’llusethetablemechanismoften.Youcanadjustthesizesofthetablesaccordinglytocreateblocksoftext,images,buttons,andmore. Next,I’musinga1×1tabletocreatethespacefortheheroimageonthepage.I’vefilledinthebackgroundwithalightshadeofbluetoshowthatitwillhaveabackgroundimage. Withthelogo,navigation,andheroimagelaidout,youcanthenaddtextboxesbelowtostartcreatinganypage.It’sagoodideatostartwiththehomepage,thenmovetotheotherprimarypages,likeyourAboutUspage,ContactUspage,andaProductsorServicespage.Youcancopyandpastethetablesyou’vealreadymadetostartwireframingyourotherpagesfaster. CreatingFormsinYourGoogleDocsWireframe Formsareanotherimportantelementinwebsitesingeneral,andinwireframing.Avisitorwoulduseaformtocontactabusiness,purchaseproduct,requestaquote,andmuchmore.YoucanalsowireframeformsinGoogleDocseasilyusingthesametable-basedmethodasbefore.Ifyouoryourclientaren’tsurewhatformfieldsareimportant,itwillbeeasiertoadjustthematthewireframingstage. First,layouttheplacewhereyourcontactformwillbebyinsertinga2×1table.Thiswillgiveyouaspaceforaninformationalparagraphaboutthebusinessororganizationontheleftside,andspaceforacontactformontheright.Thisisjustanexample;dependingonthetypeofformandpageyou’rewireframing,yourpagewireframemaylookdifferent. Then,withyourcurserinthe“ContactUs”box,insertanothertable.Thiswillbeourcontactform.Youcanmakethisaslongorasshortasyoulike.Remember,visitorsarelikelytogetfatiguedbyverylongforms,soincludeonlytheinformationthatyoureallyneed.Thisshouldatleastincludeanameandemail.Forthisexample,we’llincludeafewmoreformfieldsbyinsertinga2×3tableonthe“ContactUs”sideofouroriginaltable. Withourtableinplace,wecansimplyfillinourformfields.Whenthesiteisreadyforconstruction,thiswilltellthewebdesignerwhatourformfieldsshouldbe.Youcanalsodiscusstheseformfieldswithotherpeopleontheproject,andadd,delete,orchangethefieldsasneeded.Todeleteoraddafield,simplyright-clickandchoose“Deleterow”or“Insertrow”fromthemenu. MergeCellsinGoogleDocs OurContactUsformdoesn’tincludeanyspacefortheuser’sactualcomments,though.Forthis,we’llneedonemoretrick.YoucanusethistrickelsewherethroughoutyourwireframeonGoogleDocs,too.Thiswillhelpyoucreatetablesofvaryingsizes,sotheydon’thavetoallbeperfectlysymmetricalgrids. Right-clickyourtableandinsertanotherrow.Insteadoftwoboxes,wejustwantoneboxthatisconnectedtothesametable.Todothis,simplydragyourcurseracrosstheboxesandright-click.Then,select“mergecells.”Thiswillgiveyouoneboxthatyoucanresizeaccordingly,soitlookslikeaboxfortheuser’scomments.Withthiscompleted,you’vecompletedyourform!   CreateaButtoninYourWebsiteWireframe You’vemadeyourheader,heroimage,basiccontentboxes,andaform.There’salotyoucandowiththesesimpleelementsinyourwireframe.Keepinmind,youhaveallofGoogleDocs’regularformattingelementstoo,likechangingfonts,textcolor,backgroundcolors,insertingimages,andmuchmore.Thelastthingthatwillbeespeciallyhelpfulinasyou’recreatingawebsitewireframeusingGoogleDocswillbemakingabutton. Abuttononawebsiteisanobviouslyclickableelement,usuallyarectangularbox,thatwillperformafunctionortakeausertoanotherpage.Itmightbea“submit”buttononacontactform,orabuttoncontainingalinktoanotherpage,likea“contactus”button.YoucancreatebuttonsinyourGoogleDocswebsitewireframeveryquicklyandeasily,andevencustomizethemtosuityourbrandcolors. Tocreateabutton,simplyinsertatableagain,thistimejusta1×1(asinglerectangle).Then,dragtheedgesoftherectangletoresizethebutton.Putyourcurserintherectangletoinsertanytext,like“Submit.”Centeryourtexttomakeyourbuttonniceandneat.Then,youcanchangethebuttoncolors,andevensetcustomcolorsusingtheplussignunder“custom”inthedropdownbox.Inthefollowingexample,Imadethe“submit”buttonforthecontactformred. ViewYourGoogleDocWireframeWithoutPageBreaks Ofcourse,GoogleDocswasintendedforthingslikeessays,books,reports,andsimilartext-baseddocuments.Thoughit’saveryhandytoolforcreatingawebsitewireframequicklyandsimply,pagebreakscandisrupttheexperiencesomewhat.Insteadofviewingthewireframeasonecontinuouspage,likeyourwouldawebpage,yourwireframewillbedividedbypagebreaks.However,Googlerecentlyaddedafeaturethatallowsyoutoeliminatepagebreaks.ThisisagreatadditionforanyoneusingGoogleDocstowireframeasite. ToviewyourdocumentwithoutpagebreaksinGoogleDocs,simplygotoFile>PageSetup.Then,select“Pageless”andclick“OK”.Thiswillallowyoutoviewyourwebsitewireframemorelikeanactualwebsite,insteadofadocument. SharingYourGoogleDocsWebsiteWireframe Onceyou’vestarted(orfinished!)yourwebsitewireframe,youmaywanttosharewithsomecollaborators.Yourbusinesspartners,otherdesigners,contentwriters,programmers,oryourwebdesignclientsmightwanttoviewthewireframeandmakechanges.BuildingawebsitewireframeusingGoogleDocsasatoolallowsyoutoeasilyshareyourwork.Multipleparticipantscaneditadocumenttogether.Youcanevenselectpermissionsforindividuals.Forexample,youcanallowanyoneinyourbusiness“view-only”privileges,butthengivefellowwebdesignerseditingprivileges.Youcanchangetheseatanytimeasyourprojectprogresses. Tosharewithcolleaguesoraclient,clickthe“Share”buttoninthetoprightcorner.Youcanchoosetoallowotherstoonlyviewthedocument,orallowthemtocommentandedit. Asafree,web-basedoption,GoogleDocsisagreatalternativetotraditionalwireframingtools.Althoughnotdesignedtocreatewebsitewireframes,itprovidesaflexiblesystemthatiseasilyadaptabletotheneedsofdifferenttypesofprojects. Executive'sGuidetoWebDevelopment 80pagesoftopicsandtipstonavigateyourwaytoabetterwebsite. GettheGuide » RelatedPosts:37ToFu,MoFu,andBoFuContentTypesforYourSalesFunnelStages12WaystoImproveYourGoogleRankin2022LandingPageVsWebsite:WhichDoYouNeedAndWhy? LeaveaReply Cancelreply OfficeLocation 2090JollyRd.STE100 OkemosMichigan48864 517-455-7837 ContactUs JoinOurTeamWe’reHiring! OfficeLocation 2090JollyRd.STE100 OkemosMichigan48864 517-803-4566 Services WebDesign DigitalMarketing WebApplications MobileApplications IndustryExpertise ProfessionalServices SaaSProducts Manufacturing Municipalities TechnologyExpertise WordPressDevelopment DNNDevelopment RubyonRails HubspotAgency ©2022WebAscender|PrivacyPolicy