Home > Web Front-end > HTML Tutorial > The power of 'white space' in design_html/css_WEB-ITnose

The power of 'white space' in design_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:55:21
Original
758 people have browsed it

Many proven and valuable experiences in graphic design can be generalized and applied to other fields.

You may have heard of the concept of “negative space”?? This is one of the design techniques that designers use almost every moment. If used skillfully, onlookers may not even notice that this technique is used in a piece. The point of this approach is to direct the viewer's attention to the key information or the most important visual elements in the work, thereby enhancing the overall effect of the work.

Lanlan Design (www.lanlanwork.com) is a dedicated and in-depth interface design company, providing effective BS interface design, cs interface design, ipad interface design, packaging design, icon customization, user experience, interaction design, website construction, graphic design services

For designers who have a lot to express, this may sound a bit unreasonable?? Design It is often difficult for a teacher to restrain himself from using more elements. However, once you truly understand the essence of negative space, you will know how to use it flexibly and appropriately.

In the context of graphic design, the concept of “negative space” is slightly misleading. This is like saying that the page you are designing (whether real or virtual) is nothing but blank space.

This is obviously not the case.

Because the white space still contains a lot of "things", if used properly, its effect will never be "negative".

Negative space in design is like a navigation map, showing viewers exactly what they need to know and want to see.

Some photography works intentionally blur the background to focus the eye on a focal point. The strategy of negative space is similar. People's attention will subconsciously ignore the blurred background and only look at the sharp objects.

Our eyes tend to pick out familiar shapes and patterns, such as identifying a person's face, a specific tree, or recognizing our pet cat among different cats, etc.

The negative space in design also utilizes this principle. When a space full of white space is broken by a sudden visual element, your eyes will naturally turn there.

One of the simplest and most effective ways to understand negative space is to imagine a logo at the top of the page, centered and about 15% to 20% of the width of the browser page.

This is important: there is nothing around it. So, where does your gaze stop?

The answer is of course: look directly at that logo.

You won’t look left and right, aimlessly looking at the blank space, only to find the logo later. Your eyes will go straight to the topic, because "something" suddenly breaks the "nothing" "state.

This is the beauty of negative space. It is the "blank space" in the work that allows you to immediately see what is there.

So, should all page elements take up space?

What this essentially means is that some visual elements require negative space while others don’t, and it’s important to make this distinction. .

Conceptual image? Might as well consider it.

The publication date of an article? Not recommended. Because when a visual element is set off by negative space on the page, it immediately gives the impression of being “more important” compared to other elements on the page, which can disrupt the established page layout.

So, logo, title, subtitle, main image?? Only these elements that are important to a certain extent are worthy of using negative space to express them.

Use negative space to express storytelling

Please look at the three example images above. They are not as simple as the logo I originally used; Relatively speaking, the more complex negative space strategies and "high-level" processing methods may be a little difficult to understand, but if used appropriately, the effect can be very strong.

Negative space can confuse the viewer's eyes - it may take some time for the viewer to react, but once they discover the mystery, they will be impressed by the creator's ingenuity.

The above are just some random examples I gave.

Negative space makes a visual more dramatic

Another effect of negative space is that it can make a theme visual like a portrait or a key visual element more dramatic. This technique is often used in conjunction with the main title and promotional text.

It may be a little difficult to use this technique with ordinary and common projects, but for some of the more "high-end" projects that your clients ask for, negative space will show its magic.

The following is another example of negative space reflected in a specific work (picture author is photographer Anthony Taylor, used with permission of the author).

The artist who designed posters for thriller movies also has some masterful “negative space” designs.

Old poster from 1982

New poster from 2007

Stefan Berg’s film “The Ghostbusters” (1982 ) poster is a classic example.

No single element in this movie poster is scary.

There is a little girl, a teddy bear, and a big TV screen in the picture. There is no blood, no violence, no scary images, even the font is bland.

However, the entire poster is filled with an extremely frightening atmosphere. Apparently something on the television had mesmerized the poor, innocent little girl. She was trapped alone in the darkness with no one to pull her out.

What’s interesting is that when the film’s 25th anniversary commemorative edition (2007) was launched, a redesigned poster was used. Almost all “negative space” was abandoned in the new poster, and the central image was enlarged. , but the actual visual effects are questionable.

The new poster allows us, as bystanders, to stand in the same room with the little girl. Of course, we will still feel uneasy, but compared with the old poster, the atmosphere of despair is greatly weakened.

What should you pay attention to when using negative space?

From a pure design perspective, negative space, along with other design techniques such as the rule of thirds, the rule of fifths, and font design (not just choosing fonts, but also designing different fonts that are lively and interesting), Provides designers with a diverse and efficient design toolbox.

A mature designer will use this toolbox from time to time when doing every project. Of course, he will not use all the tools every time.

Good design is often simple. Maybe all it takes is a visual trick, a charming gimmick, a special font.

Anyone who writes code knows that when you rely too much on one technique, things can get messy. The best strategy is often the simplest, using as little code as possible. This is true in programming, and design is no exception.

To be honest, it is not easy for designers who are new to the industry to create outstanding works, but terrible designs emerge in endlessly and can be seen in all types of designs.

In my personal experience, the best design strategy I know came from a creative director I worked for.

Lanlan Design (www.lanlanwork.com) is a dedicated and in-depth interface design company, providing effective BS interface design, cs interface design, ipad interface design, packaging design, icon customization, user experience, interaction design, website construction, graphic design services

His philosophy is:

"Understand the information you want to express. The point of view must be clear , easy to understand, and consistent. Do this, and the design will be successful. ”

Include the design concept of negative space in your toolbox and try to use it often. Your client will still insist that you fill every inch of space, and yes, that happens to even the best designers.

However, an excellent design is always the best defense.

The artist who designed posters for thriller movies also has some masterful “negative space” designs.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template