Creating iconic ideas - Illustrator Tutorial

- [Instructor] Iconography at its very core is simplified visual communication. Icons are meant to quickly relay a message that encapsulates a greater meaning or defines a function or theme. Some of the earliest iconic images are found in petroglyphs like this one shown here, simple drawings on a cave wall that communicates in a universal way even thousands of years later. Now, iconic imagery isn't just limited to an icon specific context however. This art form is used within the context of branding as well to craft logo marks for example and one could say that the Jolly Rogers motif in its day was a brand for pirates and those who would have seen this iconic flag flowing knew immediately what it meant. Now, all design including iconography as Saul Bass said is thinking made visual and that's what we're going to put forward as we start developing icons in this course. It's all about the genesis of thinking through an idea and somewhat ironically if I said to everybody watching this video, what do you think of as an image to represent ideas, many of you would probably think of a light bulb. Now, even light bulbs over time have changed in terms of their shape and what they look like. This is an old style light bulb. The newer light bulbs are kind of a spiral glass motif but that said, everybody would recognize this icon for what it means, bing, you're having an idea. Now, iconography has a lot of flexibility in it in terms of its visual communication but even as images change over time in terms of a light bulb for example or more specifically in the case of a phone. Now, phones of yesteryears, let's say the 1970s would be styled like this phone but ironically somewhat this icon is the icon used by Apple for the iPhone yet they're using an antiquated analog device within the context of a digital tool or a digital device that is to represent telephonic communication. So icons aren't so much about being exactly what is being portrayed as much as it is communicating the importance of the message trying to be relayed. In this case, a phone. And most people would look at this image and understand immediately that it's a phone whereas if you slapped in a product device that looks to the shape of a smartphone, it might not always be as recognizable. So that's something you need to definitely keep in mind as you start designing your icons. Now, when we're working on icons, it's about extracting ideas and once you've extracted 'em, it's about capturing those ideas in a visual way. So how do you go about doing this? How do you go about thinking in the context of developing iconography? Well, we're going to go back to something that I revealed in my Illustrating Logo Marks course and that's called concept math. So we're just going to use conceptual math to think through and problem solve how we can approach a given theme that we have a challenge of developing an icon for and in this case, the first one is a profile check. Somebody's hired you to create an icon and it needs to represent a profile check. So what you can do is just simply in your head think through all the visual ingredients that would make up that context. So an employee. How do you check for a profile? Well, more than likely you could log in and see their profile within the context of let's say Facebook or in the context of a intranet communication. Within the context in an office, you can check a physical folder and obviously because it's a profile check, you're checking it hence the check mark here. Well, if you take these visual ingredients and add 'em up, you might come up with an icon that looks like this. Another way you could approach this same icon is maybe you focus on the folder aspect. You have the person, the folder, a check mark or you could even simplify it down to simply be a person with a check mark. So there's a lot of variations but using concept math to kind of think about those elements, the who, the what, the where and how you can pull a visual representation of each and fuse 'em together in a clever way to form an icon is what the challenge is all about. So we're going to look at a couple more here. Here's another one and for this one, we have an inbox. We have mail and we have the macOS human interface standard for an app icon so this is going to be an app icon and it's dealing with mail and an inbox. So how could you handle this? Well, you could simply take an inbox. Knowing that it's going to be an application, we're using the form of an app and we add this nice little face to it but also the inner area of that inbox actually forms an envelope as well so we're using a little bit of shape recognition there as well. Now, for this project which was for an actual app, I had worked out a lot of different ideas. The one that's largest is my personal favorite and it's actually not the one that they ended up using but I like it anyway. So that's how I worked through that idea. Let's take a look at another one and this one is all about green education so environment, the globe, green, conscious about nature represented by a leaf and education represented by the graduation cap shown here. So if you take these ingredients and you fuse 'em together, you can come up with a pretty compelling iconic solution using this methodology. Now, with this icon set, there was several more. I'll show you a couple more that went with this set. So this one plays off of the green thumb and recycling. Let's take a look at one last one here for conceptual math and in this one, once again, it involves a person, a hospital bed, a clipboard and a check and this is for patient check-in in a medical clinic. That was the context that I was creating this icon for a set of icons that you're actually going to see in an upcoming movie. So how would all of these relate together? Well, these are the type of things where if you can force yourself to think and itemize the ingredients that need to be encapsulated in an icon, it's going to reveal shape recognition that, well, you might not have ever thought of and that's what reveals great concepts and that's what happened with this one is I took the patient, the bed, the clipboard and the check mark. Now, I had a clipboard 'cause I'm thinking analog. People would check-in. They'd check 'em off on a sign in list or whatever. Usually, it's done digitally now but think in analog, not just digital anymore because that's how you can reveal concepts that can apply to a digital context. So on this one, this is what I came up with. Now, the clever part about this is that the bed itself forms the clipboard but the clipboard actually forms the patient in the bed and I was like, when I was putting this together, I'm going, oh, that's it, that's perfect. That's exactly what I wanted. I didn't think of a clipboard kind of looks like a person in a bed. It was only when I started playing with the shapes that I realized, wow, this works really well. So that's how the simple principle of concept math can help you think through ideas. The same thought process can be applied to other design disciplines like logo design as well. So if you'd like to see more examples of conceptual math, make sure to check out my Illustrating Logo Marks course because I show you several examples in that one as well and that's going to help you to formulate your ideas. The best tool a designer has is their brain. So take the time to think through associations and do research so you have the ingredients needed to conceptualize unique visual ideas.