Graphical Interface Designfor the WebLouisa Lambregts, Algonquin College, lambrel@algonquincollege.com

Day 2 Schedule

Topics

1. Finish Discuss Visualization and look at Functionality and Accessibility.

2. Review layout and typography.3. Review colour theory. 4. Text as Visual Elements: proximity, spacing,

hierarchy, alignment etc.5. Interface Trends6. Hands-On Final Project – bringing it all together

The Elements of Interface Design1) Usability

-how “useable” a site is

2) Visualization-the visual experience of a site

3) Functionality-interactive features that takes sites beyond just providing information

4) Accessibility-removing barriers to accessing content or completing tasks

Review: Elements of Design

Balance

Proportion

Dominance(Emphasis)

Rhythm

Unity

Review: Elements of DesignBalance

Review: Elements of DesignBalance

Symmetrical Asymmetrical

Review: Elements of Design

Proportion

Review: Elements of Design

Dominance(Emphasis)-”point of focus”

Review: Elements of Design

Rhythm

-”timed movement through space”-pattern, repetition, alternation-regular, flowing (sense of movement), and progressive

Review: Elements of Design

Rhythm

Review: Elements of Design

Rhythm

Review: Elements of Design

Rhythm

Review: Elements of Design

Rhythm

Lack of rhythm

Review: Elements of Design

UnityThe sense that things belong together

•Contrast

•Repetition

•Alignment

•Proximity

Review: Elements of Design

Unity

Review: Elements of Design

Unity

Review: Principles of Perception

Gestalt Theory•Similarity

•Proximity

•Continuity

•Closure

•Area

•Symmetry

Closure

Principles and Elements of DesignVisual Metaphor

Interface Design Trends: Article 13Web Design Trends: Real-Life Metaphors and CSS3 Adaption

Visual Metaphors in Web Design: Article 14http://nikhilmisal.com/using-visual-metaphors-in-web-design-part-1/

Text as Block Layout Items

Balance, Unity, and Focus

http://www.webdesignhelper.co.uk/design_elements/design_theory/design_theory8/design_theory8.shtml

Text as Block Layout Items

Balance, Unity, and Focus

Text as Block Layout Items

The importance of padding and discretecontent sections

Text as Block Layout Items

Being Aware of Graphic Distractions

http://www.webdesignhelper.co.uk/design_elements/design_theory/design_theory8/design_theory8.shtml

A Bit About Typography

Serif vs Sans-Serif

Times Roman Arial

Georgia Century Gothic

Text Format

Other Dimensions

ItalicBold

K e r n i n g

Line Spacing

The space that is left betweensentences in a paragraph.The space that is left betweensentences in a paragraph.

Typography

Units of Measure

www.kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/#

1em = 12pt = 16px = 100%.

Fixed vs Relative sizing

Colour Theory

What are the Primary Colours?

Colour Theory

Colour Theory

What are the Secondary Colours?

Colour Theory

Colour Theory

What are the Tertiary Colours?

Six colors made by mixing one primary color with one secondary color

red-orange, yellow-orange, yellow-green, blue-green, blue-violet, and red-violet

Colour Theory

Colour Theory

Compound ColoursAll the browns, khakis and earth colours.They contain a mixture of the three primaries.

Black and White are not colours

Adding white creates tints.Adding black creates shades.

But . . .

Colour Theory

Analagous Colours•Lie on either side of a colour.

•Often found in nature.

•Feels harmonious.

Colour Theory

Analagous Colours•Lie on either side of a colour.

•Often found in nature.

•Feels harmonious.

Colour Theory

Other colour schemes

http://www.color-wheel-pro.com/color-theory-basics.html

Colour Theory

Monochromatic ColoursOne hue but variations in terms of tints, shades and saturation.

Colour Theory

Colour DiscordColors 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.

Activity

Colour Psychology

In your groups, spend 10 minutes talking about colour.

When you see these colours in web sites, what thoughts and feelings come to mind?

Green Blue Yellow Orange Red Purple

Grey Black White

Pink

Brown

Colour Theory

Colour Psychology

Represents natureCalming, refreshingEasiest colour on the eyeBright green represents “go” in a traffic light. Is modern an active.

Green

Dark GreenMasculine, conservatiive, implies wealth

Colour Theory

Colour Psychology

Overwhelming favourite colour.Trustworthy, loyal, dependable.Calm and sedate.“True Blue”Overuse of blue can be seen as cold.

Blue

Bright BlueEngaging

Colour Theory

Colour Psychology

Cheery, warm, sunny.OptimisticAlso fatiguing on the eye since it can reflect alot of light.Use sparingly as accents. Otherwise , it overpowers.

Yellow

Colour Theory

Colour Psychology

Fun, flamboyant, Excitement.Stimulates activity.Warmth and energy.Rust or terra cotta have earthy connotation.Captures attention (eg orange traffic cones)

Orange

Colour Theory

Colour Psychology

Confident, intense, bold.Stimulates a faster heart rate.Captures attention.If overused, can be overwhelming andaggressive.

With black, is sophisticated. White calms down red.

“Red has guts .... deep, strong, dramatic.”Valentino, fashion designer

