sitemaps and wireframes

Research pre production documents

find two visual examples of a sitemap and two wireframe
Write a paragraph describing what a sitemap is
write a paragraph describing what a wireframe is
Create a table a table for each one and write two advantages and two disadvantages


Sitemaps

A sitemap (also known as a sitemap.xml file) is a list of pages of a website, or rather a map of a website. Sitemaps are used during the planning of a website by its designers.

Wireframes

A wireframe is a layout of a webpage that demonstrates what interface elements will exist on key pages. This is a critical part of the design process.

Advantages

makes changes more efficiently

saves time and money

Disadvantages 

provides design limitations adds more to the process of making a website 

Disadvantages - can only be used for designing website

Can't use it for films etc...

sitemaps 

a list of pages of a website

three main types: 

- Those used during the planning of the website design (essentially a spider diagram mapping out what pages are on and how get communicate (this is a preproduction sitemap)

- The second type is  a list, visible to the pubic on a website 

- The third list is a coding list designed for search engines (key words in coding etc..)

wireframes

A visual representation of the framework of a website 

not meant to be visually attractive 

meant to show a detailed layout of a website 

Aims:

-Help arrange a sight for a specific purpose 

- Informed by the business aims or a creative idea

- shows the website layout

- shows how different elements (features) of the site interact with each other

- Can be hand drawn sketches or completed via online software

Created by by business analysts, user experience designed, developers and visual designers

Expertise required: interaction design, information architecture and user research

Disadvantages - can't see the colours, graphics or design style 

Look at small production companies (e.g.. Zigzag Productions, Wildstag Studios, Casual Films)

Create the following:

- Sitemap for your production company

- Wireframe for the homepage of your site on a computer screen

- Wireframe for the homepage of your site on a mobile phone screen 

-Wireframe for the site discussing the projects you have 'completed' (a short film and a funding video)

- To do this, use sites like the following, or draw by hand:

1. Lucidchart.com (wireframe builder)

2. Wireframe.cc (wireframe builder)

3. Writemaps.com (sitemap builder) 

analyse existing market examples 

evaluate what went well in theirs