I love playing around with space and arrangement in my designs. The possibilities are endless (more in posters than regular apps but still). I feel like I have so much control, and it surprises me how small changes can completely alter the feel of the interface. If you’re like me, this is for you.

Layout interacts with other visual elements like colour, typography and icons to bring life in a design. When you think about it, it’s the thing that binds all otherparts in space to create a whole — the full picture. This completes the look and feel of the interface, and attempts to make the user journey as natural as it can.

The 2 very specific functions of design layout in a user interface?

1. Be simple enough to let the user complete the most critical function(s) quickly and easily. No one has 2 extra minutes to navigate through a sucky app!
2. Do NOT put anything that distracts the user from #1. No one likes 50 different interactive buttons on a homepage. It’s good your app can do so much, but I just needed to book a simple appointment.

In this post, I have attempted to condense the most common principles of layout in visual design. As with most things in visual design, layout has a lot to do with how the human mind works. So for each principle, I have separated the psychological basis (why?) and the takeaway (so what?), along with some practical examples.

This is for my own reference as well as for other interested designers, especially beginners. If you’ve years of experience as a designer, you can stop here.

I will try to keep this short. We won’t dive deep into every principle, but there are multiple free online sources if you want to learn more (I have referenced some of them at the end of this post).

Cool? Let’s go.

The X Basic Principles. X = 7

#1. Proximity

Psychology: We perceive things that are placed closer together as being related. We also presume that things that are farther apart are most likely un-related.

Takeaway: Put related items together, and (perhaps more importantly) put enough space between unrelated items to stress a lack of relationship.

#2. Negative Space (a.k.a White Space)

Psychology: We can’t focus on one important thing if it’s among a clutter of 100 unimportant things. Negative space is the empty space all around and in between the elements in your design. Think of it as the background layer. It connects and gives breathing room to these elements (so that they stand out) and helps relate and differentiate different regions on the interface.

The concept of negative space is similar in photography. When I am framing my image, the composition has to have some empty space so that the subject stands out and there is visual balance in the image. But more on balance later.

“If everything yells for your viewer’s attention, nothing is heard.” — Aarron Walter

Takeaway: There is no one way of using negative space correctly, and designers come up with their own creative variations to get the job done. The purpose should define your approach. Effective negative space should be able to

• give sufficient breathing space to all the design elements (especially interactive ones) and reduce clutter.
• show the relation between different elements while also sufficiently differentiating them (think margins, space between images and text columns)
• enhance hierarchy and legibility
• improve readability (remember, there’s space between text too).
• and most importantly, help lead the user’s attention to what you want to highlight.

#3. Alignment (the simplest principle to apply)

Psychology: Humans are super-amazing at connecting dots and pattern recognition, so we interpret visual patterns even when they are not explicitly apparent, drawing imaginary lines to join them. And we don’t like it when the patterns are off!

Takeaway: Arrange similar elements along imaginary lines. So if it’s a paragraph of lines, the beginning of all lines should adhere to an imaginary line. If it’s a bunch of same-sized circles as options on a questionnaire, the centres of all circles should lie on an imaginary line.

A slight miss on alignment can make otherwise great designs look amateurish. This is why all modern design tools have so many algorithms to figure out different alignment needs, e.g. the equidistance between elements, the centre alignment between alignments, the margin alignment across elements.

#4. Contrast

Psychology: In order to perform a task quickly, we need to be able to identify and perceive different elements as being different from one another. We can’t differentiate similar-looking elements sufficiently and quickly.

Takeaway: Ensure adequate differentiability among elements having different functions. Although usually seen in the context of colour, contrast can be created by any form of differentiation — this includes colour, size, maybe a different font.

The purpose of this differentiation can be many — establishing hierarchy, improving readability, aesthetics, emphasise elements such as CTAs).

#5. Repetition (a.k.a Consistency)

Psychology: We associate similar-looking appearances with similar expectations and actions. We love familiarity, and hate unexpected outcomes.
Have you ever clicked on a logo at the top left hand of a website only to realize that it is not interactive and won’t lead you to the website’s home page? I have.

Takeaway: Users need to know what an element represents and the expected outcome on clicking it. Your interface should have a consistent look and feel, and similar elements used in different parts of the design must mean the same thing. And, if something is globally accepted in contemporary design, it’s highly likely users already associate it with a well-established expected outcome. In such a case, it’s better to maintain continuity with established standards for a good user experience.

#6. Hierarchy

Psychology: We like to know what’s important, in a quick glance. And hierarchy sets the order of importance of the elements in a layout. Look at this article — there’s a title, subtitle, and then the normal text, interspersed with sub-headings.

Takeaway: Set a clear hierarchy on the interface that emphasises the most important elements in order of their relevance and guides the user to the most critical information. Designers need to guide the users’ eyes through various elements in order of their importance.

#7. Balance

Psychology: We find evenly distributed patterns appealing and well-balanced, and uneven ones create tension and make us uncomfortable.

Distribution here isn’t merely spatial distribution. Depending on its attributes, each element on a design (including negative space) has a visual weight, and these visual weights interact with each other. The overall design should be such that the visual weight seems evenly distributed across it. Think of it like the centre of gravity of a system, which depends upon the gravitational interaction and balance between the sub-systems.

Note that balance is not the same as symmetry, though symmetry is one way visual balance can be achieved. In practice, perfect symmetry is boring! Most real designs leverage asymmetrical balance which allows for more interesting, unconventional possibilities and variations. Don’t believe me? Check the thumbnail picture of this post!

Takeaway: Arrange visual elements and negative space such that no one area of the design overpowers other areas. Visual balance is measured by, well, looking at it. There is no better way to understand balance than by seeing the visual weight distribution across hundreds of designs and asking why something is working and something else is not?

To read more on balance in composition and visual weight, refer this amazing article on Smashingmagazine.com

Enjoyed this post? If yes, please show some appreciation by clicking on the “clap” button. Fun trivia — you can hit it up to 50 times! It helps the content reach out to more like-minded people.

Please share your thoughts and feedback in the comments below. This will help me improve and also inspire me to create more.

I try to publish regularly on Medium. Follow this account to receive similar content in future, and click here to get each post directly in your email. You can find me on Linkedin and Twitter as well.

See you soon!