Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start 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.

DeleteCancel

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.

No, thanks

Website Design - Wireframes & Storyboards

No description
by

Berni Durham-Jones

on 15 September 2016

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Website Design - Wireframes & Storyboards

Web Design
What's the PURPOSE?
What are the main GOALS?
Who's the AUDIENCE?
Requirements
Define
Structure
Design
Build and Test
Launch
5 Stage Process
Agree a project plan with
the client
Record it!
Production
Phases
Structure
Site Map (Flowchart)
Site Map Examples
Shows a single PAGE
Looks at the page STRUCTURE and CONTENT
Create outline LAYOUT
Shows NAVIGATION
Does not show VISUAL ASPECTS
Can be
high fidelity
or
low fidelity
Wire Frames
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
Storyboards
Look & Feel
Identity
Prototype
Let's Compare
Software
Gliffy
iPLOTZ
Lovely Charts
Lucid Chart
Enough
Theory...
Create your
first
storyboard
Task One
In pairs think of a website and write down...
It's core PURPOSE (1 or 2)
It's main GOAL(s)
The target AUDIENCE
Task 2
1) Sketch a site map for your Recycle IT Website
2) Include 3 pages as a minimum
Task 3
Think of a website you like the 'design' of. What is it that you like about it?
Is it just the graphics?
Task 3
Complete the Quiz on Moodle!
Good Luck!
You're ready to start work!
Design Evolves
SKIN
NB Wireframes & Storyboards are sometimes referred to as the same thing!
Learning Outcomes:
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
Wireframe
Storyboards (Mockups)
VS
•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
Prototype
semi-functional webpage layouts
user interface usually constructed using HTML/CSS
give clients the ability to click around
MockFlow
Mockingbird
Mockup Builder
Pidoco
Create Your First
Wireframe.
Download the template
On Moodle
Full transcript