SlideShare ist ein Scribd-Unternehmen logo
1 von 55
Visual hierarchy in design
Leander
Lindahl
designer | Popolo

e-mail: leander@popolo.se
drupal-name: leanderl

Trained as a designer at Accademia
Italiana, Florence
Bachelor in Business Administration,
Gestalt Principles of perception
Figure Ground Relationship
Elements are perceived as either figures (distinct elements of focus) or ground (the background or
landscape on which the figures rest).

Law of Prägnanz
Humans tend to interpret ambiguous or complex images as simple and complete.

Uniform Connectedness
Elements that share uniform visual characteristics are perceived as being more related than elements
with disparate visual characteristics.

Good Continuation
Elements arranged on a line or curve are perceived to be more related than elements not on the line
or curve.

Closure
When looking at a complex arrangement of individual elements, humans tend to first look for a single,
recognizable pattern.

Common Fate
Humans tend to perceive elements moving in the same direction as being more related than elements
that are stationary or that move in different directions.

Proximity
Visual hierarchy

❖ Position     ❖ Similarity

❖ Proportion   ❖ Alignment
❖ Proximity    ❖ Contrast

❖ Symmetry     ❖ Colour
Visual hierarchy

❖ Position         ❖ Similarity

❖ Proportion       ❖ Alignment
❖ Proximity        ❖ Contrast

❖ Symmetry         ❖ Colour


But before you can use these
tools to distinguish between
elements you need to know
what the actual hierarchy is!
Huge credit for this
presentation goes to Jared
Ponchot of Lullabot who held a
similar one at Drupalcon
Visual hierarchy is the emphasis and
classification of elements according to: 
a. relative importance within the
  composition as a whole 
b.parent, child and sibling relationships


One definition of this could be that visual
hierarchy refers to a visual system of
relative importance within a defined space
or context.
Visual Hierarchy, berlin, 20110625
Why is visual hierarchy important
Why is visual hierarchy important

It can help create order out of seeming
chaos

It can help create more meaningful
information
Visual Hierarchy, berlin, 20110625
Visual Hierarchy, berlin, 20110625
Visual Hierarchy, berlin, 20110625
The whole is more
Position

               By default, at least in western
               culture we are used to reading
               visuals from left to right, top to
   1           bottom.




   2       3
Visual Hierarchy, berlin, 20110625
Visual Hierarchy, berlin, 20110625
Position
 E   U     H   Y   D   A   The position of
                           elements facilitate or
 S   R     I   O   T   N   hinder our
                           interpretation of their
 A   C                     meaning.
Position
 E   U     H   Y   D   A   The position of
                           elements facilitate or
 S   R     I   O   T   N   hinder our
                           interpretation of their
 A   C                     meaning.




 C   A     N   Y   O   U

 R   E     A   D   T   H

 I   S
Proportion

                 The
                 proportion of
                 objects decide
   2             the
                 importance
                 we assign to
             1   them.



   3
Visual Hierarchy, berlin, 20110625
Visual Hierarchy, berlin, 20110625
Proximity




Lorem ipsum dolor sit amet, consectetur adipiscing elit




Lorem ipsum dolor sit amet, consectetur adipiscing elit
Proximity




Lorem ipsum dolor sit amet, consectetur adipiscing elit




Lorem ipsum dolor sit amet, consectetur adipiscing elit
Proximity




Lorem ipsum dolor sit amet, consectetur adipiscing elit




Lorem ipsum dolor sit amet, consectetur adipiscing elit
Proximity




Lorem ipsum dolor sit amet, consectetur adipiscing elit




Lorem ipsum dolor sit amet, consectetur adipiscing elit
Proximity




Lorem ipsum dolor sit amet, consectetur adipiscing elit
Proximity




Lorem ipsum dolor sit amet, consectetur adipiscing elit
Proximity




            David Cole
Proximity
Proximity
Proximity (and grouping)
Proximity
Proximity
Symmetry

              We tend to see shapes
{} {} {} {}   as symmetrical
              gravitating towards a
              center
Symmetry


{   }{     }{   }{   }
Symmetry


