Sitemaps, wireframes and visualisation diagrams

 A shot by shot list is important alongside these documents- storyboard and script

A sitemap

A sitemap is a list of pages of a website, those used during the planning of a website by its designers. 

Three main types- Those used planning a website

Available for viewing online by those visiting a website 

A structured coded list designed for search engineers 

A wireframe 

A visual representation of the framework of a website 

Aims

• To help arrange the site for a specific purpose (informed by the business aims or a creative idea)
• Shows the websites layout
• Shows how different elements of the site interact with each other

Why use wireframes

• Helps programmers and designers think think and communicate the structure of software or website they are building.
• The same screen can be built in different ways, but only some communicate the message with easy to use software or website.
• An effective interface structure is possibly the most important part of designing software.

• Wireframes don't focus on colours, style or graphics
• They focus on the functionality- what it does, not how it looks in detail
• Can be hand drawn sketches or completed via online software
• Created by business analysts, user-experience designers, developers and visual designers. 
• Expertise required: interaction design, information architecture and user research. 

Visualisation diagrams

• Sometimes called concept art
• A drawing created by hand or digitally, showing what something will look like when its creates
• Used to plan for still images or products as movement is static and this is a solid picture
• Can be a rough sketch or a detailed final design
• Normally has annotations explaining features that are not clear- must justify. exp. children logo has bright colours as appealing to a young target audience