SlideShare a Scribd company logo
1 of 74
Week 4
The visual components of GUI:
Layout and composition. Figure
ground, color systems
Vision & Clues to Composition
Sight is a filtering process: (01)
• http://www.asiapac.com.au/Links/Design.htm#USABILITY
• In general how do we see?
– Movement
– Edges / silhouettes
– Brightest areas
– Most saturated areas
– Things that stand out
Sight Filtering 02
How 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
Structure & Comprehension
• More structure composition easier
comprehension
• More unstructured = the more that eye must
seek
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
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
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
Layout Grids
The Golden Grid
Rule of Thirds
Organization
From: Screen Design Manual - Thissen
Organization #2
From: Screen Design Manual - Thissen
Structure #3
Designing for multiple
Resizable Grid Systems
Templates
Less is More
• http://www.barbaracarneiro.com/index.html
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
Figure Ground
From: Screen Design Manual - Thissen
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)
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.
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
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
Symmetry
Continuity
Simplicity
Experience
Color Design & Implications
• Biological
• Cultural
• Individual
From: The Visual Story - Block
From: The Visual Story - Block
From: The Visual Story - Block
From: The Visual Story - Block
Red
• Activity, dynamic force, energy, determination,
life, vitality, solidity, love, sensuality, sexuality,
pleasure, desire, passion, temptation, power,
vivacity, impulsiveness, fire, heat, danger,
warning, aggressiveness, hates, anger.
• Styles: Russia, China – joy & luck, Islamic
countries – evil & destruction, Native
American: Blood
Orange
• Warmth, liveliness, exuberance, wildness,
energy, activity, attention, courage,
treasonous, sociability, fun, happiness,
enjoyment, artificiality, 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.
Yellow
Yellow
• Sun, warmth, brightness, cheerfulness, liveliness,
frivolity, happiness, optimism, family Ms., sense
of honor, value, gold, royalty, jealousy, Envy,
Malevolence, annoyance, cowardice,
untruthfulness, stinginess, 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
Green
• Nature, vegetation, growth, opulence,
freshness, health, youth, peace and quiet,
balance, relaxation, recuperation,
peacefulness, 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
Blue
• Expanse, Depth, infinity, eternity, yearning,
tranquility, harmony, intuition, balance, spirit,
credibility, faithfulness, trust, friendly, friendship,
achievement, seriousness, sympathy, masculinity,
sportsmanship, 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
Purple
• Dominion, power, sacredness, piety, nostalgia,
magic, seclusion, self centeredness, vanity,
decadence, extravagance, on conventionality,
loneliness, contentedness, grief, passion,
humility, feminism
• 1900: popular in the US. Feminist movement
in the 1970s
Pink
• Delicate, soft, gentle, sensitive, baby,
delightful, naive, mild, feminine, charm,
polite, vain, tender, romance, sweet.
• Insulation, pink panther, German company
uses (magenta) as its corporate color
Brown
• Indigenous, earthy, close to nature, aromatic,
old fashioned, and daring, well adjusted,
simple, commonplace, cozy, boring, mediocre,
stupid, lazy, unappealing, autumn, transitory,
spoiled
• In the West one of the most disliked colors,
but it can be positive: Fresh bread, coffee,
leather, wood
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
Gray
• Neutral, sober, theory, pensive, elegant,
objective, technology, boring, conformist,
unassuming, mediocre, insecure, lonely,
secret, unfriendly, old, hopeless, miserable,
insensitive
• Hebraic: wisdom, W.Native American Tribes:
Welcome
White
• Pure, clean, innocent, clear, lightweight,
orderly, a neutral, objective, new, modern,
good, ideal, functional, perfect, authentic,
honest, true, pious, softly

More Related Content

Similar to Gui lecture04

Design Elements and Principle Assignment.pptx
Design Elements and Principle Assignment.pptxDesign Elements and Principle Assignment.pptx
Design Elements and Principle Assignment.pptxAshmineKaur
 
Basic visual design principles
Basic visual design principlesBasic visual design principles
Basic visual design principlesAhmet Durmaz
 
