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.
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.
design a download icon
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
- Design Laguage – Iconography, IBM
- Icon Design Guidelines, Android
- Human Interface Guidelines, Apple
- Material Design – Icons, Google
- Icons and web logo Guidelines, Adobe
icons / symbols
- The Noun Project
- The Chalkwork Family, Dave Shea
- symbolicons by Sensible World
- 20 beautiful iPhone app icons
on icon fonts vs SVG
TLTR: always use SVG and avoid icon fonts – for accessibility reasons alone.
- Ten reasons we switched from an icon font to SVG
- Inline SVG vs Icon Fonts [CAGEMATCH]
- Seriously, Don’t Use Icon Fonts
- Case Study: Our SVG Icon Process
links & tutorials
- ICON HANDBOOK ~ website accompanying the book by Jon Hicks
- Better Icon Design in 6 Easy Steps, Scott Lewis
- Preparing and Exporting SVG Icons in Sketch, Anthony Collurafici
- Icon Design Tutorial: Drawing A Pencil Icon, Min Tran for SmashingMagazine
- creating icons in Gimp, by Jakub Steiner
- Create a Vector Ticket Icon in Illustrator, Andrei Marius for tuts+
- Quick Tip: How to Create a Simple Set of Ribbon Icons, Andrei Marius for tuts+
tiny task: sprite roll-over
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 :)
- single webpage showing one CTA rollover via a single sprite image
- optional: background pattern in keeping with design of rollover
- to be submitted as independent page