Transcript Graphical Interface Design for the Web

Louisa Lambregts, Algonquin College, [email protected]
Topics
1.
Brief Review – Usability vs Accessibility
2.
Color Theory & Visual Metaphor
3.
Text as Visual Elements: proximity, spacing,
hierarchy, alignment etc.
4.
Layout Design:
Mobile Considerations
Interface Trends
5.
Hands-On Final Project – bringing it all together

Start With a Purpose

Understand How Users Behave On the Web

Content is More Important than Design

Use Website Conventions

Balance Form and Function

Keep It Simple (layout, navigation, language)
“Graphic design is visual information
management using the tools of layout,
typography, and illustration to lead
the reader's eye through the page.”
In a Nutshell:
“The primary purposes of graphic design [for the
web] are to:

Create a clear visual hierarchy of contrast, so you can
see at a glance what is important and what is peripheral

Define functional regions of the page

Group page elements that are related, so that you can
see structure in the content”
From: http://webstyleguide.com/wsg3/7-page-design/3-visual-design.html
“Less is More”
http://www.lachlanbailey.com/
http://sixrevisions.com/design-showcase-inspiration/30-beautifulclean-and-simple-web-designs-for-inspiration/
 Thoughtful decision-making about elements to
include and leave out
 Spacious and uncluttered
“Less is More”
This applies to text information as well.
http://secondandpark.com/
 Design supports goals of site
 Design elements and written words carefully selected
 Personality of individual clearly comes through
Text is a graphical element.
The importance of padding and discrete
content sections
Being Aware of Graphic Distractions
http://www.webdesignhelper.co.uk/design_elements/
design_theory/design_theory8/design_theory8.shtml
5.
Write Concisely
In response to the concerns, the NCAA announced that the
baseball rules committee will recommend a maximum
batted-ball exit velocity of 93 mph and a change in the size
and weight specs of non-wooden bats beginning with the
1999 season.
5.
Write Concisely
Responding to the concerns, the NCAA announced new
recommendations from the baseball rules committee, to
begin with the 1999 season:

Batted-ball exit speed maximum of 93 mph

Change in size and weight specifications for nonwooden bats
5.
Write Concisely
NCAA Suggests Batting Changes
Growing concerns over size and weights of bats has resulted in the
following changes:
 Batted-ball exit speed maximum of 93 mph
 Change in size and weight specifications for non-wooden bats
Jakob Nielsen
1) Feedback: What is happening?
2) Metaphor: Familiarity. Matches real word conventions.
3) Navigation: User control and freedom. Yet provides a way back .
4) Consistency: Apply standards and conventions
5) Error Prevention:
Jakob Nielsen
6) Memory Rather than Recall: Reduce memory load of users.
7) Efficiency: People can quickly find and do what need to regardless
of experience.
6) Design: Minimalistic and simple.
Respects the principles of contrast, repetition, alignment, and
proximity.
9) Recovery: help users recover from errors.
10) Help: Simple communicate the error and what to do about it.
In a Nutshell:
“The primary purposes of graphic design [for the
web] are to:

Create a clear visual hierarchy of contrast, so you can
see at a glance what is important and what is peripheral

Define functional regions of the page

Group page elements that are related, so that you can
see structure in the content”
From: http://webstyleguide.com/wsg3/7-page-design/3-visual-design.html
Proximity and Unity
“unified connectedness”
Modularity and Chunking
-groupings of defined regions for easy scanning
-predictable pattern to assist scanning through site
Consistent Repetition
-creates predictable patterns
Contrast
space, colour, typography/text
From: http://webstyleguide.com/wsg3/7-page-design/3-visual-design.html
Serif vs
Sans Serif
-Kerning: spacing between letters
Font families:
Balance, Unity, and Focus
Certain arrangements
make more sense!
From: http://blogs.sitepoint.com/principles-beautiful-web-design/
Content Patterns
http://sixrevisions.com/user-interface/6popular-content-presentation-design-patterns/
Web sites no longer just provide
content – they offer interactivity
and value-add functionality
Functionality
Web 1.0 vs Web 2.0
Functionality
Web 1.0
vs
Web 2.0

Static content

Dynamic/Changing

Passive experience

Active/Collaborative experience

Two-way

