Print Reseller Scheme
  1. 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

Discussion in 'Website Design Forum:' started by Graeme, Jan 7, 2016.

  1. Graeme

    Graeme New Member

    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,
  2. hankscorpio

    hankscorpio Moderator Staff Member

    Story board - boards illustrating the story of the website.
    Site Map - a map of the site
    Wireframe Diagrams - how it actually looks
  3. hankscorpio

    hankscorpio Moderator Staff Member

    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

    >>Images 2


    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. Graeme

    Graeme New Member

    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,
  5. hankscorpio

    hankscorpio Moderator Staff Member

    Storyboard is more of an extension of the site map

    Tell the story of the journey through the website.
  6. Levi

    Levi Moderator Staff Member

    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.

Share This Page