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.
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 ;)
related links
-
ISOTYPE symbols and visual chart by Gerd Arntz,
courtesy of gerdarntz.org - Susan Kare, icon designer
-
Transport for London: Pictogram standard,
available at tfl.gov.uk
icon design guidelines
- Iconography: UI Icons IBM
- Material Design Google
- Material Design – Icons Google
- Human Interface Guidelines Apple
- Icons and web logo Guidelines Adobe
icons / symbols
links & tutorials
- Better Icon Design in 6 Easy Steps Scott Lewis
- Preparing and Exporting SVG Icons in Sketch Anthony Collurafici
- Icon Design Tutorial: Drawing A Pencil IconMin Tran for SmashingMagazine
- creating icons in Gimp by Jakub Steiner
- Create a Vector Ticket Icon in Illustrator Andrei Marius for tuts+
- Andrei Marius for tuts+
TLTR: always use SVG and avoid icon fonts
– for accessibility reasons alone.
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.
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.
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
