Post on 23-Dec-2015
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?