SlideShare una empresa de Scribd logo
1 de 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.
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
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
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
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

Similar a Visual Hierarchy, berlin, 20110625

Perception.pptx
Perception.pptxPerception.pptx
Perception.pptxPoojaSen20
 
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
 

Similar a 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
 

Más de 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
 

Más de 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

Dahisar Comfortable Call Girls ,09167354423,Mira Road Model Call Girls
Dahisar Comfortable Call Girls ,09167354423,Mira Road Model Call GirlsDahisar Comfortable Call Girls ,09167354423,Mira Road Model Call Girls
Dahisar Comfortable Call Girls ,09167354423,Mira Road Model Call GirlsPriya Reddy
 
Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...
Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...
Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...samsungultra782445
 
TRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptxTRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptxtrose8
 
Nishatganj ? Book Call Girls in Lucknow | Book 9548273370 Extreme Naughty Cal...
Nishatganj ? Book Call Girls in Lucknow | Book 9548273370 Extreme Naughty Cal...Nishatganj ? Book Call Girls in Lucknow | Book 9548273370 Extreme Naughty Cal...
Nishatganj ? Book Call Girls in Lucknow | Book 9548273370 Extreme Naughty Cal...HyderabadDolls
 
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdfJordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdfamanda2495
 
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...HyderabadDolls
 
Mohanlalganj ! Call Girls in Lucknow - 450+ Call Girl Cash Payment 9548273370...
Mohanlalganj ! Call Girls in Lucknow - 450+ Call Girl Cash Payment 9548273370...Mohanlalganj ! Call Girls in Lucknow - 450+ Call Girl Cash Payment 9548273370...
Mohanlalganj ! Call Girls in Lucknow - 450+ Call Girl Cash Payment 9548273370...gargpaaro
 
Independent Escorts Goregaon WhatsApp +91-9930687706, Best Service
Independent Escorts Goregaon WhatsApp +91-9930687706, Best ServiceIndependent Escorts Goregaon WhatsApp +91-9930687706, Best Service
Independent Escorts Goregaon WhatsApp +91-9930687706, Best Servicemeghakumariji156
 
Gamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad IbrahimGamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad Ibrahimamgadibrahim92
 
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证wpkuukw
 
Sweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptxSweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptxbingyichin04
 
❤️ Call Girls Service Amritsar Call Girls (Adult Only) 💯Call Us 🔝 6378878445 ...
❤️ Call Girls Service Amritsar Call Girls (Adult Only) 💯Call Us 🔝 6378878445 ...❤️ Call Girls Service Amritsar Call Girls (Adult Only) 💯Call Us 🔝 6378878445 ...
❤️ Call Girls Service Amritsar Call Girls (Adult Only) 💯Call Us 🔝 6378878445 ...vershagrag
 
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...instagramfab782445
 
Branding in the Psychedelic Landscape Report.pdf
Branding in the Psychedelic Landscape Report.pdfBranding in the Psychedelic Landscape Report.pdf
Branding in the Psychedelic Landscape Report.pdfAlexandra Plesner
 
cholilithiasis, cholecystitis,gall bladdder .pdf
cholilithiasis, cholecystitis,gall bladdder .pdfcholilithiasis, cholecystitis,gall bladdder .pdf
cholilithiasis, cholecystitis,gall bladdder .pdfRawalRafiqLeghari
 
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证eeanqy
 
Q4-W4-SCIENCE-5 power point presentation
Q4-W4-SCIENCE-5 power point presentationQ4-W4-SCIENCE-5 power point presentation
Q4-W4-SCIENCE-5 power point presentationZenSeloveres
 
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证ehyxf
 
Abu Dhabi Call girls Service0556255850 Call girls in Abu Dhabi
Abu Dhabi Call girls Service0556255850 Call girls in Abu DhabiAbu Dhabi Call girls Service0556255850 Call girls in Abu Dhabi
Abu Dhabi Call girls Service0556255850 Call girls in Abu DhabiMonica Sydney
 

