Sitemaps, wireframes & visualisation diagrams

 Sitemaps, wireframes & visualisation diagrams ♡

What are sitemaps?

♡essentially a list of the pages on a website

used when planning a website, used by those searching a website - viewers, used by those who are involved in coding website - for the search engine

What are wireframes?

♡a visual representation of the framework of a website

aims: to arrange the site for a specific purpose (informed by the business aims or a creative idea), shows the website's layout, shows how different elements (features) of the site interact with each other

What are wireframes?

♡helps programmers and 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 description

♡wireframes don't use colours, styles 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 diagrams

♡expertise required: interaction design, information architecture and user research

My wireframe

♡I think this wireframe is very effective for a short film website. This is because it includes the logo, clear ways to navigate around the website on the side, social media links and the film, either a trailer or full movie depending on the client brief. It has a description, information about the personnel involved in the creation. There is a section on ratings and an area where people can comment. 

♡a mobile website would be different as there isn't as much room on a mobile device's screen for the same layout. It is longer and thinner, so readers read downwards as opposed to across. Instead, the short film will be on the screen, followed by the description and comments. There will be the other sections at the top of the website instead so that space is saved and fitted better for a smaller screen. 

Visualisation diagrams

♡a visualisation diagram is the initial sketch showing what something will look like when created

♡used to plan for still images or products

♡can be a rough sketch or a detailed final design

♡normally has annotations explaining the features that aren't clear