WE CREATE BRANDS PEOPLE L♥VE
Share

Gestalt Principles. Law of Figure-Ground


Tegra - August 9, 2020 - 0 comments

Gestalt Principles
Applied to UX Design  Law of Figure-Ground
people instictively recognize if elements are in the foreground or background

Gestalt Principles. Law of Figure-Ground 🔺

Courtesy of @tomkoszyk

Gestalt principles, or gestalt laws, are a set of rules describing how humans typically perceive objects by grouping similar elements, identifying patterns, and simplifying complex images.

Gestalt laws are pivotal in UX, especially when it comes to interface design.

After all, users must be able to understand what they see! 👀

❕ Law of Figure-Ground — elements are perceived as either figure (distinct elements of focus) or ground (the background on which the figures rest).

Law of Figure-Ground  Elements are perceived as either figure (distinct elements of focus) or ground (the background on which the figures rest).

Law of Figure-Ground

Elements are perceived as either figure (distinct elements of focus) or ground (the background on which the figures rest).

Although those elements intersect and lie on the same flat surface, we can easily differentiate the foreground element from the background one.

Although those elements intersect and lie on the same flat surface, we can easily differentiate the foreground element from the background one.

All elements on this page have exactly same style. That's why, at first it's hard for a user to distinguish foreground and background elements.  Even though button element has a different outline color it's still so similar to the bacground element (both have no fill just ontline) 
tomkoszyk

All elements on this page have exactly same style. That’s why, at first it’s hard for a user to distinguish foreground and background elements.

Even though button element has a different outline color it’s still so similar to the background element (both have no fill just online)

Foreground elements are easily distinguishable and perceived as more important because. That's because we added more contrast between foreground and background.  CTA also pops out from the bacground. It's easier to perceive elements as figure-ground if they have different fill colors.

Foreground elements are easily distinguishable and perceived as more important because. That’s because we added more contrast between foreground and background.

CTA also pops out from the bacground. It’s easier to perceive elements as figure-ground if they have different fill colors.

Get 50+ Marketing Tools we use in Tegra 🤘

Follow the link 👉 https://use.tegra.co/tools to get a list of 50+ free (or cheap) growth marketing tools that we and other growth agencies use to scale businesses like yours + growth hacking insights.

Related posts

Post a Comment

Your email address will not be published. Required fields are marked *