Red

Colour Theory

Colour Psychology

Romantic, feminine, soft.Light pink is calming. Bright pink is attention seeking, flamboyant,confidently feminine.

Pink

Colour Theory

Colour Psychology

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.

Purple

Colour Theory

Colour Psychology

Timeless, sophisticated.Authority and power.In some cases, represents submission (e.g. priest wear black)Can be stark and dramatic, mournful.

Black

Colour Theory

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.

White

Colour Theory

Colour Psychology

Timeless, practical. Can be matched with any colour.Expectant colour – works best to have other colourswith it to boost the mood. Especially since it is associatedwith depression and hopelessness.

Grey

Colour Theory

Choosing Colour Schemes

Online tools exist to help you with this such as:

http://www.colorsontheweb.com/colorschemes.asp

Texture and the Web

Basic Texture OptionsBackground:

GradientsRepeating Patterns

Textbox, Buttons or Feature Box Headers

Rounded CornersGradient EffectsReflections

http://www.hongkiat.com/blog/40-greatest-web-interface-design-tutorials-photoshop-tutorial/http://www.hongkiat.com/blog/31-practical-web-interface-design-tutorials/

The Elements of Interface Design1) Usability

-how “useable” a site is

2) Visualization-the visual experience of a site

3) Functionality-interactive features that takes sites beyond just providing information

4) Accessibility-removing barriers to accessing content or completing tasks

The Elements of Interface Design

Functionality

Web sites no longer just provide content – they offer interactivity and value-add functionality

The Elements of Interface Design

Functionality

Web 1.0 vs Web 2.0

The Elements of Interface Design

Functionality

Web 1.0 vs Web 2.0

Static content

Passive experience

One-way broadcastof information

Dynamic/Changing Active/Collaborative experience Two-way

Users can now:

•publish own content•socialize/interact with people•be entertained via multimedia•purchase things•manage their life……

The Elements of Interface Design

Functionality

Widgets: http://www.widgetbox.com/

Scripting: javascriptAjax and Javascript Techniques

Flash Interactive elementsExample of a Flash Learning Object

The Elements of Interface Design1) Usability

-how “useable” a site is

2) Visualization-the visual experience of a site

3) Functionality-interactive features that takes sites beyond just providing information

4) Accessibility-removing barriers to accessing content or completing tasks

Accessibility

1.Access to electronic information for users with disabilities

2.Web pages function with assistive devices

Accessibility

Can also mean:

1.Web Standards Accessibility (web browser compatibility)

2.Low-Bandwidth Accessibility

3.Mobile Devices

AccessibilityKinds of Disabilities (and Disadvantages)

http://www.alistapart.com/articles/wiwa/

Visually Impaired (blind/low or partial vision)

Deaf

Keyboard/Voice-Only Users

Epileptic Users

New to Computers

First Language Isn’t English

AccessibilityKinds of Disabilities (and Disadvantages)

http://www.alistapart.com/articles/wiwa/

Visually Impaired (blind/low or partial vision)

Deaf

Keyboard/Voice-Only Users

Epileptic Users

New to Computers

First Language Isn’t English

Accessibility

The “Uber”, Thorough Checklist

http://www.maxdesign.com.au/articles/checklist/

Focus for Today: 3) Accessiblity for Users

Also look at: 5) Basic Usability

Accessibility

1.Access to electronic information for users with disabilities

2.Web pages function with assistive devices

Accessibility

Can also mean:

1.Web Standards Accessibility (web browser compatibility)

2.Low-Bandwidth Accessibility

3.Mobile Devices

Read Web Standards and Validation Articles on Wiki

AccessibilityKinds of Disabilities (and Disadvantages)

http://www.alistapart.com/articles/wiwa/

Visually Impaired (blind/low or partial vision)

Deaf

Keyboard/Voice-Only Users

Epileptic Users

New to Computers

First Language Isn’t English

AccessibilityKinds of Disabilities (and Disadvantages)

http://www.alistapart.com/articles/wiwa/

Visually Impaired (blind/low or partial vision)

Deaf

Keyboard/Voice-Only Users

Epileptic Users

New to Computers

First Language Isn’t English

Accessibility

The “Uber”, Thorough Checklist

http://www.maxdesign.com.au/articles/checklist/

Focus for Today: 3) Accessiblity for Users

Also look at: 5) Basic Usability

Activity

Design Trends for 2009

In your groups, browse the following articles:

Article 9: Trends for 2009 Article 10: Current Web Design Trends for 2009

Article 11: Trends for 2010Article 12: Web Design Trends for 2010

Design Trends for 2009

Shneiderman’s Mantra

”convey big picture first, reveal details later”

Design Trends for 2009

Speaking Box Navigation

Day 2 Project

Design an user interface with a user and purpose in mind.

Pick your type of site:

1) eBusiness2) Small Business/Retail3) Informational4) Entertainment5) Educational etc.

Day 2 Project

What you will produce

1. Brief Specifications Documenta) purpose of siteb) target audiencec) 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 Design of Home Page

3. Brief Rationale Statementa) why did you chose the colour scheme, the navigational style andcategories, and type of content?