Último (20)

Dahisar Comfortable Call Girls ,09167354423,Mira Road Model Call Girls
Dahisar Comfortable Call Girls ,09167354423,Mira Road Model Call GirlsDahisar Comfortable Call Girls ,09167354423,Mira Road Model Call Girls
Dahisar Comfortable Call Girls ,09167354423,Mira Road Model Call Girls
 
Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...
Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...
Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...
 
TRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptxTRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptx
 
Nishatganj ? Book Call Girls in Lucknow | Book 9548273370 Extreme Naughty Cal...
Nishatganj ? Book Call Girls in Lucknow | Book 9548273370 Extreme Naughty Cal...Nishatganj ? Book Call Girls in Lucknow | Book 9548273370 Extreme Naughty Cal...
Nishatganj ? Book Call Girls in Lucknow | Book 9548273370 Extreme Naughty Cal...
 
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman MuscatAbortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
 
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdfJordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
 
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
 
Mohanlalganj ! Call Girls in Lucknow - 450+ Call Girl Cash Payment 9548273370...
Mohanlalganj ! Call Girls in Lucknow - 450+ Call Girl Cash Payment 9548273370...Mohanlalganj ! Call Girls in Lucknow - 450+ Call Girl Cash Payment 9548273370...
Mohanlalganj ! Call Girls in Lucknow - 450+ Call Girl Cash Payment 9548273370...
 
Independent Escorts Goregaon WhatsApp +91-9930687706, Best Service
Independent Escorts Goregaon WhatsApp +91-9930687706, Best ServiceIndependent Escorts Goregaon WhatsApp +91-9930687706, Best Service
Independent Escorts Goregaon WhatsApp +91-9930687706, Best Service
 
Gamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad IbrahimGamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad Ibrahim
 
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
 
Sweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptxSweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptx
 
❤️ Call Girls Service Amritsar Call Girls (Adult Only) 💯Call Us 🔝 6378878445 ...
❤️ Call Girls Service Amritsar Call Girls (Adult Only) 💯Call Us 🔝 6378878445 ...❤️ Call Girls Service Amritsar Call Girls (Adult Only) 💯Call Us 🔝 6378878445 ...
❤️ Call Girls Service Amritsar Call Girls (Adult Only) 💯Call Us 🔝 6378878445 ...
 
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
 
Branding in the Psychedelic Landscape Report.pdf
Branding in the Psychedelic Landscape Report.pdfBranding in the Psychedelic Landscape Report.pdf
Branding in the Psychedelic Landscape Report.pdf
 
cholilithiasis, cholecystitis,gall bladdder .pdf
cholilithiasis, cholecystitis,gall bladdder .pdfcholilithiasis, cholecystitis,gall bladdder .pdf
cholilithiasis, cholecystitis,gall bladdder .pdf
 
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
 
Q4-W4-SCIENCE-5 power point presentation
Q4-W4-SCIENCE-5 power point presentationQ4-W4-SCIENCE-5 power point presentation
Q4-W4-SCIENCE-5 power point presentation
 
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
 
Abu Dhabi Call girls Service0556255850 Call girls in Abu Dhabi
Abu Dhabi Call girls Service0556255850 Call girls in Abu DhabiAbu Dhabi Call girls Service0556255850 Call girls in Abu Dhabi
Abu Dhabi Call girls Service0556255850 Call girls in Abu Dhabi
 

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.
  • 8.
  • 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
  • 11.
  • 12.
  • 13.
  • 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
  • 16.
  • 17.
  • 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
  • 21.
  • 22.
  • 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

Notas del editor

  1. \n
  2. This is me. I&amp;#x2019;m Leander Lindahl from Malm&amp;#xF6;. I&amp;#x2019;m a designer and I have a history of working both with traditional print design and web. And I&amp;#x2019;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