1 / 71

Graphical Interface Design for the Web

Louisa Lambregts , Algonquin College, lambrel@algonquincollege.com. Graphical Interface Design for the Web. Day 2 Schedule. Topics Finish Discuss Visualization and look at Functionality and Accessibility. Review layout and typography. Review colour theory.

munin
Download Presentation

Graphical Interface Design for the Web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. Day 2 Schedule Topics • Finish Discuss Visualization and look at Functionality and Accessibility. • Review layout and typography. • 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. Review: Elements of Design Balance Proportion Dominance(Emphasis) Rhythm Unity

  5. Review: Elements of Design Balance

  6. Review: Elements of Design Balance Symmetrical Asymmetrical

  7. Review: Elements of Design Proportion

  8. Review: Elements of Design Dominance(Emphasis) -”point of focus”

  9. Review: Elements of Design Rhythm -”timed movement through space”-pattern, repetition, alternation -regular, flowing (sense of movement), and progressive

  10. Review: Elements of Design Rhythm

  11. Review: Elements of Design Rhythm

  12. Review: Elements of Design Rhythm

  13. Review: Elements of Design Rhythm Lack of rhythm

  14. Review: Elements of Design Unity The sense that things belong together • Contrast • Repetition • Alignment • Proximity

  15. Review: Elements of Design Unity

  16. Review: Elements of Design Unity

  17. Review: Principles of Perception Gestalt Theory • Similarity • Proximity • Continuity • Closure • Area • Symmetry Closure

  18. Principles and Elements of Design Visual Metaphor Interface Design Trends: Article 13 Web Design Trends: Real-Life Metaphors and CSS3 Adaption Visual Metaphors in Web Design: Article 14 http://nikhilmisal.com/using-visual-metaphors-in-web-design-part-1/

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

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

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

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

  23. A Bit About Typography Serif vs Sans-Serif Times Roman Arial Georgia Century Gothic

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

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

  26. Colour Theory What are the Primary Colours?

  27. Colour Theory

  28. Colour Theory What are the Secondary Colours?

  29. Colour Theory

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

  31. Colour Theory

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

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

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

  35. Colour Theory Other colour schemes http://www.color-wheel-pro.com/color-theory-basics.html

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

More Related