• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Visual Hierarchy, berlin, 20110625
 

Visual Hierarchy, berlin, 20110625

on

  • 1,380 views

Drupal Design Camp Berlin 2011, 25-26 June, #DDCEU

Drupal Design Camp Berlin 2011, 25-26 June, #DDCEU

Statistics

Views

Total Views
1,380
Views on SlideShare
1,369
Embed Views
11

Actions

Likes
1
Downloads
0
Comments
0

3 Embeds 11

http://www.linkedin.com 9
https://twitter.com 1
http://www.docshut.com 1

Accessibility

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • 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
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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
  • 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
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • color is another distinction\n
  • but proximity is so powerful it overrides other distinctions...\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Alignment is strong enough to overpower other visual cues (i e Colour)\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Visual Hierarchy, berlin, 20110625 Visual Hierarchy, berlin, 20110625 Presentation Transcript

  • Visual hierarchy in design
  • LeanderLindahldesigner | Popoloe-mail: leander@popolo.sedrupal-name: leanderlTrained as a designer at AccademiaItaliana, FlorenceBachelor in Business Administration,
  • Gestalt Principles of perceptionFigure Ground RelationshipElements are perceived as either figures (distinct elements of focus) or ground (the background orlandscape on which the figures rest).Law of PrägnanzHumans tend to interpret ambiguous or complex images as simple and complete.Uniform ConnectednessElements that share uniform visual characteristics are perceived as being more related than elementswith disparate visual characteristics.Good ContinuationElements arranged on a line or curve are perceived to be more related than elements not on the lineor curve.ClosureWhen looking at a complex arrangement of individual elements, humans tend to first look for a single,recognizable pattern.Common FateHumans tend to perceive elements moving in the same direction as being more related than elementsthat 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 ❖ ColourBut before you can use thesetools to distinguish betweenelements you need to knowwhat the actual hierarchy is!
  • Huge credit for thispresentation goes to JaredPonchot of Lullabot who held asimilar one at Drupalcon
  • Visual hierarchy is the emphasis andclassification of elements according to: a. relative importance within the composition as a whole b.parent, child and sibling relationshipsOne definition of this could be that visualhierarchy refers to a visual system ofrelative importance within a defined spaceor context.
  • Why is visual hierarchy important
  • Why is visual hierarchy importantIt can help create order out of seemingchaosIt can help create more meaningfulinformation
  • 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
  • ProximityLorem ipsum dolor sit amet, consectetur adipiscing elitLorem ipsum dolor sit amet, consectetur adipiscing elit
  • ProximityLorem ipsum dolor sit amet, consectetur adipiscing elitLorem ipsum dolor sit amet, consectetur adipiscing elit
  • ProximityLorem ipsum dolor sit amet, consectetur adipiscing elitLorem ipsum dolor sit amet, consectetur adipiscing elit
  • ProximityLorem ipsum dolor sit amet, consectetur adipiscing elitLorem ipsum dolor sit amet, consectetur adipiscing elit
  • ProximityLorem ipsum dolor sit amet, consectetur adipiscing elit
  • ProximityLorem 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 ofwhere visual hierarchyworks well or poorly e-mail: leander@popolo.se drupal-name: leanderl twitter: leanderlindahl