Maintain clear and concise graphic design techniques in web design

Source: Internet
Author: User

Graphic design, web design using exquisite picture illustrations is often the case. We see many masters of the design works will find that they use pictures can give people a very reasonable feeling, not only to highlight the focus, but also give people a better visual enjoyment.

How do you present a very good picture? Very simple, keep it clear, all extraneous elements do not appear on the page.

The ambient photography Club has published its own monthly magazine to boost the club's influence. Therefore, they hope that the magazine's visual effects will be more professional to cater to a wider range of readers. Ambient is a magazine that is printed in-house using a large laser printer, which also means that the print quality is fairly high and can be used with full width output. Layout mainly to the main picture, supplemented by text.

So how do you show those photographs? In fact, this is the same as the other things you want to show-all extraneous elements to clean out the layout! In this case, the boundaries, shadows, complex fonts, and ambiguous messages are replaced with simple fonts and clean, open spaces.

Take a look at how we've transformed:

This magazine, with a good name, a good picture and a small amount of text, but the design above, but it seems too noisy. There are so many complex elements on the page that you can't focus on the photo! Kodak Yellow If it is a small area to use the effect is very good, but here, but it seems too eye-catching. The magazine name uses bold and all capitals, and also has a stroke effect and uses a shadow, which is contrary to the meaning conveyed by the word "ambient". And the picture, feeling the effect of floating and the design of the border, coupled with those too elegant fonts, make the entire layout appears too artificial and unreal. Let's throw away all these complex and trivial things, and let the picture become a leading role directly.

Cumbersome and complex design

There are too many unnecessary details in the cover of Ambient magazine, which, apart from dazzling eyes, have no use in conveying information.

Strokes and Shadows

Stroke and shadow effect is a double-edged sword, an inattentive, will cause a cup. In our imagination, these effects should be a pleasing ornament that will make the elements appear more orderly and make the text more prominent. But in the original design, our eyes do not feel this pleasing to the eye. Compared to a simple and intuitive margin design, when we look at the original design, the Eye "crosses" three incoherent regions and three boundary lines, plus shadows and three colors. and the letters (right above), there are a lot of corner areas in the obstruction of our view. Sentence: The layout is crowded and lax.

Conflicting fonts:

The discordant font-accuse's magazine name area is put together with the contrived flower body headings, making the entire layout noisy.

As a font of names, there is nothing wrong with bold, but the problem is that the font doesn't work here. Bauer's Bodoni condensed fonts appear too heavy and crowded, and the robust areas that block the reading rhythm (pictured above). And the tiny lines and the very fine lines make the eyes impossible to adapt. The positive and negative regions formed by the letters are basically consistent and also increase the overall visual sense of the dull. The stroke effect makes the visual effect look worse.

The shape of the negative space area shown in the above image gives us a clearer view of some of the trivial and meaningless recesses and prominent small elements that are formed.

The title, which uses the Apple Chancery font, gives a sense of beauty and exaggeration, which is found in a number of invitations, declarations and private documents. The problem is that the font is too active and not a bit serious, like the pen effect of the line at random, and its corner shape is also strange (see below), so that the text can not form a sense of rhythm. The combination of these two fonts will only make the reader's eyes unbearable.


The transformation starts with cleaning up these extraneous elements.

simple, quiet, beautiful: The various Shing we have just said clean up appearances! The first step: throw the font away; the second step: Remove the color and shadow; The third step: see the figure below, remove the white border, put the picture down and go to the edge. This time, still formed two regions, the picture no longer "on" white background, and we also began to notice the beauty of the photo.

Select a color:

Taking color from different areas of the photo will create a different visual sense.

Design Name:

Use a neat font to echo a simple layout. Helvetica neue Ultra Light as a classic typeface, not only conveys the feeling of emptiness, but also has a sense of delicacy.

Adjust text:

In order to reduce the "sound" of the entire layout, presenting an elegant visual sense, we use the Helvetica font family throughout the cover of the magazine. Text back, the photo becomes the protagonist.

The original design of the layout, the text is simply put out, the lack of careful design.

The original text typesetting is any one can do, here left alignment, where the right alignment, and then individually indent some. Such typography is only a message, but not attractive. By carefully arranging the words, we can convey a sense of beauty, elegance and authority to the text. In the following figure, the title text is the same size, only the difference between the thickness, and the use of the middle alignment of the layout, like the design of the film staff table. The length of the text varies with the content, and the entire text area is interesting, and each issue feels different. Several subheadings have formed an irregular segmentation of the entire background space. The text of the periodical number, publication date and price is reduced as far as possible, put in the letter of the above name, and the text uses the fine body, and is gray, because of the unique position, so they are very small, but still can easily read, and become a visual point.

Visual Unity:

For a magazine, the picture, title and color of each issue will vary, but the overall structure is fixed. The composition of repeated layouts will quickly build a strong and coherent visual image.

Lightweight, fresh and clean visual Image:

Placing photos on a white background is always a good result. Even in the high contrast, the slender magazine name still dominates the space. The title (note that the light that appears backwards) is used to make the margins uniform, and the left and right will move accordingly. Note that in the top two cover designs, the font color comes from the color in the picture, which ensures that any time, the entire layout will form a harmonious visual effect.

No bleeding bits?

For some printers, can not achieve a borderless printing, the bottom of the layout structure is very suitable. We keep a clear margin between the photo and the paper, generally, about one-fourth inches.

Apply a white background so that its design can be applied to output on any printer. If there is a series of very good photos in this format, the effect will have a strong display atmosphere of the gallery.

Name too long?

The structure of this layout and Helvetica fonts are already enough to handle any length of the name! If the name is too long, do not squeeze the text at random or into two lines, just make the text smaller.

Two shades of the name: two words in the middle do not leave the spacing, so that the overall look more modern sense. The two words use a slightly different color (see above), conveying the text of the two meaning. Here, the color of the analogy between the red and orange, so that the whole picture appears warm and enthusiastic.

This article source:

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.