Sketch + Gestalt Principles
Mastering the tool is one thing. The other one is learning about design theory. What happens where these aspects are combined together? Every successful design is the result of the ultimate usage of designers experience and the design software.
I want to start “Sketch +” series of articles where practical design knowledge will be combined with tips on how to apply them in Sketch app.
The first tutorial will cover the Gestalt Principles. These rules help us explain how we perceive the world. In the story, we will also focus on practical samples that will help you create designs with better confidence and examples of features in Sketch that may help you design faster.
🔍 Short Introduction to Gestalt Principles
The history may not sound so exciting, but it is always good to see the background of a particular topic. I promise that I will help it as short as possible.
Gestalt is a German word, and it means “shape” or “form. Psychologists formed it in the early XX century. Fathers of the theory are Max Wertheimer, Kurt Koffka and Wolfgang Kohler. Gestalt psychologists were interested in looking at the mind behavior. Principles describe the way we perceive the world.
The key fundamental rules of gestalt systems are emergence, reification, multistability, and invariance.
Emergence
Our minds tend to see simple, strong objects faster than the details. We tend to see objects in the general form first.
Reification
We can see or deduct the whole thing even if there are some missing elements or if it is incomplete.
Multistability
There is always more than one way we can perceive a particular object. Our mind works in an excellent idea: it always decides one point of view to be dominant after a while.
Invariance
The human brain builds a simplified projection of the particular object in mind. Thanks to this, we can recognize thing independently of its size changes, rotation, or other transformations.
OK, that’s it. Now, let’s jump to the explanation of the Principles in the context of UI Design and their creation in the Sketch app!
Proximity Principle
The principle of proximity tells we perceive elements that are close to each other appear to be related. Even if there are more objects, the ones that are closer seems to be more correlative than elements that are placed farther.
Our brain perceives these sets of closely placed elements as groups. Proximity is so essential to our perception that it is stronger than other features like shape or color.
Proximity Principle in UI Design
Thanks to the usage of proximity, designers create content more comfortable to perceive by users. The pages are more scannable. This applies not only to the UI controls like buttons or inputs but also to the written content and typography of the solution.
Proximity may be used to group content and action controls that are related to each other. It is also bonded with White space that plays an essential role in the principle. It boosts the relations between elements and strengthens the designer’s intention. Thanks to this User have no doubt what will happen if they trigger the action. In the end, users are able to scan content faster and accomplish their goals much more efficiently.
Proximity in Sketch
Distributing elements in Sketch is very easy. There were always tools in the top of the right pane that helped to distribute and align elements.
You can also quickly nudge elements to change their position by pressing [Shift] + [Arrow key]. Sketch preferences (Canvas section) lets you configure the amount of points that objects will be moved.
From Sketch 55, we can also smart distribute elements aligned in a column or row. Just select layers and the handles will appear — now you can change distances of the items quickly.
Thanks to these features, you can easily align your UI elements to match Proximity rule better.
Similarity Principle
Elements that have similar visual appearance seems to be more related or grouped than the ones not sharing the same attributes.
The main characteristics that boost the impression of similarity are size, shape, and color. The similarity is not so weaker that proximity but is also a powerful law of human perception.
Similarity Principle in UI Design
While 3 mentioned attributes perfectly apply to the UI Design, there are also additional, not so atomic properties, that may strengthen the similarity: typography, iconography, shadow, texture, etc.
When users notice similar element in the UI, they categorize them as particular patterns. Thanks to this, they quickly recognize the meaning of specific UI controls. This is why it is so crucial for the primary buttons to look the same on every page.
In the group of “similar” elements, We tend to see objects with the similarity of colors first, then size and in the end shape.
Similarity in Sketch
Sketch gives us multiple techniques to create and manage similar elements quickly.
First, To copy and move the layer or group quickly hold [Option] key while moving the object.
Next, Symbols obviously. If you know that particular element will be used a few times in your design — consider creating a symbol. The instances of a specific item will be easy to manage and look identically unless you use…
Symbol overrides — the feature that gives even more power to Sketch. Similar does not mean identical. Sometimes Symbol has to differ a bit. Thanks to overrides Sketch will make this easy to manage without creating another symbol or detaching an object from it.
Continuation Principle
When the eye is guided to move from one object to another, we speak about the law of continuity. Our perception tends to see object arranged in lines or curves as more related or grouped.
Continuation Principle in UI Design
When you see groups of elements, like photo gallery sliders, tabs or even simple lists, you may now notice they are using continuation. The objects are placed nearby, and they guide eyes to jump from the one to the next.
Continuation in Sketch
To mark out the continuation of particular elements, use the same Sketch featured as in the Proximity Principle. Use distribution options from the right panel, or apply smart distribute.
One more exciting feature is “Make Grid” available from the “Arrange” menu. It allows you to quickly form a grid of selected elements, which is also practical to highlight the continuation of items.
Closure Principle
Objects are often perceived as a whole thing, even when they are incomplete. Our mind quickly fills the gaps and helps us to find the meaning and intention of a particular thing.
Closure Principle in UI Design
Every time when you see a loading indicator, a progress bar or sliders — the law of closure was used to make the solution more understandable to the User.
The other usage of closure is negative space. We see it in logos and iconography. It makes the design more readable or even enjoyable.
Closure in Sketch
To make icons with the usage of closure just apply boolean operations on shapes, they are very simple to manage in Sketch.
Creating elements like circular loading indicator or progress bar is also easy to be done in Sketch. There is a smart trick that lets you create it extremely precisely.
Let’s try to make it now:
Draw a circle, for example, 200×200 size. Turn off the “Fill” and set up “Border.” Now open Border Properties (right panel) — this is the place where the magic will happen.
First, we need to get the circumference of the circle. The formula is 2πr, where “r” is the radius. The circle with size 200×200 points has got 100 points of a radius. Let’s round off π to 3.14. Let’s make the calculation:
2 * 3.14 * 100 = 628
Now, enter the number into the Gap Field in “Border Properties” pane.
What kind of value would you like to see in the donut chart? Let’s make it 73%. Let’s make the calculation:
628 * 0.73 = 458,44
Enter the value into the Dash Field in “Border Properties” pane.
Voila! You can calculate every needed value and have them presented in the chart.
Note: If you change the size (also scale) the chart will start to act inappropriately. You will have to make the calculations again
Symmetry Principle
Our mind perceives symmetrical objects as parts of the same group. They create an impression of stability and order.
Symmetry Principle in UI Design
UI Elements that are symmetrical to each other helps to scan the content and recognize patterns. Symmetry allows users to focus on what is essential. Symmetrical navigation menus tend to be perceived as more stable. The principle is excellent to use when you design galleries or banners.
In the other hand, some asymmetry in design can make it more exciting and dynamic.
Symmetry in Sketch
Achieving Symmetry in your design with Sketch is simple.
If you would like to create mirrored elements, just use Flip Horizontally or Vertically features in the right pane. Thanks to this you will flip layer or group in one click.
Common Fate Principle
When the elements tend to move in the same direction, we perceive them as part of the same group.
Common Fate Principle in UI Design
This principle is fundamental in motion design. Every meaningful animation uses common fate to guide users eye in the right way. This helps to connect content with triggered action.
Common Fate also applies to the elements like nested menus, dropdown or accordions, that shows how the menu element will behave clearly.
Common Fate in Sketch
While Sketch does not have motion design tools (yet?). We can still design common fate elements using other techniques.
Here is where the Symbols are useful again. Creating a menu or dropdown as a symbol is a simple way to make use of this rule.
Figure-Ground Principle
The human eye is able to separate object on different plans of focus. We know which elements are placed in the foreground and with ones are in the background intuitively.
Figure-Ground Principle in UI Design
Every time you see the modal page or popup, you are a witness of Figure-Ground Principle usage in action. There are several techniques to distinguish plans of focus on mobile: you can use parallax background, semi-transparent overlay, shadows, or blur the elements in the background.
There are design systems that prefer each technique to be used in them: Material Design uses overlays and drops shadows, but iOS Human Interface guidelines recommend to use blur.
Figure-Ground in Sketch
To achieve a better perception of background and front objects Sketch gives you lots of possibilities.
You can use drop shadow if your style of design is using them. If your brand is more like iOS, you can also apply background blurs. There is also a simple way to create semi-transparent overlay and adjust its blend modes.
All of these features are available to reach from the right pane of the selected layer.
Common Region Principle
Objects placed within the same region are perceived to be in the same group. This is similar to the Proximity Principle.
Common Region Principle in UI Design
This is a very useful law in UI Design. Let’s take an example of cards from Material Design. They may include various elements like images, icons, text blocks, or buttons. However, thanks to the card (white rounded rectangle with subtle shadow), they are perceived as a single object.
Common Region helps to structure the content and make it easily scannable. It also applies to elements like navigation bars, tables, menus, form sections, etc.
Common Region in Sketch
Again, use Symbols that includes multiple elements. When I designed Prime Design System Kit, I used Atomic Design Principles that allowed me to build a structure with essential elements (colors, typography), and more complex ones (buttons, inputs), and the ones using Common Region principle (cards, modals, toasts).
Complex symbols are handy and easy to configure thanks to Symbol Overrides because you can change not only style but also a Symbol within a Master Symbol.
Periodicity Principle
Elements that appear multiple times in similar distances are perceived as related.
Periodicity Principle in UI Design
Periodicity helps users to recognize patterns in UI Design. This rule is used in tabs (elements are placed in the same rhythm), you scroll the list or grid (objects appears multiple times in similar distance). This may also be used in sections of the web page, to build a rhythm.
Periodicity in Sketch
Sketch offers simple features to create a grid of elements quickly. You can find it in Arrange Menu -> Make Grid.
Another useful thing you can make in Sketch is creating rotated copies. Very handy for all kind of indicators or loaders. To use it open Layer -> Path -> Rotate Copies
To conclude
Gestalt Principles are an essential part of UI Design. I hope that this tutorial helped you to remind them and showed you how they might be achieved with Sketch app.
By the way…
If you read the whole article, you probably use Sketch. Would you like to design faster and more efficiently? Below you may find some resources that apply various time-saving techniques to help you:
❤️Make User Flows faster in Sketch — With SQUID you can create User Flows directly in Sketch file with your artboards. Everything may be done within a couple of clicks. See how it works.
❤️Create Web and Mobile Designs within minutes — Starting UI Design from scratch is boring. I wondered how to skip this part of work to focus on more interesting tasks. Prime Design System Kit is the resource that lets you customize all essential UI elements quickly and jump right into the most engaging parts of the design process. What is more, it includes Charts, Device Templates, and Illustration Kit to speed up specific pieces of work. Thanks to Prime you create Web or Mobile design within minutes. See Prime in action.
To make it easier there is a gift 🎁 Use MEDIUM10 offer code to get 10% Off.
If you are looking for more practical tips, feel free to subscribe to the newsletter (as a subscriber you get an extra discount for design resources).
This story is the extension of UI Design in Practice article from uxmisfit.com.
