Icon Design Principles: The Details


Icon Design with Sketch


Lesson Info

Icon Design Principles: The Details

In the last section, we discussed the design principles that surround the fundamental structure of an icon. And in this video, we're gonna go over the details. The visual and the stylistic aspects of an icon. And the best place to start, is questioning what is the usage and what are the different states that the icon needs to exist in. So, this is particularly important if you've got a button, because buttons have generally a "Normal" state when you first see it. Then, if you're on a computer with a mouse, you hover over it with your cursor, the icon could change. Active, or "Pressed," this is for both touch screens and desktop computers. Maybe some part of the icon reacts when you do that, or it changes color. And certainly when the icon is selected, if there is a selected state, that needs to be visually different. And so, by thinking about the use of the icon in your unique context, you might find that there are actually a few versions of the icon. So, for example, on iOS, in the ta...

b bar, at the bottom of many apps, you've got icons like these and they often fill in when they are selected. Others that really just can't be filled in in some way, the border thickness increases. But I chose these specific examples because I think that Apple did a great job and really kind of got creative with how to turn some of these outlined icons into a filled icon. The use of negative space on the cloud, the use of a circle to encapsulate the timer, I think they did a fantastic job. And, here's another example, this is from the prototyping tool, Flinto, that I helped design and designed a bunch of icons for. So, this icon, to send your prototype to the companion viewer app, kinda mirror what you're doing on the desktop, on your mobile device, this is the icon to send your prototype to the device. But we needed another icon to kind of confirm that you are connected and that it is now mirroring. And so, this icon has really two parts to it and knowing the, basically what is user experience that somebody goes through, it might inform decisions to have an icon with a few different states. You know, here's an example of a menu icon and a closed icon. A lot of the time when you have a menu icon that changes to an "x" icon, and if you're designing these at the same time, you're kind of aware where they're going to be, you can do fun things like this, where you actually animate the state change and you can kind of incorporate that into your original design. You can incorporate that into how you're planning the experience to be and the usage of that icon to be. Now the big thing here, when it comes to the details, is style. So there are a ton of different ways that an icon can look, especially app icons. We're not gonna dive too deeply into app icons, 'cuz those can be very platform specific. But one thing to cover, is realism and the use of lighting. The use of shadows, and gradients, and lighting effects. So, I think this is fantastic. This is Google's Gmail app and they did a lot of lighting experiments to figure out exactly what was going to be the most versatile and just the most elegant. Google actually has very specific guidelines about how lighting and realism should work in Android's app icons. Personally, I'm more often designing icons that are on websites or in apps. These are some from Airbnb, I didn't design them, but these are a little bit more the icons that are kind of universal and you know, these are outlines. There's an aspect to this style that makes them really friendly and that's how round they are. I mean, look at that knife. That knife is like, that's not gonna cut through anything. That is the friendliest looking knife you've ever seen. That fire, that doesn't say danger, that says like, "oh, it's like warm." It's inviting in a way that curves and rounded shapes can only achieve. Just like, instinctually, as animals really, we are averse to things that are more pointy. I took this fireplace icon and made a more straight angle version of it. And you see, it just has a different character to it. So, the use of roundness, of rounded corners, of rounded end strokes, like the base of the fireplace, this is a really useful thing to keep in the back of your mind. I mean, think about the international symbol for biohazard. I mean, that just looks scary and you can't really put your finger on why. You know, there's some nice rounded shapes to it. But it looks like it's gonna poke someone's eye out. And that is by design, because we instinctually have the same response to this, just like again, as animals. Now, you can also create an icon that is just an outline form or that is filled in. And you can kind of combine these in various ways. But, really these two styles of icons are timeless and almost every icon fits into one of these two categories in some way. Even if it is encapsulated in an app icon or in another shape. So, it's really common to contain an icon inside, often, one of these three basic shapes. You know, logos, for ages, have been inside of squares or circles and now we've got rounded app icons that are kind of the next convention in containing an icon. And it can really do you a favor when you've got to make a bunch of icons that are very different. Some contain text, some are just symbols. Various sizes and dimensions. If you need to make them all feel more consistent, containing is a great approach to that. Here's some of Apple's icons for iOS. And you could actually say that there are two icons here. You know, the chat bubble, that's an icon. And then there's an icon that contains the rounded rectangle as well, the newspaper, the cloud and the sun. Those are icons that can stand on their own and in many of these cases, within those apps, you'll find a small little outlined version of that icon in some place. What the style really comes down to, when you're trying to figure it out, is the surroundings. It's "what is the user interface or the layout?" It could be a website, it could be a print layout. What is the layout surrounding this icon? It is beside an image? It is on top of an image? If so, that icon needs to perform with extra legibility and you probably wanna fill it in so that it looks great on any background. Here's an example from Safari's "Bookmarks" bar. And what I love is that the folder, and the bookmark icons, they match the line weight of the text in a way that just feels natural. These icons, and your icons, should feel like a natural extension of the designed experience. But surroundings isn't just about the layout. It's also about other icons that are around it. So, we've got a circle and a square here. They're icons. What are they for? Oh okay, it makes sense now, because these icons only are understandable in the context of the whole set. And, often times, you've got an app that has a bunch of them together. Or, you just have an icon set, like this Operating System icon set, that needs to have a consistent style across all icons. And the more icons you try to add to this, the harder it becomes. You have a great idea, but really has to be filled in and everything else is an outline. Or, maybe you need icons that can perform in both an outline and a filled in version. And some just can't. So, considering the surroundings is really what dictates a lot of stylistic choices. Another thing is size. This is one of the most important parts of, when it comes to the details of an icon. Icons can exist at so many different sizes. And now we have different screen resolutions, and some can show a very crisp icon with a lot of detail, and some can't. But what is really critical, especially these days when we can design with vector shapes, and we can blow it up to 6000%, it's critical to design at the final scale. And, there's nothing wrong with blowing it up and making little adjustments. But constantly go back down to the final scale because details that are getting in the way of making it glanceable, those really need to be done away with. These are some icons, some microphone icons, from an icon set called "Iconic." And what I love about "Iconic" is mostly that they use some really cool features in SVG. They've also got great icons, I don't really use them, but I think they've done a great job here. Where they have this dynamic icon, and as you bring is down in size, the details begin to reduce. So, ask yourself, when you're designing an icon, "does this icon need to" "perform at a bunch of different sizes?" If so, you might need to create a few versions of it. Here's a juice bottle that I created for one of my clients. And, this is meant to kind of equalize the space between the cap and the bottle. And also, like the smaller one is actually more curvy and the curves are in a slightly different place on the bottle so that it doesn't just look like a little box, that they actually look consistent. So, there are all sorts of optical fixes to make something look the same. And, when it comes to size, it's also about thinking, "what are the dimensions that this needs to fit within?" "Is it a square?" "What's the aspect ratio?" It could be really wide. You know, if you've got... You know, later we'll be designing an icon for a whale. Well, a lot of whales are really long. And so, we're gonna try and design one that fits a little bit better in a square. And that is critical to understand before you even begin coming up with concepts for the icon. "What is the aspect ratio that it needs to fit within?" "What's the size that it needs to perform at?" And also, "what is the surrounding padding look like?" So, for example, here, the space at the top of the house is less than the space at the bottom because it's not symmetrical top to bottom. It's symmetrical, or pretty symmetrical, you know, East/West, but North/South you have to kind of add an optical illusion. So, how does this icon fit within the surrounding padding? And what we quickly get into is a conversation about size and Pixel Perfection. And Pixel Perfection is something that I care a lot about. I'm kind of nuts for it. Some people say that Pixel Perfection is dead. And, I say, that it will never be dead as long as we are using pixels in some form. In the days of the original Mac, Susan Kare designed these icons and, you know, these are some of the first icons on any screen ever. And, you know, now that speaker is just ubiquitous. It's great. But at this time, every pixel was precious. I mean, it's incredible how, in thirty pixels, or sixteen pixels, they could convey so much detail, and so much, kind of, expressiveness. And now, we have screens that are ten times the amount of pixels per square inch. Or, some screens are these days. And, so it's easy to just kind of be careless. "Well, it's gonna be crisp either way." It actually won't be. Because, here's the reality we're working with today. We often start with a vector shape, like this letter "a," and, traditionally, to turn that into pixels, you have kind of a binary approach. It's either on or off. It's black or it's white. These days, we're working with anti-aliasing. Which is to say, the lines are kind of blurred around the edges, so that you get all these like semi-transparent, or gray pixels. And it really improves the clarity, if it's used right. It really especially improves the clarity of curve shapes and diagonal shapes. But what you run into, if you're careless when you're designing your icon, is a situation where you have a line and how it should look, if this is a pixel grid. That line is perfectly aligned within the pixel grid. But, if that same line is just nudged over and it's right in between two pixels, anti-aliasing is going to make it look like two pixels wide that are kind of semitransparent. And when you really zoom out, that just looks blurry. So here are two icons here. It's the variation on the Airbnb fireplace icon that I made. And, the one on the left, it might be a little hard to see on this screen, but the one on the left is pixel perfect, or pretty darn close, and the one on the right is not. It's not pixel aligned in a lot of different ways and if we blow these up... I've got a bunch of examples of this in the Resources section because you kinda need to see this on your own screen. But if we blow this up, you'll see that one is just clearer than the other and there are all of these anti-aliasing effects, where the vertical lines on the columns on either side of the fireplace, you can kind of start seeing those lines continuing into the top part of the banister and the floor, and it's just horrible. It turns out that, you know, first of all, there's not excuse not to pixel a line, a perfectly vertical or horizontal line. That's how the pixel grid works. But it's really tough when you have diagonal or curved lines. Turns out that when you have the edge of say, a circle, bump up exactly against a pixel, that's when it looks, you know, as we're kind of doing here, that's when it looks the most crisp. Now, there's a really fun feature, I think it's fun, in OS10 that will allow you to constantly, and obsessively, zoom into any part of your screen to see if it's pixel perfect. In Accessability, in System Preferences, you can just choose a modifier key, like the Command key or the Control key, and then you scroll with your trackpad or your mouse, and there are also keyboard shortcuts for this that you can turn on, and you can see the individual pixels on your screen or in any icon. Make sure that you've also turned off "Smooth images" cuz that will actually blur the anti-aliasing so you won't see it as clearly. The thing about Pixel Perfection is that it's really the standard for this class and it's what separates the amateurs from the pros. Now, a great icon is also a versatile icon. It's versatile at various sizes. It's versatile in various colors. So, for example, here's a colored icon, that we're gonna be making later, and, in some cases, that icon is gonna need to perform in a black and white context. It's really a good idea to strive for your icons to work in a monochromatic version. In a fully black or fully white version. But if you can't achieve that, at least be able to achieve grayscale. In the case of app icons, this is actually really important these days because some operating systems, like iOS, are starting to use grayscale versions of an icon and maybe overlay them here. You just have to know how your icon looks, in monochrome and in grayscale. Also, if it can't work in monochrome, you kind of almost need to question if that's the right symbol to be using. Making sure your icons work at all of these sizes. It's critical. The basic structure that you see in the smallest microphone is still the basic structure at the large size. And there are just some additional details. You might not be using various sizes or various colors of your icon to begin with, but it's so important to create a versatile icon and think about what are the contexts that you're going to need to design around in the future. So here are the design principles that surround the details. In the next section, we're gonna start applying these and we're gonna start drawing our own icons.

