Ten easy-to-use design tips

The writer Mark Praschan is a web designer, web Developer, Web 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 it is used wrong, it will only affect the user's attention to the focus content. The high-level effect may be just the impact of a good design, but even so, there are some simpler effects to match.

Simple effects and techniques are the cornerstone of building today's designs. For example, if you do not know how to choose the correct color and text effect, the brilliant starlight effect can have what use?

The spirit of "less is more" concept, through 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 climb before learning to walk, let us start with the concept of the most basic simple and effective design.

Foundation first. learn to climb before learning to walk, let us start with the concept of the most basic simple and effective design.

1. Increase the contrast

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

Joost de Valk uses fine, high-contrast edges to make it easier for visitors to differentiate between different areas of the page. In the zoomed-in section, you can see that most of the time this contrast is just a 1-pixel highlight line next to 1 pixels.

In other words, the "more" and "Go" buttons on this page are too small to be contrasted with the surrounding area, even if you deliberately look for them and are easily ignored.

WordPress uses a contrasting color for the most popular link in the page "Download (Download)". This red in the cold gray color of the page itself jumped out. But this red in the brightness of the convergence, to avoid affecting the overall effect of the page.

If you are hesitant to use comparisons, consider this process as makeup. What you have to do is not make people yell "look, contrasting colors!" "What you need is to naturally draw attention to the important content on the page, highlighting the already existing focus."

2. Gradients

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 of the Media Temple Web site uses gradients, but the moderation and subtlety of its gradients are key to the success of a design. Logos, headlines, buttons and backgrounds all have subtle or mirrored gradients to emphasize content. The most complex gradients are used in simple 120-pixel-wide buttons ("ACTIVATE" and "Learn More" in sub-pages) because they are the focus of attention for visitors.

Commission Junction's gradients are far less nuanced than media temple, and are overly rich in gradient types:

1. Horizontal gradient from Black to gray, at the top of the page
2. Green radial gradient at the header
3. Blurred diagonal gradient above the "CJ" flag on the landing box background
4. Faint vertical linear gradient in the background of the input box
5. Vertical gradient of the navigation bar background
6. Bright linear gradients in webinar ads
7. Another vertical linear weakening, used at the big headline

This design is a bit risky and most of the gradients are useful, but there are still some problems. The most striking point is that the design has lost its consistency. As with the choice of a strong color combination, designers also need to choose the right mix of gradients for each project.

For example, a large horizontal gradient (1) directs the eye to the horizontal gaze page. There is nothing wrong with this, but just below this 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 cause problems for visitors, and the fluctuating visual flow (visual fluid) also weakens readability.

When using gradients, it is important to ensure a good visual flow: Use gradients sparingly and delicately. The most important point is to use gradients only when the overall design is helpful.

3. Color

It's challenging to use color wisely. Time is flowing away in the process of choosing the perfect color combination and finding the right place for all shades.

Realmac Software boldly adopted a full-color gradient on the 404 page. This is done for the following reasons: First, REALMAC has set the background of the page to neutral gray, more importantly, the rest of the page is not obvious color, in addition to the blue text links and some sporadic without impact color.

The full spectrum of color gradients is perfect for attracting people's attention. It keeps it simple, has a grey fit, and doesn't make the eyes uncomfortable. But using four or more colors in a design is usually too much. Unless you are very confident that your design requires so many colors, it is better to use a simple four-color combination.

When you use colors with restraint and wisdom in your design, it's easy to draw visitors ' attention to important projects. 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, followed by the title, then the logo photo on the right side of the page.

take a little effort on the font . The art of typography is far more profound than most of us have ever imagined. There is a huge amount of creative space in the font beyond the X-height section (ascenders) and edge (side bearings) where you can add some interesting details. But it's more important to use the next few tricks.

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's much more than just the distance between each character.

Krop's new portfolio creator, when dealing with text, is very stingy with space. Most of the text-based images on the site have very small spacing between characters, making the narrative more concise and powerful.

