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 ;)
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 and extend it to a full sprite.
The purpose and design is entirely up to you – think of any CTA which could benefit from visually engaging 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
DEADLINE: 13th February 2019
Comments are closed.