Designing Animation


Icon Design with Sketch


Lesson Info

Designing Animation

So in the last section, we learned all about the different types of animation that are possible, and now we're gonna talk about designing animation. How do you use those different possibilities intentionally to create a great animating icon? The, the first type of animation that you can create is one with a very clear beginning and end point. So, often times that looks like something coming in, or transitioning out of the screen, and this can make a lot of sense if you are scrolling to a certain point in a web page, and something starts animating. It, there's a really defined beginning and end point, and this can also be used to transition between various states. We've got two icons here, clear beginning and end point. The square cash app, this little icon that, that flips around, to show you your CVV, the back of the card. I think it's so clever. This has a, again, this has a clear beginning and end point, so those are often very easy animations. It can be a clear beginning and end th...

at's transitioning the icon in from nothing. So you don't see the icon at all, or maybe the icon's leaving. It's animating out. Or it can just be between two states. You can also do looping animations when you need an icon to be present, and, and just a little bit more kind of pervasive. It's just constantly doing its own thing, and this is an icon that I found on noun project. It was just fantastic, and I animated it using some more advanced techniques we'll go over a little bit later. You can also ask yourself the question, is there anything in the icon that is dynamic, or that would benefit from, from being dynamic? So in the case of the calendar icon, this updates when you open the app, and it shows you the actual date, so it's, the icon becomes even more helpful. What are those three little bars there on the side? Well, that's the little icon in the iOS music app. When you're, when you're listening to a song, those little bars, they kind of go up and down, and they go up and down to the music, and so in that way it's dynamic. They're not, they don't animate when you're not listening to a song. I think you can take that even a step further, and kind of like, if there's a really loud part of the song you can make those bars go up a little bit more, a soft part they stay down. You can also animate based on interaction, and these can be really, really delightful icons. So an example is, I created this attachments icon. Oh, do you want to download the files? And they all just kind of come together. When an icon responds to your interaction as a user, it's just so delightful. Now, when your brainstorming how to design an icon, just, just take a second to, to ignore the technical limitations. Stop thinking about CSS, just think like, what would be really cool? Here are some start points because this is just a process you have to kind of brainstorm on your own. Is there any sort of real world behavior you can emulate? So in this case, you kinda need to like get all of our project files in order to download them. Can you combine multiple icons into one, and animate them together? Just ask yourself, you know, what would make you laugh? If you were looking at this little icon, and it did something, what would make you laugh? Perhaps if it needs to be a very prominent icon, it needs to be attention grabbing, what would kind of appropriately draw a viewer's attention? And for other icons, just what would be the most subtle approach? What's just a, a really clean, subtle way of animating that icon in, or having a slight little looping icon that feels like it's just a little bit more alive? So those are some starting points as you start to brainstorm how to design your icon. In the next section, we're going to jump into CSS, and start animating the two icons we've created using some of these techniques.

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 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.