If it doesn’t work in greyscale, it won’t work in color: How Button Design created icons for a new product suite

A couple of months ago, our design team was tasked with creating a set of icons for<a href="https://blog.usebutton.com/announcing-button-evolution" style="color: #0077ff;"> Button Evolution™</a> product suite—the affiliate industry’s first suite of personalization and intelligence products. Our products are evolving the affiliate industry, so our icons need to echo that same forward movement—the act of evolving, changing, and improving. After months of brainstorming and finessing, we unveiled the new Evolution, Actionable Intelligence, and Audiences icons.<img src="https://lh6.googleusercontent.com/yUVhqZMeBZ8tx-ylCtdvQH8HsmDLEF0WktSfZugoDvB1YfOrR66bl_8dQJY0WrIowJbR5OuWq53MzbMNrutFf0vVVyD7NAGY0tpOgyHSSIdE_h1n4blK9ErTMseJcCYcXzduuls" width="682" style="width: 682px;">Taking inspiration from nature, we ultimately decided on waves for Evolution. For Actionable Intelligence and Audiences—our products that allow you to precisely target users with optimal offers—we similarly wanted to show movement while staying true to the products they represent. Icons for<a href="https://blog.usebutton.com/how-reach-product-enhancements-drove-a-37-lift-in-conversion-rate-for-a-leading-retailer" style="color: #0077ff; text-decoration: none;"> Reach</a>,<a href="https://blog.usebutton.com/driving-publisher-revenue-through-personalization" style="color: #0077ff; text-decoration: none;"> Dynamic Offers</a>, and the<a href="https://blog.usebutton.com/how-shopkick-used-buttons-cdk-to-boost-its-revenue-per-user-by-62" style="text-decoration: none; color: #0077ff;"> Button Browser</a> are currently in progress.Creating icons is time-consuming, but it can be a lot of fun! Trying to tell a story through such a simple visual canvas can be quite the challenge. You’ve got a finite amount of space to create a visual that illustrates a very abstract concept. It’s almost like fitting an entire novel into one tweet. We’re sharing the process behind our icon creation so that you can learn a tip or two.  <h2 style="font-size: 22px;">What goes into creating a set of icons? </h2>First, we had to define and gather the requirements of this project by having an in-depth discussion with our stakeholders. We needed to answer important questions like: “Who is the audience?”, “Where will these ultimately live?”, and “What do you envision in your head when you picture this icon?” This collaborative process of working with the stakeholders and gaining a deeper understanding of the product nuances help to lay a solid foundation for building out successful icons and gives us our starting point.With the groundwork in place, the next step was to conduct a competitive analysis. This is where we take time to evaluate how other companies in our industry present their products visually, as well as how other designers are creating similar concepts for customers. This not only helps us stay up-to-date on current trends but also gives us a boost on thinking creatively and brainstorming how we want to tell our story.Next, we ideated! With our pens and pencils in hand (or Wacom stylus pen if you’re a digital purist), we pulled out some good ol’ paper and started sketching. Typically, we set a timer for 15-20 minutes and get all of those ideas swimming in our heads onto paper.<img src="https://lh3.googleusercontent.com/c-2_aT5KTMeCkBVDrbH-pRLBFtE5KoRsN-CM4cgCaZe4pKOCovq6RjVR1D_9WXhArRFlu276yrQt9C1aaq8ttSnFS6OCKxIjO2ArwRvDeblvEl17FNUUcN2iUwrsWHM5HkVE2I8" width="682" style="width: 682px;">After sketching, we moved onto Figma (you can use your preferred vector graphics program), where we continued to ideate. We started with shapes and other elements that we might already have on hand from existing illustrations, icon sets, etc. I like to start out in greyscale; if it doesn’t work in greyscale, chances are it won’t work in your color palette. The goal at this point in the process is to have a handful of ideas created (but by no means finished) to share with stakeholders in the first review. <img src="https://f.hubspotusercontent20.net/hubfs/6583774/digital-sketches-for-evolution_cropped-2.png" alt="digital-sketches-for-evolution_cropped-2" width="680" style="width: 680px;"><img src="https://lh5.googleusercontent.com/kQk3aQmWXb-YyVt_n-fX9Gtw--BPeKStKZEAxtkBJaaOk7Rv4ICGPsldsbhtT0CFNb_9kA1JUNqL-picLDtjJh2Ef7BuaETq6GLF1L8aicOcPhPDMKrHGMSlo7jRZLz8EuBadZY" width="681" style="width: 681px;">To ensure that we are on the right path to move forward during the first review, we continue to ask questions, especially if the stakeholders are not quite sure what they want or if we are stuck on a concept that does not seem to be fully developed. We also encourage stakeholders to ask questions in return. After receiving feedback and aligning on the path forward, we move on to making edits. Where can it be further simplified? Do we need to introduce depth? We also start pulling in the color palette and mocking up different versions against light and dark backgrounds.In the second review, we align on color usage and whether there is a need for multiple color variants, as well as any tweaks that may be needed around lines, curves, sizing, etc. After that, we make sure it’s buttoned up for a final review before launching the brand new set of icons. <h6>10 tips for creating your own icons</h6>So what should you keep in mind while creating icons? <ol><li>Keep it simple. Use clear shapes and limit your color palette to 2-3 colors.</li><li>Be consistent. Make rules for consistency but break them where needed.</li><li>Work with a grid. Think about how your design fits into a grid and make sure the aspect ratio for each icon has an equal height and weight.</li><li>Conduct a competitive analysis. Staying up-to-date on what other companies in your industry are doing not only keeps you in the know but might also give you a different perspective.</li><li>Don’t be literal. Think in simple metaphors.</li><li>Use symbols or letters but stay away from words.</li><li>Work in vector format. Vector files are scalable, easy to manipulate, and can be animated.</li><li>Start in greyscale. If it doesn’t work in greyscale, chances are it won’t work in your color palette.</li><li>Test for success. Mock up your icons on different backgrounds to make sure they work or if they’ll need an alternate color palette for dark backgrounds vs. light, etc.</li><li>Finished is better than perfect. You can always tweak and update an icon set, but chasing after perfection not only prolongs the project but can cause you to lose sight of the original goal.</li></ol>Eager to learn more lessons in design? Check out <a href="https://blog.usebutton.com/tag/design" style="font-style: italic;">this collection of handy tips from Button Design</a>.

If it doesn’t work in greyscale, it won’t work in color: How Button Design created icons for a new product suite

The AI Revolution: How Artificial Intelligence is Reshaping E-commerce

Button Surpasses $1 Billion in Commerce Driven Monthly as Retailers and Publishers Leverage Button’s AI Powered Commerce Optimization Platform

Supercharge your customer engagement today

Products

Support

Resources