Get Creative with Icon Design - Part 1: Sketching Your Ideas | Chris Heath | Skillshare

Get Creative with Icon Design - Part 1: Sketching Your Ideas

Chris Heath, The Geometrical Design Guy

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
5 Lessons (18m)
    • 1. Introduction

    • 2. Materials

    • 3. Sketching a Set of Icons - Part 1

    • 4. Sketching a Set of Icons - Part 2

    • 5. What's Next?


About This Class

Do you want to design icons but don't know where to start? And how do you decide on the icon’s proportions?

I have some good news. This little class addresses both of these problems in one go.

I'm going to show you how to quickly sketch out new ideas for icons, and I’ll show you how to maintain the proportions of your icon designs so they all look balanced and look like they belong together.

If you are having a creative block, this is a surefire method for quickly sketching out a bunch of new icon ideas, just by putting pencil to paper.

There is on one design constraint, and that is a simple grid. In this case it's Apple’s iOS icon grid. And like all good design constraints, we are using the grid as a springboard for creativity.

This class is an ideal starting point for people who are setting to learn icon design, but don't know where to start. It's also a useful exercise for professional designers who are stuck for ideas.


1. Introduction: Hi. Have you ever tried to design an icon and you just don't really know where to start? And how do you handle the icons proportion so that you finish up with a balanced looking design? Well, I have news for you in this class because we're going to handle both of those problems on one go. And how are we going to do that? Well, I'm going to show you how to use a simple grid in this case, Apple's IOS icon grid to come up with a range of different ideas just by putting pencil to paper. So this class is purely working on paper to come up with a variety of designs and using the grid to maintain a sense of proportion. That's class is perfect for beginners. So if you've never designed icons before but always wanted to his classes for you, And it's also great for experienced designers who that's not gonna create a rut, and they just want to come up with some new ideas. So what are we waiting for? Let's just get stuck straight on 2. Materials: from the projects and Resources area. Off this class download imprint The Grid File. You will also need any razor and a pencil colored find. Took pins are optional. 3. Sketching a Set of Icons - Part 1: before you begin, remember to download and printout the pdf file that I'm using here. You may find it useful to print, had a couple of sheets and use these sheets to put in plenty of practice. Initially, we will start by using the obvious lines of the grid to create a small set of completely abstract designs. I would like to suggest that you copy what I'm doing here and then pause the video at any stage to draw whatever springs to mind. This may be something similar to what I've drawn, or it may be something completely different. This is a purely creative exercise where you're not working toe a client brief, so we don't have to worry about pleasing anyone but ourselves. Think of it as a creative doodling with the grid is three only constraint. The more you do this, the more the grip becomes a springboard for a whole range of different ideas while taking care of the proportions of your design along the way, the more you practice that easier, it gets bear in mind that many people who play around with the grid going to initially come up with abstract patterns and designs that are identical to yours. It's not until you start to veer off trek as we will be doing that, you start to end up with something more original. I like to think of this exercise is getting the obvious designs out of your system? That is the designs that are most likely to match what everyone else is drawing when following this. Listen, it's still with well, doing this in order to move forward on to your own variations of the same designs and from there thinking literally to creating designs that are more unique to you and the style in which you work, for example, flesh or scream or fix styles of design. I'm making this up is ago. And as I mentioned in the introduction, this is a purely creative many course designed for students to explore what is possible when you start playing around with a blank piece of paper or, in this case, a blank grid. Sometimes mistakes are made as you can see here, because we're just sketching out whatever springs to mind these mistakes mainly to new ideas to explore later on. Here I am placing some dots to divide the lines and half so that I can create an X shape. This is so I can link the dots to a cred intersection. In this case, that has led to another mistake. I intended to put the dots on the centre circle, not the inner circle. However, by trying to rectify it, it's turned out to be a happy accident that I've decided to keep end explore later on to May. The design is starting to look like it could be a rockets launch pad as seen from above. That may remind you of something else, So feel free to copy it and develop it into whatever you think it could be. This time I'm going to redo the eggs from scratch, placing the dots on the intended circle circumference on joining the dots that's looking like the X that I wanted. If everyone has a play with the script, this will be an obvious outcome while drawing this a set of plastics springs to mind. So that's the direction I will take this one. I'm not aiming for perfection at this point. I just want to record my ideas again. This exercise is all about drawing some abstract shapes, then turning them into anything that pops into your head. That makes it different again, starting with the grid lines, I'm drawing a set of rectangles and leaving them, as as I may return to develop this into a number of different designs. This is another abstract design that many people may create simply by tracing grid lines and curves. I'm not sure which direction I'll take this, but a speedometer or pressure gauge springs to mind drawing two rectangles Big connection, and this is healthy leaders. Eared was E, as it is called in the U. S. Was formed. My initial thought was to keep it white and adds some texture to the background. It's sort of starting to look like the Ziad vision was the vision off the Netflix in logo. So I'll leave this for now, and hopefully some other treatment may spring to mind to take it in a different direction. Having said that, this is a creative exercise, so even if you want to create something that is very similar to an existing logo or icon, that's fine. As long as you don't use it or sell it to your clients, sometimes it's worth reproducing other people's ideas just to get them out of your system and to move beyond what other designers have done. I was starting to run out of ideas. Then I thought about placing small circles between two off the grids circles. The grid is also used to distribute the circles. Radio Lee around the center of the icon grid. Perhaps this could be an icon for a game, or it can hinted on old telephone dial or simply be white circles on a black background. I'm not sure how this is going to look, but I thought I'd try the leader. ISS. It starts out relatively thick end gets thicker through the leaders spine. That sort of reminds me of a 1950 speed. All later is perhaps this can be further styled later, or Pips. A cartoon styled lever is with the circle in the center. I was thinking of an eyeball, given that we don't usually see a complete Aibel, there is Thea per tune ity here to use the intersection points off the grid to sit the position of the islands, so I'm starting with that before adding the pupil. And Iris and ah highlight the island's itself to some realism. Whether this is to be a photo realistic, I or maybe a flatter looking I. I decided to add a simple reflection which will work irrespective of whether this will become a flat icon or a photo realistic icon using the grid to determine the starting point and end point of a thick line. The letter in spring to mind, given that I was trying to think about what to do with the space in between. When completed, this icon can be centered vertically to give the leader some texture. Perhaps it could be turned into a slinky spring toy or a squiggle of toothpaste. If you get stuck for ideas, it helps to go back to the grid and just draw something anything, even if it does not look like anything in particular putting your panel pencil to paper, it's like committing yourself to draw something. This is what happened here again. Don't worry about whether this looks like someone else's icon. That's does remind me of apples Passport Icon, which means I'm interested in how to make this different. For example, perhaps using three D software to place a sphere on the center and adding a drop shadow and a reflection to indicate this. And it's back to playing around with the grid and in this case, the leader. If or e springs to mind, I'm not sure if I like it. So on completing the sketch, I'll move on. Perhaps somebody developed this into something completely different once I get past seeing it as a lever. While looking around my office for ideas, I spotted the speakers that are connected to my computer hints, starting with a rectangle and using the grid to determine the size and location off the small speaker. For now, I've guessed the size of the larger speaker, but I'll use the grits proportions to sit this radius later to give the speaker a sense of purpose. I used the grid circles to add some sound waves. Sometimes traditional patterns just pop out of this process. Don't be discouraged by this. Instead, embrace them even a For now, you can't think of how to end your own flavor toe. You obviously recognized design by recording it now on paper, something may spring to mind later. Two of the grid circles can be used to draw a donor or tourist shape curves and shadows can be added to strengthen this three D concept. You could also add some rope and turn it into a traditional life boy. Now I'm trying to think about bringing two horizontal lines to a point, and a native New Zealand freshwater fish springs to mind. I used to keep these long, slender fish is pits and my period. When I was little, they were far more interesting to keep the goldfish, and they all had different personalities. 4. Sketching a Set of Icons - Part 2: a few days have passed since drawing those icons taking some time out, especially when you have run out of ideas. There's a good idea. So let's have a look at what we did and all. Pick one of these icons in from there, See what other ideas spring to mind. I started off with something simple and geometric, and as I worked my way across the page, other ideas sprang to mind and I captured them along the way. For example, tuning the X in tow. A couple of bandages, thes three blocks, could be carried about further. I started experimenting with this shape, and perhaps it can be turned into a speed on with her or pressure gauge those. It could be developed further from different backgrounds, for example, stripes that can themselves be derived from the grid. This could just be white circles. On a contrast ing background or drop, shadows could be headed to create the illusion that there white holes on a dark background . I like the look of the ISS, reminds me of the old speedball littering for some reason that I could be given a flat treatment with the use of shadows or be turned into a photo realistic I that M could remain completely two D or given an extruded three D look. This design could be given a flat look or by placing a sphere in the center, could be given a three D look so all of these could be developed further. The one that I want to explore is the fish. I thought we could take this shape further. I'm not talking about the fish itself, but the shape that is formed by the parallel lines that come down to a point. Let's start with a fresh piece of paper. I'm not going to redraw the entire fish, but for reference, I will draw the initial shape. This is the shape we used for the fish to fire up the creative neurons. The fierce tip is to flip this points in the opposite direction and see what it reminds me off. In this direction, it looks like it could become a bullet. Bullets tend to be short, so I'm going to draw a line here. This can be the back of the bullet and ed a negative space to the rear of the bullet to make it a little more recognizable and also so that it's easier to see on camera all darken up the lines and sketch in the background. I'm not going to fill in all of the background just enough to make the bullet pop out of the page, Although there is enough here for May islets, some shading again, this can either be given a flat design treatment or using three D software create a more realistic looking bullet, complete with relevant surfaced details. The bullet reminds me of a rocket shape, so by rotating it said that points upwards, we can use the grid lines to design a short rocket. I'll run Ally intention to the circle says to separate the nose of the rocket from the body off the rocket. With this rocket, we could take it all the way down so that all we see is the top of the rocket. But I'd like to draw the whole rocket. I'll set the bottom of the Rockets body. At this point, it looks about stubby, but I'm keeping the space down here to add the rocket engines in flames. Rocket I constant have a one day, so I'll use the grid lines to determine the location and size of this. One day the circle looks but one key, which makes me think that to be a bit different. The window could be a rounded Rick tingle, much like the passenger windows on a commercial airliner. We don't have enough room here to put one bigger rocket and its flames, so I'm going to divide the space into thirds and add three smaller rockets. We need something to hold a rocket engines in place, and also I'm going to need something down there, so I'm going to divide it into thirds as well. Now it's time to draw the rocket engines. That's very rough. But then, when victory ized, it can be tidied up. I also need some rocket flames. So head from here, the other element where you're missing some friends again. These had to be lined up with the grid if you have ever had any problems drawing things in proportion, even though you would never have a stumpy rocket like this, using a grid like this one is useful for balancing the element in the design, not only against each other element in the design but also the icon shape is a hole will quickly increase up for you. So it's a bit easier to see the finished design when Victor Rised may have more detailed attitude. But overall, the proportions will remain the same by rotating this shape so that it points down there could be turned into something like a shield as it is drawn Now, the bullet icon is not quite centered, however. It's looking balanced with the writer mental space at the front of the bullet end about more space at the rear of the bullet. This one also works well and sits nicely in that circle. Like this shield. Some of your designs will not land in the center of the grid. Don't worry about that. You can always move it end, realign it with the grid. Later on, I've drawn just one example of a shield. A few search for shields on the Internet. You'll see that there are hundreds of not thousands of different designs for shields that you can draw inspiration from. What is more important when exploring your creativity is to follow your instincts and freely work with what ever style or trend that you want to go with game. There is no client briefed. Follow here. The only constraint on this exercise is that you should be working with the script. Paradox about constraints is that when you impose a constraint on creativity, constraint itself becomes a springboard for an unlimited flow of ideas. And so we have seen. 5. What's Next?: I really hope you enjoy this class, and I hope you got something really useful out of it. So remember to download the pdf grid and give it a go. And remember, it's just a matter of putting pencil to paper, even if it is tracing some of the grid lines to start with and just seeing where that goes . So your designs could be completely abstract. Well, they could be at the other end of the spectrum and be very naturalistic in terms of the subject matter. So you're probably wondering, why haven't I shown you how to victory rise some of these designs and the reason is this is class one off a three part series, and this class is designed to incorporate your needs. So I would like you to tell me in the comments Syria, what you would like me to cover in the next class. And this could be one of two or maybe three or four different things. For example, you may want me to take one of my designs and Victor riser. And perhaps in the third class, we look at producing a three d vision. You might want me to take one of your designs, which you've saved the Project Syria and to victory rise that so I can show you how to victory rise your particular design. And on the third class, we can talk about how to finish that design off so that it's really for a developer to pick up in load as an implication icon. So there's a number of ways we can take this, and I'm more than happy to incorporate your work on the next class if it's what you wish. So we believe your sketches on the project Syria and tell me what you would like me to cover in the next class. Oh, remember to follow me on skill. Sheer so. But press up here that stare at the buttons down below somewhere and to you.