Web design: Ten simple and easy to use design skills

"Editor's note" This writer Mark Praschan is a web designer, web Developer, and website project manager with nearly 10 years of experience. The paper emphasizes that the complex advanced effect can add a lot to the design, but if used incorrectly, it will only affect the user's attention to the key content. Advanced effects may just be the impact of a good design, but even so, there is a need for some simpler effects to work with.

Simple effects and techniques are the building blocks of today's design. For example, if you do not know how to choose the right color and text effects, what is the use of brilliant starlight effect?

The spirit of "less is more" concept, through the ten simple and easy to use design skills, it is enough to greatly enhance the professionalism and appeal of your design. Foundation first. Learn to walk before you learn to crawl, let us start with the concept of the most basic simple and effective design.

1. Increase the contrast

Unfortunately, adding extra contrast is one of the most overlooked and deprecated techniques.

Joost de Valk uses a fine, high-contrast sideline to make it easier for visitors to distinguish between different areas of the page. As you can see in the enlarged section of the above illustration, most of the time this contrast is just a 1-pixel highlight line next to the 1-pixel dark lines.

In other words, the "more" and "Go" buttons on this page are too small to be around, even if you are looking for them easily.

WordPress uses contrasting colors for the most popular link in the page, Download (download). This red color jumps out of the cold Gray page. But this red in the lightness aspect has the convergence, avoids affects the page overall effect.

If you hesitate to use contrast, consider this decision process as makeup. What you have to do is not let people yell "look, contrast!", what you need is a natural attraction for them to focus on the important content of the page, highlighting the already existing emphasis.

2. Gradient

The development of technology provides a variety of tools to create gradients for all who want to use gradients. But is the gradient really good?

Every page in the Media Temple site uses gradients, but the moderation and subtlety of its gradual use is key to the success of the design. Logos, headlines, buttons, and backgrounds all have subtle or mirrored gradients to emphasize content. The most complex gradients are used for simple 120-pixel-wide buttons ("ACTIVATE" and "LEARN more" in subpages), as they are the focus of attention for visitors.

Commission Junction's gradient usage is far less nuanced than media temple and uses a much richer gradient type:

Horizontal gradient from Black to gray, at the top of the page

Green radial gradient at the header

Fuzzy diagonal gradient above the "CJ" Flag of the landing box background

A faint vertical linear gradient in the background of the input box

Vertical gradient for navigation bar background

Bright linear gradients in webinar ads

Another vertical linear weakening, used in a large heading

This design is a bit risky, and most of the gradients are useful, but there are still some problems. The most striking point is the loss of consistency in the design. As with the choice of a strong color combination, designers also need to select the appropriate gradient combinations for each project.

For example, a large horizontal gradient (1) directs the eye to gaze horizontally at the page. There is nothing wrong with this, but just below the gradient there is a radial gradient (2) that draws the line of sight to the center and a diagonal gradient (3) that directs the line of sight to the lower-right corner. This can be confusing to visitors, and the fluctuating visual stream (visual flow) also weakens readability.

When using gradients, it is important to ensure good visual flow: use gradients conservatively and delicately. The most important point is to use gradients only if they are helpful for the overall design.

3. Color

It's challenging to use colors properly. In the process of choosing the perfect color combination and finding the right place for a variety of tones, time is flowing away.

Realmac Software Bold to use a full color gradient on 404 pages. This is done for the following reasons: First, REALMAC has set the page background to a neutral gray, more importantly, the rest of the page does not have obvious colors, in addition to the blue text links and some sporadic no impact of color.

The full spectrum color gradient perfectly attracts people's attention. It stays simple, has a gray tie, and doesn't make your eyes feel uncomfortable. But using four or more colors in one design usually seems too much. Unless you're pretty sure your design needs so much color, it's better to use a simple four-color combination.

When you use color with restraint and judicious design, it is easy to attract visitors ' attention to important items. In Interspire's "About Us" page, the visitor's attention is quickly drawn to the red point of the logo at the top of the page, then the title, then the logo photo on the right side of the page.

Put some effort into the font. The art of typography is broad and profound, far beyond the imagination of most of us. The creation space beyond the X-height (ascenders) and edge (side bearings) is huge, and you can add some interesting details here. However, it is more important to use some of the following techniques.

4. Character Spacing

Character spacing, or kerning (kerning), can have a huge impact on text-related content such as headings, paragraphs, logos, and so on. It is far more than the distance between each character so simple.

Krop's new portfolio Builder, in the process of writing, very stingy space. The characters in most text-based images on the site are small, making the narrative more concise and powerful.

The image above shows the possible negative effects of character spacing on your design. Small, anti-aliasing fonts are more difficult to read without proper spacing of characters.

If you haven't cared before, try adjusting the character spacing in your design now, and you'll be shocked by the difference. The "Myriad Pro" font is used in the recommended picture, and the "Trebuchet MS" font is used in HTML text to try it.

