In addition to typography, the Gestalt principles are equally important. They explain how we see things. A huge part of learning design is understanding what’s going on the page or screen. We can do this by knowing Gestalt principles.
“The whole is other than the sum of its parts.” – Kurt Koffka
Aristotle said, “the whole is GREATER than the sum of its parts.” Kurt Koffka’s quote suggests that they exist independently. We can look at a design and say, “This is dynamic and works really well.” In order to understand why it works, we need to explore what’s going on in each section.
01 Symmetry
When you learned this in math, it was probably presented as a mirror effect. In design, use it to create balance.
When I was in design school, I thought symmetry was so boring because I wanted a “cooler design.” I was young and stupid. I use this fairly often especially on websites because it creates an equal hierarchy. (It also stacks so easily on mobile!)
02 Similarity
We naturally group things together that are the same shape, size, color, etc.
I highlighted how the Yelp app uses similarity in their landing page. You’re essentially trying to group things together, but provide contrast between sections at the same time. The middle section with the circles also uses continuation, which I’ll cover further down.
Let’s Connect!
Each month I’ll send a design-focused newsletter with tips, some thoughts, favorite items I’m loving, a round-up of recent posts, and more.
03 Proximity
We also group things that are close together. Things that relate to each other should be closer in proximity.
Conversely, separate groups through distant proximity.
This magazine layout from WIRED, is a great use of using proximity to group different blocks of text.
04 Common Region
We perceive Items in the same region as a group. Slightly different than proximity, but they can be used together, as in a card layout design.
05 Continuation
Our eyes follow a line or a series of shapes. Use continuation to guide your user.
Here, I’ve highlighted how the Spotify dashboard uses repetitive shapes to guide the eye. What’s nice about the contrast here is that the horizontal rectangles draw your eye vertically, and the more vertical rectangles draw your eye horizontally.
06 Closure
Users complete shapes even if they’re not finished. You’ll see this mostly in icon design and logos.
07 Figure Ground
Visually being able to tell an object from the background. In UI design, you use a modal window to separate the background, but you’ll see a truer representation of this in some logos.
Conclusion
Designers live and breathe these principles when they design. Even if you’re setting up a brunch shot for an Instagram pic, you can apply these principles to how you place the plates and things in the photo.
The next time you’re looking at your phone, a subway poster, or a magazine, see if you can spot which principles are being used.
Keep on creating!
Let’s Connect!
Each month I’ll send a design-focused newsletter with tips, some thoughts, favorite items I’m loving, a round-up of recent posts, and more.
Recent Comments