Graphical Interface Design for the Web
description
Transcript of Graphical Interface Design for the Web
![Page 1: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/1.jpg)
Graphical Interface Designfor the WebLouisa Lambregts, Algonquin College, [email protected]
![Page 2: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/2.jpg)
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
![Page 3: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/3.jpg)
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
![Page 4: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/4.jpg)
Review: Elements of Design
Balance
Proportion
Dominance(Emphasis)
Rhythm
Unity
![Page 5: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/5.jpg)
Review: Elements of DesignBalance
![Page 6: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/6.jpg)
Review: Elements of DesignBalance
Symmetrical Asymmetrical
![Page 7: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/7.jpg)
Review: Elements of Design
Proportion
![Page 8: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/8.jpg)
Review: Elements of Design
Dominance(Emphasis)-”point of focus”
![Page 9: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/9.jpg)
Review: Elements of Design
Rhythm
-”timed movement through space”-pattern, repetition, alternation-regular, flowing (sense of movement), and progressive
![Page 10: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/10.jpg)
Review: Elements of Design
Rhythm
![Page 11: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/11.jpg)
Review: Elements of Design
Rhythm
![Page 12: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/12.jpg)
Review: Elements of Design
Rhythm
![Page 13: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/13.jpg)
Review: Elements of Design
Rhythm
Lack of rhythm
![Page 14: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/14.jpg)
Review: Elements of Design
UnityThe sense that things belong together
•Contrast
•Repetition
•Alignment
•Proximity
![Page 15: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/15.jpg)
Review: Elements of Design
Unity
![Page 16: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/16.jpg)
Review: Elements of Design
Unity
![Page 17: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/17.jpg)
Review: Principles of Perception
Gestalt Theory•Similarity
•Proximity
•Continuity
•Closure
•Area
•Symmetry
Closure
![Page 18: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/18.jpg)
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/
![Page 19: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/19.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 20: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/20.jpg)
Text as Block Layout Items
Balance, Unity, and Focus
![Page 21: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/21.jpg)
Text as Block Layout Items
The importance of padding and discretecontent sections
![Page 22: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/22.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 23: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/23.jpg)
A Bit About Typography
Serif vs Sans-Serif
Times Roman Arial
Georgia Century Gothic
![Page 24: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/24.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 25: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/25.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 26: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/26.jpg)
Colour Theory
What are the Primary Colours?
![Page 27: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/27.jpg)
Colour Theory
![Page 28: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/28.jpg)
Colour Theory
What are the Secondary Colours?
![Page 29: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/29.jpg)
Colour Theory
![Page 30: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/30.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 31: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/31.jpg)
Colour Theory
![Page 32: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/32.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 33: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/33.jpg)
Colour Theory
Analagous Colours•Lie on either side of a colour.
•Often found in nature.
•Feels harmonious.
![Page 34: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/34.jpg)
Colour Theory
Analagous Colours•Lie on either side of a colour.
•Often found in nature.
•Feels harmonious.
![Page 35: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/35.jpg)
Colour Theory
Other colour schemes
http://www.color-wheel-pro.com/color-theory-basics.html
![Page 36: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/36.jpg)
Colour Theory
Monochromatic ColoursOne hue but variations in terms of tints, shades and saturation.
![Page 37: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/37.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 38: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/38.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 39: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/39.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 40: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/40.jpg)
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
![Page 41: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/41.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 42: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/42.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 43: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/43.jpg)
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
![Page 44: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/44.jpg)
Colour Theory
Colour Psychology
Romantic, feminine, soft.Light pink is calming. Bright pink is attention seeking, flamboyant,confidently feminine.
Pink
![Page 45: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/45.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 46: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/46.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 47: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/47.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 48: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/48.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 49: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/49.jpg)
Colour Theory
Choosing Colour Schemes
Online tools exist to help you with this such as:
http://www.colorsontheweb.com/colorschemes.asp
![Page 50: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/50.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 51: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/51.jpg)
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
![Page 52: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/52.jpg)
The Elements of Interface Design
Functionality
Web sites no longer just provide content – they offer interactivity and value-add functionality
![Page 53: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/53.jpg)
The Elements of Interface Design
Functionality
Web 1.0 vs Web 2.0
![Page 54: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/54.jpg)
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……
![Page 55: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/55.jpg)
The Elements of Interface Design
Functionality
Widgets: http://www.widgetbox.com/
Scripting: javascriptAjax and Javascript Techniques
Flash Interactive elementsExample of a Flash Learning Object
![Page 56: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/56.jpg)
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
![Page 57: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/57.jpg)
Accessibility
1.Access to electronic information for users with disabilities
2.Web pages function with assistive devices
![Page 58: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/58.jpg)
Accessibility
Can also mean:
1.Web Standards Accessibility (web browser compatibility)
2.Low-Bandwidth Accessibility
3.Mobile Devices
![Page 59: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/59.jpg)
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
![Page 60: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/60.jpg)
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
![Page 61: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/61.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 62: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/62.jpg)
Accessibility
1.Access to electronic information for users with disabilities
2.Web pages function with assistive devices
![Page 63: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/63.jpg)
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
![Page 64: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/64.jpg)
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
![Page 65: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/65.jpg)
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
![Page 66: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/66.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 67: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/67.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 68: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/68.jpg)
Design Trends for 2009
Shneiderman’s Mantra
”convey big picture first, reveal details later”
![Page 69: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/69.jpg)
Design Trends for 2009
Speaking Box Navigation
![Page 70: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/70.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 71: Graphical Interface Design for the Web](https://reader036.fdocuments.in/reader036/viewer/2022062501/56815f3e550346895dce12a3/html5/thumbnails/71.jpg)
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?