How to become a web designer, and what qualities should a really cool specialist have?
From the author: many of you were probably looking for the answer to the question: how to become a web designer? Of course, this is a difficult question, to which…

Continue reading →

How to start making money as a web designer on the Internet?
From the author: hello friends! Web design training, like any other profession, is gradual. At first it’s just a hobby, which then under certain circumstances can turn into the meaning…

Continue reading →

Rubber web design. What and where are we going to stretch?
When developing a website, the webmaster, first of all, should be based on the goals of the project. If it is important for the customer that the web page can…

Continue reading →

Working with empty space: why emptiness affects design so much

in web design, empty spaces include areas without text and images. It can be said that this is “visual silence”. For our design to function, it is necessary to correctly combine the empty space with the one used.

What did you notice? Of course, Rowan’s incredible wit. But have you noticed how he uses silence to make people laugh? This technique is called comic timing, one of the most important skills that a successful comedian should possess.

Imagine Rowan Atkinson’s performance without these pauses. Not very funny, because it is silence that makes a joke funny. This silence has a very important task.

Find out more
The same can be said about music. Although there it can only be a lull before a sharp increase in rhythm, and not complete silence.

Notice how in the example above the bit “drops” by 0.45 and 1.29? Silence gives drama to future events. I took the dance track, but could easily take Beethoven’s fifth symphony.

In both examples, silence is a critical factor in attracting attention. The same way empty space works. In web design, empty spaces include areas without text and images. It can be said that this is “visual silence”. For our design to function, it is necessary to correctly combine the empty space with the one used.

Although Google was not always famous for their design skills, they were always supporters of empty space, which is noticeable on their home page. Google launched their redesign when the pages of their competitors such as Yahoo! were tightly packed with weather forecasts, news and mail. The no-frills interface allowed users to focus on the main task – searching the Internet, without being distracted by what they do not need.

It’s hard to really appreciate how radical design decisions have been over the past 20 years, but we know who to look at in this regard.

Two types of empty space
Active blank space: the space between design elements, often used for staging visual emphasis and structuring. This is an asymmetric type of space that makes the design more dynamic and active.

Passive empty space: the space between words in a line or the space around a logo and other graphic elements.

Take a look at the 500px homepage for how it uses active and passive white space.

When working with space, we mainly look at active empty space, however, passive space also needs to be paid a lot of attention to how it works with design.

Two sizes of empty space
Empty micro-space: this term refers to small areas of empty space between letters and words, as well as between multiple graphic elements. Correct tuning of empty micro-space sets the general tone for the entire design without changing its main component. Something like a rhythm in dance songs. The song is the same, but somehow sleepy.

The screenshot above shows the empty micro-space between the Log In and Sign up buttons, as well as between the heading and paragraph.

Empty Macro Space: This term describes large volumes of empty space. For example, the space between columns or paragraphs. Optimizing your macro space can often dramatically change your design, potentially improving the flow of attention and rhythm on a web page.

In the Tumblr design, empty macro space is clearly visible in the empty footer and sides.

White space?
The term empty space means the absence of color or tone, which can be confusing. The empty space, in fact, can be any color that is responsible for the void in your design – yellow, blue, green or even texture (as in the Todoist example below).

Your choice of color does not make any difference, but do not forget that colors and textures are much nicer to look at than stern white. The principle is maintained even if you select a different color or texture.

Where and how to use empty space
Blank Space and Call to Action Elements (CTA)
Always imagine that the user does not know where to go next, and correctly design the empty space. The idea is simple – if there is nothing next to the button on the page, then you need to click on it. Conversely, if the page is clogged with elements, the user will not even notice this button due to clutter.

Find out more
As you can see in the image above, the second CTA element is much more attractive than the first, since it is not cluttered with other elements.

Using empty space for an emotional response
There are many ways to evoke emotions in design, including fonts, color, and images. All of these methods help add drama, but empty space is the most powerful component and less costly. Some call it a good investment.

Custom CSS Properties
A Ashley Nolan poll in November 2016 showed that 84% of front-end developers use a CSS preprocessor. At the same time, developers consider variables to be the most useful preprocessor…

...

Web Design Rules Every Professional Should Know
The basic principles are the same for each representative of this field of activity. They are followed by both experienced professionals and even green beginners. Do you think that, having…

...

Blog Design: Layout Workshop
The topic of today's post is blog design. We will have a practical lesson, so get ready for independent work, there is no planned vacation :) Why is the master…

...

Composition in web design, or what Photoshop tutorials are silent about
Surely, you often have to visit sites that, at first glance, seem to be like nothing - both the pictures are beautiful and the text is folding, however, they lack…

...