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
 
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
 
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
 
Graphology
GraphologyGraphology
Graphology
 

Recently uploaded

Sanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdfSanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdfsanyamsingh5019
 
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...PsychoTech Services
 
Arihant handbook biology for class 11 .pdf
Arihant handbook biology for class 11 .pdfArihant handbook biology for class 11 .pdf
Arihant handbook biology for class 11 .pdfchloefrazer622
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfAdmir Softic
 
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...fonyou31
 
Disha NEET Physics Guide for classes 11 and 12.pdf
Disha NEET Physics Guide for classes 11 and 12.pdfDisha NEET Physics Guide for classes 11 and 12.pdf
Disha NEET Physics Guide for classes 11 and 12.pdfchloefrazer622
 
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104misteraugie
 
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...EduSkills OECD
 
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in DelhiRussian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhikauryashika82
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactPECB
 
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...christianmathematics
 
Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111Sapana Sha
 
Sports & Fitness Value Added Course FY..
Sports & Fitness Value Added Course FY..Sports & Fitness Value Added Course FY..
Sports & Fitness Value Added Course FY..Disha Kariya
 
A Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformA Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformChameera Dedduwage
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfciinovamais
 
Measures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SDMeasures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SDThiyagu K
 
Z Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphZ Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphThiyagu K
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsTechSoup
 

Recently uploaded (20)

Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1
 
Sanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdfSanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdf
 
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
 
Arihant handbook biology for class 11 .pdf
Arihant handbook biology for class 11 .pdfArihant handbook biology for class 11 .pdf
Arihant handbook biology for class 11 .pdf
 
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptxINDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdf
 
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
 
Disha NEET Physics Guide for classes 11 and 12.pdf
Disha NEET Physics Guide for classes 11 and 12.pdfDisha NEET Physics Guide for classes 11 and 12.pdf
Disha NEET Physics Guide for classes 11 and 12.pdf
 
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104
 
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
 
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in DelhiRussian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global Impact
 
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
 
Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111
 
Sports & Fitness Value Added Course FY..
Sports & Fitness Value Added Course FY..Sports & Fitness Value Added Course FY..
Sports & Fitness Value Added Course FY..
 
A Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformA Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy Reform
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
 
Measures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SDMeasures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SD
 
Z Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphZ Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot Graph
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The Basics
 

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/