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

Basic visual design principles
Basic visual design principlesBasic visual design principles
Basic visual design principles
Ahmet Durmaz
 
Design basics for the web
Design basics for the webDesign basics for the web
Design basics for the web
Nic 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.docx
hallettfaustina
 
WDD Chapter 1 class pp notes
WDD Chapter 1 class pp notesWDD Chapter 1 class pp notes
WDD Chapter 1 class pp notes
cmurphysvhs
 
Chapter 1 Class PP Notes
Chapter 1 Class PP NotesChapter 1 Class PP Notes
Chapter 1 Class PP Notes
cmurphysvhs
 
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
Iowa 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

The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
heathfieldcps1
 

Recently uploaded (20)

Micro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdfMicro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdf
 
How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17
 
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxBasic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
 
On_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptx
On_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptxOn_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptx
On_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptx
 
Single or Multiple melodic lines structure
Single or Multiple melodic lines structureSingle or Multiple melodic lines structure
Single or Multiple melodic lines structure
 
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptxHMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
 
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
 
Google Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxGoogle Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptx
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
 
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdf
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdfUnit 3 Emotional Intelligence and Spiritual Intelligence.pdf
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdf
 
ICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptx
 
How to Add New Custom Addons Path in Odoo 17
How to Add New Custom Addons Path in Odoo 17How to Add New Custom Addons Path in Odoo 17
How to Add New Custom Addons Path in Odoo 17
 
Wellbeing inclusion and digital dystopias.pptx
Wellbeing inclusion and digital dystopias.pptxWellbeing inclusion and digital dystopias.pptx
Wellbeing inclusion and digital dystopias.pptx
 
Fostering Friendships - Enhancing Social Bonds in the Classroom
Fostering Friendships - Enhancing Social Bonds  in the ClassroomFostering Friendships - Enhancing Social Bonds  in the Classroom
Fostering Friendships - Enhancing Social Bonds in the Classroom
 
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
 
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
 
How to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptxHow to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptx
 
REMIFENTANIL: An Ultra short acting opioid.pptx
REMIFENTANIL: An Ultra short acting opioid.pptxREMIFENTANIL: An Ultra short acting opioid.pptx
REMIFENTANIL: An Ultra short acting opioid.pptx
 
Understanding Accommodations and Modifications
Understanding  Accommodations and ModificationsUnderstanding  Accommodations and Modifications
Understanding Accommodations and Modifications
 
General Principles of Intellectual Property: Concepts of Intellectual Proper...
General Principles of Intellectual Property: Concepts of Intellectual  Proper...General Principles of Intellectual Property: Concepts of Intellectual  Proper...
General Principles of Intellectual Property: Concepts of Intellectual Proper...
 

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/