Class Description

Learn the fundamentals of icon design, and how to create icons in the software program Sketch. You'll also learn how animation can enhance your icons, and see how it's done with a little bit of code. Peter will cover the basic principles of icon design and show you his process. He'll guide you step-by-step as he works in Sketch to execute icons. He also explains what SVG files are and when to use them. Peter will show you the benefits of adding animation to icons with CSS code, and tips for adding unexpected movement to your graphics. 

Software Used: Sketch 2016


Michael Oeser

I don´t take online courses very often but this time I was courious how it will be and how knowledge would be transferred. It was great, really. Peter is an awesome presenter who is able to share and show his knowledge in a very pleasant and professional way. Great course for everybody interested in icon design with a focus on animation. For me personally I would like to see a course with a deeper focus on the design principles and techniques of icon design because I´m not so much interested in animation. But anyway great course.


Peter great job teaching Icon Design! I have no background in making icons but was interested in learning how it was done. I had know intention of using this course in my web/app design but now that i've started watching your easy to follow lessons I realized that I want to make my own icons and highly recommend this course to anyone that wants to take their skills to the next level! Worth buying this course to review many times as there is so much covered that you wish it was available sooner! Thank you Creative Live!

Aris K

I stumbled upon this course after searching for more of Peter’s excellent tutorials. This beginner course will give you an overview of the icon design process starting with a useful icon design theory and considerations. The course then proceeds with two hands on examples that the viewer can also design while watching the tutorials. The first design uses basic geometric shapes the second is a "freehand" drawing using bezier curves. (TIP: read Peter's "Mastering the Bézier Curve in Sketch" free tutorial on medium.com beforehand). The second part is an overview of exporting SVG graphics and animating them with CSS. Personally, I would have liked more tutorials on icon design within Sketch and less about SVG , CSS. All in all, I enjoyed this course and would recommend it to anyone looking for a hands-on introductory course in icon design.