Sitemaps, Wireframes and Visualisation Diagrams

Sitemaps, Wireframes and Visualisation Diagrams

What are sitemaps?

Essentially a list of all the pages on a website

1. Used whenever planning a website
2. Used by those searching website - viewers
3. Used by those who are involved in coding a website - for the search engine

Understanding Wireframes

A visual representation of the framework of a website

Aims:

- To help arrange the site for a specific purpose (informed by the business aims of a creative idea)

- Shows the websites layout

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

You would need a different wireframe for each device you want your website on because the screens are different sizes

Why use Wireframes?

Helps programmers and the designers 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 - Process?

Don’t focus on colours, style or graphics

Focus = functionality - what it does, not how it looks

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

My Wireframe 

Explanation of my desktop version layout

I chose to make the navigation bar thin, and at the top of the screen in order to have more room for the production trailer element so it doesn’t look like things are all squished together and cramped. I chose to only include the trailer rather than the entire production as it will encourage readers to go and view the full film upon release. I decided to put my logo on the top left of the navigation bar and also across the top of every page as a way to make people remember it so they are able to easily recognise our company logo. Additionally, I chose to put the title and the description of the production which is being advertised right beside the video element because it lets viewers automatically see the information for the trailer they’re watching without having to scroll down to do it as some people may not even bother looking. This way it’s right there and there’s no need to search for it. And lastly, I have very minimal navigation windows so there’s not as much information for viewers to click through.

Explanation of my phone version layout

I chose to keep a very similar layout to my desktop version on my phone version. This means that returning viewers don’t have to be really confused when seeing a complete different layout on the phone compared to the desktop version. I kept the thin navigation menu on the top and just added a horizontal scroll bar so you can get to the tabs that don't find within the phone dimensions, this also keeps everything nice and neat and not too crowded and squished. I kept my logo idea on the navigation bar and also the heading of each page to make people become familiar with our logo and remember more easily. And once again I've made sure to keep the trailer viewing element and the title/description in the same sort of window in order to make it so that viewers don't need to scroll down in order to search for the title and description as its now all in one window.

Unit 2 - Wireframes Task

Explicit requirements in the brief

• Search bar
• Social media
• 'About’ section
• Do it in 6 months
• Easy to navigate
• Download
• Tablet + Smartphones
• Sponsership
• Audience and demographics (Diverse)
• Interactive

Implicit requirements interpreted from the brief

• Logo
• Own ideas
• Mature look (older target audience)
• Contemporary

Visualisation Diagrams   

Sometimes called ‘concept art’

A drawing created by hand or digitally showing what a final product would look like

Used to plan for still images or production

They can be detailed final designs or they can be rough hand drawn sketches

Usually has annotations explaining features which are not clear