Making Sure You Have the Right Amount of Spacing in your Web Design Layouts

Designing a website isn’t just about what you add to a page, but also what you choose to omit. Establishing the right amount of space is often makes the difference between a mediocre layout and a phenomenal one. It may sound a little dramatic, but it’s the truth.

Creating a web layout can be a lot like laying out furniture in a room. The actual furniture can be award-winning pieces in a showroom. But if arranged in a cramped manner, the room’s impression on its visitors becomes a bad one. The same holds true for website designs.

If you were to imagine every design element as being an inhabitant of your digital canvas, each would naturally want to maintain a certain amount of
personal space. In this case, it’s your responsibility as the canvas police to make sure no one element is infringing upon the personal space of another else chaos could ensue 🙂

Adding Space to Your Web Text
Line height or leading as it’s also called is very important and unfortunately, often overlooked. It’s not uncommon to see a site that has great spacing for all its graphic elements, but virtually no spacing for its text. The whole user experience turns into a contradiction when you have spacious images but letters that look like they’re sitting right on top of each other. Since every layout is different, there is no one setting that works in every scenario. However, a majority of the time, I find that adding to the default (auto) setting will bring the much better results.

Adding Space to Your Web Graphics
Let’s take a quick look at an example of how a little spacing can go a long way. In one example, it feels like you’re walking into the cramped room of a long-time “hoarder”. Perhaps an exaggeration, but you get the idea 🙂 In the another, it feels like you have breathing room. And with breathing room comes a certain level of visual professionalism.

Hopefully, the example above shows the importance of spacing. Sometimes, a lack of spacing goes unnoticed because there isn’t another more spacious version with which to compare. The main purpose behind this article is to share a mindset rather than a list of specific concrete tips. While design in general is very subjective, it’s also at the same time very psychological. It elicits feelings and emotions in your users whether they are aware of them or not. That being the case, it’s important that attention is paid to the subtleties of every aspect of design whether it’s the strength of drop shadow or the proximity of two elements that need more personal space.