The details that cannot be neglected in web design

Have you ever experienced a page that was immediately attracted by its design and impressed? And then you take a closer look at this page and find out what really makes this page magical is a little bit of detail, and in this article we'll see several pages that are perfect for detail design.

　　The perfect pixel line

Image Spark's designer uses a pixel line to segment the top navigation, search the input box, and navigate the bottom bar. Any time a lighter color next to a darker color will cause a person to appear with a raised edge of the illusion. Note that this line can only be a little lighter than the background color. If you use a white line that will lose this effect.

Atebits uses a similar technique, but here it is used to make some separation. Note that they are using two 1px lines to contrast, a bright one darker. This gives the illusion of being an illustration slot. The other side of a beautiful contact line is fading, not suddenly ending.

　　Just the right shade

Shadows can add some depth to the page, but there's a little need to be careful about using shadows, not overuse them. The shadow effect in PS can be a very dangerous tool if used incorrectly. The intensity of the shadow should be used in conjunction with the background color. A darker background requires a darker shadow, and a lighter background comparison is a brighter shade.

Fubiz's designers use a subtle shadow illusion that enhances the page's navigation bar.

For fun, let's see what happens if you overdo the use of shadows.

The White House's official website shadows are everywhere, but they have all done ingenious design, and the site keeps a very clean look.

　　A simple gradient

Gradients are a very simple effect. They can be used to achieve various effects, such as the illusion of a light source or build depth, but to keep it subtle. Tapbots uses a simple gradient background to make the iphone appear to illuminate the light source. Subtle details like this can make this page more compact. The effect of the gradient on this page makes the iphone stand out.

The Metalab label has a gradient fill. This creates a depth of illusion that makes them look slightly raised. Metalab is a good example of the perfect detail of the pixel mentioned above.

　　Exact texture.

Textures are often used to fill large areas. To add some interesting elements to a design, textures are a simple method, but textures can also be used in more subtle ways to express something more precise.

Take a look at this self promotion page. In my favorites, I used a lot of textures to give him a wear and weathering effect. However, this is not just filling the larger blank with textured content, there is also a step to add more detail along the edges with dots of texture.

Liam Mackay has created subtle grease stains in his design. On his blog, he uses subtle, old textures to focus more effectively on content rather than distraction. Note that even the 1px border line has a shabby look.