{   }{     }{   }{   }
Similarity

             The human brain tends
             to group similar things
             together
Similarity

             The human brain tends
             to group similar things
             together
Similarity

             The human brain tends
             to group similar things
             together
Similarity

             The human brain tends
             to group similar things
             together

             (Also figure ground
             relationship)
Similarity

             The human brain tends
             to group similar things
             together

             (Also figure ground
             relationship)
Similarity

             The human brain tends
             to group similar things
             together

             (Also figure ground
             relationship)
Similarity

             The human brain tends
             to group similar things
             together

             (Also figure ground
             relationship)
Similarity

             The human brain tends
             to group similar things
             together

             (Also figure ground
             relationship)
Alignment
Alignment
Contrast
Colour and visual importance

                         Warm colours stand out
                         Cool colours recede
Colour and visual importance

 Hello my name is Leander Lindahl, I’m a
 designer and I care about visual hierarchy.
Unity
Unity
Pause
Conclusion

❖ It   helps you solve problems as
  designer through a logical system
  of ”tools” to order information and
  functionality
❖ awareness    of visual hierarchy cues
  helps you avoid sending erroneous
  signals to users

❖ But   before you do – you need to
  know what the hierarchy is!
Send me your examples of
where visual hierarchy
works well or poorly


          e-mail: leander@popolo.se
          drupal-name: leanderl
          twitter: leanderlindahl

Más contenido relacionado

Ähnlich wie Visual Hierarchy, berlin, 20110625

Perception.pptx
Perception.pptxPerception.pptx
Perception.pptxPOOJA
 
Art fundamentals ch02 form 2 28 10-2017
Art fundamentals ch02 form 2 28 10-2017Art fundamentals ch02 form 2 28 10-2017
Art fundamentals ch02 form 2 28 10-2017Galala University
 
4-2024 The gestalt laws of perception.pptx
4-2024 The gestalt laws of perception.pptx4-2024 The gestalt laws of perception.pptx
4-2024 The gestalt laws of perception.pptxSalahaddin Yasin
 
2012 skin & body senses-perception
2012 skin & body senses-perception 2012 skin & body senses-perception
2012 skin & body senses-perception DeWitte Shipley
 
Visual perception 1
Visual perception 1Visual perception 1
Visual perception 1cece2012
 
What we mean by meaning: new structural properties of information architectur...
What we mean by meaning: new structural properties of information architectur...What we mean by meaning: new structural properties of information architectur...
What we mean by meaning: new structural properties of information architectur...Marsha Haverty
 
Visual Design Principles Spring 2024 semester
Visual Design Principles Spring 2024 semesterVisual Design Principles Spring 2024 semester
Visual Design Principles Spring 2024 semesterAngelitaAbramsRains1
 
Melissa Dos Santos Gestalt Instructional Kiosk Presentation
Melissa Dos Santos Gestalt Instructional Kiosk PresentationMelissa Dos Santos Gestalt Instructional Kiosk Presentation
Melissa Dos Santos Gestalt Instructional Kiosk PresentationMelissa Dos Santos
 
visual perception ppt2.pptx
visual perception ppt2.pptxvisual perception ppt2.pptx
visual perception ppt2.pptxVatsal Garasia
 
Thegestaltlawsofperception 121107160827-phpapp02
Thegestaltlawsofperception 121107160827-phpapp02Thegestaltlawsofperception 121107160827-phpapp02
Thegestaltlawsofperception 121107160827-phpapp02rfarinas
 
Thegestaltlawsofperception 121107160827-phpapp02
Thegestaltlawsofperception 121107160827-phpapp02Thegestaltlawsofperception 121107160827-phpapp02
Thegestaltlawsofperception 121107160827-phpapp02rfarinas
 
Design principles & tenets
Design principles & tenetsDesign principles & tenets
Design principles & tenetsLily Belt Maley
 
Eye-catching science: Finding the visual story in your data
Eye-catching science: Finding the visual story in your dataEye-catching science: Finding the visual story in your data
Eye-catching science: Finding the visual story in your dataFuture Earth
 

