Mike BifulcoThis is Tiny Improvements. I'm Mike by ko Have you ever felt that you've seen a design that just makes sense to you, but you couldn't quite put your finger on why. At some point, we're all faced with the challenge of creating a design that works intuitively and looks great. When building a new interface, there's a temptation to lean heavily on obvious design elements, like color or shape, or to use cards and borders to hold bits of UI. It makes sense.
These are easily visible to the person using your app. What you may not realize is why these elements are so effective. The people who use our designs are silently and subconsciously navigating questions. Like what's the most important thing on this page. What's the relationship between these elements and what's the best way to navigate this interface. Enter. Gestalt principles, a set of psychological concepts that go beyond aesthetics.
To form the foundation of how we see and interpret user interfaces. This is the bit of our mind that guides us to parse the whole picture by understanding the relationships between its parts. The gist of understanding gestalt principles for design is this, our brains are used to grouping things together based on a few patterns. These patterns are the foundation of how we perceive the world around us. By understanding these patterns. We can create designs that are easy to understand and navigate.
Additionally by breaking these patterns, we can intentionally draw attention to specific elements in our designs. Some of the basic install principles in short, our past experience, our brains use past experiences to interpret new information. Proximity elements that are close together are perceived as a group. .Similarity elements that look similar are perceived as a group. Figuring ground our brains, separate elements into background and foreground.
And finally assymetry in order our brains perceive objects as symmetrical shapes that form around their center. There are a few more principles. This isn't a comprehensive list and they're all worth understanding. But for now let's focus on how these principles can be applied to create better designs. First up past experience. Let's talk about the power of familiarity. In your mind picture, a web forum used to collect someone's mailing address.
You probably see a series of fields, each labeled with a specific piece of information. The street address, city, state, postal code, maybe country. Where do each of these fields go? If you're like most people, you probably see street address at the top followed by city, state and zip code. Of course, this may vary based on where you're from, but it's a perfect example of how past experience influences our perception of new information.
We've seen this pattern so many times that we instantly recognize it as an address, and we know how to interact with it. Okay. So let's talk about the power of grouping with proximity and similarity. These are two of the most powerful tools in a designer's toolbox. They allow us to group elements together in a way that makes sense to the user. This is why one of the fundamental building blocks of most CSS design systems is the grid.
It's a way to ensure that the space in your design is consistent and harmonious, guiding the users. I and creating a sense of order and structure. What does that mean? Well, it means that the space around in between elements is just as important as the elements themselves. It's the difference between a cluttered confusing design and a clean, intuitive one. Consistency is critical here. Spacing related elements should be consistent. And the space between unrelated elements should be distinct.
Up next to the power of contrast with figure and ground. The gestalt principle of figure and ground is all about contrast. It's the idea that our brains separate elements into the background in the foreground. This is a powerful tool for creating designs that are easy to understand and navigate. By using contrast, you can make elements stand out from the surroundings and draw attention to specific parts of your design.
You can probably imagine in some of your favorite apps, that there are areas that are called out as specific or grouped by putting them within a box or wrapping them in a border that's essentially figure and ground at work. It's separating that box, that card from everything else there. Okay, so now let's talk about color. A little bit of color can help and too much can be a problem. Color is a powerful tool in any designer's arsenal, but it's also a double-edged sword.
Relying on too much color can lead to designs that fail for a variety of reasons. For instance, colorblind users may struggle to distinguish between different elements as a reminder of something like 10% of all men have color deficient vision. That's more than you might think. Conversely too much use of color can make it difficult for people to understand what colors are meant to convey.
Back when I was working as a user experience designer at Microsoft, it was common practice to design interfaces in gray scale first. This was a way to ensure that the design was strong enough to stand on its own without relying on color, to convey meaning. Once the design was solid. We'd add color to enhance the experience, not to define it. A truly successful design maintains its integrity, even in black and white.
This is a Testament to the strength of its structure, spacing and overall harmony of elements. These are principles rooted deeply in gestalt theory. When color isn't the primary means of conveying information. It can be used to draw attention to specific elements. This is where the gestalt principle of similarity comes into play by using color to make certain elements stand out, you can guide the user's eye and create a sense of hierarchy. Think about it.
If you're filling out a web form and one of the fields is red, it probably means there's something wrong with that field. Right. There you go. That's similarity. We're breaking the rule to draw your attention to something. Anyway, just taught principles are really powerful tools for designers. They help us understand how people perceive and interpret the world around them. And they provide a framework for creating designs that are intuitive and easy to use.
By understanding these principles, we can create designs that are not only visually appealing, but also more functional and effective. I'm sure you've heard the old trope about how breaking the rules is the key to great design. In truth. It's hard to break the rules in a useful way. If you don't understand them in the first place. Just all principles, provide a solid foundation for understanding how people perceive and interpret the world around them.
And they can help you create designs that are both visually appealing and easy to use.