wireframes for web design
DESCRIPTION
Wireframes are not well understood by Web design students in various disciplines. With illustrations and examples, this presentation differentiates between storyboards and wireframes.TRANSCRIPT
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
Whatisastoryboard?
• Showsasequenceoraprocess• UsedextensivelyinmakingHollywoodmovies,animaOonandvideogames
• SomeOmestheword“storyboards”isusedwhen“wireframes”iswhatismeant
• Don’tgethungupontheterminology,butrecognizethatsomepeoplewoulduseonetermandnottheother
StoryboardfromaBriOshTVseries
Storyboardfromananimatedshort
Storyboardplanner
Storyboardplanner
StoryboardexampleforFlashanimaOon
WireframesforWebDesign
MMC4341PresentaOonbyMindyMcAdams
UniversityofFlorida