The use of icons in web design and the collection of resources

Mention icon design, it seems that every designer has to say, but to do a good job of the icon design is really so easy? Today this article for the web design area of the icon design for a relatively comprehensive comb, from design skills to design resources available, I hope to help you!

Icons are an integral part of every modern UI, not only to help the UI layout organize content, but also to make lightweight icons fit into the interface. Not only does the mobile phone and tablet apps use a lot of icons in the app UI, but also in the ipod and smart watch interface, because the icons have the ability to communicate information quickly and intuitively.

In the new era of web design, small icons have been put into use by early web designers and developers. These patterns and logos are usually common, receptive, functional graphics (folders, printers, mice, arrows, and so on), and over the next more than 20 years these icons evolve into a set of conventional graphics languages. In the next design guide, I would like to share some of the web design tips used in the use of icons, as well as some useful free icon material collection, I hope you can enjoy!

　Icon Design Style

What we usually call "icon design" actually covers a fairly large area. Small to the Web page those solid color flat small logo, large to PS and AI carved out of the object Wind app icon, are in the category of icon design. Each icon design project has different design requirements and icon style, which makes the difference of the icon design.

The current popular minimalist and flat design, has been in the world's designers have a myriad of clusters. The previously tepid linear icon has become the preferred icon for the current iOS system, and other mobile operating systems are also being followed up. In terms of style, there is no right or wrong icon, only to say that their choice and bias is not the same.

In my opinion, the competitive contrast between flat design and materialized design is a wonderful thing for web design. This also has an impact on the design of icons, many of which have been introduced into the design of icons, such as light and shade, depth, and so on. As a designer, if you prefer flat design, you need to learn to create textures, control shadows, and make your design look realistic. You need to do a lot of exercise, but it's definitely worth it.

　　Corporate Brand Design

While brand design may seem obvious, it is still worth mentioning, as those excellent sites often have an incredibly good brand design. An excellent icon can convey the concept and emotion of the brand to the user. When you design a brand for an enterprise or website, the logo, mascot, or symbol of the brand should create a unique emotional connection between the brand and its users.

Of course, you can also design a series of different icons for the brand, each of which contains different effects and conveys different ideas. The possibilities for icon design are so much that you can even design an icon Dahe set so that all the different icons have the same style. Because each icon is unique, but the style is so consistent, when they apply to the Web page, you can make the entire page has a unique temperament, enough to stand out from many designs.

Mailbakery is a typical case in which a large map is used to advertise their services. When the cursor moves to the bottom of each icon, the top of the larger image content will be replaced with the corresponding picture content, such icons + pictures of the combination of the design to maintain a high degree of consistency.

These icons correspond to images that are specifically tailored for the site, but these icons are part of a set of free icons. You can see these same icons on dozens of different websites, that is, these icons, which are unique to the potential brand design, have been overlooked and they can actually do better.

It is for this reason that I often suggest a vengeful icon designer to learn to customize the set of icons individually for the interface. This is a more long-term and valuable thing for developing brands, customers and projects.

Navigation links

In the past, icons on Web pages were often used as content navigation, meaning that the contents and meanings of icons were highly relevant or consistent with the content/nature of the pages the icons pointed to. Today, Facebook's navigation follows the same principles.

Although you will not always follow this design approach, it is necessary and worth understanding it. Drop-down menu links are often very useful because users take the initiative to understand the name of each menu. However, if there are more than 10 navigation links in landscape or portrait orientation, it is a more reliable scheme to identify them by icons.

　　Visual content Recognition

The main reason for using industry icons in web design is to differentiate between content. Icons can convey information more visually and balance the layout with a large amount of text, so it is a required course for designers to convey information accurately through a simple icon.

My favorite case is GitHub's teaching page. The page head uses the GitHub mascot and chalk blackboard to create an educational atmosphere, and when you scroll down, each plate has a separate icon for you to explain what it does with the block.

It is noteworthy that each icon is the use of hand-painted effects, although different colors, but the overall style is highly consistent, is clearly a unified design of a set of icons. More importantly, each icon is a clear and intuitive description of the contents of the block in which it resides. The text is sufficient to describe the details, but the icons provide a high level of clarity about the information.

You can see similar design effects on the home page of glazed & infused. Text blocks detail their services, coffee and gift card information, while the top hand-painted icons visually illuminate the nature of the content, and more importantly, the three icons quickly capture the user's eye.

　Vector background

You can do a lot of things with vector graphics from a repeating tile background to a vector object. The way the site is handled is much more than a single tile texture. It's easy to create a scene that covers the entire background with vector graphics.

Vector graphics can be scaled easily, but it's hard to create realistic results. It's not easy to create complex-style vector graphics, and you need a lot of practice to familiarize yourself with the techniques of building graphics on graphics, but it's still fun to learn. Here we recommend a useful tool: Bota iusti.

　Design Tutorials

Tracking Learning Online Design tutorials is an important way to improve the design skills of icons. There is no short cut to mastering the design skills, only learning and keeping practicing.

Although icon design is a broad area, many tutorials can be extrapolate, followed by a series of tutorials that are very practical and hope that you can learn to integrate into your everyday design.

16x16 px Icons

Weather Line Icons

Flat Social Icon

Tab Bar Icons

Bat Icon

Gem Icons

Water Pistol

Mail Alert

Notebook

Almost Flat

Free icon

Flat Icons

Mini Icons

Colorful Iconset

Simple Flat

Sport & Fitness

Chat & Email

Atitel Icons

Tab Bar Icons

Simple Lines

Flatified

Web Design Iconset

IOS Settings Icon

Colorful Switch

Synthesizer

Book APP Icon