One-way broadcast
of information
Users can now:
•publish own content
•socialize/interact with people
•be entertained via multimedia
•purchase things
•manage their life……
Functionality
Widgets:
http://www.widgetbox.com/
Scripting: javascript
Ajax and Javascript Techniques
Flash Interactive elements
Example of a Flash Learning Object
Block Layout
1 Containing
2 Logo
3 Navigation
4 Content
5 Footer
6 Whitespace
From: http://blogs.sitepoint.com/principles-beautiful-web-design/
Block Layout
#container
#header
#navbar
#content
#footer
From: http://blogs.sitepoint.com/principles-beautiful-web-design/
Grid Theory and the Rule of Thirds
Grid Theory and the Rule of Thirds
From the Article: Principles of Beautiful Web Design
By Jason Beaird
Grid Theory and the Rule of Thirds
Examples of Layout Based on Grid Theory
http://www.designbygrid.com/showcase/archive
Newspaper/Magazine Sites
http://cbc.com
Examples of Responsive Design
http://mediaqueri.es/
Compound Colours
All the browns, khakis and earth colours.
They contain a mixture of the three primaries.
Black and White are not colours
But . . .
Adding white creates tints.
Adding black creates shades.
Analagous Colours
Lie on either side of a colour.
Often found in nature.
Feels harmonious.
Monochromatic Colours
One hue but variations in terms
of tints, shades and saturation.
Colour Discord
Colors that are widely separated on the color wheel are said to “clash”. They are
visually disturbing.
However, they do capture attention.
Can see them used in advertisements.
Colour Psychology
In your groups, spend 2 minutes talking about colour.
When you see these colours in web sites, what thoughts and
feelings come to mind?
Green
Blue
Yellow
Grey
Black
Orange
Red
Pink
Purple
Colour Psychology
Green
Represents nature
Calming, refreshing
Easiest colour on the eye
Bright green represents “go” in a traffic light. I
s modern an active.
Dark Green
Masculine, conservatiive, implies wealth
Colour Psychology
Blue
Overwhelminingly favourite colour.
Trustworthy, loyal, dependable.
Calm and sedate.
“True Blue”
Overuse of blue can be seen as cold.
Bright Blue
Engaging
Colour Psychology
Yellow
Cheery, warm, sunny.
Optimistic
Also fatiguing on the eye since it can reflect a
lot of light.
Use sparingly as accents. Otherwise , it overpowers.
Cultural Connotations
Egypt: mourning.
Japan: courage
India: color for merchants.
http://www.tangram.li/
Colour Psychology
Orange
Fun, flamboyant, exciting.
Stimulates activity or a call to action.
Warmth and energy.
Rust or terra cotta have earthy connotation.
Captures attention (eg orange traffic cones).
Friendly.
http://www.neighborino.com/
Colour Psychology
Red
Confident, intense, bold.
Stimulates a faster heart rate.
Captures attention.
If overused, can be overwhelming and
aggressive.
With black, is sophisticated. White calms down red.
“Red has guts .... deep, strong, dramatic.”
Valentino, fashion designer
Colour Psychology
Pink
Romantic, feminine, soft.
Light pink is calming. ‘
Bright pink is attention seeking, flamboyant,
confidently feminine.
Colour Psychology
Purple
Royalty, wealth,luxury.
New age, spirituality.
Sense of artificiality since it’s rarely found in nature.
Liked by creative, eccentric types and adolescent girls.
Can be calming
Not used on its in own in website a lot. Used as an accent.
Colour Psychology
Black
Timeless, sophisticated.
Authority and power.
In some cases, represents submission (e.g. priest wear black)
Can be stark and dramatic, mournful.
Colour Psychology
Clean, pure, neutral, genuine.
Get immediate sense of credibility: straight up.
Can be matched with any colour.
Minimalistic.
Black text on white provides contrast that reads well.
Colour Psychology
Grey
Timeless, practical.
Can be matched with any colour.
Expectant colour – works best to have other colours
with it to boost the mood. Especially since it is associated
with depression and hopelessness.
Choosing Colour Schemes
Online tools exist to help you with this such as:
http://www.colorsontheweb.com/colorschemes.asp
Basic Texture Options
Background:
Gradients
Repeating Patterns
Textbox, Buttons or Feature Box Headers
Rounded Corners
Gradient Effects
Reflections
http://www.hongkiat.com/blog/40-greatest-web-interface-design-tutorials-photoshop-tutorial/
http://www.hongkiat.com/blog/31-practical-web-interface-design-tutorials/
Metaphorical Designs
e.g. Kevin Lucius
Review the Article as a Group
Trends for 2012
http://wp.smashingmagazine.com/smashing-special-wordpress-theme-trends-for-2012-design/
What was one trend that stuck out for you?
Design an user interface with a user and
purpose in mind.
Pick your type of site:
1)
2)
3)
4)
5)
eBusiness
Small Business/Retail
Informational
Entertainment
Educational etc.
What you will produce
1.
Brief Specifications Document
a) purpose of site
b) target audience
c) summary of 2 competitor sites with listing of their functional tools,
colour scheme, type of content (main navigational categories) and other
special details.
2.
Interface Layout of Home Page
a) Indicate colour scheme,
b) layout pattern (functional areas, column, navigation etc.)
c) type of content and functionality
3.
Brief Rationale Statement
a) why did you chose the colour scheme, the navigational style and
categories, and type of content?
Like Photoshop, this programs is well-suited
for designing web graphics.