Ähnlich wie Visual Hierarchy, berlin, 20110625 (20)

Principle of design
Principle of design Principle of design
Principle of design
 
Gestalt - FINAL
Gestalt - FINALGestalt - FINAL
Gestalt - FINAL
 
Ui design-day2b
Ui design-day2bUi design-day2b
Ui design-day2b
 
Perception.pptx
Perception.pptxPerception.pptx
Perception.pptx
 
Art fundamentals ch02 form 2 28 10-2017
Art fundamentals ch02 form 2 28 10-2017Art fundamentals ch02 form 2 28 10-2017
Art fundamentals ch02 form 2 28 10-2017
 
4-2024 The gestalt laws of perception.pptx
4-2024 The gestalt laws of perception.pptx4-2024 The gestalt laws of perception.pptx
4-2024 The gestalt laws of perception.pptx
 
2012 skin & body senses-perception
2012 skin & body senses-perception 2012 skin & body senses-perception
2012 skin & body senses-perception
 
Visual perception 1
Visual perception 1Visual perception 1
Visual perception 1
 
Ask
AskAsk
Ask
 
What we mean by meaning: new structural properties of information architectur...
What we mean by meaning: new structural properties of information architectur...What we mean by meaning: new structural properties of information architectur...
What we mean by meaning: new structural properties of information architectur...
 
Visual Design Principles Spring 2024 semester
Visual Design Principles Spring 2024 semesterVisual Design Principles Spring 2024 semester
Visual Design Principles Spring 2024 semester
 
Melissa Dos Santos Gestalt Instructional Kiosk Presentation
Melissa Dos Santos Gestalt Instructional Kiosk PresentationMelissa Dos Santos Gestalt Instructional Kiosk Presentation
Melissa Dos Santos Gestalt Instructional Kiosk Presentation
 
visual perception ppt2.pptx
visual perception ppt2.pptxvisual perception ppt2.pptx
visual perception ppt2.pptx
 
Thegestaltlawsofperception 121107160827-phpapp02
Thegestaltlawsofperception 121107160827-phpapp02Thegestaltlawsofperception 121107160827-phpapp02
Thegestaltlawsofperception 121107160827-phpapp02
 
Thegestaltlawsofperception 121107160827-phpapp02
Thegestaltlawsofperception 121107160827-phpapp02Thegestaltlawsofperception 121107160827-phpapp02
Thegestaltlawsofperception 121107160827-phpapp02
 
Perception
PerceptionPerception
Perception
 
Gestalt
Gestalt  Gestalt
Gestalt
 
1029 1026-1-pb
1029 1026-1-pb1029 1026-1-pb
1029 1026-1-pb
 
Design principles & tenets
Design principles & tenetsDesign principles & tenets
Design principles & tenets
 
Eye-catching science: Finding the visual story in your data
Eye-catching science: Finding the visual story in your dataEye-catching science: Finding the visual story in your data
Eye-catching science: Finding the visual story in your data
 

Mehr von Leander Lindahl

Google Analytics grund, Malmö 2016-02-05
Google Analytics grund, Malmö 2016-02-05Google Analytics grund, Malmö 2016-02-05
Google Analytics grund, Malmö 2016-02-05Leander Lindahl
 
Mobilanpassning för nybörjare
Mobilanpassning för nybörjareMobilanpassning för nybörjare
Mobilanpassning för nybörjareLeander Lindahl
 
Sökmotoroptimering för nybörjare
Sökmotoroptimering för nybörjareSökmotoroptimering för nybörjare
Sökmotoroptimering för nybörjareLeander Lindahl
 
Analytics för nybörjare
Analytics för nybörjareAnalytics för nybörjare
Analytics för nybörjareLeander Lindahl
 
Less Framework, Stockholm-nov-2011
Less Framework, Stockholm-nov-2011Less Framework, Stockholm-nov-2011
Less Framework, Stockholm-nov-2011Leander Lindahl
 
Ninesixty för Drupal (in swedish)
Ninesixty för Drupal (in swedish)Ninesixty för Drupal (in swedish)
Ninesixty för Drupal (in swedish)Leander Lindahl
 

