Graphical Interface Design for the Web

1. Louisa Lambregts, Algonquin College, lambrel@algonquincollege.com Graphical Interface Designfor the Web

2. Day 2 Schedule Topics • Discuss Usability and Accessibility. • Review colour theory. • Text as Visual Elements: proximity, spacing, hierarchy, alignment etc. • Interface Trends • Hands-On Final Project – bringing it all together

3. The Elements of Interface Design 1) Usability-how “useable” a site is 2) Visualization-the visual experience of a site 3) Functionality-interactivefeatures that takes sites beyond just providing information 4) Accessibility-removing barriers to accessing content or completing tasks

4. Accessibility • Access to electronic information for users with disabilities • Web pages function with assistive devices

5. Accessibility Can also mean: • Web Standards Accessibility (web browser compatibility) • Low-Bandwidth Accessibility • Mobile Devices

6. 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

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

8. 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

9. The Elements of Interface Design • 1) Usability • 2) VisualizationColour, • 3) Functionality • 4) Accessibility

10. Colour Theory What are the Primary Colours?

11. Colour Theory

12. Colour Theory What are the Secondary Colours?

13. Colour Theory

14. 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

15. Colour Theory

16. Colour Theory Compound Colours All the browns, khakis and earth colours. They contain a mixture of the three primaries. Black and White are not colours But . . . Adding white creates tints. Adding black creates shades.

17. Colour Theory AnalagousColours • Lie on either side of a colour. • Often found in nature. • Feels harmonious.

18. Colour Theory Monochromatic Colours One hue but variations in terms of tints, shades and saturation.

19. Colour Theory Colour Discord Colors 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.

20. 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 Pink Purple Grey Black White Brown

21. Colour Theory Colour Psychology Green Represents nature Calming, refreshing Easiest colour on the eye Bright green represents “go” in a traffic light. I s modern an active. Dark Green Masculine, conservatiive, implies wealth

22. Colour Theory Colour Psychology Blue Overwhelmininglyfavouritecolour. Trustworthy, loyal, dependable. Calm and sedate. “True Blue” Overuse of blue can be seen as cold. Bright Blue Engaging

23. Colour Theory Colour Psychology Yellow Cheery, warm, sunny. Optimistic Also fatiguing on the eye since it can reflect alot of light. Use sparingly as accents. Otherwise , it overpowers.

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

25. Colour Theory Colour Psychology Red 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

26. Colour Theory Colour Psychology Pink Romantic, feminine, soft. Light pink is calming. ‘ Bright pink is attention seeking, flamboyant, confidently feminine.

27. Colour Theory Colour Psychology Purple 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.

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

29. Colour Theory Colour Psychology White 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.

30. Colour Theory Colour Psychology Grey 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.

31. Colour Theory Do we need to worry about web safe palettes? In the past, 8-bit computer systems could only Produce 256 colors. Now, 24 bit is the standard, able to reproduce millions of colours. However, as we design for more mobile devicesin the future, they are 8 bit or sometimes just 1 bit(black and white).

32. Colour Theory Choosing Colour Schemes Online tools exist to help you with this such as: http://www.colorsontheweb.com/colorschemes.asp

33. Texture and the Web Basic Texture Options Background: Gradients Repeating Patterns Textbox, Buttons or Feature Box Headers Rounded CornersGradient Effects Reflections http://www.hongkiat.com/blog/40-greatest-web-interface-design-tutorials-photoshop-tutorial/http://www.hongkiat.com/blog/31-practical-web-interface-design-tutorials/

34. Layout Grid Design Rule of Thirds

35. Resources: Text as Graphic Elements Some visuals to reinforce our discussions …

36. Text as Block Layout Items Balance, Unity, and Focus • http://www.webdesignhelper.co.uk/design_elements/design_theory/design_theory8/design_theory8.shtml

37. Text as Block Layout Items Balance, Unity, and Focus

38. Text as Block Layout Items The importance of padding and discretecontent sections

39. Text as Block Layout Items Being Aware of Graphic Distractions • http://www.webdesignhelper.co.uk/design_elements/design_theory/design_theory8/design_theory8.shtml

40. A Bit About Typography Serif vs Sans-Serif Times Roman Arial GeorgiaCentury Gothic

41. Text Format Other Dimensions Italic Bold K e r n i n g Line Spacing The space that is left between sentences in a paragraph. The space that is left between sentences in a paragraph.

42. 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

43. 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 2010 Article 12: Web Design Trends for 2010

44. Design Trends for 2009 Shneiderman’s Mantra ”convey big picture first, reveal details later”

45. Design Trends for 2009 Speaking Box Navigation

46. The Elements of Interface Design • 1) Usability • 2) Visualization • 3) Functionality (add-on applications) • 4) Accessibility

47. Day 2 Project Design an user interface with a user and purpose in mind. Pick your type of site: • eBusiness • Small Business/Retail • Informational • Entertainment • Educational etc.

48. Day 2 Project What you will produce • 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. • Interface Design of Home Page • Brief Rationale Statementa) why did you chose the colour scheme, the navigational style andcategories, and type of content?