Introduction to ideas - A complete insight ( A full semester course)
Introduction to ideas - A complete insight ( A full semester course)Introduction to ideas - A complete insight ( A full semester course)
Introduction to ideas - A complete insight ( A full semester course)megasheeki
 
Gestalt Principles of Design
Gestalt Principles of DesignGestalt Principles of Design
Gestalt Principles of DesignGayle Christopher
 
IOLUG Supporting Dementia Caregivers Through Embedded Librarianship, Technolo...
IOLUG Supporting Dementia Caregivers Through Embedded Librarianship, Technolo...IOLUG Supporting Dementia Caregivers Through Embedded Librarianship, Technolo...
IOLUG Supporting Dementia Caregivers Through Embedded Librarianship, Technolo..."Katharine "JJ"" Pionke
 
Usability in Practice - Tips from the field
Usability in Practice - Tips from the fieldUsability in Practice - Tips from the field
Usability in Practice - Tips from the fieldJustine Sanderson
 
Design basics for the web
Design basics for the webDesign basics for the web
Design basics for the webNic Finch
 
National CultureDr Lucy RattrieNational Cultures i.docx
National CultureDr Lucy RattrieNational Cultures i.docxNational CultureDr Lucy RattrieNational Cultures i.docx
National CultureDr Lucy RattrieNational Cultures i.docxhallettfaustina
 
WDD Chapter 1 class pp notes
WDD Chapter 1 class pp notesWDD Chapter 1 class pp notes
WDD Chapter 1 class pp notescmurphysvhs
 
Personality and Communication - True Colors
Personality and Communication - True ColorsPersonality and Communication - True Colors
Personality and Communication - True ColorsRotary International
 
Research theories complete 2019
Research theories complete 2019Research theories complete 2019
Research theories complete 2019Charlotte Oliver
 
How Visual Design Makes or Brakes Mobile
How Visual Design Makes or Brakes Mobile How Visual Design Makes or Brakes Mobile
How Visual Design Makes or Brakes Mobile Ivana Milicic
 
Authentically connected: Care, emotion and the challenge of technology
Authentically connected: Care, emotion and the challenge of technologyAuthentically connected: Care, emotion and the challenge of technology
Authentically connected: Care, emotion and the challenge of technologyPaul Treadwell
 
1 us course_overview021010
1 us course_overview0210101 us course_overview021010
1 us course_overview021010Bob Wong
 
Principles of Interface Design
Principles of Interface DesignPrinciples of Interface Design
Principles of Interface DesignjbellWCT
 
Chapter 1 Class PP Notes
Chapter 1 Class PP NotesChapter 1 Class PP Notes
Chapter 1 Class PP Notescmurphysvhs
 
Uncovering and Mobilizing Partners and Resources You Didn’t Know You Had Handout
Uncovering and Mobilizing Partners and Resources You Didn’t Know You Had HandoutUncovering and Mobilizing Partners and Resources You Didn’t Know You Had Handout
Uncovering and Mobilizing Partners and Resources You Didn’t Know You Had HandoutIowa Campus Compact
 

Similar to Gui lecture04 (20)

Design Elements and Principle Assignment.pptx
Design Elements and Principle Assignment.pptxDesign Elements and Principle Assignment.pptx
Design Elements and Principle Assignment.pptx
 
Basic visual design principles
Basic visual design principlesBasic visual design principles
Basic visual design principles
 
Introduction to ideas - A complete insight ( A full semester course)
Introduction to ideas - A complete insight ( A full semester course)Introduction to ideas - A complete insight ( A full semester course)
Introduction to ideas - A complete insight ( A full semester course)
 
Gestalt Principles of Design
Gestalt Principles of DesignGestalt Principles of Design
Gestalt Principles of Design
 
IOLUG Supporting Dementia Caregivers Through Embedded Librarianship, Technolo...
IOLUG Supporting Dementia Caregivers Through Embedded Librarianship, Technolo...IOLUG Supporting Dementia Caregivers Through Embedded Librarianship, Technolo...
IOLUG Supporting Dementia Caregivers Through Embedded Librarianship, Technolo...
 
