Icon Design Principles: The Structure

 

Icon Design with Sketch

 

Lesson Info

Icon Design Principles: The Structure

So, what are the design principles that characterize a great icon? This is not a very formal or official list. These are mostly things to consider during the design process and things to kind of evaluate the icons that you've come up with after you've created them. They're are really two parts to these principles. There's the fundamental structure of the icon and then there are the details, some of the more visual and stylistic components of the icon that we'll go over in the next video. For now, the structure, the core of the icon. The best place to start is really thinking about what is your motivation. Most of the time, an icon is meant to reinforce a concept or trigger an action. Think about like what is the result that you want to trigger. In the case of a sign, it's really clear, like you need to avoid the oncoming obstacle, but if you're reinforcing a concept, in this case, there are a few parts of the battery icon on iOS that reinforce the concepts. So you've got, first of all ...

the fill on the battery that's decreasing based on the percentage and that reinforces the current battery level. You've got the icon itself, which is saying, okay it's not just a percentage. This doesn't just say battery 20%. It's easier to recognize and then also when you get down pretty low, it turns red and that use of color continues to reinforce the concept. Icons are really emotional and so, we see this red and it triggers a response that's being a little bit more cautious and a little bit more concerned about, or having a sense of urgency. Oh gosh, I need to go charge my phone right now. Icons really do have a tone and personality and you can play off of that in a lot of ways. They can feel strict, they can feel very elegant, they can feel super friendly. We'll go over in the next section some of the ways to make an icon feel more friendly and they can just be delightful. Here's the Twitter icon for when you like or love something and it animates in this way that's just delightful. It's like, oh man, like I kinda want to like more things. This is triggering an emotional response. When you're thinking about your motivation, it's not just what result, it's not just what is the tone, but it's also what is the emotional tone, what is the emotional result that you want to set, and then prominence is a huge thing. Do you want to grab the viewer's attention or is this icon more supplemental and kind of needs to recede into the background? Really kind of asking yourself what is the role of this icon in the user experience. On the Treehouse website, that bell does a little jingle. It kind of rotates and this arrow icon starts radiating green ripples and that's subtle, but it's because when you're on the website and it needs to get your attention, this subtle animation really makes the icon more prominent. Now, perhaps the most important part of creating an icon is using familiar symbology and really using symbols, using some sort of pictogram that is recognizable by anyone. I mean, that's the foundation of written language. That's the foundation of drawn communication, back to the first, like cave paintings, and the more recognizable something is, the more familiar the symbol is, the better it communicates and that's really what design is all about. It's about clarity and it's about communication. Then also ask yourself what's going to be timeless, what's going to be a familiar symbol across the ages. When they were designing the original Mac, the icon for save was a floppy disk, and at the time, it made a lot of sense because the only way to save was to save it to the floppy disk. That quickly changed and floppy disks kind of quickly became a thing of the past. We now have generations of kids who have never seen a floppy disk in their life and funny enough, I think a couple years ago, Microsoft was caught still using the floppy disk icon for save and it's like, alright guys. We need a metaphor and a symbol that is more timeless, that is a more familiar symbol across the ages. Even Susan Care, who designed this icon admits pieces of technology are often not the best symbol to use because they change so quickly. Using a familiar symbol really dictates the success of all of these other principles because if you can recognize it quickly, then you can communicate it at a glance. You can use that icon to communicate. I call this principle glance-ability. How glance-able is the icon? Generally, you only have a couple milliseconds, maybe 10 or 20 milliseconds for somebody to recognize what that icon is and so there are really two parts to view an icon. There's recognition and that's what happens in the fraction of a second and that's the most important piece and then there's appreciation, which is not to goal of icon design. Appreciation is up to the viewer. If they want to take another couple seconds and think oh, how cool is that icon, then that's great, but your icons need to be understandable at a glance. It's kind of like a game of charades. Icons, it's about how quickly can you convey the concept and any details that get in the way of that are really extraneous and hindering the success of the icon. One thing that will really hinder the success and will really hinder the glance-ability is using text and that's because text is something that you read and reading takes longer than a glance. If your icon does require text, like the stickies icon, which I actually think it's great, try and abstract it in a way where it doesn't need to be read in order for the icon to be understood. I also designed this icon for an app and using an open sign was absolutely the best metaphor we could come up with for this app icon, but you know, it's just a few letters, but it's almost too much. The thing about a text label, or the thing about using text in your icon is that it doesn't really go across languages either. In this case, we created various versions of the icon for other markets. I thought that was fun. The open sign is pretty universal in most countries. But basically, reading takes longer than a glance, so keep the amount of letters to like one or two and in this case, like on the maps icon, they're really supplemental. You don't need to read them to understand the icon. They're illustrative, but the less you can use text, the better. If you do need to use text to convey what your icon is about, use a supplemental text label. Here's what I'm talking about. This is a really cool icon. Chopsticks in a bowl, but for a lot of people in the world, they might not understand that that's food and so having a little label below it helps covey the exact meaning that you're going for. This is where, you know, as designers, we really have to be honest with ourselves because we're so optimistic and our intentions are so good. We just want everyone to understand our icon, but most of the time, if it's not a ubiquitous symbol, then a text label is really gonna help convey the meaning. Just think, is your icon going to be understood 100% of the time. An envelope says mail, a chat chat bubble says messages or chat, but like these are some icons from Air B&B describing amenities and Air B&B rentals and you know, this towel, that's cool, but it says towel. It doesn't say essentials, and so that text label is really critical to convey in the precise meaning that they're going for. Even like a towel is kind of a difficult form to represent. I think they did a good job, but if that was just on its own, you might not even know what the icon is. Other things like a hair dryer, hair dryer says a hair dryer and having these text labels just really improves the clarity and the understanding on their website. Ask yourself a question, especially if your icon is a button. The search icon is now ubiquitous. It does not require a text label, but if you're using something even that is ubiquitous, it could probably be a little bit better with a text label because this could say menu and cancel or that could say like options and close and like maybe what are you closing. You have the opportunity to create some really helpful text labels here. Close a window. Just again, be realistic with yourself about this. Text labels are a really great thing. Back to the actual subject matter of your icon. Most icons fit into one of a few categories, starting with easy nouns. Easy nouns are thing that are simple objects with a pretty distinctive shape. A laptop could be that, a TV could be that. Here are some examples at home, a lamp, a trashcan. These are things that we're used to seeing and it's pretty easy to convey them in a simple icon. That said, there are plenty of nouns that are more complex. Things like, you know, think about how you would design an icon for the adjective cleanliness or for the noun cleanliness or the adjective clean or for gravity, you know, gravity is like a physical force. It's not a clear object. It's not a distinctive object. So, back to the Air B&B examples, I think they did a really good job with this. You know, home, that's pretty easy. Guests, okay pretty straight forward. Bed's on the far right. That says beds, perfect, but bedrooms is a tough one. Bedrooms I would consider to be a complex noun because a room is really a collection of things. It's not just one object. It's maybe a bed, it's maybe a lamp, some lighting, a door, window, other furniture. Almost every room has a door and I think the use of a door is really helpful here, but again, without that text label, it could be a book, it could be a wallet. It'd be hard to know. So, complex nouns in particular really benefit from a supplemental text label. The other kind of subject matter are verbs, actions, behaviors, and here's some examples of those. You know, running, push the door open. Maybe it's a more abstract verb like imagining. Okay, it's like how are you gonna share that and then maybe thing how is imagining, if you're thinking of a thought bubble or a thought cloud, how is that different from thinking and maybe this exists in a context where you need to have various icons for those different verbs. One thing to note is that arrows add a lot of clarity when you're talking about a behavior. Now, again, as designers, we're probably overly optimistic. We want to think that our icons don't require an arrow, But arrows are a great thing and they add so much clarity. Like as a species, as a human species, we are constantly pointing at things. It's universal and arrows will make a tremendous impact on the clarity because at the end of the day, we want to be clever, but really we just need to be obvious. The best icons are the most obvious icons and when we try to get too clever, we just get in the way of clarity. I remember I was working on the design and a bunch of icons for this prototyping tool called Flinto and they just released a Mac app that I helped them with and we needed a little home icon and we started thinking oh we could kind of play around with this. We could get a little clever. The founder was thinking okay, well actually, I'm in the market to buy an Eichler home, which for those of you who aren't familiar, Eichler was an architect and around Silicon Valley, there are tons of these beautiful mid-century modern homes and they've got such a distinctive style and so we were thinking like maybe we could create a home icon that's like an Eichler home. We tried and here are some of the ones that I created. At the bottom right, it's a little bit more of a conventional home icon. The top we've got some more traditional Eichler forms and it's tough. It's tough to distill what makes an Eichler an Eichler. One thing I noticed though in particular is like the asymmetry and so, we need up going with the obvious choice because it was just so much more clear, it was so much more glance-able and this is what we went with, but it had a fun touch in that the door was asymmetrical, the roof was a little more stylized. The point is, by choosing the obvious choice, we did our users a huge favor, who probably wouldn't have understood what the heck an Eichler home is or like if that's even a home icon. Now, platform conventions are kind of the other side to this. If you're using an operating system like OS X or Windows or Android or iOS, most of these platforms have conventions or maybe existing icon sets, like this for iOS, part of the iOS default icon set and you know, as much as you'd just love to design trash icon, if it has the exact same role, if it has the exact same function, just use one of the defaults. It's a huge help for your users. Again, it's just be obvious. Now, there's kind of an additional complication with being obvious and trying to use the most familiar symbology and that's being sensitive to other cultures. First of all, there are tons of cultures around the world that recognize various objects, maybe even the same object in a different way, but also there are just cultures that don't necessarily have whatever metaphor you're looking for. For example, in Europe, the postal service is often conveyed with this postal horn, but in America, we don't have postal horns. We never did and we see this and it might as well be a musical instrument. In the States, though, we have a very distinctive mailbox icon and many, many, many countries don't have a mailbox that looks like this of mailboxes at all. So using either of these metaphors to denote mail or something of that nature, it's not a very, well they're very culturally specific and this is really about knowing your audience. Another example that I love is Apple's health app and I just think they did a great job with the icons here. My favorite is nutrition because carrots, first of all, nutritious, but also carrots are in almost every country in the world now. Regardless of where they originated, they're pretty universal and so that symbol is understandable to people in almost any country and Apple's software is used in every country. It's really critical that they use those familiar metaphors. The other thing is that culture is not just about world culture, it's about international cultures. It's also about ages, and various age groups will maybe recognize a symbol or not, like you know, is that young person gonna recognize the floppy disk? No, but maybe floppy disk would actually be helpful for somebody who's a little bit older. Probably not a floppy disk, but there are so many things that various age groups are exposed to that others aren't, and using a great metaphor or using a universal metaphor for your icon is really the way to go. The other part about cultural sensitivity is thinking about sub-cultures. What I'm talking about here is like if you've got a surf app, and it'll show you, you can do a little check mark or something, but you could also do a little shaka hand icon and that will be delightful to that specific group of users. They might not understand that icon in most other sub-cultures or if you have a little rock and roll app, it could be like rock on when you like buy your tickets, like rock on little icon, but that's gonna totally fall flat for other audiences. So if your audience is a particular sub-culture, have fun with it, but keep in mind what they are going to recognize and what needs to be a little bit more universal. Here are kind of the three parts of cultural sensitivity and these are the, these are really the core design principles for the fundamental structure of an icon. In the next section, we're gonna go over what are the details, what are the kind of like the style and visual components of icons that make a great icon great.

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

Reviews

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.

lovemydreams
 

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