Gestalt principles: How to apply them to a mobile app design
We feel and recognize good design instinctively, when something feels off our mind riddles at the mystery — you may not be able to point out or say what exactly is wrong but your mind-processor just knows it.
Using design rules is vital to construct a good design and ultimately a good experience for the user — you may have a great idea and just kill it with bad design decisions.
So what exactly are these design rules? They are basic guidelines based on German psychologists’ theories, which discovered how the human brain naturally organizes, understands, and perceives visual elements — therefore the German name, Gestalt = Shape/ Figure.
These are some Gestalt Laws of Grouping and how our mind (or at least my mind) understand elements relation to each other:
- Law of Proximity: “They are close, they must be related”
- Law of Closure: “Let me just fill on the gaps for you”
- Law of Similarity: “Are they twins? Well let’s just group them together, they look similar enough”
- Law of Common Region: “This looks like a nice little neighborhood now”
- Law of Good Continuation: “Oh, I know you work together, but I can still see through you”
- Law of Symmetry: “These are the real twins”
- Law of Common Fate: “We are all moving in the same direction, let’s go along with the inertia”
But wait, there’s more — there always is! There are also Design Principles that help organize and offer a guided and smooth experience to the user, for example:
- Unity: elements working together without clashing.
- Balance: it’s the visual weight — but don’t be afraid to play around, not everything needs to be Symmetrical in order to be pleasing, you can also have informal/asymmetrical compositions.
- Hierarchy: think about what you want your user to see first and how the overall visual flow will guide the experience.
- Proportion: all about size relationships.
- Emphasis: apply color, boldness and size to highlight elements.
Less talk, more action - here is some of these principles applied to a mobile app:
Every screen is a combination of many principles, they all work together to create an intuitive and loved experience by users.
Take a closer look at the overall design proportions and how they work together, what catches your attention first?
A little detail here is that the user knows from previous experience that they can scroll down — some kind of modern digital closure and continuity. Plus, they are hinted to scroll by seeing a portion of an image that the mind is eager to see completely.
Now let’s see another screen, there is a continuity in the design from one screen to the other providing cohesion — the user know what to expect.
Another great principle to apply is Lay of Common Region, see how the first part of the Discover page feels like a section and the lower part like another one, this helps the user to separate and understand that the sections are play have different functionalities.
Furthermore, with the emphasized square under the category “Wine tastings” the user can understand how both section work together in unity.
Wrapping up
Although some principles may seem logical, they are the basis and vitality of designs, more than just guidelines, they are a fundamental tool that needs to be always implemented and trained.