5. Case

Changing letter capitalization is just a matter of pressing shift or caps LOCK, but few designers take advantage of the skill's potential.

MSNBC's use of capitalization is well worth the reference. The logo is all lowercase, and the other parts of the page have more subtle changes in font size. Large banner notices above the page, typically written in capital letters "WATCH live" or "Breaking News". These announcements are very important, and this is a good way to attract the attention of the visitors.

In addition, use the Plain capital button, so that their small button is clear enough to read easily. In this 5-pixel application, lowercase letters, such as A,M, X, may be only 2 to 3 pixels tall and very illegible.

Continue to focus on the news site, CNN on the font size of the lack of change to balance the page. The navigation bar is all uppercase, but the rest of the page is traditionally used with almost all the first-letter caps.

6. Anti-aliasing

Although the technology is more complex, anti-aliasing can be summed up as "to make the edge smooth", in various designs have been applied. In the world of web design, whether the anti-aliasing is part of the text is the image or HTML text you want to appear in. Another thing that complicates things is that some browsers or operating systems automatically anti-aliasing to some extent, but in general, HTML text does not have anti-aliasing.

Stockxpert is smart enough to use anti-aliasing in the ad pages, and some of the text is not aliased. Most text has a smooth edge, but the small print at the top and bottom of the page retains its jagged edges. With the MSNBC button above, the 5-pixel text needs to have as sharp an edge as possible to keep it readable. In this case the blurred or smoothed edges will make the eyes very tired and eventually give up reading.

Mix and match is kingly! Perfect things usually look fake or boring. The foliage of the trees is not completely symmetrical; Any form of illumination will not produce a balanced shadow; camera lenses sometimes blur parts of the scene and produce lens halos ... Some designs need a clean artificial style, others need to mix a little

7. Manufacturing defects

Anyone can tell you it's not perfect 10 minutes after using a computer. But in the design process, the computer can create the perfect result for you. When you use a line tool in your favorite design tool, just use the default settings and you can draw a perfect line between the two points.

This retro Ace Tutorial offers a number of steps to make this card look imperfect. It has to be said that the process is not simple. But the concept is simple-make things look old, create imperfections, and give your work a unique texture.

This butterfly photograph looks like another imperfect example of what was filmed in the middle of 20th century. In fact it was taken with a digital camera, with some filters and color adjustments, giving it a nostalgic effect.

Creating art-style flaws for design is easier than you might think. All you have to do is turn the footage gray or brown and add a little detail ...

8. Fuzzy

If you're still in the way of making your content stand out and disappear, try a variety of different fuzzy ways. By blurring the foreground, blurring the background, or even the whole design, you can dynamically increase the impact of your project. The fuzzy focus needs to be at least partially correlated. By blurring an element, the focus is brought to another content.

The Ios V2 wallpaper uses simple blur to create calm, vibrant senses. Some sharp lines are used to create the focus of the image, and a blurry background is crucial to the overall effect of the wallpaper.

Blur can also form a sense of depth and layer coverage. Windows Vista's aero effect blurs the content behind the window to form a cool diffuse glass effect. The use of Gaussian blur can create similar effects.

9. Alignment

Even if we emphasize keeping neat and straight, you still need to add some extra spice to your design.

The "logo" in this example logo is mentioned in the upper-right corner. Changing the alignment of design elements makes them easier to remember, easier to talk about, and the result is more efficient for the entire design.

This technique is not just for writing. Some designers take advantage of templated content or personal work habits when thinking about a design concept. This can speed up the response to customers, but it often limits creativity-especially in the context of content alignment.

Icon Designer makes itself unique by rotating certain elements. This page is easy to become a trivial boring work, but a few simple spin transfer it interesting.

Today's web pages are mostly 700 to 900 pixel wide, typically centered in the browser, and are square-box constructs. In most cases, this makes the content orderly, but there are also sites that require designers to consider jumping out of the box to create features.

Next, the most important thing is ...

10. Removing the burden

This is probably the most important and neglected design technique. Removing unnecessary parts is one of the hardest parts to do.

By removing all unnecessary parts, the CSS remix only leaves a necessary part to display 7 large ads (128 * 96 pixels), 53 Favico Ads (16 *16 pixels), and a large group of sites (56)-all within 1000 pixels of the page! Even the website logo has been cut to 53 times 7 pixels.

The same is true in life, and good deeds are not the best thing. The logo above is too small to be recognizable, and feature sites are hard to distinguish from each other. Oddly, the Twitter feed at the top of the page is too prominent relative to the site logo and navigation.

More tips can be found in (English):

Useful techniques for good User Interface

grid-based design:six Creative Column Techniques

Translator Blog:

Yang Jianhu: http://yjc.me/

Woole: http://blog.benhuoer.com/