Louisa Lambregts, Algonquin College, [email protected].
-
Upload
kathlyn-harris -
Category
Documents
-
view
218 -
download
0
Transcript of Louisa Lambregts, Algonquin College, [email protected].
![Page 1: Louisa Lambregts, Algonquin College, lambrel@algonquincollege.com.](https://reader035.fdocuments.net/reader035/viewer/2022062421/56649db45503460f94aa59f1/html5/thumbnails/1.jpg)
Graphical Interface Designfor the WebLouisa Lambregts, Algonquin College, [email protected]
![Page 2: Louisa Lambregts, Algonquin College, lambrel@algonquincollege.com.](https://reader035.fdocuments.net/reader035/viewer/2022062421/56649db45503460f94aa59f1/html5/thumbnails/2.jpg)
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
![Page 3: Louisa Lambregts, Algonquin College, lambrel@algonquincollege.com.](https://reader035.fdocuments.net/reader035/viewer/2022062421/56649db45503460f94aa59f1/html5/thumbnails/3.jpg)
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
![Page 4: Louisa Lambregts, Algonquin College, lambrel@algonquincollege.com.](https://reader035.fdocuments.net/reader035/viewer/2022062421/56649db45503460f94aa59f1/html5/thumbnails/4.jpg)
Accessibility
1.Access to electronic information for users with disabilities
2.Web pages function with assistive devices
![Page 5: Louisa Lambregts, Algonquin College, lambrel@algonquincollege.com.](https://reader035.fdocuments.net/reader035/viewer/2022062421/56649db45503460f94aa59f1/html5/thumbnails/5.jpg)
Accessibility
Can also mean:
1.Web Standards Accessibility (web browser compatibility)
2.Low-Bandwidth Accessibility
3.Mobile Devices
![Page 6: Louisa Lambregts, Algonquin College, lambrel@algonquincollege.com.](https://reader035.fdocuments.net/reader035/viewer/2022062421/56649db45503460f94aa59f1/html5/thumbnails/6.jpg)
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
![Page 7: Louisa Lambregts, Algonquin College, lambrel@algonquincollege.com.](https://reader035.fdocuments.net/reader035/viewer/2022062421/56649db45503460f94aa59f1/html5/thumbnails/7.jpg)
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
![Page 8: Louisa Lambregts, Algonquin College, lambrel@algonquincollege.com.](https://reader035.fdocuments.net/reader035/viewer/2022062421/56649db45503460f94aa59f1/html5/thumbnails/8.jpg)
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
![Page 9: Louisa Lambregts, Algonquin College, lambrel@algonquincollege.com.](https://reader035.fdocuments.net/reader035/viewer/2022062421/56649db45503460f94aa59f1/html5/thumbnails/9.jpg)
The Elements of Interface Design
1) Usability
2) VisualizationColour,
3) Functionality
4) Accessibility
![Page 10: Louisa Lambregts, Algonquin College, lambrel@algonquincollege.com.](https://reader035.fdocuments.net/reader035/viewer/2022062421/56649db45503460f94aa59f1/html5/thumbnails/10.jpg)
Colour Theory
What are the Primary Colours?
![Page 11: Louisa Lambregts, Algonquin College, lambrel@algonquincollege.com.](https://reader035.fdocuments.net/reader035/viewer/2022062421/56649db45503460f94aa59f1/html5/thumbnails/11.jpg)
Colour Theory
![Page 12: Louisa Lambregts, Algonquin College, lambrel@algonquincollege.com.](https://reader035.fdocuments.net/reader035/viewer/2022062421/56649db45503460f94aa59f1/html5/thumbnails/12.jpg)
Colour Theory
What are the Secondary Colours?
![Page 13: Louisa Lambregts, Algonquin College, lambrel@algonquincollege.com.](https://reader035.fdocuments.net/reader035/viewer/2022062421/56649db45503460f94aa59f1/html5/thumbnails/13.jpg)
Colour Theory
![Page 14: Louisa Lambregts, Algonquin College, lambrel@algonquincollege.com.](https://reader035.fdocuments.net/reader035/viewer/2022062421/56649db45503460f94aa59f1/html5/thumbnails/14.jpg)
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
![Page 15: Louisa Lambregts, Algonquin College, lambrel@algonquincollege.com.](https://reader035.fdocuments.net/reader035/viewer/2022062421/56649db45503460f94aa59f1/html5/thumbnails/15.jpg)
Colour Theory
![Page 16: Louisa Lambregts, Algonquin College, lambrel@algonquincollege.com.](https://reader035.fdocuments.net/reader035/viewer/2022062421/56649db45503460f94aa59f1/html5/thumbnails/16.jpg)
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 . . .
![Page 17: Louisa Lambregts, Algonquin College, lambrel@algonquincollege.com.](https://reader035.fdocuments.net/reader035/viewer/2022062421/56649db45503460f94aa59f1/html5/thumbnails/17.jpg)
Colour Theory
Analagous Colours•Lie on either side of a colour.
•Often found in nature.
•Feels harmonious.
![Page 18: Louisa Lambregts, Algonquin College, lambrel@algonquincollege.com.](https://reader035.fdocuments.net/reader035/viewer/2022062421/56649db45503460f94aa59f1/html5/thumbnails/18.jpg)
Colour Theory
Monochromatic ColoursOne hue but variations in terms of tints, shades and saturation.
![Page 19: Louisa Lambregts, Algonquin College, lambrel@algonquincollege.com.](https://reader035.fdocuments.net/reader035/viewer/2022062421/56649db45503460f94aa59f1/html5/thumbnails/19.jpg)
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.
![Page 20: Louisa Lambregts, Algonquin College, lambrel@algonquincollege.com.](https://reader035.fdocuments.net/reader035/viewer/2022062421/56649db45503460f94aa59f1/html5/thumbnails/20.jpg)
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
![Page 21: Louisa Lambregts, Algonquin College, lambrel@algonquincollege.com.](https://reader035.fdocuments.net/reader035/viewer/2022062421/56649db45503460f94aa59f1/html5/thumbnails/21.jpg)
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
![Page 22: Louisa Lambregts, Algonquin College, lambrel@algonquincollege.com.](https://reader035.fdocuments.net/reader035/viewer/2022062421/56649db45503460f94aa59f1/html5/thumbnails/22.jpg)
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
![Page 23: Louisa Lambregts, Algonquin College, lambrel@algonquincollege.com.](https://reader035.fdocuments.net/reader035/viewer/2022062421/56649db45503460f94aa59f1/html5/thumbnails/23.jpg)
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
![Page 24: Louisa Lambregts, Algonquin College, lambrel@algonquincollege.com.](https://reader035.fdocuments.net/reader035/viewer/2022062421/56649db45503460f94aa59f1/html5/thumbnails/24.jpg)
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
![Page 25: Louisa Lambregts, Algonquin College, lambrel@algonquincollege.com.](https://reader035.fdocuments.net/reader035/viewer/2022062421/56649db45503460f94aa59f1/html5/thumbnails/25.jpg)
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
![Page 26: Louisa Lambregts, Algonquin College, lambrel@algonquincollege.com.](https://reader035.fdocuments.net/reader035/viewer/2022062421/56649db45503460f94aa59f1/html5/thumbnails/26.jpg)
Colour Theory
Colour Psychology
Romantic, feminine, soft.Light pink is calming. ‘Bright pink is attention seeking, flamboyant,confidently feminine.
Pink
![Page 27: Louisa Lambregts, Algonquin College, lambrel@algonquincollege.com.](https://reader035.fdocuments.net/reader035/viewer/2022062421/56649db45503460f94aa59f1/html5/thumbnails/27.jpg)
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
![Page 28: Louisa Lambregts, Algonquin College, lambrel@algonquincollege.com.](https://reader035.fdocuments.net/reader035/viewer/2022062421/56649db45503460f94aa59f1/html5/thumbnails/28.jpg)
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
![Page 29: Louisa Lambregts, Algonquin College, lambrel@algonquincollege.com.](https://reader035.fdocuments.net/reader035/viewer/2022062421/56649db45503460f94aa59f1/html5/thumbnails/29.jpg)
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
![Page 30: Louisa Lambregts, Algonquin College, lambrel@algonquincollege.com.](https://reader035.fdocuments.net/reader035/viewer/2022062421/56649db45503460f94aa59f1/html5/thumbnails/30.jpg)
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
![Page 31: Louisa Lambregts, Algonquin College, lambrel@algonquincollege.com.](https://reader035.fdocuments.net/reader035/viewer/2022062421/56649db45503460f94aa59f1/html5/thumbnails/31.jpg)
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).
![Page 32: Louisa Lambregts, Algonquin College, lambrel@algonquincollege.com.](https://reader035.fdocuments.net/reader035/viewer/2022062421/56649db45503460f94aa59f1/html5/thumbnails/32.jpg)
Colour Theory
Choosing Colour Schemes
Online tools exist to help you with this such as:
http://www.colorsontheweb.com/colorschemes.asp
![Page 33: Louisa Lambregts, Algonquin College, lambrel@algonquincollege.com.](https://reader035.fdocuments.net/reader035/viewer/2022062421/56649db45503460f94aa59f1/html5/thumbnails/33.jpg)
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/
![Page 34: Louisa Lambregts, Algonquin College, lambrel@algonquincollege.com.](https://reader035.fdocuments.net/reader035/viewer/2022062421/56649db45503460f94aa59f1/html5/thumbnails/34.jpg)
Layout
Grid Design
Rule of Thirds
![Page 35: Louisa Lambregts, Algonquin College, lambrel@algonquincollege.com.](https://reader035.fdocuments.net/reader035/viewer/2022062421/56649db45503460f94aa59f1/html5/thumbnails/35.jpg)
Resources: Text as Graphic Elements
Some visuals to reinforce our discussions
…
![Page 36: Louisa Lambregts, Algonquin College, lambrel@algonquincollege.com.](https://reader035.fdocuments.net/reader035/viewer/2022062421/56649db45503460f94aa59f1/html5/thumbnails/36.jpg)
Text as Block Layout Items
Balance, Unity, and Focus
http://www.webdesignhelper.co.uk/design_elements/design_theory/design_theory8/design_theory8.shtml
![Page 37: Louisa Lambregts, Algonquin College, lambrel@algonquincollege.com.](https://reader035.fdocuments.net/reader035/viewer/2022062421/56649db45503460f94aa59f1/html5/thumbnails/37.jpg)
Text as Block Layout Items
Balance, Unity, and Focus
![Page 38: Louisa Lambregts, Algonquin College, lambrel@algonquincollege.com.](https://reader035.fdocuments.net/reader035/viewer/2022062421/56649db45503460f94aa59f1/html5/thumbnails/38.jpg)
Text as Block Layout Items
The importance of padding and discretecontent sections
![Page 39: Louisa Lambregts, Algonquin College, lambrel@algonquincollege.com.](https://reader035.fdocuments.net/reader035/viewer/2022062421/56649db45503460f94aa59f1/html5/thumbnails/39.jpg)
Text as Block Layout Items
Being Aware of Graphic Distractions
http://www.webdesignhelper.co.uk/design_elements/design_theory/design_theory8/design_theory8.shtml
![Page 40: Louisa Lambregts, Algonquin College, lambrel@algonquincollege.com.](https://reader035.fdocuments.net/reader035/viewer/2022062421/56649db45503460f94aa59f1/html5/thumbnails/40.jpg)
A Bit About Typography
Serif vs Sans-Serif
Times Roman Arial
Georgia Century Gothic
![Page 41: Louisa Lambregts, Algonquin College, lambrel@algonquincollege.com.](https://reader035.fdocuments.net/reader035/viewer/2022062421/56649db45503460f94aa59f1/html5/thumbnails/41.jpg)
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.
![Page 42: Louisa Lambregts, Algonquin College, lambrel@algonquincollege.com.](https://reader035.fdocuments.net/reader035/viewer/2022062421/56649db45503460f94aa59f1/html5/thumbnails/42.jpg)
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
![Page 43: Louisa Lambregts, Algonquin College, lambrel@algonquincollege.com.](https://reader035.fdocuments.net/reader035/viewer/2022062421/56649db45503460f94aa59f1/html5/thumbnails/43.jpg)
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
![Page 44: Louisa Lambregts, Algonquin College, lambrel@algonquincollege.com.](https://reader035.fdocuments.net/reader035/viewer/2022062421/56649db45503460f94aa59f1/html5/thumbnails/44.jpg)
Design Trends for 2009
Shneiderman’s Mantra
”convey big picture first, reveal details later”
![Page 45: Louisa Lambregts, Algonquin College, lambrel@algonquincollege.com.](https://reader035.fdocuments.net/reader035/viewer/2022062421/56649db45503460f94aa59f1/html5/thumbnails/45.jpg)
Design Trends for 2009
Speaking Box Navigation
![Page 46: Louisa Lambregts, Algonquin College, lambrel@algonquincollege.com.](https://reader035.fdocuments.net/reader035/viewer/2022062421/56649db45503460f94aa59f1/html5/thumbnails/46.jpg)
The Elements of Interface Design
1) Usability
2) Visualization
3) Functionality (add-on applications)
4) Accessibility
![Page 47: Louisa Lambregts, Algonquin College, lambrel@algonquincollege.com.](https://reader035.fdocuments.net/reader035/viewer/2022062421/56649db45503460f94aa59f1/html5/thumbnails/47.jpg)
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.
![Page 48: Louisa Lambregts, Algonquin College, lambrel@algonquincollege.com.](https://reader035.fdocuments.net/reader035/viewer/2022062421/56649db45503460f94aa59f1/html5/thumbnails/48.jpg)
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?