Storyboards and navigation maps

Storyboarding is usually done in the initial planning and analysis stages.  There are a lot of different ways to develop website story boards and the type you should use depends on the purpose of the storyboard. Both creative and technical professionals use storyboards, which can streamline the design and development process. For example if the storyboard’s purpose is to get client approval of the websites visual design then a jpeg image of what the site will look like would be most suitable because then the client can really see what the site will look like. This format would include the clients colour scheme, logo, main images etc but not all their text content. If the purpose of the storyboard is to show how different website features are expected to function then a more traditional wireframe would be suitable.

Examples

src slideshare.
jpeg example storyboard for client
jpeg example storyboard for client

Detailed storyboard

Navigation Maps

Navigation maps are also known as site maps, and they are a very important development tool. Navigation maps are very useful tools in the development of websites and can help to keep the development  process on track . They basically are a visual representation of how the website pages will link together. In simple websites the navigation maps are very simple because every page links to every other page but in large websites with 100’s of pages linking every page to every other page isn’t practical and their navigation site maps are very complex.

Navigation maps as a development are not to be confused with a live websites site map. On a live website you should have a sitemap for your users to aid the navigation of your website. In this instance the sitemap is a list of pages of a web site accessible to crawlers or users and should take the form of both an “html” page and an xml document. The content is the same and both development sitemaps and live website sitemaps are typically organised  in hierarchical fashion.

Simple navigation map
Simple navigation map

Complex navigation map

Complex navigation map
Complex navigation map src www.healthunit.com