course notes 2019/20

icon design illustration

Icon design

Jan 28th 2020

Icons are the small little details with such high importance that
they deserve as much TLC as the rest of your design. If you search for
icon sets online, you will find an ever growing number of beautiful sets
to choose from. However, it will be worth your while to at least
explore icon design, if not learn this skill in depth.

Icon design is challenging but fun ~ so take some time to dive into it and you’ll soon have beautiful icons making your site designs shine ;)


The term ‘sprite’ originates from early arcade/computer games when a large graphic would collect all images needed and display only a select part through shifting the coordinates of the image. This meant faster performance by fetching only one file for various uses. Sprite images can be used to show single visuals, or be presented in sequence for animation.

Think of the lovely flipbooks which would include multiple images in sequence which when viewed would appear to show movement.

image © ‘history of animation’

While the flipbook stacks the images on top of each other – the sprite will spread out the images side-by-side.

In short, sprites are a method to combine multiple images into a single file which is then used to display portions of the visual via coordinates, and across time. While this might sound complicated, sprites are actually quite easy to create and implement and bring great performance improvements.

Let’s work on one example together, using our icon from the last lesson as starting point. Have a look at the demo and notes and download the empty HTML page to work on your own demo.

design a download icon

pen doddles

One very common feature on websites are downloads. Clear labelling of such links is a great way of sign-posting different content types, making your site easy and a pleasure to use.

Your task is to design an icon to be used as part of the download link and implement it on a webpage.

icon design guidelines

icons / symbols

on icon fonts vs SVG

TLTR: always use SVG and avoid icon fonts – for accessibility reasons alone.

links & tutorials

tiny task: sprite roll-over

sprite graphic

Design a sprite roll-over for any purpose of your choosing and present this on a single webpage as working demo. If you are short on time or ideas, you could complete the download icon design you started in class.

The purpose and design is entirely up to you – think of any CTA which could benefit from visually engaging presentation and behaviour. Consider context and layout within surrounding content and design an effective visual. Work on both the hover and the focus states of your link or button. Be creative and have some fun :)

  1. single webpage showing one CTA rollover via a single sprite image
  2. optional: background pattern in keeping with design of rollover
  3. to be submitted as independent page

DEADLINE: 26th February 2020

→ see “projects” for brief and extras.

Comments are closed.