Vic Bell is an iconographer, illustrator, and brand designer. She has a very iconographic illustrative style and many of her designs have very rounded corners, bright colours, and a cute, friendly, and welcoming feel to them. I love how every brand she works on comes out appearing more clean, welcoming, and straightforward to use due to her attention to detail and consistency throughout. All of these attributes are things I want to have in my own work and I feel studying her process will hopefully help me with this.
HER WORK WITH BURBERRY – ICONOGRAPHY
Bell was approached by Burberry to create a very small and stylised icon set for their website redesign. Each icon was needed at a different size depending on where it was going to be used. As a result of this she created a set of guidelines for any future iconography.
ICON SIZING:
The original sizing for the set was 28 by 28px grid – keeping all sizes across the UI consistent. For larger sizes she used 56px and 112px grids.
STROKE DESIGN – CAPS AND CORNERS
She explained that both stroke design and cap design should remain consistent across the entire icon set. For example for the 28px icons the stroke width should be 3px.
For this icon set she explained that the cap should be flat cap, not projected or rounded, and that the corner should be a miter join like below.
IRREGULAR ICON SHAPES:
There are some icons which don’t fill the whole grid in order to be effective. In cases like this there was a rule of 3px on either side.
Shapes in which white space is distributed as part of the icon will have a 6px amount of space.
CORNERS
She explained that in some cases, corners were necessary but needed to be curved – in the cases where they were in a 28px grid these should have a corner radius of 3px.
POINTED EDGES
In the case of adding points to icons the point in which the shape begins should be the same stroke weight as the rest of the icon – in this case it’s 3px.
OPTICAL CORRECTION
Optical correction is a necessary part of icon design that I would have completely neglected if I hadn’t read Bells icon principals. For icons with a lot of white space in them she explains that the length of them should be reduced by a few pixels. in this case the grid is made smaller as a result – allowing the human eye to perceive it as looking more consistent.
SPACING
For this icon set, there should always be a gap of at least 2px between each stroke if a gap is necessary. she explains that if the strokes are too close together, the design will become muddy and difficult to make sense of on the eye. With some spaces it is okay to do a 1px gap if it works better on the eye, however the 2px rule should always be tried and tested first.
WHAT I’VE LEARNED:
-Stroke weight should be completely consistent throughout the icon set
-gaps inside icons should have a distinct maximum and minimum sizing
-optical correction should be taken into account and so the grid sizing should sometimes be reduced
-the beginning of points should have the same weight to them as the rest of the strokes
-curved corners should always have the same diameter
-irregular icon shapes should have a maximum and minimum amount of pixels on either side of them
-Shapes in which white space is distributed as part of the icon should have a maximum and minimum amount of pixels
-caps should remain consistent shapes
-corners should remain consistent in shaping