Graphical Interface Design for the Web

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

2. Day 2 Schedule Topics • Brief Review – Usability vs Accessibility • Color Theory & Visual Metaphor • Text as Visual Elements: proximity, spacing, hierarchy, alignment etc. • Layout Design:Mobile ConsiderationsInterface Trends • Hands-On Final Project – bringing it all together

3. Principles of Effective Web Design • Start With a Purpose • Understand How Users Behave On the Web • Content is More Important than Design • Use Website Conventions • Balance Form and Function • Keep It Simple (layout, navigation, language)

4. Graphic Design Is . . . • “Graphic design is visual information • management using the tools of layout, • typography, and illustration to lead • the reader's eye through the page.”

5. Graphical Interface Design Is . . . In a Nutshell: “The primary purposes of graphic design [for the web] are to: • Create a clear visual hierarchy of contrast, so you can see at a glance what is important and what is peripheral • Define functional regions of the page • Group page elements that are related, so that you can see structure in the content” From: http://webstyleguide.com/wsg3/7-page-design/3-visual-design.html

6. Rule of Thumb: Good Design “Less is More” http://www.lachlanbailey.com/http://sixrevisions.com/design-showcase-inspiration/30-beautiful-clean-and-simple-web-designs-for-inspiration/ • Thoughtful decision-making about elements toinclude and leave out • Spacious and uncluttered

7. Rule of Thumb: Good Design “Less is More” This applies to text information as well.http://secondandpark.com/ • Design supports goals of site • Design elements and written words carefully selected • Personality of individual clearly comes through Text is a graphical element.

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

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

10. Principles of Effective Web Design • Write Concisely In response to the concerns, the NCAA announced that the baseball rules committee will recommend a maximum batted-ball exit velocity of 93 mph and a change in the size and weight specs of non-wooden bats beginning with the 1999 season.

11. Principles of Effective Web Design • Write Concisely Responding to the concerns, the NCAA announced new recommendations from the baseball rules committee, to begin with the 1999 season: • Batted-ball exit speed maximum of 93 mph • Change in size and weight specifications for non-wooden bats

12. Principles of Effective Web Design • Write Concisely NCAA Suggests Batting Changes Growing concerns over size and weights of bats has resulted in the following changes: • Batted-ball exit speed maximum of 93 mph • Change in size and weight specifications for non-wooden bats

13. Ten Usability Heuristics Jakob Nielsen 1) Feedback: What is happening? 2) Metaphor: Familiarity. Matches real word conventions. 3) Navigation: User control and freedom. Yet provides a way back . 4) Consistency: Apply standards and conventions 5) Error Prevention:

14. Ten Usability Heuristics Jakob Nielsen 6) Memory Rather than Recall: Reduce memory load of users. 7) Efficiency: People can quickly find and do what need to regardless of experience. 6) Design: Minimalistic and simple.Respects the principles of contrast, repetition, alignment, and proximity. 9) Recovery: help users recover from errors. 10) Help: Simple communicate the error and what to do about it.

15. Graphical Interface Design Is . . . In a Nutshell: “The primary purposes of graphic design [for the web] are to: • Create a clear visual hierarchy of contrast, so you can see at a glance what is important and what is peripheral • Define functional regions of the page • Group page elements that are related, so that you can see structure in the content” From: http://webstyleguide.com/wsg3/7-page-design/3-visual-design.html

16. Graphical Layout Elements Proximity and Unity“unified connectedness” Modularity and Chunking-groupings of defined regions for easy scanning -predictable pattern to assist scanning through site Consistent Repetition-creates predictable patterns Contrastspace, colour, typography/text From: http://webstyleguide.com/wsg3/7-page-design/3-visual-design.html

17. Serif vs Sans Serif -Kerning: spacing between letters Font families:

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

19. Web Layout 101 Certain arrangements make more sense! From: http://blogs.sitepoint.com/principles-beautiful-web-design/

20. Web Site Layout Content Patterns http://sixrevisions.com/user-interface/6-popular-content-presentation-design-patterns/

21. Functional Interface Design Web sites no longer just provide content – they offer interactivity and value-add functionality

22. The Elements of Interface Design Functionality Web 1.0 vs Web 2.0

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

24. The Elements of Interface Design Functionality • Widgets:http://www.widgetbox.com/ • Scripting: javascriptAjax and Javascript Techniques • Flash Interactive elementsExample of a Flash Learning Object

25. Web Layout 101 Block Layout 1 Containing 2 Logo 3 Navigation 4 Content 5 Footer 6 Whitespace From: http://blogs.sitepoint.com/principles-beautiful-web-design/

26. Web Layout 101 Block Layout #container #header #navbar #content #footer From: http://blogs.sitepoint.com/principles-beautiful-web-design/

27. Web Site Layout Grid Theory and the Rule of Thirds

28. Web Site Layout Grid Theory and the Rule of Thirds From the Article: Principles of Beautiful Web DesignBy Jason Beaird

29. Web Site Layout Grid Theory and the Rule of Thirds

30. Web Site Layout Examples of Layout Based on Grid Theory http://www.designbygrid.com/showcase/archive Newspaper/Magazine Sites http://cbc.com

31. Layout for a Mobile World Examples of Responsive Design http://mediaqueri.es/

32. Colour Theory

33. Colour Theory

34. Colour Theory

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

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

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

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

39. Activity Colour Psychology In your groups, spend 2 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

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

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

42. 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. Cultural ConnotationsEgypt: mourning. Japan: courage India: color for merchants. http://www.tangram.li/

43. Colour Theory Colour Psychology Orange Fun, flamboyant, exciting. Stimulates activity or a call to action. Warmth and energy. Rust or terra cotta have earthy connotation. Captures attention (eg orange traffic cones). Friendly. http://www.neighborino.com/

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

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

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

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

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

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

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