Web Design theory: Details make outstanding works stand out

Article Introduction: design details that are most commonly used in web design.

Some time ago in the business management industry popular a maxim called "details determine success or failure." Enterprise management is certainly not the subject we want to discuss here, but it is indeed a irrefutable truth to put this sentence in web design. Our eyes and feelings are always very sharp, and even people who have no idea of web design technology can pick out a good design from a bunch of poor design work. Although he couldn't say why it was better than that, the intuition would tell him which he liked. If someone asks us why this work is superior to others? Our answer is "a big part of the reason is that good design works are always full of rich details." "In this article, we from the technical point of view, to Premiumpixels on the Redux WordPress theme Design works as an example, to sum up in the Web design in the end what is the details of the outstanding works to stand out."

One, 1 pixel lining line

At the top of the page, you can see a 1-pixel horizontal line that is slightly lighter than the background color, separating the background of the solid color from the background with the material, as shown below:

And if there is no effect on this line, let's take a look.

In fact, in web design, examples of the use of lines are very common. For example, in the following example, you will find a gray line 1 pixels down the top of the black border surrounding the Dorchester Hotel text.

And in the following Design button, the green and yellow borders can also see a lighter line at the top of 1 pixels, and this line is made more granular because it has a mask applied, and from the top you will find that the line is fading away. In addition, the divider line between "Add to Cart" and "$9.99″ two text is actually two lines, the left color is darker, the right color is lighter, this can produce the concave effect of the line."

The reason to use the liner, is to reflect the object in the 2D effect on the three-dimensional, and the three-dimensional expression must have a shadow and high light. Shadow we usually use layer style to achieve, and the implementation of the high light effect, one of the most common techniques is to use the liner. The three examples above show that the lines are at the top of the object, indicating that the light is shining from top to bottom, and that the high light is in the upper part of the object. And if the light shines from below, the high light should be at the bottom, then we should place the lining below the object. So in the use of the liner, we always have to ask ourselves these questions, "I used the line here, then where is the light source?" "If the light is here, where should the shadow appear?" "With these two answers, the three-dimensional design of the object is more realistic," he said.

Second, the fine material

The redux theme is a great case for explaining the background material. Because throughout the page, three different textures are used from top to bottom as the background of the page. The dark blue part of the above application is a rugged and uneven material, the middle of the black part of the use of textile fabric material, and the bottom of the application is the noise of the material. Of course, these three kinds of materials are very subtle, but the effect is very outstanding. In fact, too eye-catching and complex background material not only can not add to the design, but because of distracting the reader's attention but the overall design quality. So the best strategy is to keep your background material small and soft.

Third, soft gradient

is the text box on the following picture a kind of drum out feeling, yes, that's exactly what the gradient brings to our effect. Just imagine if the white text box is placed on the page, it must not add a gradient so that we feel more interesting.

In addition, the left and right edges of the page should also be from a solid color background to the material background of the gradient, so that the dark blue rugged background material appears more natural. In the use of the gradient should be noted that, in addition to some special circumstances, do not use too strong gradient, whether it is the color up or brightness or saturation is not too strong span. Because such a strong excess does not bring a sense of reality, give a person a very uncomfortable feeling.

Four, the subtle shadow

Notice that the light text on the Redux dark background will show you that they are all added to the projection effect. Now we can use the Text-shadow attribute in CSS3 to complete the projection design of the text instead of doing it in Photoshop. and use CSS3 to add a shadow to the text more freely, in the browser support, you can add to any text you want the shadow effect. Of course IE8 The following versions of browsers do not support this attribute, which is what we need to be aware of in our design. In addition, as with the other design details mentioned above, the shadow effect should be soft enough, not too strong, otherwise it is easy to make the whole design look a dirty feeling, it is not exquisite.