Case Study: RedBrick health: perfect pixel detail on buttons and partition lines

This beautiful navigation menu was created by Ryan Scherf, and it is the best example to improve design quality with pixel perfection technique. There is a pixel highlight around the red button, and the same detail applied in between links and partition lines. As you can observe, he did not satisfy with only one gray partition line, Ryan also added another a pixel width highlight line below, which avoids the boredom in design.


Case Study: Grunge Style: AvalonStar

Annotation: Grunge Style can be a genre that reflects “Reminiscence”, “Psychedelic Rock”, “Dirty”, etc. The below example comes from AvalonStar: Distortion theme Blog, which contains the excellent expression of Grunge Genre. However, although it is a old and dirty grunge genre, it makes a big difference when including the one pixel highlight line. Combining shadow and one pixel line, the entire partition becomes even more elegant.

Tips on perfect details

In order to master with this technique, it is important to practice all the time. As you can see, a pixel line, such a simple design element can create a depth in the design. You don’t even need to use gradient or chamfer, but can still create an excellent effect.

- have to be careful of the details: small detail is the key to satisfy the completeness of design sense
- consider pixel level problem: outline, gradient, lines, and shadow etc. Less is more.
- compare the before and after effect: after implementing the technique, it is important to tell the difference between the two and also evaluate the improvement of the later.

To be continuing ….

Edited By Dan Li