Subscribe
Join 40,000+ sales and marketing pros who receive our 4x a week insights, tips, and best practices.
Thank you! You have been subscribed.

Free Course: Elements of a Great They Ask, You Answer Website

Start the Course Subscribe
Join 40,000+ sales and marketing pros who receive our 4x a week insights, tips, and best practices.
Thank you! You have been subscribed.
Learning Center
Learning Center
Close
The IMPACT Learning Center

Free resources to help you master inbound marketing and They Ask, You Answer

Access the Learning Center

Access the Learning Center

Access the Learning Center
learning_center_grey__What is They Ask, You Answer-v2-black

What is They Ask, You Answer?

What is <span>They Ask, You Answer?</span>
Articles, Podcasts, & Updates

Articles, Podcasts, & Updates

Articles, Podcasts, <span>& Updates</span>
learning_center_grey__Free Courses and Certifications.svg

Free Courses & Certifications

Free Courses & <span>Certifications</span>
On-Demand Keynotes & Sessions

On-Demand Keynotes & Sessions

On-Demand <span>Keynotes & Sessions</span>
Events
Events
Close
IMPACT+ Membership
IMPACT+ Membership
Close
Services
Services
Close
Navigation_8_2021_taya

They Ask, You Answer Coaching & Training

They Ask, You Answer Coaching & Training
They Ask, You Answer Workshop

They Ask, You Answer Workshop

They Ask, You Answer Workshop
Navigation_8_2021_workshop

Inbound Marketing Services

Inbound Marketing Services
Navigation_8_2021_website design - monitor

Website Design & Development

Website Design & Development
Navigation_8_2021_hubspot implementation

HubSpot Training & Implementation

HubSpot Training & Implementation
Navigation_8_2021_virtual selling

Virtual Sales
Training

Virtual Sales <br>Training
Navigation_8_2021_swell - paid ads

Paid Search & Social Services

Paid Search & Social Services
Become a Certified Coach
Become a Certified Coach
Close
... Inbound Marketing Web Design
Close
Elements of a Great They Ask, You Answer Website

Free Course:

Elements of a Great They Ask, You Answer Website
Start the Course
Elements of a Great They Ask, You Answer Website
Free Website Course
View Elements of a Great They Ask, You Answer Website
Elements of a Great They Ask, You Answer Website

Free Course:

Transform your website into your best salesperson and get set up for inbound marketing success!

In this course, you’ll learn:

  • What content and features your website needs to succeed with inbound marketing
  • How to design your website to best educate your audience
  • How to gradually make improvements or redesign entire elements of the website

How to use Gestalt Principles for a more powerful business website [Infographic]

By Joe Rinaldi

Joe Rinaldi also recommends this free course, Elements of a Great They Ask, You Answer Website.

How to use Gestalt Principles for a more powerful business website [Infographic] Blog Feature

You’ve probably seen this image before:

Free Course: Elements of a Great They Ask, You Answer Website

Rubin-Face

It’s known as the Rubin Vase and depending on which part of the image you focus on, you’ll see either an image of a vase or two faces looking at one another.

Careful, it gets kinda trippy if you stare at it for too long. 

Have you ever wondered why this phenomenon works the way it does? What causes our brains to see these two different images? 

It all comes down to how the brain is wired to perceive visuals. 

Our brains are constantly trying to process information from the world around us by comparing what we’re currently seeing to our previous experiences. They're looking for common patterns that will help us fill in the gaps to make sense of the world around us.

These patterns of visual perception are better known as the Gestalt Principles and they play a critical role in graphic and web design.

They help us build better user experiences by knowing which design elements will work best for a particular situation and how to direct users' attention to different parts of a page.

The team over at Toptal created the infographic below that covers the main principles that make up the Gestalt Principles: similarity, continuation, closure, proximity, figure-ground, symmetry, and common fate.

Let’s take a look at each of them:

Similarity

The principle of similarity states that shared visual characteristics between objects automatically create relationships. Similarity can also be used to tie together elements that may not be right next to each other.  

Navigation menus are a great example of using similarity. 

As you can see in the following image, all of the links in the navigation menu share the same style.
Navigation-Bar

This lets users know that these links all belong together and will function in the same way. This makes interacting and navigating through your site significantly easier. 

Continuation

The principle of continuity states that the human eye will follow the smoothest path when following something and it will continue traveling in that direction until it encounters another object.

In web design, continuity is used to help users understand the direction they are supposed to follow through a page.

Continuation

In this example from the IMPACT site, you’ll notice that each of these card style boxes are all the same size creating a nice straight line from left to right. 

This makes it easier for the user to read one box and instantly move to the next one.

Closure

