Upload
mindy-mcadams
View
4.593
Download
4
Embed Size (px)
DESCRIPTION
Wireframes are not well understood by Web design students in various disciplines. With illustrations and examples, this presentation differentiates between storyboards and wireframes.
Citation preview
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