The last lesson discussed vector tools. These toolsallow us to create custom shapes in Sketch. One specific application for vector tools in Sketch is creating icons. But icons aren't just shapes. They hold much more importance; an ideal icon communicates information about how something works, or what the user can expect.
In this lesson we'll explore both special considerations for icons in web design, and how to create our own custom icons in Sketch.
The term icon has a rather straightforward definition:
A person or thing regarded as a representative symbol of something.
But in web development that definition is more specific, as described by Nick Babich in Icons as Part of a Great User Experience:
Icons are an essential part of many user interfaces, visually expressing objects, actions and ideas. When done correctly, they communicate the core idea and intent of a product or action, and they bring a lot of nice benefits to user interfaces, such as saving screen real estate and enhancing aesthetic appeal. Last but not least, most apps and websites have icons. It’s a design pattern that is familiar to users.
An icon isn't just a cool image to spruce up the appearance of the site, they actually have deeply functional purposes. And in a world where web users are consuming content on increasingly smaller devices––like mobile phones and smartwatches––communicating functionality in smaller forms, like by using sleek icons, is increasingly important. It's also become commonplace enough that many users outright expect it.
For instance, consider the following common icons:
You probably understand what these do to without hardly thinking about it, right? Heck, even your less-than-tech-savvy, occasional-Facebook-user uncle probably gets the general idea of what these mean, right?
The left-most magnifying glass refers to search functionality; the mechanical cog in the middle denotes settings/preferences; and the three horizontal lines on the right tell the user there's a menu they can access. These are examples of great icons, because they quickly communicate available functionality without distracting from other content in the interface.
Nick Babich discusses best practices for using icons in his article Icons as Part of a Great User Experience. Read this article now to better understand how and where icons should be used in your own designs to create great user experiences.
Now that we understand icon best practices, let's learn how we can create our own custom icons in Sketch. The following two videos both outline how to create icons, and further solidify vector image editing skills we'll use for many aspects of our wireframes:
Note: This video above begins at ~1:34. This is intentional. The first portion simply introduces Sketch, but you're already familiar with it!
Want to explore icon design further? We recommend the following resources:
The Icons section of Awwwards curates award-winning examples of great icon designs. Check it out whenever you need inspiration!
While we expect you to practice creating your own icons in Sketch, there will still be times when you just want a few standard icon. Icons8 is a great resource for free, commonly-used icons.
6 Easy Steps to Better Logo Design by Scott Lewis is an in-depth exploration of the aesthetic design principles that go into great design, for those interested.
Exploring Shapes to Create Star Wars Characters: A Guide for Non-Designers by Varsha Ashok is a fun tutorial that walks through creating Star Wars icons.
Lesson 25 of 36
Last updated more than 3 months ago.