• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Story Boards, Site Maps & Wireframe Diagrams


#1
Hello All,
Cam anyone explain please the differences between Story Boards, Site Maps & Wireframe Diagrams in web design?
I think the site map is a hierarchical diagram of the structure of the site from the homepage etc. and I think a story board is a line drawing of each page and where each element goes? Is the wireframe the method of drawing the story board? Also, do you add things like colour codes to the storyboard. I don't like mentioning this but I'm in a bit of a hurry! Thank you as always,
Graeme
 

hankscorpio

Moderator
Staff member
#2
Story board - boards illustrating the story of the website.
Site Map - a map of the site
Wireframe Diagrams - how it actually looks
 

hankscorpio

Moderator
Staff member
#3
Sorry that might have been a bit short.

A story board is basically how the customer gets from a to b to c etc. So you give a 2x2 or 3x3 or 4x3 sheet of how the customer gets from one point to the point of the site - usually a sale. A story board should tell the story of how a customer can get to the website, find what they're looking for and buy it.

Site map - illustrates how the site is structured. It's a list like

Home
>Images
>>Images 2
About
>CEO
>>Staff

etc.


Wifreframe diagrams - basically a static diagram that illustrates the basic design of the website, what happens when you click a button, maybe the rollover options, image placement etc. basically a basic layout of the site.
 
#4
Thank you very much,
Do you use wireframes to draw the story board or are they separate? I'm getting mixed up!
I have been asked to design a web site & I need to submit a Brief, Sitemap, Story Board & I think Wireframe,
Thanks for your help with this,
Graeme
 

Levi

Moderator
Staff member
#6
Storyboard - think of it as a set of pictures showing the 'story' of the website. Can't say I've seen it used in website design it's more of a movie/animation thing where they show key scenes of the story in visual sketches to aid in the final video.

Wireframes - basically the layout of the website, usually with no images, to help demonstrate how the site will look when viewed.

(not mentioned) Mockup - a visual representation of the site with imagery to help the client view how the site will look when it's finished, this is usually done in photoshop or similar. This is kind of less important now due to responsive design.

Sitemap - well there's two versions of a sitemap, you've got the webpage with all the links to different sections, think of it as an index/contents page, and then you have the xml version which is used to help google 'map' your site for their search engine.