Body Language and Face Reading
Body Language and Face ReadingBody Language and Face Reading
Body Language and Face Reading
 
Usability in Practice - Tips from the field
Usability in Practice - Tips from the fieldUsability in Practice - Tips from the field
Usability in Practice - Tips from the field
 
Design basics for the web
Design basics for the webDesign basics for the web
Design basics for the web
 
National CultureDr Lucy RattrieNational Cultures i.docx
National CultureDr Lucy RattrieNational Cultures i.docxNational CultureDr Lucy RattrieNational Cultures i.docx
National CultureDr Lucy RattrieNational Cultures i.docx
 
WDD Chapter 1 class pp notes
WDD Chapter 1 class pp notesWDD Chapter 1 class pp notes
WDD Chapter 1 class pp notes
 
Personality and Communication - True Colors
Personality and Communication - True ColorsPersonality and Communication - True Colors
Personality and Communication - True Colors
 
Research theories complete 2019
Research theories complete 2019Research theories complete 2019
Research theories complete 2019
 
How Visual Design Makes or Brakes Mobile
How Visual Design Makes or Brakes Mobile How Visual Design Makes or Brakes Mobile
How Visual Design Makes or Brakes Mobile
 
Authentically connected: Care, emotion and the challenge of technology
Authentically connected: Care, emotion and the challenge of technologyAuthentically connected: Care, emotion and the challenge of technology
Authentically connected: Care, emotion and the challenge of technology
 
elements of design.pdf
elements of design.pdfelements of design.pdf
elements of design.pdf
 
Mise en scene
Mise en sceneMise en scene
Mise en scene
 
1 us course_overview021010
1 us course_overview0210101 us course_overview021010
1 us course_overview021010
 
Principles of Interface Design
Principles of Interface DesignPrinciples of Interface Design
Principles of Interface Design
 
Chapter 1 Class PP Notes
Chapter 1 Class PP NotesChapter 1 Class PP Notes
Chapter 1 Class PP Notes
 
Uncovering and Mobilizing Partners and Resources You Didn’t Know You Had Handout
Uncovering and Mobilizing Partners and Resources You Didn’t Know You Had HandoutUncovering and Mobilizing Partners and Resources You Didn’t Know You Had Handout
Uncovering and Mobilizing Partners and Resources You Didn’t Know You Had Handout
 

Recently uploaded

Crayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon ACrayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon AUnboundStockton
 
Framing an Appropriate Research Question 6b9b26d93da94caf993c038d9efcdedb.pdf
Framing an Appropriate Research Question 6b9b26d93da94caf993c038d9efcdedb.pdfFraming an Appropriate Research Question 6b9b26d93da94caf993c038d9efcdedb.pdf
Framing an Appropriate Research Question 6b9b26d93da94caf993c038d9efcdedb.pdfUjwalaBharambe
 
Employee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptxEmployee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptxNirmalaLoungPoorunde1
 
HỌC TỐT TIẾNG ANH 11 THEO CHƯƠNG TRÌNH GLOBAL SUCCESS ĐÁP ÁN CHI TIẾT - CẢ NĂ...
HỌC TỐT TIẾNG ANH 11 THEO CHƯƠNG TRÌNH GLOBAL SUCCESS ĐÁP ÁN CHI TIẾT - CẢ NĂ...HỌC TỐT TIẾNG ANH 11 THEO CHƯƠNG TRÌNH GLOBAL SUCCESS ĐÁP ÁN CHI TIẾT - CẢ NĂ...
HỌC TỐT TIẾNG ANH 11 THEO CHƯƠNG TRÌNH GLOBAL SUCCESS ĐÁP ÁN CHI TIẾT - CẢ NĂ...Nguyen Thanh Tu Collection
 
Roles & Responsibilities in Pharmacovigilance
Roles & Responsibilities in PharmacovigilanceRoles & Responsibilities in Pharmacovigilance
Roles & Responsibilities in PharmacovigilanceSamikshaHamane
 
