Design and Process
[Link]
Victoria University, RTO Code 3113
CRICOS Provider No. 00124K (Melbourne) CRICOS
Provider No. 02475D (Sydney)
Understandin Helping the
g the website target
visitors audience in
“Target achieving
audience” their goals
[Link]
Victoria University, RTO Code 3113
CRICOS Provider No. 00124K (Melbourne) CRICOS
Provider No. 02475D (Sydney)
Organizing
Providing
the
design tips
information
[Link]
Victoria University, RTO Code 3113
CRICOS Provider No. 00124K (Melbourne) CRICOS
Provider No. 02475D (Sydney)
Target audience…
Who is the website for
Individuals or Company?
[Link]
Victoria University, RTO Code 3113
CRICOS Provider No. 00124K (Melbourne) CRICOS
Provider No. 02475D (Sydney)
Target Audience: Individual
HTML
• Age
• Gender
• Country
• Living area (Eg; City or village)
• Average income
• Education level
• Occupation
• Working hrs/week
• Accessing device
• How often they visit the website
Target Audience: Company
HTML
• Company Size
• Position of the visiting people
• People in the company will use the website for themselves or
others.
Goals….
Why targeted audience
visit your website?
[Link]
Victoria University, RTO Code 3113
CRICOS Provider No. 00124K (Melbourne) CRICOS
Provider No. 02475D (Sydney)
Key motivations:
HTML
• Visitors looking for general entertainment or acheiving
specific goals.
• If specific goals; personal or professional
Specific goals:
• The want general information (eg.: background on a topic)
HTML
OR
something specific (eg.: specific information about a product).
• Familiarity with the service or product
• Is the information time sensitive?
• Do they need to decide to buy or not?
• Do they need to contact you?
Organizing the
information….
[Link]
Victoria University, RTO Code 3113
CRICOS Provider No. 00124K (Melbourne) CRICOS
Provider No. 02475D (Sydney)
Organizing the information: Site
Map
HTML
• The aim is to create a map of the website pages (Site map).
• Use card sorting technique:
write each piece of information
the visitor needs in a paper,
then categorise these papers
in groups.
• Each group of these papers represents a web page
• ALWAYS FOCUS ON THE VISITOR’S GOALS
Organizing the information: Site
Map
HTML
Organizing the information:
Wireframe
HTML
• A wireframe is a simple sketch of the key information that
needs to go on each page of a site.
• It shows the hierarchy of the information and how much space
it might require.
• Benefit: Making sure that all the information is included
• Focus on information not on the format (colors, fonts ...etc)
• Wireframe can be shown to the client to get a feedback
Organizing the information:
Wireframe
HTML
Design Tips ..
[Link]
Victoria University, RTO Code 3113
CRICOS Provider No. 00124K (Melbourne) CRICOS
Provider No. 02475D (Sydney)
Communicating your message
The primary aim of any visual design is to
communicate the message.
The designer needs to prioritizing and organizing the
information
PROIRITIZING ORGANIZING
• use different styles to • grouping the similar
distinguish the blocks of information.
information.
• By presenting certain
• Creating what is known by types of information in a
“Visual hierarchy” to focus similar visual style users
on main messages and will learn to associate that
information and then style with a particular type
guide them to the sub- of content.
sequent messages.
HTML
Visual Hierarchy:
HTML
• Most web users do not read entire pages. Rather, they skim to
find information.
• Visual hierarchy refers to the order in which your eyes
perceive what they see. It is created by adding visual contrast
between the items being displayed. Items with higher contrast
are recognized and processed first.
• Images create a high visual contrast and often attract the eye
first. They can be used to draw attention to a specific message
within the page.
Visual Hierarchy:
HTML
Grouping and similarity:
HTML
• When making sense of a design, we tend to organize visual
elements into groups.
• Grouping related pieces of information together can make a
design easier to comprehend.
Grouping and similarity:
HTML
Grouping and similarity:
Consistency and Headings
HTML
• Consistency: items in the box are with the same style.
• Heading: the group in the box has a clear heading
Designing Navigation:
HTML
The purpose of site navigation:
• Helps visitors where to go.
• Helps to understand the site and how it is organized.
Designing Navigation:
HTML
The purpose of site navigation:
• Helps visitors where to go.
• Helps to understand the site and how it is organized.
Designing Navigation:
Principles of good navigation:
• Concise: easy to read – limited options (no more than 8 links).
HTML
• Clear: choose descriptive words for the link.
• Selective: links should reflect the sections and content in the
site. Logins and terms and conditions for example should be
elsewhere.
Designing Navigation:
Principles of good navigation:
• Context: users know where they are HTML
• Interactive: Link should be big enough – changes when
hovering on – distinct from other content in the page .
• Consistent: Primary navigation should be the same.
SUMMARY
• It's important to understand who your
target audience is, why they would
come to your site, what information
they want to find and when they are
likely to return.
• Site maps allow you to plan the
structure of a site.
• Wireframes allow you to organize the
information that will need to go on
each page.
[Link]
Victoria University, RTO Code 3113
CRICOS Provider No. 00124K (Melbourne) CRICOS
Provider No. 02475D (Sydney)
SUMMARY
• Design is about communication. Visual
hierarchy helps visitors understand
what you are trying to tell them.
• You can differentiate between pieces of
information using size, color, and style.
• You can use grouping and similarity to
help simplify the information you
present.
[Link]
Victoria University, RTO Code 3113
CRICOS Provider No. 00124K (Melbourne) CRICOS
Provider No. 02475D (Sydney)
