10 tips for graphic design of Web page first screen

1. Strengthen contrast

Packdog

Wearetelegraph

First screen text in the page must be readable, so you need to make sure that the color matching between the text and the background allows the user to see clearly. When you choose a dark color background, then you need to use white or light-colored text, and when the background is more elegant, the text can be used dark, which is what I call contrast enhancement.

Of course, contrast is not limited to color, there is also contrast between words. The text and the image cooperate with each other, can achieve the surprising effect. For example, the first case, Packdog Web site design, large image as a background, with a strong color, the text is just the opposite, thin and small scattered. The combination of these contrasting elements is impressive.

　　2, make the text become part of the picture

Meandmyselfportfolio

Toast

Sometimes you need to make text a part of the picture, or even make the text become the image itself to achieve the effect. Of course, the conditions required for this approach are rather harsh. Either you use a sufficiently refreshing and simple picture to match the text, or use the text that originally contains the picture (of course, you can also put the text to the main body in the picture, the angle of the text, deformation and texture must be integrated into).

　　3, along the visual flow arrangement

Bradhogan

Workdiary

It is an important skill to arrange information along the visual flow. Text and pictures have a logical relationship, the two complement each other, so at this time the text can not cover the main part of the picture-such as the need to display the characters, or the product itself.

When the information is arranged according to the visual flow, the subject in the picture will guide you to see the text message. This technique is used in all two cases, and the text is arranged along the face of the character or the direction of the eye.

　4. Fuzzy background

Helloniche

Wallmob

Fuzzy background is a very simple approach. PS can easily blur photos, and the direct effect of blurred photos is to make the product itself more prominent, the above two cases is so.

　5, put the text in the box

Tradestoneconfections

Tnvacation

It's a good choice to put text in a box when the photos overlap and the colors are rich. Select a circle box or box based on the shape of the text and picture, and then set the color to ensure contrast. Properly adjust the transparency, so that the box, text in the picture perfectly blend together.

　　6, put the text in the background

Squareup

Caitlinwicker

Incorporating text into the background may be a more interesting "gimmick" than putting text in the foreground. Text is often easy to blend into a solid color background and also ensures readability. Without the complexity of the techniques and changes, you can make the text naturally fit into the background, and all you need is a subtle shadow effect, just as the case above.

　　7. Enlarge

plainMADE

Tinyfootprintcoffee

When you don't know what to do with the material, try zooming in. This is not only for pictures, it also applies to the processing of words, magnified elements easier to capture the user's eyeball. As in the two cases above, the enlarged coffee bean strengthens the contrast, and the enlarged text is extremely powerful.

　　8, color contrast

Knucklesindustries

Storyandheart

Through the color contrast can improve the entire first screen of interest. In the above two cases, one reduces the color contrast of the background image, makes the text more prominent, and the other makes the contrast appear in the text. Both methods are equally valid.

　9, Color Matching

WinShape

Brandvillage

It is more and more popular to use the color palette to make the picture more suitable for text rendering. While this approach is a bit opportunistic, it can be extremely stunning.

Color matching, as far as possible to choose the same color as the picture to adjust, to ensure that the contents of the picture can not affect the text of the reading is good. To master this "trick" you may need to try a different color, "play bad" several pictures to do. Do not know what color? Try to start with your favorite color.

　　10. Simplify

Keepsareal

Joshcohen

Those timeless graphic designs prove to us that "staying concise" is also an effective design tool. Playing too much fancy may backfire, and simply putting the text together may be very harmonious. When working with images, use simple, intuitive typography and clear photos to make sure that photos are the most important part, that there is no obstruction and interference between the text and the body of the picture, and that the text is clearly readable.