Difference Between Search & Browse Methods in Odoo 17
Difference Between Search & Browse Methods in Odoo 17Difference Between Search & Browse Methods in Odoo 17
Difference Between Search & Browse Methods in Odoo 17Celine George
 
Computed Fields and api Depends in the Odoo 17
Computed Fields and api Depends in the Odoo 17Computed Fields and api Depends in the Odoo 17
Computed Fields and api Depends in the Odoo 17Celine George
 
Like-prefer-love -hate+verb+ing & silent letters & citizenship text.pdf
Like-prefer-love -hate+verb+ing & silent letters & citizenship text.pdfLike-prefer-love -hate+verb+ing & silent letters & citizenship text.pdf
Like-prefer-love -hate+verb+ing & silent letters & citizenship text.pdfMr Bounab Samir
 
DATA STRUCTURE AND ALGORITHM for beginners
DATA STRUCTURE AND ALGORITHM for beginnersDATA STRUCTURE AND ALGORITHM for beginners
DATA STRUCTURE AND ALGORITHM for beginnersSabitha Banu
 
Types of Journalistic Writing Grade 8.pptx
Types of Journalistic Writing Grade 8.pptxTypes of Journalistic Writing Grade 8.pptx
Types of Journalistic Writing Grade 8.pptxEyham Joco
 
AMERICAN LANGUAGE HUB_Level2_Student'sBook_Answerkey.pdf
AMERICAN LANGUAGE HUB_Level2_Student'sBook_Answerkey.pdfAMERICAN LANGUAGE HUB_Level2_Student'sBook_Answerkey.pdf
AMERICAN LANGUAGE HUB_Level2_Student'sBook_Answerkey.pdfphamnguyenenglishnb
 
How to Configure Email Server in Odoo 17
How to Configure Email Server in Odoo 17How to Configure Email Server in Odoo 17
How to Configure Email Server in Odoo 17Celine George
 
What is Model Inheritance in Odoo 17 ERP
What is Model Inheritance in Odoo 17 ERPWhat is Model Inheritance in Odoo 17 ERP
What is Model Inheritance in Odoo 17 ERPCeline George
 
Introduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher EducationIntroduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher Educationpboyjonauth
 
ACC 2024 Chronicles. Cardiology. Exam.pdf
ACC 2024 Chronicles. Cardiology. Exam.pdfACC 2024 Chronicles. Cardiology. Exam.pdf
ACC 2024 Chronicles. Cardiology. Exam.pdfSpandanaRallapalli
 
Gas measurement O2,Co2,& ph) 04/2024.pptx
Gas measurement O2,Co2,& ph) 04/2024.pptxGas measurement O2,Co2,& ph) 04/2024.pptx
Gas measurement O2,Co2,& ph) 04/2024.pptxDr.Ibrahim Hassaan
 
Earth Day Presentation wow hello nice great
Earth Day Presentation wow hello nice greatEarth Day Presentation wow hello nice great
Earth Day Presentation wow hello nice greatYousafMalik24
 

Recently uploaded (20)

Crayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon ACrayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon A
 
Framing an Appropriate Research Question 6b9b26d93da94caf993c038d9efcdedb.pdf
Framing an Appropriate Research Question 6b9b26d93da94caf993c038d9efcdedb.pdfFraming an Appropriate Research Question 6b9b26d93da94caf993c038d9efcdedb.pdf
Framing an Appropriate Research Question 6b9b26d93da94caf993c038d9efcdedb.pdf
 
Employee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptxEmployee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptx
 
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
 
HỌC TỐT TIẾNG ANH 11 THEO CHƯƠNG TRÌNH GLOBAL SUCCESS ĐÁP ÁN CHI TIẾT - CẢ NĂ...
HỌC TỐT TIẾNG ANH 11 THEO CHƯƠNG TRÌNH GLOBAL SUCCESS ĐÁP ÁN CHI TIẾT - CẢ NĂ...HỌC TỐT TIẾNG ANH 11 THEO CHƯƠNG TRÌNH GLOBAL SUCCESS ĐÁP ÁN CHI TIẾT - CẢ NĂ...
HỌC TỐT TIẾNG ANH 11 THEO CHƯƠNG TRÌNH GLOBAL SUCCESS ĐÁP ÁN CHI TIẾT - CẢ NĂ...
 
