10 tips for improving the design of B-Grid graphics

Many designers choose to create a minimalist and refreshing interface to show the style. and want to create this feeling, the most common means is through the combination of graphic design to show the effect. But want to let the text more coordination, to achieve the degree of satisfaction can not be easy, a little careless will appear the painting Tiger is not anti-class dog embarrassing situation. The author here through 10 specific illustrations of the use of graphic combination to achieve the goal effect of the 10 skills.

1. The text and the picture to achieve a strong contrast

First, the text must be highly readable. Text as the foreground, and the picture as the background, the contrast between the two must be obvious. If the picture is dark, the font is best to use light. If the picture uses light colors, it is best to use a dark color.

For the picture with text, often to better explain the explanation, enhance the control sense, so that users can better combine the two, read the message to express.

2. Let the text and the image become one

This approach allows for better integration of text and images. There are two prerequisites: 1. The picture is as simple as McLaren and facilitates post-processing 2. The picture itself contains text, such as the background image of the toast site.

3. Text placement, visual flow in line with the picture

Text cannot hinder the main visual elements of a picture. Therefore, in the text layout, it depends on the visual flow of the picture. Text must not block the key parts of the picture, such as a face, a product.

Figure 2 This design is more representative, put the text in the eyes of the people where the place, very ingenious.

4. blur the picture and highlight the text

This may be the simplest technique, just use PS to add a few pixels to more than 10 pixels of the blur, but this is the text can stand out from the background. The web site of Wallmob (Figure 2) was more ingenious, the background blurred, and the product and text did not, creating an effective visual focus.

5. Make a text box

When the color of the picture is too much, the depth of the difference is not a moment, with such as text boxes, color blocks, geometric shapes and so the text wrapped up, so that the text can be highlighted. The color of the text box is compared to the text. The text box is best to be transparent so that the user can see the full background image in a faint way.

6. Incorporating text into the background

It's a very ingenious technique. Most of the time, text is present as a foreground. The background of general color simple, mainly to foil the prospect of existence. But sometimes, the ingenious design makes the text look like part of the background. This method can make the graphic work appear to have a certain depth.

7. Oversized Font Size

If you're unsure, the safest thing to do is to use a full background image to enlarge the font. Visual impact, but also more effective to create visual focus. , the subject information is simple and rough.

8. Add text color

1 unify the text with the background color, 2 contrast the text with the background color.

9. Color-biased background

Add a color-biased effect to the image, and then cover the text so that the text is highlighted. The transparency of the cover color should be grasped well, if the transparency is too high, then the text is unreadable, too low, the image can not be seen clearly. It is also best to choose the color associated with the brand.

10. Do not modify

Do not make the modification not to do any design, but to adopt the simplest design. The background highlights the theme, with the text next to the theme, simple, but there is a fresh feeling.

The above 10 kinds of skills in the use of attention to grasp the background map selection and the theme to be expressed, especially in the color needs careful choice.

Recommended reading:

10 immersive 404 Pages

HTML5 Online Learning Website recommendation

Eight years of creation: the original painting Manuscript of the Holy Sage return

The color collocation method of famous website

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

10 tips for improving the design of B-Grid graphics