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

Day 2 Schedule

Topics

1. Discuss Usability and Accessibility.

2. Review colour theory.

3. Text as Visual Elements: proximity, spacing, hierarchy, alignment etc.

4. Interface Trends

5. Hands-On Final Project – bringing it all together

The Elements of Interface Design

1) 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

Accessibility

Kinds 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

Kinds 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

The Elements of Interface Design

1) Usability

2) VisualizationColour,

3) Functionality

4) Accessibility

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

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

Overwhelminingly 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 overwheleming 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

Do we need to worry about web safe palettes?

In the past, 8-bit computer systems could onlyProduce 256 colors.

Now, 24 bit is the standard, able to reproducemillions of colours.

However, as we design for more mobile devicesin the future, they are 8 bit or sometimes just 1 bit(black and white).

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/

Layout

Grid Design

Rule of Thirds

Resources: Text as Graphic Elements

Some visuals to reinforce our discussions

…

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

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

The Elements of Interface Design

1) Usability

2) Visualization

3) Functionality (add-on applications)

4) Accessibility

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 3 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?