Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Gui lecture04


Published on

Published in: Education
  • Be the first to comment

  • Be the first to like this

Gui lecture04

  1. 1. Week 4 The visual components of GUI:Layout and composition. Figure ground, color systems
  2. 2. Vision & Clues to Composition
  3. 3. Sight is a filtering process: (01)•• In general how do we see? – Movement – Edges / silhouettes – Brightest areas – Most saturated areas – Things that stand out
  4. 4. Sight Filtering 02How do we scan a picture with our eyes?• We see a few prominent features• The brain orients itself• In the second pass review secondary prominent features more intensively
  5. 5. Structure & Comprehension• More structure composition easier comprehension• More unstructured = the more that eye must seek
  6. 6. How do we create designs that are appropriate and appeal to the target audience? • Perceive its content as a unit, everything should complement and comment on each other • Be consistent • Decide according to reach her a group of structured or how frivolous your screen composition should be
  7. 7. Three basic principles of visual communication: Aaron Marcus• Organization principle: give the user simple clear and consistent conceptual structure• Economic principle: maximize efficiency of a minimal set of resources (less is more)• Communication principle adapt your presentation to the users capacity to comprehend
  8. 8. A glace back at basic design• Shapes• Mass• Texture• Color• But remember you need to integrate this all to meet the functionality of the interface
  9. 9. Layout Grids
  10. 10. The Golden Grid
  11. 11. Rule of Thirds
  12. 12. OrganizationFrom: Screen Design Manual - Thissen
  13. 13. Organization #2From: Screen Design Manual - Thissen
  14. 14. Structure #3
  15. 15. Designing for multipleResizable Grid Systems
  16. 16. Templates
  17. 17. Less is More•
  18. 18. Figure ground relationships:• Background = the framework in visual stopping point• The differentiation from fore ground objects from their background is known as a figure ground relationship
  19. 19. Figure GroundFrom: Screen Design Manual - Thissen
  20. 20. Rules for Effective background use• Be thematic and provide a visual framework the user can understand• Don’t dominate, distract, or destroy the harmony of the foreground (and worst it should be neutral, at best it would complement the foreground)
  21. 21. Rules for Effective background use• A small object in front of a large background is perceived more readily as a figure.• Work with large areas and few bright colors for your background.• Also use blur, continuing shape, cool colors, and haziness for your backgrounds.
  22. 22. Gestalt laws• Proximity: elements near each other belong together• Similarity: objects that look similar “belong together”• Symmetry: Elements that are range symmetrically to each other are interpreted as a unit• Continuity: our eyes perceive edges
  23. 23. Gestalt laws• Common Fate: Elements with the same moving direction are perceived as a collective or unit.• Simplicity: visual perception tends towards simple consistent organization of elements• Experience: eyes will tend to see things that we have had experienced seen before. One example of this is the face on Mars.• Closure: The mind (fills in the blanks to) complete a regular figure
  24. 24. Symmetry
  25. 25. Continuity
  26. 26. Simplicity
  27. 27. Experience
  28. 28. Color Design & Implications• Biological• Cultural• Individual
  29. 29. From: The Visual Story - Block
  30. 30. From: The Visual Story - Block
  31. 31. From: The Visual Story - Block
  32. 32. From: The Visual Story - Block
  33. 33. Red• Activity, dynamic force, energy, determination, life, vitality, solid ity, love, sensuality, sexuality, pleasure, desire, passion, temptation, power, vivacity, impulsive ness, fire, heat, danger, warning, aggressivene ss, hates, anger.• Styles: Russia, China – joy & luck, Islamic countries – evil & destruction, Native American: Blood
  34. 34. Orange• Warmth, liveliness, exuberance, wildness, ene rgy, activity, attention, courage, treasonous, so ciability, fun, happiness, enjoyment, artificialit y, safety• Styles: Unpopular in Europe, associated with cheap plastic from the 1970s. The color of Buddhism. In Japan and China stands for happen as, Hebraic culture it’s the color of splendor.
  35. 35. Yellow
  36. 36. Yellow• Sun, warmth, brightness, cheerfulness, liveliness, frivolity, happiness, optimism, family Ms., sense of honor, value, gold, royalty, jealousy, Envy, Malevol ence, annoyance, cowardice, untruthfulness, stin giness, egotism, obtrusiveness, social devaluation• Styles: American Indians: the color that, China: color of the emperor, Hebraic culture: beauty, Japan: charm and grace. Middle East: joy and prosperity
  37. 37. Green• Nature, vegetation, growth, opulence, freshne ss, health, youth, peace and quiet, balance, relaxation, recuperation, peace fulness, security, hope, plays in, bitterness, sourness• World Region: Irish: National color, Fertility & life. In France it is an unlucky color. Hindu – it is the color of death
  38. 38. Blue• Expanse, Depth, infinity, eternity, yearning, tranq uility, harmony, intuition, balance, spirit, credibilit y, faithfulness, trust, friendly, friendship, achieve ment, seriousness, sympathy, masculinity, sports manship, coolness, passiveness, lack of motion• World Region: Japan: scoundrels & villains, Buddhists: Coolness & wisdom, Middle East: Fidelity & truth, Almost All Religions: Divine color, color of the sky
  39. 39. Purple• Dominion, power, sacredness, piety, nostalgia, magic, seclusion, self centeredness, vanity, decadence, extravaganc e, on conventionality, loneliness, contentedness, gri ef, passion, humility, feminism• 1900: popular in the US. Feminist movement in the 1970s
  40. 40. Pink• Delicate, soft, gentle, sensitive, baby, delightfu l, naive, mild, feminine, charm, polite, vain, te nder, romance, sweet.• Insulation, pink panther, German company uses (magenta) as its corporate color
  41. 41. Brown• Indigenous, earthy, close to nature, aromatic, old fashioned, and daring, well adjusted, simple, commonplace, cozy, boring, mediocre, stupid, lazy, unappealing, autumn, t ransitory, spoiled• In the West one of the most disliked colors, but it can be positive: Fresh bread, coffee, leather, wood
  42. 42. Black• Elegant, dignified, heavy, powerful, night, lonely, empty , Sigrid, forbidden, impenetrable, magical, evil, crucial, hard, unfriendly, negation, conservative, Negation , morning, melancholy, egoism• West: Bad association, also elegant, pirates, anarchists• Black in Africa: Beautiful• Buddhism: The color of oppression• China: Yin, symbolizes winter & water• Hindus: Color of decline
  43. 43. Gray• Neutral, sober, theory, pensive, elegant, object ive, technology, boring, conformist, unassumin g, mediocre, insecure, lonely, secret, unfriendl y, old, hopeless, miserable, insensitive• Hebraic: wisdom, W.Native American Tribes: Welcome
  44. 44. White• Pure, clean, innocent, clear, lightweight, orderl y, a neutral, objective, new, modern, good, ideal, f unctional, perfect, authentic, honest, true, pio us, softly