Mehr von Leander Lindahl (7)

Google Analytics grund, Malmö 2016-02-05
Google Analytics grund, Malmö 2016-02-05Google Analytics grund, Malmö 2016-02-05
Google Analytics grund, Malmö 2016-02-05
 
Mobilanpassning för nybörjare
Mobilanpassning för nybörjareMobilanpassning för nybörjare
Mobilanpassning för nybörjare
 
Sökmotoroptimering för nybörjare
Sökmotoroptimering för nybörjareSökmotoroptimering för nybörjare
Sökmotoroptimering för nybörjare
 
Analytics för nybörjare
Analytics för nybörjareAnalytics för nybörjare
Analytics för nybörjare
 
Less Framework, Stockholm-nov-2011
Less Framework, Stockholm-nov-2011Less Framework, Stockholm-nov-2011
Less Framework, Stockholm-nov-2011
 
Less
LessLess
Less
 
Ninesixty för Drupal (in swedish)
Ninesixty för Drupal (in swedish)Ninesixty för Drupal (in swedish)
Ninesixty för Drupal (in swedish)
 

Último

Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...ssuseraaa1581
 
SHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfSHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfaimonayesha7
 
MIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfMIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfaimonayesha7
 
Revit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareRevit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareResDraft
 
Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|CaydenIngman
 
Complete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdfComplete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdfaimonayesha7
 
second stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnsecond stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnjohannesrothkegel
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...ssuseraaa1581
 
如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?krc0yvm5
 
Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.JoshHolmes21
 
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote ShirtJackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote ShirtTeeFusion
 
DesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportDesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportstudiotelon
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...Peter139483
 
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
ورشة الطريق إلى البيم   ورشة الطريق إلى البيمورشة الطريق إلى البيم   ورشة الطريق إلى البيم
ورشة الطريق إلى البيم ورشة الطريق إلى البيمOmarSelim27
 
Strawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtStrawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtTeeFusion
 
DSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien FedouDSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien Fedoujfedou2105
 
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt  Sign The Contract Big Boy ShirtSign The Contract Big Boy Shirt  Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt Sign The Contract Big Boy ShirtTeeFusion
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Oregon State University Interior Design Portfolio
Oregon State University Interior Design PortfolioOregon State University Interior Design Portfolio
Oregon State University Interior Design Portfoliopagei
 
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.Vaishnavi R
 

Último (20)

Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
 
SHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfSHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdf
 
MIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfMIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdf
 
Revit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareRevit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and Software
 
Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|
 
Complete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdfComplete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdf
 
second stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnsecond stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnn
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
 
如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?
 
Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.
 
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote ShirtJackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
 
DesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportDesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course report
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
 
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
ورشة الطريق إلى البيم   ورشة الطريق إلى البيمورشة الطريق إلى البيم   ورشة الطريق إلى البيم
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
 
Strawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtStrawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't Shirt
 
DSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien FedouDSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien Fedou
 
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt  Sign The Contract Big Boy ShirtSign The Contract Big Boy Shirt  Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Oregon State University Interior Design Portfolio
Oregon State University Interior Design PortfolioOregon State University Interior Design Portfolio
Oregon State University Interior Design Portfolio
 
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
 

