High-quality web design skills and examples

Some examples and techniques for improving the design quality of Web pages and blogs

"High quality" is the goal that all people pursue, in the world of web design is no exception. But what is "quality", how to judge the quality of a design is good or bad? I just have a way to find the quality focus in web design. Once you've learned how to judge a high quality design, you've mastered a lot of skills to make your design more perfect.

Next I will give you some key points, and attach a corresponding example, to share with you I in other people's web design to find "high quality" process.

01. White Leaves

What I'm most aware of in good web design is the clever use of white between design elements. Pay attention to the spacing and arrangement between the different blocks of content, so that you can design the overall sensory very different, thereby enhancing the design quality.

I think the key to dealing with leaving white is to perceive design elements as a whole. It would be a good idea to narrow down the design draft.

Outstanding examples of white-keeping treatment

Good.is

The page is neat and open, all thanks to the designer's accurate grasp of the amount of white between the text and the image.

Digital Mash

The elements that are displayed on the big gap are often more appealing. Digital Mash's website creates an excellent affinity.

A lot of blanks in the Creatica daily

The excellent use of white leaves once again let the content of the Web page become the focus. There is a lot of content in each article, but the site's designers are afraid to fill in a lot of white with so much content. Not that you have enough text, you can not use a lot of white.

There's a lot of space on the postbox.

With a careful look at Postbox's website, you can see how white space at the edge should be handled. The edge of its box has 60 pixels of white margin. It sounds big, but it actually looks great.

Error when leaving White

The most common problem when designing a white space is that the content of each block is too small for the edge. No matter how stylish your design is, if you are trying to keep things tight, these styles, along with the quality of the design, are lost.

A case of insufficient white leaves

We have seen Postbox's site those big white create how moving effect, so we modify its page to see how to reduce the effect of white:

The sense of quality has obviously declined. The effect of white leaves is so big.

Effective control techniques for white-keeping

In various situations, the requirement for white leaves is different. You need to constantly train yourself to be aware of the changes that can be brought about by the White House, thus effectively using the white leaves to meet the design needs. It's a personal feeling, but it can all be tempered from practice.

Using grid-assisted design

Using a grid can certainly help you understand the gaps between elements.

Keep trying

Keep trying-fail-try until you find the best solution.

Leaving White is not a waste of space

The blanks are not always waiting for you to fill them.

Yes, less is more.

Instead of exhausting your mind to fill an area, leave it blank, leaving only vital information.

02. Pixel-Level perfection

There is a way to see if someone is really trying to finish a web design. Sometimes the wonders are small details, some that others can barely perceive. What I call "pixel-level perfection" means careful scrutiny of lines, edges, and border strokes. Instead of using a single line, add more detail. The details can be subtle gradients, and can be just a 1-pixel-wide line (used to represent shadows or high light). With these details, your design will be very different. Some designers specialize in this area: Collis Ta ' Eed, David Leggett, and Wolfgang Bartelme.

Example of perfect detail at pixel level

Envato's Detail appreciation

Example 1 (example 1) of the following figure has a brighter green line at the edge of the green content box. At the example 2, the inner edge of the block has a soft gradient shadow and a pixel white stroke above the edge. This approach is very clever, with shadows to emphasize the high light. The green area behind it has a very soft, subtle lighting effect that will help draw attention to the fresh crisp details in the white block below. While this does not always make the design look more sophisticated, it does help you give the design a three-dimensional sense of reality. The design element becomes a gem embedded in the page, rather than a piece of paper that is not tiled on top.

The details on the tutorial9.net

David Leggett has a deep understanding of how to make a single pixel top edge bar. He recently redesigned the TUTORIAL9 to assemble a lot of great pixel techniques. Example 1 You can see how he makes navigation labels more textured simply by adding a 1-pixel high light. Example 2 has more skills to use. The projection of the camera's icon, the shadows and highlights in the white area below, and the 1-pixel highlight on the navigation bar.