Transcript for:
Key Design Principles for Effective Layouts

Let's first start with similarity. Our brains like to group objects together regardless of where they are placed. In this case, we group these circles based on color, not by location.

The human brain loves to categorize things. When you look at the following random assortment of squares and triangles, what do you see? Better yet, how do you see them? There is likely a chance your brain is deciding to group together the triangles, like in this example, or it has decided to group the squares together, like in this example.

Your brain is working hard to make sense of the different shapes presented. The principle of similarity also applies to color, texture, shape, position, orientation, and size. And knowing how the brain works here comes in handy as a designer. We can use this principle to shape how we develop our layouts.

We can bring attention to the most important elements in the design by making it different than the rest. We could do that by making it a different color, like this example. We have two layouts. Each shape represents a photo, text, or element in the layout.

We are using similar shapes in our layout. This helps everything feel like it belongs together. This example features different shapes of photos and content, which does not allow the brain to categorize all the different information presented, causing confusion. The next principle we're going to go over is the principle of proximity. Close objects are grouped together.

Your car console uses the idea of proximity to make it easier for you to find and locate related controls on the dashboard. You may notice all of the air conditioning and heater dials located in close proximity to each other. You may also see the radio controls put tightly together in relation to the other unrelated controls of the car.

This is a helpful concept to keep in mind when doing layout design. We can group related items in the layout together so they feel like a larger, cohesive group that share a similar goal. This helps the human brain organize larger amounts of information that would otherwise be overwhelming.

In the logo above, the logo on the top is a good example of the principle of proximity in action. The logo on the top has the words of the company Travel and Loop spaced rather closely together. I'm able to read this logo as one company name, Travel Loop. In the logo in the middle, you see a wider gap between the two words, and they start to read as separate words, but also start to feel disconnected from each other. The event name and the descriptor line are grouped together in the same area.

You can also see related date and location items grouped close together. This allows the viewer to group related items together so they can easily understand the information. Imagine if we placed all the information into one area without any sort of separation. It could be really messy and intimidating for the viewer to look at. The next principle is the principle of simplicity.

And we break down elements into the simplest forms possible. We see the image on top as one complex shape with curves and lines. Instead, what our brains try to do is break that complex image down into something easier to handle. And we suddenly see three simple shapes instead of just one complex shape.

We see the principle of simplicity applied to icon design all the time. Icons need to be seen in very small sizes. If we were to have a detailed illustration for a small icon, it would not always be easy to tell what it was. We instead simplify illustrations down to icons that could be identified in many different sizes.

So when you take this icon for example, when reduced down to smaller sizes, this simplified icon fares much better than the more complex illustration. One thing to always ask yourself when creating a design is can I make this more simple? You could do this by reducing unnecessary elements, graphics, and even combining texts that are saying the same thing. Simplification can make your message appear more clean and concise.

Ask yourself another question. Is this graphic or element adding value to my design? As designers, we typically feel we need to show off our creativity.

But remember, your design's overall message is always the most important. Make it clear. concise, and rewarding to look at.

So take this example. The layout to the left is busy and complex with many different sized elements and structures. Simplifying our layout to focus on our main photo, idea, or focal point can help a viewer cut through the noise, so to speak, to have an enjoyable experience. Using simplicity makes complex objects easier to understand.

The goal is to reduce it down to the point where it still retains its core meaning and use. This clock is still understood as a clock, even though it's just a circle and one bit line.