10 easy to use design skills

Complex web design skills always takes time, but also it is. … Complicated. Advanced effects for the design considerably, but if the wrong, it will only affect the user’s attention on key elements. Advanced effects may just be a good design impact lies, but even so, it still needs some more simple effects to their cooperation.

Simple effects and skills are the cornerstone of today’s construction design.For example, if you do not know how to correct color and text effects, brilliant starlight effects but what’s the use?

In the “less is more” concept, we selected for you ten easy to use design skills, they can greatly enhance your design professional and appealing.

More tips can be found (in English):

12 Useful Techniques For Good User Interface Design
Grid-Based Design: Six Creative Column Techniques

Foundation first. First learn to crawl before you learn to walk, let’s start with the most basic concepts of simple and effective design.

1. Increase contrast

Unfortunately, adding extra contrast is one of the skills most neglected and abandoned.

with a fine high-contrast edges, so that visitors can more easily distinguish between the different areas of the page. In the figure above the enlarged portion, you can see that most of the time this comparison is only a 1 pixel by 1 pixel highlight line next to a dark line.

Anyway, the contrast on this page “More” and “Go” button and the surrounding small, even if you deliberately look for can easily be ignored.

WordPress is the most popular page link “Download (Download)” use of contrasting colors. This red in the cold gray pages just jump out. But red restraint in terms of brightness, to avoid the impact of the overall effect of the page.

If you should not use contrast to the hesitant, put the decision-making process as a make-up. You do not let people yell, ‘Look Now, contrasting colors! “, All you need is naturally important to attract their attention to the contents page, a high emphasis showed that already exist.

2, Gradient

Development of technology to provide a variety of tools to create the gradient for all people who want to use a gradient. But the gradient is really good?

Media Temple every page of the site are used in the gradient, but its gradual moderation and exquisite design is the use of the key to success. logo, headings, buttons and backgrounds have subtle or mirror gradients to emphasize content. The most complex gradients used in those simple 120-pixel-wide button (sub-page “ACTIVATE” and “LEARN MORE”), and because they are the focus of attention of the visitors needs.

Commission Junction gradient using Media Temple is far from detailed, and the use of too rich gradient type: 

  1. From black to gray horizontal linear gradient, at the top of the page 
  2. radial gradient green header at the background of the login box
  3. “CJ” logo above the diagonal gradients fuzzy faint vertical linear input box
  4. Background Gradient 
  5. The navigation bar background vertical gradient 
  6. Webinar advertising bright linear gradient 
  7. Another vertical linear weakened, used in the title of the

This design is a bit risky, most gradual type useful, but still there are some problems. The most striking point is that the loss of design consistency. Select recognizable with strong color combinations the same reason, designers also need to choose the right combination of gradient for each project.

For example, a large horizontal gradient (1) to guide the eye lateral gaze page.This is no problem, but at just below this gradient appeared to attract attention to the center of a radial gradient (2) and the line of sight directed to the lower right corner of the oblique gradient (3). This will give visitors causing distress, fluctuating visual stream (visual flow) also weakened readability.

When using gradients, ensure good visual flow is important: Please conservative and sophisticated use of gradients. The most important point, only when the overall design to help when using the fader.

3, color

Rational use of color is very challenging. In the selection of the perfect color combinations and find a suitable location for the various shades of the process, time crashed to flow away.

boldly in 404 pages with a full color gradient. This has the following reasons: First, Realmac page has been set into a neutral gray background, and more importantly, the rest of the page is no obvious color, color blue text links and some sporadic no impact except .

Full-spectrum color gradient perfectly to attract people’s attention. It maintains the simplicity, with gray fit, does not make eye discomfort. However, in a design using four or five more colors often seem too far. Unless you are very sure that your design needs so many colors, or with a simple four-color combination is better.

When you exercise restraint and judicious use of color in the design to attract the attention of visitors to important projects becomes relatively easy. In Interspire ‘s “About Us (About Us)” page, visitors’ attention was quickly drawn to the top of the page LOGO the red point, then the title, then the right of the page LOGO picture.

Spend effort on the font. Art profound fonts, far beyond most of us imagine.The height of the font that exceeds x (ascenders) and edge position (side bearings) at great creative space, you can add some interesting details here.But even more important to use the next few skills.

4, character spacing

Character spacing, otherwise known as kerning (kerning), capable of headings, paragraphs, logo and other text-related content have a huge impact.It is far more than the distance between each character so simple.

Krop’s new work set creator, in dealing with the text, very stingy space. Most of the character spacing on the site text-based picture is very small, so even more concise narrative.

Chart performance had a negative impact on the character spacing for your design possible. No anti-aliasing small fonts without the appropriate character spacing, will be more difficult to read.

If you previously did not care, you now try to design the character spacing to make some adjustments, except you’ll be adjusted to bring shocked.Recommended pictures using “Myriad Pro” fonts, HTML text use “Trebuchet MS” font to try.

