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.