Icon Design with Sketch


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