WireframesforWebDesign
MMC4341
Whatarewireframes?
• Wireframesaresimilartobuildingblueprints• Theydefinethecontentandfunc)onalityofeachpageonaWebsite
• Wireframesshowstructure
• Wireframesmay/maynotshowcontentdetail
• Theydonotshowdesign:colors,typography,photosorgraphics(buttheydoshowplacementofimages)
SOURCE:hJp://www.gdoss.com/web_info/web‐site‐wireframe.php
SitenavigaOon
SiteID
Footer
PlacementofsecondarynavigaOon
Howarewireframesmade?
• DifferentsoUwareprogramscanbeused– Visio– MSWord(usingtables)– Excel– PowerPoint– Penandpaper
• Thepointistomakeitdesign‐neutral(whileshowingcontentandfuncOonality)
• NevermakewireframesinPhotoshop
AnexamplefromadifferentWebsite
NotesaboutthepagecontentarewriJenbesidethewireframe
Later,thedesignerscandecidewhethertheywantthelistatleUtoappearlikeatable,oragrid,andwhatcolorstouse.
ThewholecolumnhereontherightisfornotesanddetailsabouttheWebpage,whichtakesupthewholespacetotheleU.
SOURCEhJp://www.gliffy.com/examples/wireframes/
AnexamplefromadifferentWebsite
Ahand‐drawnwireframe
hJp://www.aptmediainc.com/About/Apt‐Lab/Designers‐Who‐Wireframe
Thepagewouldlooklikethis(adesignermightmakeacompofthepageinPhotoshop)
hJp://www.aptmediainc.com/About/Apt‐Lab/Designers‐Who‐Wireframe
<
WhatisinformaOonarchitecture?
• Likearchitectureforabuilding,it’saplanfor:– Whereeverythingshouldgo
– Howbigorsmalleachpartneedstobe– Howallthepartsconnecttooneanother
• Visualdesignisadifferentskill,butinsmallshops/companies,onepersonmighthandlethewholeprocess*
• WireframesareapartoftheIAprocess
*SOURCE:hJp://www.aptmediainc.com/About/Apt‐Lab/Designers‐Who‐Wireframe
Afewothernotes
• Wireframescanbe“highfidelity”(lotsofprecisedetails)or“lowfidelity”(roughandmoregeneric;lessspecific;lessdetail)
• Wireframesarenotthesameasprototypes(whichcanbeclicked,etc.)
• Wireframescanhelpyouworkoutideaswiththeclient(andsaveOme)
• Wireframescanhelpyouplanyoursite
WireframesforWebDesign
MMC4341PresentaOonbyMindyMcAdams
UniversityofFlorida