Join Justin Seeley for an in-depth discussion in this video Choosing a style for your icon set, part of Creating Icons with Illustrator.
- View Offline
In my opinion, one of the hardest things to do as graphic designer is to choose a style for the icons that you're going to be creating. Now, in most cases you're going to be following some sort of style guide, whether it be for an application, a website, or whatever the case may be, you're going to have some sort of artistic direction before you get started. But in the event that you don't, you're going to have to make that really big decision. For instance, if you're developing an icon set, just to release for free on your blog, or to charge money for just so people can have it, that's a design choice that you ultimately have to make for yourself and it's really going to be a big time decision.
Generally speaking, there are two types of designs for icons that are still really relevant today. The first of which is of course flat design, and this is something that is sweeping the world of web design as well as graphic design now. It is the theory that we are taking out most of the textures and depth of basic designs and just getting back to the basic shapes that make up certain things. Let me show you a couple of examples here. So here is an example of a flat icon set that you might see. Again the textures are at a minimum, the shadowing is at a minimum.
The depth all that kind of stuff is basically simulated just through the use of basic shapes. You also have here another set of icons that are just very basic in appearance. They do have a realistic like feel, but also at the same time, they've been quote, unquote, flattened, in order to create a more modernized look. And then we also have this example here, which showcases several different quote, unquote, flat elements of design. And you can see here that all of these different icons take on nontraditional shapes as well, that's another thing that is really prevalent inside of Icon Design today as well.
You also have skeuomorphism, and skeuomorphism is probably the thing that you've heard more than any other design term over the last couple of years, because Apple recently decided to kill skeuomorphism. What exactly does this term mean? Well, skeuomorphism basically means that you are trying to translate reality into your design. So for instance, this icon here of a camera shows realistic controls. This actually looks like an actual physical camera but in an icon form. We have here this little cupcake sitting on a plate.
This is indeed an icon maybe for an application or something like that, and this is a realistic representation of that cupcake, it's not flat. It's almost as if this cupcake is sitting in three dimensions right here in front of you. And then we also have this example, which is a calendar, much like the Mac OS X calendar used to look. This is a realistic representation of this, you can see the paper texture, the wood grain, the little metal rings that hold the calendar to the wood on the background. This is all part of skeuomorphism. So which one is right and which one is wrong? In my opinion, neither one is right and neither one is wrong.
My personal belief is that you should always let your project determine the style. So whatever the project calls for that' s what style of icon you need to choose. That might mean flat design, that might mean skeuomorphism, that might mean a blend of the two. Take a look at some of these examples here. You can see, this is sort of flat with a little bit of skeuomorphism thrown on top of it, which makes this sort of a hybrid type design. There is some depth here, there's some shadowing, there's some texturing, that kind of stuff. This right here. This is a non traditional like shape.
These incorporate a lot of flat elements but they're also texturized over the top. You've got here this is just a pure flat icon set that's developed for different Facebook purposes and things like that. Another interesting set of icons here following a traditional shape, some don't, some do. And then we've also got things like Apple's final cut icon, which is still very skeuomorphic, it is incorporating some of the non traditional flat look but overall still very skeuomorphic. Whereas their iBook's icon has become very much a flattened piece of artwork.
And then you also have something like their Garageband icon which is also very skeuomorphic still very realistic. Now do I expect Apple to continue down the trend of flat design? Yes I do, because it seems that Apple is stripping out more and more of the gradients and textures from just about everything that they do. If you've seen the latest release of their operating system Mac OS X Yosemite, you have seen that they have really made strides towards getting rid of all of the textures and depth in all of the elements that they create. That doesn't necessarily mean that you need to. While Apple is certainly a taste maker in the world of design they don't necessarily set the rules.
I've seen several websites that still incorporate many aspects of skeuomorphic design and they work beautifully. There are several applications that still use skeuomorphic design and do so beautifully. So at the end of the day it’s up to you, your clients or your vision on where you want to go and what style you choose to get there.
- Exploring file formats, sizes, perspective, and platform guidelines
- Choosing an icon style
- Creating sketches and assigning color schemes
- Building a grid system for icons
- Redrawing icons with shapes
- Saving icons
- Generating icons for different operating systems