What Is an Icon and What We'll Learn Together
So let's just start with the question, what is an icon? An icon is a symbol. It's a pictogram. It can be just about any kind of graphic. The fact is there's really no official definition of what an icon is because they take so many forms. But there are a lot of characteristics that are common for icons. For example, they're often really small in size. And we've been using them for signage for about as long as written and drawn communication has existed. This is taken at the San Francisco Airport. And icons are increasingly used in user interfaces, on websites. They're really everywhere in our world. Some of them stand on their own, some of them are guiding us places, some of them are telling us what to do. And in the software that we're using, they're so pervasive we almost don't notice them anymore. Like here in these four apps, here are all of the icons that we're talking about. And none of these are the same. They're really everywhere and some of them have become ubiquitous. Some of...
them have become just part of what we expect when we're using a software. So here's, for example, the iOS Share icon. And the thing about an icon is that it generally exists within a defined amount of space. And that's often a square. That's often a small square. So in the case of a digital icon, it would be, say, like 32 by 32. But again, sometimes, they come in all different sizes and it can totally stand on their own. Sometimes they are supplemental, so they're just kind of reinforcing a meaning. In the Settings app on iOS, all of these icons on the side, those aren't telling you anything. They're just reinforcing what that text label says. What I love about these, what I love about icons is that they really embody so many design characteristics and design principles in this small package. And they can take very utilitarian forms, they can be delightful, they can be animating, they can be dynamic. We'll get in to all of the possibilities later. So in this class, we're fist going to talk about the design principles, some of the fundamentals about how to create a great icon, things to consider while you're in that design process. We're going to use the vector design tool Sketch to actually build our icons. It's a very similar process to Adobe Illustrator. And we're going to learn a lot about SVG graphics. SVG is perfect for icons, and we'll go over all of the capabilities and how you can practically start using SVG on your own website. And then we're going to take a couple of our icons that we've made together. And if you know a little bit of HTML and CSS, a little bit of front-end web development, we'll be able to take those into CodePen, into the web, and animate them and create some beautiful icons that are animating of our own. In the last little segment, for those of you who are really, really eager to continue diving into this topic, we're going to go over some more advanced SVG techniques and talk about all of the ways you can animate something and what the future looks like. The things that we go over in this class are really about icons but they're also applicable beyond icons. Think about a user interface element like On/Off switch. This might as well be an icon. And the animation techniques that we're going to learn are going to show you this as well. Things like graphs and charts, they work the exact same way. And the design principles and the vector design techniques, all of this stuff is really applicable. You could be designing a logo. Here's a logo I designed and animated. Its animation is perfect for logos and all sorts of other user interface elements. So for example, Slack has this really fun little spinner while you're waiting for it to load. By the end of this class, you'll be able to create something like this and it's essentially an icon. Now, before we dive in to the design principles, I wanted to just take a quick pause to talk about icon sets. So there are a lot of icon sets out there. And some of them have hundreds of icons. And so why would you ever need to design your own icon? Everything's already been designed. Well, the fact is although some icon sets are great, most of these were designed by somebody who had no knowledge of your context, of your situation. And design is really about creating something that fits perfectly in your context, that solves your problem. So whether it's the exact style of the icon to match the rest of your app or website or sign, or maybe simply just the size that it was created at. And we're going to go over pixel perfection in the next section and why it's so important to create icons that are really clear at exactly the size that you're going to be using them. Now, icon sets are super useful for wireframing, they're a great resource and sometimes just for getting inspiration. But I'm pretty confident that after this class, you'll be able to make something even better than you'd find in almost any icon set. So let's get started.