Shows the possible negative effects of character spacing on your design. Small, anti-aliased fonts are more difficult to read without proper character spacing.

If you have not cared about it before, try now to make some adjustments to the character spacing in your design, and you will be shocked by the difference in the adjustment. The "Myriad Pro" font is used in the recommended image, and the HTML text is tried using the "trebuchet MS" font.

5. Case

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

MSNBC's use of uppercase and lowercase is well worth reference. The logo is all lowercase, and the other parts of the page have a subtle change in the font size. Large banner announcements at the top of the page, usually in uppercase 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 a purely uppercase button to make their small buttons clear and easy to read. In this 5-pixel high application, lowercase letters, such as A, M, X, may be only 2 to 3 pixels high and very difficult to identify.

Continue to focus on news sites, and CNN balances pages with a lack of change in font capitalization. The navigation bar is all uppercase, but the rest of the page is traditionally capitalized in almost all of the first letters.

6. Anti-aliasing

Although technically more complex, anti-aliasing can still be summed up as "make the Edge smooth", in various designs have been applied to. In the world of web design, whether the antialiasing is part of the text is in the picture or in the HTML text. Another thing that complicates things is that some browsers or operating systems are automatically aliased to some extent, but in general, HTML text is not anti-aliased.

Stockxpert is very smart to use anti-aliasing partially in the ad page, while some of the text is non-aliased. Most text has a smooth edge, but the small print at the top and bottom of the page retains jagged edges. With the MSNBC button above, the 5-megapixel text needs to be as sharp as possible to maintain readability. The blurred or smooth edges in this situation can make the eyes very tired and eventually give up reading.

mix and match is kingly! the perfect thing is generally false or dull. The branches of the trees are not completely symmetrical; no form of illumination produces a balanced shadow; The camera lens sometimes blurs parts of the scene and creates a lens flare ... Some designs require clean artificial style, others need to mix up a little bit ~

7. Manufacturing defects

Anyone can tell you after 10 minutes of using a computer that it's 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 tool, just use the default settings and you can draw a perfect line between a specific two points.

This nostalgic Ace Tutorial offers a number of steps to make this card look imperfect. I have to say, this 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 the one that was filmed in the middle of the 20th century, another imperfect example. In fact, it is taken with a digital camera, using a number of filters and color adjustment, give its nostalgic effect.

It's easier to create art-style blemishes for your designs than you think. You just need to turn the footage gray or brown and add a little more detail ...

8. Blur

If you're still helpless about how to make content stand out and fade away, try a variety of different ways of blurring. By blurring the foreground, blurring the background, and even the entire design, you can dynamically increase the impact of your project. The blurred focus needs to be at least partially correlated. By blurring an element, the focus is brought to the other content.

Ios V2 Wallpapers Use simple blur to create calm, vibrant senses. Some sharp lines are used to form the focal point of the image, and the blurred background is crucial for the overall effect of the wallpaper.

Blurring can also create a sense of depth and level of coverage. The Aero effect of Windows Vista blurs the content behind the window to create a cool diffuse glass effect. Use Gaussian blur to create similar effects.

9. Align

Even if we emphasize cleanliness and straight lines, you still need to add some extra fun to your design.

The "logo" letters in this example logo are mentioned in the upper right corner. Changing the alignment of design elements makes them easier to remember and more likely to be discussed, and the result is a more efficient design.

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

Icon Designer makes a difference by rotating certain elements. This page can easily become a commonplace boring work, but a few spin transfers are fun.

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

Next, the most important thing is ...

10. Removing the burden

This is probably the most important and neglected design technique. Getting rid of unnecessary parts is one of the hardest parts.

By removing all unnecessary parts, CSS remix left only the necessary parts, showing 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 site's logo has been cut to 53 times 7 pixels.

The same is true in life, good things do too well is not a good thing. The logo is too small to be recognizable, and the featured sites are difficult to distinguish from each other. Oddly enough, the Twitter feed at the top of the page, relative to the site logo and navigation, is too prominent.

Ten easy-to-use design tips