5, case

Change letter case but press the Shift or Caps Lock key to the effort, but few designers take advantage of the potential of this technique.

MSNBC’s on the case of the use of very good reference. logo is all lowercase, the rest of the page fonts case but also has subtle changes. Top of the page large banner advertisement, usually written in capital letters “WATCH LIVE (Watch Live)” or “BREAKING NEWS (latest news).” These notices are very important elements, in this way well in attracting the attention of visitors.

In addition, the use of pure uppercase buttons that let their small button sufficiently clear and easy to read. In such an application in 5 pixels high, lowercase letters, such as a, m, x, may be 2-3 pixels high, very difficult to identify.

Stay tuned for news sites, CNN lack of change in the font sensitive to balance the page. Navigation is all caps, but the rest of the page is very traditional to almost all use the first letter capitalized.

6, antialiasing

Although technically more complex, antialiasing still can be summarized as “smooth edges” in a variety of designs has applied to. In the world of Web design, whether antialiasing part of the decision in writing to appear in pictures or HTML text. There is also a case to make things complicated, some browsers or operating system will automatically antialiasing to some extent, but in general, HTML text that does not have anti-aliasing capabilities.

Stockxpert cleverly use in advertising pages in part antialiasing, and some of the text goes without teeth. Most characters have smooth edges, but the top and the small print at the bottom of the page retains the teeth. MSNBC button with the above said a truth, 5 pixel high text must have sharp edges as much as possible to maintain readability. In this case, fuzzy or smooth edges make eyes tired, finally gave up reading.

Mash is king! Perfect things in general seemed very fake or boring. Tree branches are not completely symmetrical; in any form will not produce a balanced lighting shadow; sometimes make part of the scene camera lens blur, lens flare and produce clean …… Some designs require artificial style, while others need to mix and match a little ~

7, manufacturing defects

Anyone can use a computer to tell you after ten minutes it is not perfect. But in the design process, the computer can create the perfect result for you. When using the line tool in your favorite design tools, just use the default settings, you can draw a perfect straight line between two points in particular.

This nostalgic Ace card tutorial provides many steps to make the card does not look perfect. Have to say, this process is not simple. However, the concept of which is very simple – make things look old, creating imperfect, give your work a unique texture.

This butterfly photo looks like a mid-20th century shooting, another imperfect example. In fact, it is with a digital camera using some filters and color adjustment, given its nostalgic effect.

Create art stylized design flaws easier than you think. You only need to turn gray or brown material, then add a little detail ……

8, fuzzy

If you are still content to highlight how, blanking and do nothing, try a variety of different fuzzy way. Fuzzy foreground, blurred background, even entire design, you can dynamically increase the impact of your project. Focus blur, at least partially associated. Fuzzy one element, the focus is brought to another content.

Ios V2 wallpaper using simple fuzzy create a calm, vibrant senses. Some of the Octavia line used to form the focus of the image, and the blurred background is essential to the overall effect of the wallpaper.

Vague feeling of depth and level also form coverage. Windows Vista Aero effect of the contents of the window obscured behind, forming diffuse cool glass effect. Gaussian blur to create a similar effect.

9. Align

Even if we emphasize the guarantee neat and straight, you still need to add some extra fun to your design.

This example signs the “logo” Some letters are referred to the upper right corner. Changing the alignment of design elements can make them easier to remember, easier discussed as a result is to make the entire design more efficient.

This technique is not just for text. Some designers at Thinking of a design concept will make use of the template content or personal work habits. This can accelerate the speed of response to customers, but also often limits creativity – especially in terms of content alignment.

Icon Designer by rotating some elements differentiate themselves. This page can easily become commonplace for boredom, but a few simple rotating it full of fun.

Most pages now is 700-900 pixels wide, generally centered in the browser, and is a square box-like structure. In most cases, this makes the orderly arrangement of contents, but there are some sites, designers need to consider outside the box and create features.

Next, the most important thing is …

10, elimination of cumbersome

This is probably the most important and most neglected of the design skills.Remove unnecessary parts, one part is the most difficult to do.

By removing all unnecessary part, CSS Rem

leaving only the necessary parts can be also displayed seven big ad (128 x 96 pixels) ,, 53 favicon advertising (16 x 16 pixels), and a large group of sites (56 ) – all in the top of the page 1000 pixels! Even websites logo are cut to 53 by 7 pixels.

The same is true in life, it is not good to do good a good thing. The above logo is so small that it is difficult to identify, it is difficult to separate from the characteristics of the site to another area. The strange thing is, Twitter feed at the top of the page, relative to the site logo and navigation to, and undue prominence. 

For more useful web design and marketing articles please visit our sister website @ http://mindyourwebdesign.com/blog/

Leave a Comment