Booklet

author

Mike V Dijssel

Design

How to create & balance icons on a grid for ul design

design

Design

|

HOW TO CREATE & BALANCE ICONS ON A GRID FOR Ul DESIGN

FIRST OF ALL..
ALWAYS START WITH A GRID!
You will never get the right margins, sizes and balance if you don't use a grid.

IN THIS CASE, LET'S USE THE 32X32PX GRID AS EXAMPLE
Below here the basics of setting up my ratio grid for ALL the icon placement. You can scale this up for your perfect fit.

CIRCULAR ICONS
Circular icons are always center aligned and will hit all the borders of the work zone. It is possible that a visual element protrudes into the no-go zone. This is an exception that sometimes happens to keep certain shapes in tone.

SQUARE ICONS
Square icons are also center aligned but will not always hit the border of the work zone. This to keep a visual balance with circular- and triangular icons. Normally I use the center between the safe- & workzone. Like the left square below.

HORIZONTAL & VERTICAL ICONS
Stretch the safe zone in the direction of the icon. to the border of the work zone. So in the case the icons are placed in the dimensions of 28x20 in their orientation.

DIAGONAL ICONS
Diagonal icons are center aligned and stretched till the area of the circular work zone. As you see it will get the same 24x24 dimension of the square icons.
It could be possible that elements protrude from the circle work zone.

BUT BE AWARE..
There are exceptions. The essence of an individual icon outweighs the importance of consistent cohesion. It may happen that you sometimes have to deviate from guidelines to keep an icon perfect.

SOME PRO TIPS

  • Always take maximum care of your icons, it can damage your UI extremely when not used correctly!
  • Check out other iconpacks and see how the solved unique shapes.
  • Create a coherent whole and ensure that all details in the icons are visually equivalent.
  • Make your icons recognizable. The user must recognize the essention of the icon immediatly. Keep that in mind!

YOU'RE READY TO RUMBLE!
Let me know in the comments if you liked this post!

More booklets by Mike V Dijssel

More Design booklets

Your recently viewed booklets

  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
See all booklets