Send the link below via email or IMCopy
Present to your audienceStart remote presentation
- Invited audience members will follow you as you navigate and present
- People invited to a presentation do not need a Prezi account
- This link expires 10 minutes after you close the presentation
- A maximum of 30 users can follow your presentation
- Learn more about this feature in our knowledge base article
Do you really want to delete this prezi?
Neither you, nor the coeditors you shared it with will be able to recover it again.
Make your likes visible on Facebook?
Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.
Website Design - Wireframes & Storyboards
Transcript of Website Design - Wireframes & Storyboards
What's the PURPOSE?
What are the main GOALS?
Who's the AUDIENCE?
Build and Test
5 Stage Process
Agree a project plan with
Site Map (Flowchart)
Site Map Examples
Shows a single PAGE
Looks at the page STRUCTURE and CONTENT
Create outline LAYOUT
Does not show VISUAL ASPECTS
Typically used for designing movies or animated cartoons
Scene by scene drawing.
Tells the story visually for developers
Shows colours, fonts, interactive elements, navigation etc
Essential Blueprint for your website
Look & Feel
In pairs think of a website and write down...
It's core PURPOSE (1 or 2)
It's main GOAL(s)
The target AUDIENCE
1) Sketch a site map for your Recycle IT Website
2) Include 3 pages as a minimum
Think of a website you like the 'design' of. What is it that you like about it?
Is it just the graphics?
Complete the Quiz on Moodle!
You're ready to start work!
NB Wireframes & Storyboards are sometimes referred to as the same thing!
To be aware of the production procedure when developing a website
Understand the difference between a wireframe/ storyboard/prototype
Create a sitemap and wireframe for own website.
Create a draft storyboard of own website.
Flowchart to outline the overall structure of the site.
Wireframes to show basic structure of site pages
Storyboards to show details
Simple Wireframe Example
Use Task 1 on Moodle to add answers
A list or diagram of the order (hierarchical)
structure of all the html pages in a website
It is used to Plan, Visualise and Organise -
Provides an Overview
A prototype is a semi functional web page that gives a
realistic preview of what the page will look like and how
the site will work.
Links can be clicked on, see it as it would appear on the
Web Prototype is created from Sitemap, Wireframe and Storyboard
• basic illustrations of the structure and components of a web page
• first step in the design process
•focus on the visual design elements of the site
•very close or identical to the actual final site design
•include all the graphics, typography, and other page elements
semi-functional webpage layouts
user interface usually constructed using HTML/CSS
give clients the ability to click around
Create Your First
Download the template