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

Icon Design.

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.

colour

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. First, we'll create the icon itself. Second, we'll set up the sprite graphic. And finally, we'll optimise the visual as SVG and implement it as rollover.

view tutorial →

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 the project briefs content 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 (like your film 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