Web design stunts use icons to support page content

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

How to use icons efficiently when doing visual design is a discipline: what kind of icons should be used? Where should I put the icon? What is the size of the icon? Does the use of icons help users understand content better and faster, or do they increase their understanding or even mislead? In this article, We'll show you good examples and best practices for using icons in web design to support content.

Why use icons? Design is to convey the message: If your site does not attract users, the question is not how important and stimulating the information you share. At the beginning of a visit to a website, most users scanned the page first to look for interesting content, and only certain things caught their attention before they really began to read. The icon is a simple, effective way to attract users to read the content on your site.

The icon plays the same psychological effect as the paragraph: visually, the icon breaks the content so that life is not. By using the icon to divide the content into several easy to understand paragraphs and points, such a page is easy to read and visually interesting enough to maintain the user's attention. So, stop wasting time writing so many unread things and start using icons!

1. How to use Icons

The primary goal of using icons should be to help users absorb and process information more efficiently. The general practice is to use a lot of whitespace and the icons that enhance the content. The icons enrich the content by giving it more substance and effective communication. Icons should be used to attract users ' attention to the content of information, rather than weaken or replace it.

* Make feature List more interesting

Listing Service listings is a useful and necessary part of effective market push, but in essence the list is tedious and boring. Using icons in your Feature list makes them more appealing.

280 Slides

* To attract users ' attention to new features of Web applications

An icon is a visual invitation that attracts users to try out the latest and most powerful features of a Web application. Icons should capture the user's attention and guide them to new features. Once they have captured their attention, tell them what makes the new features so great.

Coda

* List of different applications and products

In this case, think of the icon as a logo, remember that the goal of the logo is in the product and specific images to establish a spiritual connection. Icons should be unique and simple: most icons have only 128*128 pixels, so use a minimalist approach to express more information in less detail.

Intridea

* List your services and increase readability

The icon should be related to the content and the design is simple. Consider what you are trying to express and create an icon on that basis. What is the theme of the website or article? What's the color? What's the style? In the visual, the icon should be consistent with the content of the website as a whole and the idea conveyed by individuality.

J.alexander Woodworking

2. Purpose and Placement

The use of icons makes your site look friendly, appealing, and professional, which shows that you pay attention to detail, even if the details are small and small. Make your icons Creative: titles, toolbars, and feature lists are good places to put icons.

A very simple icon can increase the charm and personality of the site.

Coffeenatic

* Involve users in pages with very long content

Using an icon that outlines the effect of a paragraph will make it easier for readers to understand the article.

Rackspace

Use icons in different chapters of the article to provide visual attention points to divide the chapters.

Tabbed FCX

* Size is not important, even small icons are effective

Small icons provide the same visual interest as large icons, but do not distract users. Make sure the icons are easy to identify and closely related to the content.

Morgan Hayes

* Place the icon on the right side of the paragraph

The placement of icons is not limited to regular use, the icon on the right side is relatively rare, and therefore more visual effect. But note that putting the icons on the right side sometimes looks messy.

South Creative

* Change the size and position of the icon

Play the Creative! Changing the size and location of icons can make content more dynamic and interesting.

Media Temple

3. Choose your Style

When it comes to style, its purpose is to impress people. If you expect the design to be unique, you can use a new icon, but the effectiveness of the icon is critical. Keep in mind that icons are used to enhance content and design. Instead of simply buying an icon that looks cool on the istockphoto, consider your website style.

Also, the matching of icons is equally important. Putting mismatched icons together, no matter how cool they seem to be, is an obvious design error and unprofessional. Here are some examples of how icons can be effectively combined with their respective website styles.

Use the light-colored and cool 3D design icons to enhance the look and feel of the site.

Goodbarry

As the following example shows, simplicity is attractive and practical.

Crowdspring

The use of a rough and shabby style on a 2D icon can add a lot of depth:

Take The Walk

Choose a unique and consistent style to make the page vibrant and professional:

Squarespace

A monochrome icon can help highlight content without distracting attention:

Studio 7Designs

Gist

Instead of using them just because they look cool, choose which icons match your style and brand:

Treemo

In addition, there are a number of good examples, limited to space, here are not listed. If you are interested, you can view the fourth part of the icons to support content into Web design-additional examples

Article Source: www.cn8f.com