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 ;)
TLTR: always use SVG and avoid icon fonts – for accessibility reasons alone.
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.
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.
profile project
Another little project - for which you are to create a single amazing CTA with sprite roll-over. Check project briefs for some examples.