Lesson Weekend

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.

Icons

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.

Icon Best Practices

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.

Required Reading: Icons as Part of a Great User Experience

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.

Creating Icons in Sketch

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:

Required Video: Create Google Docs Icon

Required Video: Make a Water Droplet with Sketch 3

Note: This video above begins at ~1:34. This is intentional. The first portion simply introduces Sketch, but you're already familiar with it!

Additional Resources

Want to explore icon design further? We recommend the following resources:

Lesson 25 of 36
Last updated more than 3 months ago.