Roles & Responsibilities in Pharmacovigilance
Roles & Responsibilities in PharmacovigilanceRoles & Responsibilities in Pharmacovigilance
Roles & Responsibilities in Pharmacovigilance
 
Rapple "Scholarly Communications and the Sustainable Development Goals"
Rapple "Scholarly Communications and the Sustainable Development Goals"Rapple "Scholarly Communications and the Sustainable Development Goals"
Rapple "Scholarly Communications and the Sustainable Development Goals"
 
Difference Between Search & Browse Methods in Odoo 17
Difference Between Search & Browse Methods in Odoo 17Difference Between Search & Browse Methods in Odoo 17
Difference Between Search & Browse Methods in Odoo 17
 
Computed Fields and api Depends in the Odoo 17
Computed Fields and api Depends in the Odoo 17Computed Fields and api Depends in the Odoo 17
Computed Fields and api Depends in the Odoo 17
 
Like-prefer-love -hate+verb+ing & silent letters & citizenship text.pdf
Like-prefer-love -hate+verb+ing & silent letters & citizenship text.pdfLike-prefer-love -hate+verb+ing & silent letters & citizenship text.pdf
Like-prefer-love -hate+verb+ing & silent letters & citizenship text.pdf
 
9953330565 Low Rate Call Girls In Rohini Delhi NCR
9953330565 Low Rate Call Girls In Rohini  Delhi NCR9953330565 Low Rate Call Girls In Rohini  Delhi NCR
9953330565 Low Rate Call Girls In Rohini Delhi NCR
 
DATA STRUCTURE AND ALGORITHM for beginners
DATA STRUCTURE AND ALGORITHM for beginnersDATA STRUCTURE AND ALGORITHM for beginners
DATA STRUCTURE AND ALGORITHM for beginners
 
Types of Journalistic Writing Grade 8.pptx
Types of Journalistic Writing Grade 8.pptxTypes of Journalistic Writing Grade 8.pptx
Types of Journalistic Writing Grade 8.pptx
 
AMERICAN LANGUAGE HUB_Level2_Student'sBook_Answerkey.pdf
AMERICAN LANGUAGE HUB_Level2_Student'sBook_Answerkey.pdfAMERICAN LANGUAGE HUB_Level2_Student'sBook_Answerkey.pdf
AMERICAN LANGUAGE HUB_Level2_Student'sBook_Answerkey.pdf
 
How to Configure Email Server in Odoo 17
How to Configure Email Server in Odoo 17How to Configure Email Server in Odoo 17
How to Configure Email Server in Odoo 17
 
What is Model Inheritance in Odoo 17 ERP
What is Model Inheritance in Odoo 17 ERPWhat is Model Inheritance in Odoo 17 ERP
What is Model Inheritance in Odoo 17 ERP
 
Introduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher EducationIntroduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher Education
 
ACC 2024 Chronicles. Cardiology. Exam.pdf
ACC 2024 Chronicles. Cardiology. Exam.pdfACC 2024 Chronicles. Cardiology. Exam.pdf
ACC 2024 Chronicles. Cardiology. Exam.pdf
 
Gas measurement O2,Co2,& ph) 04/2024.pptx
Gas measurement O2,Co2,& ph) 04/2024.pptxGas measurement O2,Co2,& ph) 04/2024.pptx
Gas measurement O2,Co2,& ph) 04/2024.pptx
 
Earth Day Presentation wow hello nice great
Earth Day Presentation wow hello nice greatEarth Day Presentation wow hello nice great
Earth Day Presentation wow hello nice great
 