Closure is the idea that the brain will fill in the missing parts of an image to create something whole. As long as enough essential information is present, the mind supplies the missing pieces of an object.

Take a look at the USA Network logo, for example. Even though the “S” is technically missing from the logo, our brain is still able to fill in the missing letter based on the information around it. 

USA-Logo

Proximity

Proximity refers to objects that are close together being perceived as a group. When placed apart, objects are seen as separate.

If you look at the example below, you’ll notice that because each icon is so close to the text to the right of each one, we’re able to understand that these two elements go together.

Proximity

Figure-ground

The figure-ground principle is based on the idea that people instinctively see objects as either being in the foreground or in the background. We usually make this distinction subconsciously but it lets us know where we should be focusing our attention.

On the IMPACT site, we like to use the figure-ground principle by placing our forms on a white background that sits on top of a blue background. 

Figure-Ground

This pulls the form to the foreground letting users know this is where they should focus their attention.

Symmetry

Symmetrical elements are perceived as part of the same group regardless of their distance. Because our eyes naturally look for order and stability, symmetrical sections like the one below are effective ways to communicate information quickly. These elements give us a feeling of solidity and order. 

In the example below you can see how the section is split perfectly in half giving it that symmetrical feel. This layout makes it easy for our brains to interpret the content on the left, then move right over to the image.

Symmetry

Common fate

This principle was not originally included in Gestalt theory, but has since been added. This principle states that people will group things together that point to or are moving in the same direction. 

Take this FAQ section for example. 

Common-Fate

The downward facing arrows are all pointing in the same direction which lets us know these are grouped together. Because of this, we can assume that all of the arrows exist for the same reason and accomplish the same goal. 

Check out the full infographic below to get a breakdown of all the Gestalt principles.

 

InfographicInfographic by Toptal

 

Elements of a Great They Ask, You Answer Website
Elements of a Great They Ask, You Answer Website

Free Course:

Elements of a Great They Ask, You Answer Website

Transform your website into your best salesperson and get set up for inbound marketing success!

In this course, you’ll learn:

  • What content and features your website needs to succeed with inbound marketing
  • How to design your website to best educate your audience
  • How to gradually make improvements or redesign entire elements of the website

Topics:

Web Design
User Experience
Published on June 20, 2020

Recent Articles

11 Pricing Page Examples for Business Websites (Updated for 2022)
January 18, 2022 • 10 min read
8 Crucial Elements Every Homepage Should Have [+Video]
January 15, 2022 • 6 min read
What Does a Great Inbound Marketing Website Look Like in 2022?
January 10, 2022 • 11 min read
What Makes a Good Website Design? 7 Award-Winning Examples To Be Inspired By
December 18, 2021 • 9 min read
What Is a Learning Center and Why Does My Website Need One?
November 22, 2021 • 6 min read
5 Prep Secrets for a Smoother, More Successful Website Project (+ Infographic)
October 14, 2021 • 7 min read
7 Self-Service Tools on Business Websites to be Inspired By
September 29, 2021 • 7 min read
Google Shares New Tools to Audit Website User Experience
August 12, 2021 • 3 min read
New HubSpot CMS Hub Starter Tier Released for Growing Businesses
August 6, 2021 • 4 min read
ICYMI: Digital Marketing News Update for July 26, 2021
July 26, 2021 • 6 min read
ICYMI: Digital Marketing News Update for July 19, 2021
July 19, 2021 • 6 min read
What the Heck is Going on With All the Google Updates? (Content Lab, Ep. 54)
July 15, 2021 • 1 min read
8 Best Business Website Designs (Updated for 2021)
July 15, 2021 • 5 min read
ICYMI: Digital marketing news update for July 12, 2021
July 12, 2021 • 5 min read
Too many internal links in content can confuse Google about site structure
July 9, 2021 • 5 min read
Google July 2021 core update rolling out over next 2 weeks
July 2, 2021 • 4 min read
6 tips for building a great diversity and inclusion page (+examples)
June 29, 2021 • 7 min read
Google punts third-party cookie ban to 2023 for 'responsible planning'
June 25, 2021 • 6 min read
8 types of website performance metrics you should look at on a monthly basis
June 24, 2021 • 11 min read
Finally, Google page experience core update is rolling out
June 18, 2021 • 3 min read
8 Business Blog Design Examples That Keep Readers Engaged
June 16, 2021 • 6 min read
5 ways you can use the StoryBrand framework to make a better website
June 14, 2021 • 5 min read
What is a Featured Snippet? [Definition + Examples]
June 10, 2021 • 4 min read
Google June 2021 core update live, July core update coming
June 4, 2021 • 3 min read
Google's June page experience core update will be mobile first, then desktop
May 21, 2021 • 3 min read