MA Web Design + Content Planning materials for applied art for the web • major project

peace sign in Ukrainian colours, blue + yellow

Icon design

colour

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 ;)

view slides

opening slide titled: icon design

related links

icon design guidelines

icons / symbols

links & tutorials

jon hicks Jon - one of our 'people of the web'

Read this interview on the Affinity blog: Design icon: Jon Hicks

the ICON HANDBOOK - iconhandbook.co.uk

some background

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.

hands holding paper flipbook
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, horizontally, vertically or both.

creating a CSS sprite

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.

sprite overview

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.

view video & step-by-step

CTA: sprite roll-over

Another little project - for which you are to create a single amazing CTA (call to action) with sprite roll-over. Check project briefs for some examples.

brief

The purpose and design is entirely up to you – think of any call to action which could benefit from visually engaging design and interaction. This could be ad addition to your profile or course work page, or something that another ongoing project might benefit from? ¯\_(ツ)_/¯

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 ツ

deliverables

  • single webpage showing one CTA rollover via a single sprite image
  • use SVG with PNG fallbacks
  • optional: background pattern (for practice?) in keeping with design of rollover
  • to be submitted as independent page
sprite illustration