Icon Design with Sketch

Lesson 4/11 - Drawing Icon Concepts


Icon Design with Sketch


Lesson Info

Drawing Icon Concepts

Alright, so we just got through all of those icon design principles. Now, we can just put them aside for a second, and get into a different head space, so that we can actually brainstorm and create ideas for a couple icons. We're gonna be drawing these on paper and really, the main reason is so that you can see my process, while I'm coming up with ideas for icons. Hopefully you'll notice that there's no magic. I'm not great at drawing and you don't have to be either. It's not about creating a perfect illustration, much as some shots on Dribbble might make you think. It's really just about getting your ideas out quickly, and coming up with a bunch of ideas. So, the first icon that we'll work on is the word "color." And how can we convey color? Alright, so we're drawing an icon, first, for color. And, the first thought that comes to me is a color wheel. So, color wheel has various segments for the spectrum and then various brightnesses. Alright, that's one place to start. We could also, ...

if we were on the computer and had a really nice gradient, we could kind of create something a little bit more like a less tense default color picker icon, which has really saturated in, really saturated parts out by the edge, and then they kind of become less saturated and brighter towards the center. You know, this is kinda make me think of a pinwheel, like you'd normally see on a kids' toy. Pinwheels are actually kind of tough to draw, but you can kind of get pretty close by drawing a few lines out there and see. Again, it's just the idea; it doesn't have to be perfect. Okay, so, there's one concept. Maybe it'd be able to rotate, or something. And, whenever I'm not quite sure what I just draw, what I just drew, I just write, down there, "color wheel." Now this is a, you know, another thing we could do is a little bit more traditional, a paint bucket. Paint buckets often have this little unique handle. Or a paint brush, and we could do something a bit more like a painter, painter's brush. Maybe with the detail of these bristles. Maybe not, depends on the size that we're using it. Or we could do, kind of, an artist's brush. And, you know, I'm adding little notes separating these sections. You don't have to at this point. You know, and then maybe, you know we actually even add a little bit of the color in there. You play around with that. Say we have a, perhaps a paint tube. This is, again, where knowing your audience is just gonna tell you, like, are they going to be familiar with this metaphor? A paint tube, you know, probably if this is a, an artist's audience. But you know what people would really understand is a color pallet, a traditional artists' pallet. They've just got this really distinctive shape that makes them perfect for icons. So, you'd have a little color here. Now, right off the bat, I can see that the hole in the pallet where you'd normally put your thumb, it's looking a lot like other paint splotches. So, this might not work as well for a monochromatic version. It could work in greyscale. Others like the color wheel here, those are really going to require color, as well. And you know if we did something that was kind of like R G B with a few concentric circles, that looks cool, but that would also probably require color to achieve. You know, one that I really like because we're, kind of, an audience of designers here, is a Pantone color swatch book. They're used in various fields of design to specify precise colors. And, they've got this really distinctive shape to them, as well. And often kind of like a little pin holding them together at the bottom. Now, the shape of this is pretty distinctive so it can work in monochromatic or a greyscale version, but we could also fill these in with colors later, and that kind of promises to be pretty fun. If this was for a context that was using color in a different way, say like light, I think these filters might make sense or we could do a prism with a beam of light coming in, and then being shot out in various colors of the spectrum. So that's "color." I think that this is going to work the best, the swatches, so we'll proceed with that one. Others are worth playing around with and seeing, kind of, how much they depend on color and how well they work at small sizes. Like this pinwheel might not work at smaller sizes. Let's move on to another icon. So, for this other icon we've got a few existing icons that it's going to be next to. We've got an Astronomy icon, a Chemistry icon. And we want some sort of Biology icon. And this is, again, this is pretending we're in a very specific use case. So, let's say, in this context, we're particularly going over Marine Biology. So, I think the idea of using some sort of sea life, like a squid or a jellyfish, a normal fish, or maybe a whale, would be a great metaphor. Let's go ahead with the whale. Just come up with some concepts for that. Normally I would draw a bunch of other sea creatures and other metaphors, but in this case, let's just focus on the whale. So, whales have all of these different forms. And, some of them have very, kind of, very kind of squarish heads. And they've got these great tails, too, that are kind of this hourglass shape, and flippers. This is one kind of whale. It's also helpful to look at reference images. I highly suggest doing a search online for whale images. So you can figure out like, okay, where does this flipper normally go? Like it might be a little to close to the eye, in that case. Where's the eye? It's funny how the eyes are often in unusual places on whales. (laughs) We've also got whales, like, a humpback whale, that are kind of a more rounded shape, and have these huge bellies, and just massive flippers. Like kind of, almost clumsy kind of scale flippers. And their mouths are way up here at the top. And their eyes, right there next to it. And they've got these great stripes on their bellies. And, in this case, that's a detail, but it's a detail that is improving the clarity of the icon, or the recognize ability of the icon. We've also got whales that, like beluga whale, that have a more rounded head. And belugas kind of have these fun smiles. Their smiles kind of go like this. You know, one awesome whale is a narwhal. They got these torpedo bodies which, unfortunately, aren't very whale-like for our situation. But, their horns are just so cool. Depending on how much personality you wanna add and what the tone is for this icon, which, I think, in this case, is a little bit more playful. And you can kind of, like, maybe he's poking someone out; maybe he's angry. And one thing that I've noticed a lot is that a really large head, and this kind of goes for characters of any kind, a really large head seems to be a very cute feature. So, let's play around with that. Let's do large flippers, kind of like, almost like clumsy large flippers. And, another thing that will make it more adorable, is a large eye, kind of an abnormally large eye which you'll see in a lot of animated films, as well. And we'll kind of give him, like, some little smile. Now the tail, has this really great shape. And I wanna make sure to get this right when we bring it into Sketch, in the digital version. Just this fantastic wineglass, or hourglass shape. And, what might also be fun, is to kind of have some sort of little blowhole that sprays out some spray. You know, keeping in mind that the way we're gonna be creating this, with Sketch and with an .svg, every single one of these elements is a separate line, it's a separate element. So we don't wanna have like a hundred little circles coming out. But, what makes sense is, kind of, a few jets, maybe a little twist. And we wanna make sure that those all come out of the same area. And I think this is good enough. This is close enough for us to bring it into a vector design tool, like Sketch. And, start creating a more perfect version of it, really refining the details. So, let's bring this whale and our color icon into Sketch.

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.