Blog Subscribe

SIGN UP to SUBSCRIBE

To get the latest and most quality designer news.

WHAT IS MOCKPLUS?

Mockplus is a desktop-based tool for prototyping mobile, web and desktop apps easily and quickly. Create interactions by simple drag-and-drop and your teamwork will be time-efficient with the collaboration features.

Tell me more
<< Blog

Learn How to Design Icons for Apps from iOS 11 in 6 Steps

Mockplus Team 7756 Views

Apple WWDC2017 developer conference has been settled, in addition to the release of new products, iOS 11 also officially unveiled. In the new system, it changed the icons of the original application such as map, App Store, clock, camera, contacts, and so on. This update of icons is bound to stimulate the next icon design trend, and how to design icons for apps will become a hot topic again.

Compared to iOS 10, the latest iOS 11 has a subtle change in the appearance. That has no such a huge visual impact like the style change from material design shift to flat design a few years ago. But the icon design has a lot of changes in detail. Such as the map icon adds an arc road symbolizes the Apple Park, the camera removed the upper and lower horizontal lines. All these changes are not obvious but you can also notice that at the first sight.

In the evolution of the iOS icons, many changes seemingly insignificant, but they do actually lead the evolution of icon design style and design method. Apple icon design adopted the flat design style since iOS 7 and it keeps till now, the flat design style is still the mainstream. Then how to design icons that looks nice and elegant?

Icon size

Before you design or draw an icon, you must figure out what the icon is, the purpose to draw the icon, and so on.

1. What is an icon?

An icon is a graphic that has a specific meaning or symbol, and it represents different meaning in different scenarios. The icon design style can be divided into material design and flat design. Since iOS 7, a series of dazzling interface and simplified app icon design appears. Fast, simple, and direct expression make the flat design be more popular to meet this era. And how to judge whether it is a good icon, there have three features:

Reference: Represent a specific thing or meaning.

Recognition: Because of the reference, the icon itself should have a certain degree of recognition and identification to avoid misreading, abstractism, and so on.

Aesthetics: a good icon should have a good visual performance.

2. The purpose of icon design

Apple user experience designer, Mike Stern, explains the importance of UI and app icon design: users do not make a judgment by how much technology you use, how many APIs are integrated, or how much code you write. But what your application can do for them, and the feeling it gives to users. What they expected from your application is providing them with intuitive, wonderful and even incredible experience. This is enough to illustrate the importance of icon design in overall software applications.

3. Principles of how to design icon

Mature visual perception is more conducive to the rapid dissemination of information, and the icon design quality will directly affect the user's download of the apps. To a large extent, a good product should have a good application icon, and it’s the symbol of the product clearly convey the connotation. Thus it allows users to have good user experience both on the product and the brand itself. Therefore, the designer should obey the following 3 principles of app icon design.

Principle1: Recognition

Recognition is the basis of the product icon design, which creates the uniqueness of the icon itself. Whether an icon works fundamentally depends on whether the user can easily understand the meaning of the icon. In order to make their icons be easily understood, many designers adopt black and white in the design. Because the color will interfere with the user's understanding, the more the color of the icon interface, the more time cost for the user to find it.

ios 11 icons vs ios 10 icons

Principle2: Visual consistency

The composition of a single icon can be applied to the entire set of icon design. That is the visual consistency. Aesthetic consistency is a collection of design elements. Visual consistency includes the unity of the overall style, the size of the icon, the shape and thickness of the icon outline, and the color tone and harmonic.

For example, in this set of icon design, in order to achieve the visual consistency, all the container lines and colors are using the same style. What’s more, the bubbles in the glass makes this icon design be lively and interesting.

 Visual consistency

Principle3: Difference

If you search an app in the App Store, hundreds of apps will pop up with similar icons. That makes users be annoyed and waste time on choosing the app you want. So it’s necessary to maximize the difference and weaken the similarity of app icon design.

Qualified designers not only need to master the profound theoretical knowledge but also necessary to know how to use the design tools such as PS, Al, Illustrator, etc. Here are some websites for inspiration on how to design icons for designers, or simply regards it as an icon resource collection. That’s okay.

 Difference

Principle4: Accurately define the image

The icon is also an interactive module that presenting by an interaction with the interface. While the icon is a kind of reminder, summery, and expression. That’s why the icon design must be accurate with a definition more clearer than the logo design.

For example, the regular icons of adding, deleting, searching and so on should follow this simple and common principle. Otherwise, the user recognition will lead to the result of rising operating costs. Usually also cause obstacles on reading and operation.

Accurately define the image

Principle5: In line with user habits

When you expressing the definition of the icon, the first principle is following the user habits. What the UI of icon design wants expressing are the most direct operation and interactive functions. So it should not be simply designed icon by focusing on the gorgeous and exquisite interface. While the product manager does not care about it’s beautiful or not, but the functionality is the most important factor for them. By contrast, the icons for a game interface or educational interface that emphasize the personality color will generally along with a text or a strong belonging element.

In line with user habits

Principle6: Matches colors coordinated

Color is kind of mean expressing the visual impact. Usually, the personality and the highlights of the icon is presented by adding colors.

Normally, there are background colors and dominant colors In the whole interface. So the designers need to decide to use an embellishment color or a dominant color, and other less important icon colors try to choose a neutral color like the low purity blue. Because the blue, black, white, and gray and are almost universal colors in the UI interface design. Sometimes the UI interface or the icon presents warm or cold, that is because of the imbalance of the complementary color.

Matches colors coordinated

4. Icon resource

Other icons

Other Icons has a lot of icon design resources. These different icons are designed and uploaded by the designers all over the world. Some of them are paid icons, and some are free icons. The abundant icon on this site is not only easy to use and copy, but it also has many Photoshop Plugin.

Other icons

Icons8

Icons8 is a search engine that offers free icons and graphics for desktop, Windows, and Android design. It currently offers nearly 40,000 resources. The website also offers a variety of formats, sizes, and colors for the user to customize the icon design.

Icons8

Flat Icon

Flat Icon has detailed and comprehensive icon classification, and it lists the popular icons for users. Meanwhile, you can also view the icon design of each author. In other words, the user can download icons according to the icon sort, the author, and the packaged icon.

Flat icon

Mockplus

What?! You may be surprised, why Mockplus here? Be easy, Mockplus users know that it provides 2600 vector icons and 400 flat icons, that eliminates the step for designers to find and download icons in the prototyping design process. The user can search icons directly in the icon library, and click it, the icon can be applied to the design directly. For designers, it is not just a prototyping design tool, but also an icon library. The combination of prototype design and icon library is so sweet.

Mockplus icons

Summary

Undoubted, Apple's new system icon changes will affect the design trend, but for designers, the most important thing is to lay the foundation. How to design icons, it’s still a FAQ. So master the theoretical basis, resource, and tools of icon design, that should be your task. If you only want the fast design, then pick the tools like Mockplus has its own icon library. Prototyping tool plus icon library, perfect!

STILL HUNGRY FOR THE DESIGN?

_____

Mockplus is a desktop-based tool for prototyping mobile, web and desktop apps easily and quickly. Create interactions by simple drag-and-drop and your teamwork will be time-efficient with the collaboration features.

Free Trial

Need help?

Join Mockplus on Slack Click here

support@jongde.com