Iconography is one of those design skills that is often left to last minute in a project or in many cases stock or existing libraries save the day and are used instead. When it comes to iconography there isn’t really a set rules of what defines an Icon vs. say an illustration, as some icons themselves are actually quite detailed and some illustrations are super simple. Personally I love icons, they remind me of being a kid when I used to collect mini cars and toys, but of course in the professional design world.. they serve a much more important and functional use.
We take a look into illustrator, icon designer and all round awesome, creative superstar Meg Robichaud, and explore what makes here work so successful and visually engaging.
Iconography & illustrations for Shopify
Megs been working on the Shopify design team for some time now creating awesome designs to help with their design system and digital guidelines. This is a thorough example of where icons serve an important functional purpose and have been considered to serve the user.
The above icons use Megs classic iconography style to create a consistent set:
- Colour usage is limited simplifying their appearance
- For consistency each icon uses equal parts stroke to fill
- The icons are housed in an irregular shape to give a human, friendly appearance that softens them
- The view and perspective is either straight on or direct from above, no degrees or angles are used which unifies the set further
- There is no more than 3 stroke widths used throughout – keeping a similar amount of widths throughout is key to unify icon sets
The Shopify Polaris guidelines use a variety of illustration and icon styles throughout each section or zone (importantly however they are consistent within each section or set). Let’s take a look at some of Meg’s spot style illustrations and see why they work:
Again, Meg uses a locked colour palette using no more than 4 or 5 colours throughout and their contrast is relatively close, apart from one main colour which leads each illustration. The above illustrations are interesting in that they use sharp, clean contrasting lines combined with messy, hand-made touches. Although contrasting styles, their usage is subtle and actually help to represent what Shopify is: a technically advanced shopping platform (the sharp, clean lines) that is easy to use by non-technically advanced humans (the friendly, hand-made touches). Below are a few of the fuller more detailed illustrations Meg has created for various areas within Shopify.
More inspiring iconography & illustration by Meg
Figma is a new in browser design application where teams can collaborate on projects in real time. They bought in Meg to create a library of icons to use for their product and the result is an elegant, consistent icon set that combines professionalism and playfulness perfectly. The shot below shows the full set and each icon on it’s own explaining it’s function.
Something that can be taken from the above set and to keep in mind when designing icons is that although meg has given a written description here for us to see what they are; they don’t always have to be clear exactly what their purpose is without text or a guide. In many cases Icons help to break up a design and they provide a memorable function that a user will begin to learn over time from using a site or product.
The below artwork Meg created for Lattice (a HR management app company) show an example of how Meg explored different styling options before finalising her icon set:
Using a single colour stroke first then primary colours for the strokes then finally onto exploring a subtle inner fill which gives the icons depth. These are 3 very basic style approaches that can be applied to line icons, especially simple icons that use the same stroke width throughout.
The above illustrations use a classic offset fill style. Looking at them here, they seem to created so effortlessly and easily but in actual fact applying this style takes time and patient, as each icon’s fill need to be layered and placed individually and manoeuvred until it sits right. As a set these icon work beautifully and again, colour usage, lie width and and the contrast of stroke to fill is done subtly and constantly throughout.
Some icons are obviously clear what their purpose is, many of which will have been around and in action for many years and used broadly over many different websites and applications. Our job as designers is to provide a solution for the challenge of introducing new icons and symbols to represent new and unique purposes. Research, planning and brainstorming with others (not just designers) will help in determining wether your icons do so and is a great way to help your iconography skills develop.