High-quality Webpage Design: Example and Skill 2 (pixel-level perfection)

There is a way to see if someone is really careful when completing a webpage design. Sometimes the miracle is some small details, some details that are almost invisible to others. What I call "pixel-level beauty" refers to the careful scrutiny of online bars, edges, and border strokes. Instead of using a single line, we should add more details. The details can be a subtle gradient, or just a line of 1 pixel width (used to represent shadows or highlights ). With these details, your design will be very different. Some designers are very good at this: Collis Ta 'eed, David Leggett and Wolfgang Bartelme.

Example of pixel-level perfect details
Detailed appreciation of Envato
In Example 1 (Example 1), the edge of the green content box has a brighter green line. At Example 2, the inner edge of the block has a gentle gradient shadow, while there is a pixel of white on the top of the edge. This method is very clever, and uses shadows to emphasize highlights. The green area in the back has a very soft and subtle effect, which helps to attract attention to the fresh and crisp details in the white block below. Although this approach does not always make the design look more refined, it does help you give the design a three-dimensional sense of reality. As a result, the design element becomes a gem embedded on the page, rather than a piece of unmovable paper tiled above.



Tutorial9.net details
David Leggett has a deep understanding of how to create a single pixel top edge. His recently redesigned tutorial9 has a collection of great pixel techniques. At Example 1, you can see how he adds a 1-pixel highlight to make the navigation tag more texture. More tips are used in Example 2. The projection of the camera icon, the shadow and highlights in the white area below, and the 1 pixel highlight on the navigation bar.



Perfect pixel-level details on buttons and split lines on RedBrick Health
This beautiful navigation menu, created by Ryan Scherf, is an excellent example of improving design quality with perfect pixel-level details. The red button is highlighted in 1 pixel, and the split line between links has the same quality and details. As you can see, he is not satisfied with dividing with only one gray line. Ryan also adds a 1 pixel high light below to avoid the design being too flat.



Perfect pixel level details also apply to Grunge style: AvalonStar
Note: Grunge styles include "old", "magic rock", and "dirty". It is a genre of flat art.

The following example shows a pretty AvalonStar: Distortion (distorted) topic blog with a very good grunge style. However, even the dirty grunge wind can make a big difference with 1 pixel highlight. At Example 1, there is a gradient shadow in the brown area above, and there is a 1 pixel highlight line at the top of the green area below. The combination of shadows and 1 pixel lines makes these blocks more refined.



Perfect details tips
Continuous practice is especially important to achieve perfection in this technique. As you can see, a simple one-pixel line can add a cool depth to the design. You don't even have to use the chamfer or gradient, so you have to do some practical effects on objects.

It must be details.
The key is to improve the content and senses with small details.
Think about pixel level issues
Stroke, gradient, line, shadow, etc., can effectively enhance the design without being too large
Comparison
Pay attention to the comparison between the effect after the application and the effect before the effect is absent. So that you can know what changes have these details brought about.

 

 

Author lixinstudio