Wireframes for Web Design

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