Visual Hierarchy, berlin, 20110625

  • 2. Leander Lindahl designer | Popolo e-mail: leander@popolo.se drupal-name: leanderl Trained as a designer at Accademia Italiana, Florence Bachelor in Business Administration,
  • 3. Gestalt Principles of perception Figure Ground Relationship Elements are perceived as either figures (distinct elements of focus) or ground (the background or landscape on which the figures rest). Law of Prägnanz Humans tend to interpret ambiguous or complex images as simple and complete. Uniform Connectedness Elements that share uniform visual characteristics are perceived as being more related than elements with disparate visual characteristics. Good Continuation Elements arranged on a line or curve are perceived to be more related than elements not on the line or curve. Closure When looking at a complex arrangement of individual elements, humans tend to first look for a single, recognizable pattern. Common Fate Humans tend to perceive elements moving in the same direction as being more related than elements that are stationary or that move in different directions. Proximity
  • 4. Visual hierarchy ❖ Position ❖ Similarity ❖ Proportion ❖ Alignment ❖ Proximity ❖ Contrast ❖ Symmetry ❖ Colour
  • 5. Visual hierarchy ❖ Position ❖ Similarity ❖ Proportion ❖ Alignment ❖ Proximity ❖ Contrast ❖ Symmetry ❖ Colour But before you can use these tools to distinguish between elements you need to know what the actual hierarchy is!
  • 6. Huge credit for this presentation goes to Jared Ponchot of Lullabot who held a similar one at Drupalcon
  • 7. Visual hierarchy is the emphasis and classification of elements according to:  a. relative importance within the composition as a whole  b.parent, child and sibling relationships One definition of this could be that visual hierarchy refers to a visual system of relative importance within a defined space or context.
  • 9. Why is visual hierarchy important
  • 10. Why is visual hierarchy important It can help create order out of seeming chaos It can help create more meaningful information
  • 14. The whole is more
  • 15. Position By default, at least in western culture we are used to reading visuals from left to right, top to 1 bottom. 2 3
  • 18. Position E U H Y D A The position of elements facilitate or S R I O T N hinder our interpretation of their A C meaning.
  • 19. Position E U H Y D A The position of elements facilitate or S R I O T N hinder our interpretation of their A C meaning. C A N Y O U R E A D T H I S
  • 20. Proportion The proportion of objects decide 2 the importance we assign to 1 them. 3
  • 23. Proximity Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • 24. Proximity Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • 25. Proximity Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • 26. Proximity Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • 27. Proximity Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • 28. Proximity Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • 29. Proximity David Cole
  • 35. Symmetry We tend to see shapes {} {} {} {} as symmetrical gravitating towards a center
  • 36. Symmetry { }{ }{ }{ }
  • 37. Symmetry { }{ }{ }{ }
  • 38. Similarity The human brain tends to group similar things together
  • 39. Similarity The human brain tends to group similar things together
  • 40. Similarity The human brain tends to group similar things together
  • 41. Similarity The human brain tends to group similar things together (Also figure ground relationship)
  • 42. Similarity The human brain tends to group similar things together (Also figure ground relationship)
  • 43. Similarity The human brain tends to group similar things together (Also figure ground relationship)
  • 44. Similarity The human brain tends to group similar things together (Also figure ground relationship)
  • 45. Similarity The human brain tends to group similar things together (Also figure ground relationship)
  • 49. Colour and visual importance Warm colours stand out Cool colours recede
  • 50. Colour and visual importance Hello my name is Leander Lindahl, I’m a designer and I care about visual hierarchy.
  • 51. Unity
  • 52. Unity
  • 53. Pause
  • 54. Conclusion ❖ It helps you solve problems as designer through a logical system of ”tools” to order information and functionality ❖ awareness of visual hierarchy cues helps you avoid sending erroneous signals to users ❖ But before you do – you need to know what the hierarchy is!
  • 55. Send me your examples of where visual hierarchy works well or poorly e-mail: leander@popolo.se drupal-name: leanderl twitter: leanderlindahl

Hinweis der Redaktion

  1. \n
  2. This is me. I’m Leander Lindahl from Malmö. I’m a designer and I have a history of working both with traditional print design and web. And I’ve been into the whole Drupal thingy for about two years, and let me tell you... it can be frightening at first for a designer. But it is well worth the effort...\n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. Yes, this is pretty obvious, but it still is a rule worth recognising. Especially as we move away from theory and into practice. Think of the Boeing 777 cockpit...\n
  17. Yes, this is pretty obvious, but it still is a rule worth recognising. Especially as we move away from theory and into practice. Think of the Boeing 777 cockpit...\n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. color is another distinction\n
  27. but proximity is so powerful it overrides other distinctions...\n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n
  38. \n
  39. Alignment is strong enough to overpower other visual cues (i e Colour)\n
  40. \n
  41. \n
  42. \n
  43. \n
  44. \n
  45. \n
  46. \n
  47. \n