8 Steps To Create Icons

Simple Grid Square

Standard icons starts with a solid base. We just need simple square to start making icons.

create-icon-image1

Start creating your icon sketches using pencil and paper on the square gridded paper that you were using in you school days. You should design icon on square block as most of the icons needs to fit into the square space including icons

For app as well as icons for website, once you start designing the icon leave white space around it so it will be easy to add background when required and it will prevent the icon from getting cut off.

It isn’t necessary that icon drawn will always be in square shape, it can be a little rounded or in a rectangular shape. It should be in center of the grid to maintain equal space. You can use gridlines to draw straight angles for icon or to ascertain position of strokes for the icon.

Start Making With Geometry

Icons are usually small, so it should be created in a way that end user can recognise it by just having the glimpse of it. So mostly the icons are created using geometrical shapes and mostly used shapes are circle, squares and triangles.

Each of these shape is known and simple so they can be combined to create new elements.

create-icon-image2

Look at the icon for audi, It is only base on four circles join together, this icon is very simple and more creative and readable in any of the size. other way of “geometric” we can use the Alphabets, It will glow the brand with uniqueness. LinkedIn is the one of the best example, Icons with Letters.

Make A Special Shape

As we discussed earlier using geometrical shapes are very useful, but you want to create your own shape. It’s really important when you are working for brand specific icons.
Even to create complicated icons, you need to start with basic shapes that also need to be something different. When you are designing some unique icons, follow the below points.

Don’t use images, it doesn’t look good in small icons.
As we told don’t use images, so what about text? Right user can’t see small text.
Of course some movements are valuable, but when you are using flat icons styles it looks like miracle.
Use direct lines with connected points on grid. Curves can go difficult rapidly.
Color icons looks really good but also identify with black and white border.

Give The Spacing

Give appropriate spacing around icons, so that it is readable and identifiable. When you are particularly designing app icons, we need to take care of spacing and it should be placed within the frame for better user experience.

create-icon-image3

Create a uniform border around edge of app icon. Also, fill the area with color which look like unseen.

Maximize The Usage Of Brand Colors

When you are creating icons related to brand then you must stick to your color palette. You may diverge from your brand icon but the color should stay consistent throughout the design. If you are working on bunch of icons then you should start with either black in white or white in black. Then afterwards you can add color relevant to your brand in the later phase. If it looks good with black and white then surely it will look amazing with color.

Make With Consistency

Make sure every detail in the icon design goes perfect. If you cut the angled corner in the design then be consistent with all the corner.

When you design the icons you think that the small details are not much important and will not be visible in small size, it is very important in retina display and HD displays

create-icon-image4

Often designers use the icons in the buttons in whole designs, so icons are more eyecatcher then normal text. When you make the icon be carefull, it will help during making websites.

Design Each And Every Size

Icons should be designed in a way that it can be used at any size. For example favicon icons are uploaded at 32px * 32px. If you have not designed the resizable icon then you should start again with the icon design or else create separate icon for small size, such as favicon icon.

create-icon-image5

Not Make Embellish

Finally, keep your icon design simple. Hold out against your wishes to decorate the design. Still, some of the nicest apps looks imperfect with the bad icon design.

create-icon-image6

Decoration in icons doesn’t look good always (for e.g. adding an image in place of icon will look messy in design)

mm

Nikhil Jethva UI/UX designer

I am Nikhil Jethva and I am UI/UX designer at Yudiz Solutions Pvt. Ltd. I like sharing my knowledge and experience of designing with true design fellows. I make things with the greatest meaning. I love to do photography.

Comments are closed.

Top