Gui lecture04

  • 1. Week 4 The visual components of GUI: Layout and composition. Figure ground, color systems
  • 2. Vision & Clues to Composition
  • 3. Sight is a filtering process: (01) • http://www.asiapac.com.au/Links/Design.htm#USABILITY • In general how do we see? – Movement – Edges / silhouettes – Brightest areas – Most saturated areas – Things that stand out
  • 4.
  • 5. Sight Filtering 02 How 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
  • 6. Structure & Comprehension • More structure composition easier comprehension • More unstructured = the more that eye must seek
  • 7.
  • 8. 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
  • 9.
  • 10. 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
  • 11. 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
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 21. Organization #2 From: Screen Design Manual - Thissen
  • 23.
  • 24.
  • 27. Less is More • http://www.barbaracarneiro.com/index.html
  • 28. 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
  • 29. Figure Ground From: Screen Design Manual - Thissen
  • 30. 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)
  • 31. 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.
  • 32.
  • 33. 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
  • 34. 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
  • 35.
  • 36.
  • 37.
  • 38.
  • 43. Color Design & Implications • Biological • Cultural • Individual
  • 44.
  • 45.
  • 46.
  • 47. From: The Visual Story - Block
  • 48. From: The Visual Story - Block
  • 49. From: The Visual Story - Block
  • 50. From: The Visual Story - Block
  • 51.
  • 52.
  • 53. Red • Activity, dynamic force, energy, determination, life, vitality, solidity, love, sensuality, sexuality, pleasure, desire, passion, temptation, power, vivacity, impulsiveness, fire, heat, danger, warning, aggressiveness, hates, anger. • Styles: Russia, China – joy & luck, Islamic countries – evil & destruction, Native American: Blood
  • 54.
  • 55. Orange • Warmth, liveliness, exuberance, wildness, energy, activity, attention, courage, treasonous, sociability, fun, happiness, enjoyment, artificiality, 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.
  • 57.
  • 58. Yellow • Sun, warmth, brightness, cheerfulness, liveliness, frivolity, happiness, optimism, family Ms., sense of honor, value, gold, royalty, jealousy, Envy, Malevolence, annoyance, cowardice, untruthfulness, stinginess, 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
  • 59.
  • 60. Green • Nature, vegetation, growth, opulence, freshness, health, youth, peace and quiet, balance, relaxation, recuperation, peacefulness, 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
  • 61.
  • 62. Blue • Expanse, Depth, infinity, eternity, yearning, tranquility, harmony, intuition, balance, spirit, credibility, faithfulness, trust, friendly, friendship, achievement, seriousness, sympathy, masculinity, sportsmanship, 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
  • 63.
  • 64. Purple • Dominion, power, sacredness, piety, nostalgia, magic, seclusion, self centeredness, vanity, decadence, extravagance, on conventionality, loneliness, contentedness, grief, passion, humility, feminism • 1900: popular in the US. Feminist movement in the 1970s
  • 65.
  • 66. Pink • Delicate, soft, gentle, sensitive, baby, delightful, naive, mild, feminine, charm, polite, vain, tender, romance, sweet. • Insulation, pink panther, German company uses (magenta) as its corporate color
  • 67.
  • 68. Brown • Indigenous, earthy, close to nature, aromatic, old fashioned, and daring, well adjusted, simple, commonplace, cozy, boring, mediocre, stupid, lazy, unappealing, autumn, transitory, spoiled • In the West one of the most disliked colors, but it can be positive: Fresh bread, coffee, leather, wood
  • 69.
  • 70. 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
  • 71.
  • 72. Gray • Neutral, sober, theory, pensive, elegant, objective, technology, boring, conformist, unassuming, mediocre, insecure, lonely, secret, unfriendly, old, hopeless, miserable, insensitive • Hebraic: wisdom, W.Native American Tribes: Welcome
  • 73.
  • 74. White • Pure, clean, innocent, clear, lightweight, orderly, a neutral, objective, new, modern, good, ideal, functional, perfect, authentic, honest, true, pious, softly

Editor's Notes

  1. http://www.dreamtemplate.com/