Gestalt Principles of Design
Upcoming SlideShare
Loading in...5
×
 

Gestalt Principles of Design

on

  • 9,982 views

The way people see a web page or digital design strongly affects its utility and the meaning that they take away. Gestalt principles tell people how to perceive visual objects, what they mean, and how ...

The way people see a web page or digital design strongly affects its utility and the meaning that they take away. Gestalt principles tell people how to perceive visual objects, what they mean, and how they relate to one another within the user's experience. Design with these principles in mind to meet users' needs and leave a positive impression.

Statistics

Views

Total Views
9,982
Views on SlideShare
9,750
Embed Views
232

Actions

Likes
10
Downloads
208
Comments
0

7 Embeds 232

http://www.gaylechristopher.com 178
http://colormono.com 40
http://www.pinterest.com 5
http://engtestblog1.blogspot.com 3
http://www.linkedin.com 3
http://www.twylah.com 2
http://pinterest.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

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

Gestalt Principles of Design Gestalt Principles of Design Presentation Transcript

  • Eye of the BeholderGestalt Principles Applied to Web Design Gayle Christopher @gchristo | gaylechristopher.com
  • Proximity/Grouping•Things that are close together are perceived to be more related than things that are spaced father apart.•One of the first principles to impact perception•Proximity overpowers similarity•Only uniform connectedness overpowers proximity Proximity overpowers similarity in color/contrast
  • Proximity/Grouping
  • Good Continuation•Elements arranged on a line or curve are perceived to be more relatedthan elements not on the line or curve.•All written language employs the principle of good continuation.•Breadcrumbs, words in a paragraph, graphs, and linear arrangement(vertical or horizontal) communicate relatedness.
  • Good Continuation
  • Similarity•Visual elements that are similar in shape, size, color and direction areperceived as part of a group.•Different modes of similarity are not created equal.•Color is the strongest way to suggest relationships.•Used in links, icons, page content to suggest similar behavior, relatedness, and reinforce content hierarchies to communicate context.•Consistency in styling and content dimension is important and implies structure.
  • Similarity
  • Figure-Ground•Elements are perceived as either figures (elements of focus) or background.•Human mind must rapidly decide which elements to focus on in a scene. Thisability allows us to determine what we should pay attention to and what we canignore even if it does provide context.•Use color, shading, highlights to cue the viewer inon what has focus and ground depth: buttons thatlook like press-able buttons, links that changeon rollover, overlays that use shadow.
  • Figure-Ground
  • Common Fate•We perceive elements moving in the same direction as being morerelated than stationary objects or those moving in different directions.example•Humans recognize contrasting movement more so than color, contrast,size or any other visual cue.•Very automatic.•Moving objects are perceived asfigure. Stationary objects are seenas ground.•Utilized in slide-out menus, tooltips, to create associations between elements on the page. example
  • Common Fate Anti-common fate can be used to increase visibility and interaction with visual elements such as call-to-action areas.
  • Uniform Connectedness•Uniform visual properties in visual elements cause them to be perceivedas more related. Causes us to perceive groups rather than individual things.•Strongest of the Gestalt Principles of relatedness.•All items inside an outline are considered related (as in a file folder).•It is as simple as a bounding box. Other examples are tabbed navigation and thought bubbles.
  • Uniform Connectedness
  • Symmetry•Humans prefer symmetry over asymmetry. Symmetric forms tend to be seen asfigure rather than ground and are recalled better.•Symmetric objects are associated with stability, consistency, and harmony.•Asymmetric arrangements are more interesting but are associated withnegative feelings or impressions.
  • Symmetry Asymmetry
  • Closure•Humans look for recognizable patterns and visually close gaps in a form.•When the picture is incomplete, we use past experience, understanding, or recognizable patterns to fill in the gaps.•Some images are easier for the human mind to figure out: faces•Closure also applies to movement, as in video production. Th prchas of a hme s lkely th sngl mst mprtant fnancl dsisn y’ll evr mke.
  • Experience•Humans will use prior knowledge in understanding visual elements.•Common example: overlooking a misspelling because we know the word•Utilize experience to make UI elements like icons.
  • Simplicity (Law of Prägnanz)•Humans tend to interpret ambiguous or complex images as simple and complete.•Simplest: fewer rather than more elements, symmetrical rather than asymmetrical•People are better able to visually process and remember simple figures than complex figures.•Use symmetrical designs when efficiency of use is the priority. Asymmetrical when interestingness is the priority.
  • Simplicity (Law of Prägnanz) New twitter Old twitter
  • ResourcesGestalt Theory in Interactive Media DesignJournal of Humanities & Social Sciences, 2008 Vol 2, Issue 1Top 5 Laws of Perceptual OrganizationPrinciples of DesignInteraction Design and Gestalt PrinciplesSix Gestalt Principles of Web DesignGestalt Principles of Perceptual OrganizationClose Relationship Between Gestalt Principles and DesignUniversal Principles of Design ISBN-13: 978-1-59253-587-3