Guide (& tips) to Create Quality Material Design Icons
You will want to start designing icons in 3, 2, 1…
--
Icons are quite the challenge to design: they have to be meaningful and beautiful, all the while being understandable in a split second. With Material Design taking upon those challenges, we see incredible icons created everyday that delight users on-boarding a new app.
Right from the very the beginning of MaterialUp, we were lucky to discover and follow the work of Michael Cook, an exceptionally talented icon designer from Iowa. His designs lie somewhere between meticulous, beautiful and meaningful — a combination that always keeps us on our toes waiting for his next icon! Lucky for the design community, he’s not only a great source for inspiration but also someone who takes great care in helping, giving back (and forward) and sharing his knowledge with others. He’s an amazing contributor to the Community so we were delighted to interview him to his brain on Material Design and learn a little more about him both as a designer and person :-)
Q. Hi Michael! Let’s start from the beginning — how did you become an icon designer?
My earliest recollection of designing icons was back in high school when I designed mockups of video games for fun. I think pixel art in general shares many driving principles with iconography so even when I wasn’t designing icons I was still reinforcing an obsession for vivid, limited color palettes and stark minimalism.
It wasn’t until about a year ago that I decided to focus more seriously on icons but I’ve been fond of them for many years. Back in 2010 Google was underway with efforts to unify their product iconography and my curiosity in that led me to become friends with Carlos Jeurissen and we started collecting and discussing Google’s icons. Eventually Google really started to get into their stride both iconographically and with their UI. Carlos and I got more excited as well. He started working on a little extension and I took on the task of creating Google style icons for products that were lacking ones. This got out of hand and I started making Google style icons for everything I looked at.
By this time I was also doing graphic design part time, making printed materials, websites, apps, and other stuff semi-professionally. Cookicons began when Android 4.0 was announced and I did a little bit of that but when Lollipop and Material Design was announced I decided to seize the opportunity of a new, uncharted icongraphical frontier.
Q. You’re also a teacher — is that complementary? Have you ever created tutorials or screencasts for design?
Very complementary. Very, dare I say, synergistic. When I started teaching high school a few years back (Sustainability and Biology) I expected it to provide value to my design career but I was still pleasantly surprised by how valuable it’s been.
In a sense, when I design, I’m a teacher in that my goal is to effectively inform the user of the value and meaning of something. When I teach, I’m a designer in that I need to take into careful consideration the on-boarding experience, structure of information, and effective engagement and retention of my students which increasingly involves captivating media.
I haven’t done any design teaching outside of a high school but I get a lot of requests relating to my iconography. My current foremost goal is to refine and validate my icon design competence, but producing learning content is almost certainly in my nearish future. Stay tuned!
Q. Why did you choose to design on Android icons and more specifically following the Material Design guidelines?
My icon work is actually a side project. In my main design work I do apps and websites and all that stuff as part of a three person agency. I could ramble extensively about why I’m spending my free time doing iconography but in short it’s because they provide a great opportunity. Because the icon design process is relatively small in scope and duration, I get to spend a lot of time and effort on things like deeply considering, cultivating and employing design principles, improving techniques and workflow, handling clients, and experimenting creatively. As a self taught designer, I’ve had pretty strong imposter syndrome and worried about the Dunning Kruger effect for years.
The fast turnover rate of icon design has allowed me to learn and build confidence at a rate much faster than my larger projects and lowered the stakes enough to make me feel comfortable failing — something that I believe is invaluable to both design and pretty much all of life.
As for why Material Design, I explored my experiences about that in another post that I wrote (below). More practically though, carving into a really specific niche has been a great way to gain notoriety and clients.
Q. Can you take us through your design process? Taking the Popcorn Time icon for example(which we love!).
The Popcorn Time icon is not the best example because I got to start with an already fantastic mascot and base concept, I just gave it a little facelift and cosmetic makeover.
But I’ll provide an outline of a process that I plan to document in greater depth in the near future.
1. Know the goal of the icon.
What meaning and/or personality needs to be conveyed? A lot of this should be based on the function of the app and an understanding of the intended audience.
2. Identify core symbolism.
I usually aim for 2 symbols. The symbols themselves should be as universal and clear as possible, the creativity comes in how I work them together.
I also have to determine whether there is symmetrical or asymmetrical importance between the two symbols.
3. Determine whether the icon should be abstract and geometrical or a representative object.
This typically depends on how abstract or concrete the function of the app is. Apps that are more open ended or multifaceted may be better off with a pleasing, abstract geometric icon. Though I usually try to get something concrete conveyed whenever possible.
4. Start with the most simple, non-fancy approach.
I don’t think unjustified complexity or flair is much to brag about. I’m not a fan of ‘peacock’ icons unless it’s literally conveying a core aspect of the app (like if the app was about peacocks…). But it’s also just a good way to establish a baseline. It helps set me off in a good direction.
5. Iterate a lot.
There is inevitably a time when I just get myself lost, and I flail and panic.
I try to throw away my ego, embrace my doubt and just experiment with ideas. I used to have a one-take mentality where I’d try to make a logo for someone and if the first thing I came up with didn’t work I’d get uncomfortable and often just abandon it. Even worse, I often thought that my first attempt was exactly what I wanted (typical dunning kruger effect). These days I take the time to churn through many iterations. I find it often allows me to discover things I had not initially considered.
6. Think about color at some point.
I usually begin my designs without color. This is something I picked up from pixel art. The icon needs to have a strong shape and clear tonal definition, the color is an enhancement. I try to incorporate some amount of hue shifting, which is a pattern common in Google’s icons.
7. Get feedback from clients and some other folks to identify blind spots.
I care most about the client’s feedback and I make efforts to focus our discussion around goals, priorities, and principles. I’ll talk a bit more about feedback in the next question. I see general feedback primarily as a way to notice compositional issues that I become blind to.
8. Fine tune relationships between all elements.
This is the key to strong icons: visual balance and symmetries in the details.
I’ll write more about this at some point but for such a small piece of design, literally everything in the icon should be consciously thought about and defendable as either value-adding or a reasonable compromise.
If you can’t explain exactly why something about your icon is the way it is, that’s a red flag.
9. Polish and double check details.
Make sure things are even, that there’s no avoidable sub-pixeling going on (at MDPI at least), and that color values and lighting effects are all good. Don’t worry about this stuff anytime sooner or you’ll become reluctant to experiment and make big changes.
10. Post it to MaterialUp.
Q. What tools and resources do you use in your work? Where do you get inspiration and how do you get feedback from peers?
I use Sketch exclusively for my icon work. It’s just another drop in a vast ocean of praise at this point but I’ve worked in PS, AI, and the new Affinity Designer and none of them are as enjoyable to use. For app prototyping I’d like to give a shout out to Atomic.io and Antetype, both under-recognized tools in my opinion.
I’ve built my own icon templates that I start new projects from. I promise I’ll release them at some point!
In terms of inspiration, Google’s system UI set is a starting point for most of my icons. Even if I don’t end up incorporating one of the icons directing into my design I often use pieces or just keep one of them nearby when designing. I use them as a reference for how to size details and what level of detail is appropriate. One of the most common issues I see in material design icons is too much detail or detail that is too small.
If Google’s set provides no conceptual reference, I look up examples of how people iconize concepts over at iconfinder.
I like to get subjective opinions from my wife but other than her I try to keep all my other feedback about more objective things like interpretation and readability. Occasionally I get input on preferences between options but in general I avoid relying on individual opinions (including my own) and stick to goals and principles to drive the design. If I seek out serious feedback, I want to be able to talk with a person for a while first to make sure we understand the goals, compromises, and specific issues that I’m working with.
Q. What do you think about Mike Denny saying the long shadow isn’t required in material design?
I had considered it likely and think it is a good decision. Don’t get me wrong, I’m a fan and intend to continue using it, but I don’t consider the long shadow to be design — It’s fashion, and fashion is fleeting. People who have been aware of design trends over the last couple years know that the long shadow was hurled into popularity a couple years ago as the design community was groping for flat ways to make flat design less flat. By the time Material Design was released it had already fatigued quite a bit. It’s been reinvigorated a bit now but mostly just in the Material Design community. I don’t see it nearly as much elsewhere these days. Like the glossiness of the web 2.0 style and the rampant patterns that came after it, and now the horrible scroll jacking and over indulgence in superfluous animations… or dubstep and then trap, and now future bass or whatever.
These trends rise and fall. I don’t consider myself above them by any means but I always try to keep things in perspective and make sure my designs rely on enduring principles rather than fads.
Q. Speaking of the material design iconography guidelines, what do you like or dislike about them?
There really is nothing that I’m aware of to compare it to. The Holo icon guidelines were pretty much a forgotten afterthought and the iOS just doesn’t have many prescriptions at all.
I’m just personally really happy and grateful that Google’s designers paid such thoughtful attention to icons. I’ve learned a lot about iconography from it. I don’t wish that every single detail or principle was spelled out in perfect detail, as with the UI guidelines we get a great starting point with plenty of room to explore.
So I don’t have many dislikes, but the wording in the ‘DP unit grid’ section has been a particular source of great confusion. To be fair, any discussion about density independent pixels tends to be very confusing.
Q. Do you think icons should look different on iOS and Android? Is it possible to design good icons that work in both contexts?
Yes, I celebrate and support the cultural differences of operating systems. I don’t know how feasible it is to have coherent icons across them though, but I’m about to design icons for Popcorn Time on all the platforms so we’ll find out!
And we can’t wait to see them :-) Thanks Michael, it was a privilege!
Got an amazing Material app? You can probably hire me to make an icon for you! If it’s open source, for education, ecology, or highly creative, I might even design it pro bono! Cookicons.co
Follow me on MaterialUp, Google+, Dribbble, Twitter and Medium.
Do you want to chat with hundreds of Material Design enthusiasts? Join the MaterialUp Slack Chat → Get your invitation here.
Originally published on www.materialup.com.
