PRINCIPLES TO KEEP IN MIND WHEN CREATING MY ICONS

Material design says that icons should be  made up of shapes that are bold and geometric. They should have a symmetrical and consistent look, ensuring “readability and clarity”, even at the smallest sizes.  Each icon should be reduced to its minimal form, expressing only the most essential characteristics.

-Stroke weight (if any) should be thick so  viewers can make sense of the icons at small sizes.

-Organic shapes should be simplified to pure geometry.

 

ICON SIZING

Material design suggested downloading their Adobe illustrator icon templates to use underneath the creation of our own icons. This is something I will experiment with using when creating my own.

System icons are displayed as 24 x 24 dp. Material design recommends creating icons for viewing at “100% scale” for pixel-perfect accuracy too:

 

KEY-LINE SHAPES

Icon grid and keyline shapes help maintain a consistency throughout icons for brands, companies and apps.  The icon grid establishes clear rules for the consistent, but flexible, positioning of graphic elements.

Keyline shapes are the foundation of the grid. By using these core shapes as guidelines, you can maintain consistent visual proportions across system icons. For example:

CROSS PLATFORM APPLICATIONS

 

On iOS, the back arrow is thicker and doesn’t have a stem. The back arrow may also include a label for the associated destination.

On Android the action overflow menu is made up of 3 vertical dots, however on IOS they are horizontal.  I should take examples like this into consideration when creating my own app icons.

 

ICON ANATOMY AKA “ICON SYSTEM METRICS”

 

1. Stroke terminal
2. Corner
3. Counter area
4. Stroke
5. Counter stroke
6. Bounding area

 

 

COMPLEX ICON SHAPES

When creating icons they should be strictly 2D, trying to create 3D icons will confuse the viewer as they’re less easy to understand the meaning of quickly.

Adding in too many details will also make the icon less understandable.  It will do nothing except force the viewer to take more time looking for the correct icon to view before making a decision.

 

FINGER SPACE

Creating a large enough gap between icons is essential for legibility and the ability to click. Icons of 24dp can use a touch target of 48dp.

 

MOUSE SPACE

When a mouse and keyboard are the primary input methods, measurements may be condensed to accommodate denser layouts.

 

 

SHARP AND ROUNDED ICONS

Sharp icons

Sharp icons display corners with straight edges, for a crisp style that remains legible even at smaller scales. These rectangular shapes can support brand styles that aren’t well-reflected by rounded shapes.

Rounded icons

Rounded icons use a corner radius that pairs well with brands that use heavier typography, curved logos, or circular elements to express their style.

Corner radius

An icon’s corner radius consists of curved exterior corners. Icons can be are characterized by a larger corner radius or a smaller one. The recommended corner radius values are between 0dp and 4dp:

 

If the stroke is 2dp or less, the corner radius must be 1dp. Adjust the icon’s interior corners and counter area to match the corner radius:

Corner radius should be customised to remain legible but while also reflecting your product’s style.  In this example the inside triangle is more illegible when rounded and so making it sharper was beneficial:

 

CONSISTENCY IN BRAND IDENTITY

Something else worth noting is how roundness and sharpness should remain consistent throughout a brand identity or app/ website.  If the logo is round the icons should be rounded too, and vice versa with sharpness:

This brands logo, icons, and general UI has very rounded edges.  The app uses rounded buttons and a line-drawn logo to remain consistent throughout.

In contrast, this brand uses very sharp, angular components in its identity.  This is reflected in the rectangular images, right angles in the icons and logo, and sharp font chosen.

 

WHAT IVE LEARNED:

• Stroke weight should be thick and chunky so viewers can make sense of the icons at small sizes.
• Each icon should be reduced to its minimal form, expressing only the most essential characteristics.
• Organic shapes should be simplified to pure geometry.
• Download material designs Adobe illustrator icon templates for pixel perfect accuracy
• use a grid – 24 x 24dp
• use key line shapes
• keep in mind the difference between android and apple icon shapes
• Interior corners ideally should be square, not rounded.
• For shapes 2dp wide or less, stroke corners shouldn’t be rounded.
• leave out a lot of details
• should be strictly 2D
• Icons of 24dp use a touch target of 48dp between
• Dense icons of 20dp can use a touch target of 40dp.
• The brands identity should carry on throughout even through the shape of the icons – sharp identity’s need sharp icons, rounded identity need curved icons