Icons Design for Mobile Photo & Video Editor App Tips, 1

πŸ’‘ Tips to Create Icon Set.

1. Quickly sketch 4-5 icons inside design.

You don't have to make them perfect now, try detect some patterns.

2. Think about what your product

and its users are like.

Based on that feelings, form principles:

πŸ”² Size. Make the icon fit inside frames that are between 12 and 44pt.

Sizes should be multiples of 4pt.

〰️ Line Thickness. 2pt line for mobile screens by default

πŸ”˜ Border Radius. If the corners are more rounded, the shape looks lighter.

🌘 Negative Space. Pay attention to the space around and between shapes.

Make unique patterns for spacings, "shadows", etc

πŸ’‘ Outlined or solid?

Outlined icons are great for basic metaphors but scale poorly for complex or small icons. Use them in light, small products.

Outline icons work well for inactive tabs.

But the easiest to perceive are hybrid icons (Outlined and Solid in one time)

3. Drawing the Basic Shapes

Based on the initial sketches of the icons, determine average sizes, proportions, and visual weight. Create basic constants from these references.

Next, you'll use these basic shapes as the starting point

to draw next icons.

- Why are the icons smaller than their frames?

- How do you maintain balance between the sizes, proportions,

and visual weight?

***

...Read about this and much more in my upcoming posts.

Subscribe so you don't miss out.

Also, your likes and comments will help me understand how useful this is for you.

Nikita Karpinskii
Lead Mobile Product Designer, Prequel inc
Get in touch

More by Nikita Karpinskii

View profile