This document discusses visualisation diagrams and their use in planning projects. It explains that a visualisation is a drawing that shows what something will look like when created, and they are used to plan for images, products, costumes, logos, posters, and webpages. Visualisation diagrams can be made digitally using software. The document provides an example of a basic website layout diagram showing common elements like a header, main content, images, and footer. It then gives instructions for students to create a basic mockup of a movie website layout using an online tool.

1. Visualisation Diagram
Lesson 4

2. Lesson Goals
 Understand where visualisations are used in planning
 Know how to layout elements of a visualisation diagram
 Be able to create some basic visualisation diagrams
#visualisation
#layout

3. What is a visualisation?
Think about our research lessons…

4. Visualisation
Create basic visualisation diagrams
Understand use of visualisations
 A visualisation is a drawing created by hand
or digitally showing what something will look
like when created.
 They are used to plan for still images or
products and can be a rough sketch or a
detailed final design.
 Visualisation diagrams are used to plan for
things like costumes, logos, posters, cars or
webpage layouts.
 They can be made using desktop
publishing, word processing or image editing
software.
#visualisation
#layout

5. Visualisation Diagrams
Many projects can be planned using visualisations...

10. Layout
Create basic visualisation diagrams
Understand use of visualisations
 The layout of a webpage is very
important. Users must have easy
access to the main information.
Header
 If you create a good layout for a
website then people are more
likely to visit your site in future.
Main Content
Images
 Making a visualisation of how you
want the web page to look allows
you to make a decision on whether
all of the information is in the right
place before making the site.
Footer
#visualisation
#layout

11. Example Layout

12. Your Task
Create basic visualisation diagrams
Understand use of visualisations
 A new movie called Manifesto is due to
be released later this year.
 Use mybalsamiq.com to create a basic
mockup of the layout for the movies
website including the following:
 Logo
 Basic Details
 Buttons
 Video Trailer
 You should also show where other
suitable assets will be placed on the
home page.
#visualisation
#layout

13. Homework
Create basic visualisation diagrams
Understand use of visualisations
 Complete the visualisation sheet
for the production company
launching the Manifesto film.
 Task 1
 Design a banner for Manifesto
that could go on the top of a
website advertising the film.
 Task 2
 Design an app which will allow a
user access to exclusive behind
the scenes features.
#visualisation
#layout

14. Key Words
 Visualisation
 A drawing or sketch diagram of what
something will look like
 Layout
 The way in which parts of something
are arranged or laid out