{"id":4367,"date":"2019-06-12T00:00:00","date_gmt":"2019-06-11T22:00:00","guid":{"rendered":"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/uncategorized\/icon-design-process\/"},"modified":"2021-07-15T19:10:50","modified_gmt":"2021-07-15T17:10:50","slug":"icon-design-process","status":"publish","type":"post","link":"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/ui-design\/icon-design-process\/","title":{"rendered":"Here\u2019s How to Design an Icon From Scratch: A Step-by-Step Guide"},"content":{"rendered":"

Icons: tiny little symbols that say so much. They are everywhere these days, and play a massive role in the success of user interfaces (UIs). Whether you\u2019re an aspiring user interface designer<\/a> or a UX designer looking to brush up on some visual design skills, the icon design process is a crucial one to have in your toolkit.<\/p>\n

When it comes to designing a new set of icons from scratch for a new project, it\u2019s essential to allocate enough time to the process. There are also some guidelines to keep in mind which will help to ensure that your icons are recognizable and user-friendly.<\/p>\n

In this guide, we\u2019re going to walk through the icon design process step by step. First, I\u2019ll show you seven key considerations to keep in mind when designing icons from scratch. Then we\u2019ll put our theory into practice, designing a camera icon from start to finish.<\/p>\n

This post is divided into two sections:<\/p>\n

    \n
  1. Seven golden rules for the icon design process<\/a><\/li>\n
  2. How to design an icon from scratch (step by step)<\/a><\/li>\n<\/ol>\n

    Ready? Let\u2019s dive in!<\/p>\n

    1. The icon design process: 7 golden rules<\/h2>\n

    In this section, we\u2019ll go over seven key considerations to keep in mind as you design icons.<\/p>\n

    1. Mind the grid<\/h3>\n

    Many things in digital design are governed by a grid. Icons are no different. When designing icons, you\u2019ll want to pay close attention to the pixel grid and how your icon fits into it.<\/p>\n

    The easiest way to make sure your icons fit snugly into the pixel grid is to stick to whole numbers. Avoid decimal points at all costs\u2014these guys yield blurry edges. Let\u2019s take a look at what this looks like in practice.<\/p>\n

    Below, I drew a simple house icon and left the pixel grid turned on. On the left, you\u2019ll see an icon made up of strokes that fit perfectly into the pixel grid. On the right, the stroke falls slightly off. You can tell by looking at the lines that make up the pixel grid\u2014they cut right through the stroke.<\/p>\n

    \"Two<\/p>\n

    Now, let\u2019s look at the diagonals that make up the roof for a sec. These don\u2019t sit perfectly on the grid. We wouldn\u2019t be able to make them fit because the grid is made up of vertical and horizontal lines, no diagonals. In these cases, we make sure the starting and end points that make up the diagonal sit on the grid.<\/p>\n

    2. Look around first<\/h3>\n

    It\u2019s tempting to want to design a brand new, crazy novel icon or set. We\u2019re creatives, after all! However, we\u2019ve got standards we wish to adhere to. We\u2019ve become familiar with specific icons that signify standard functionality.<\/p>\n

    Consider the little magnifying glass we see everywhere that says \u201csearch.\u201d Magnifying glasses aren\u2019t the only item that can say \u201csearch.\u201d However, we\u2019ve used them so frequently that they have now become the standard search icon. Using a different icon requires the user to learn something new, slowing them down as a result. This is not so conducive to a smooth user experience!<\/p>\n

    Before designing your icon, look around to identify any standards you might need to keep in mind as you work. Does this mean there is no room for creative freedom? Fortunately, it doesn\u2019t! If the icon isn\u2019t representing functionality governed by standards, we can let our creative juices flow. If it is, we can still give it a creative twist. As long as the icon and its function is still instantly recognizable, it\u2019s perfectly OK to add your own design flair!<\/p>\n

    3. Don\u2019t go detail crazy<\/h3>\n

    We\u2019re often slapping icons in tiny places, like the tab bar on an iPhone. As things get small, too much detail begins to get lost.<\/p>\n

    When you design, be strategic about the kinds of detail you choose to include. Go easy on the little parts and make sure your icons read clearly, even at small sizes.<\/p>\n

    4. Be consistent<\/h3>\n

    When we design a set of icons, they should feel like a family. They won\u2019t all look the same but will have similar visual attributes, making them feel related.<\/p>\n

    As you design, make consistent styling choices. If, for example, you\u2019ve used rounded corners and ends in one icon, make sure you do so for all the rest. Styling, sizing, and the level of detail should all be consistent. This contributes to a coherent visual language\u2014a crucial part of branding!<\/p>\n

    5. Mind the gap<\/h3>\n

    Be careful with little details or elements that sit too close to each other. At a small size, items that are not spaced out carefully can be tough to read and will begin to lose meaning.<\/p>\n

    6. Test your work<\/h3>\n

    The best way to make sure your icons communicate clearly and quickly with users is to test them. Once you\u2019ve finished designing your icons, it\u2019s good practice to run a quick test.<\/p>\n

    Show your icons to a friend or someone else on your team. Ask them to tell you the first thing that comes to mind when they see them. If it aligns with what you\u2019ve intended to communicate, you\u2019re in good shape!<\/p>\n

    7. Build with simple shapes<\/h3>\n

    Everything can be broken down into basic shapes. Remember our house icon above? We designed with two rectangles and a triangle.<\/p>\n

    Once you\u2019ve defined what your icon will be, try to break it down into simple shapes. This is the best way to begin to construct and simplify your icons.<\/p>\n

    2. How to design an icon from scratch: Step by step<\/h2>\n

    We\u2019ve gone over what to consider when designing an icon. Now, let\u2019s put it into practice. To do so, we\u2019ll go through the process of building a simple camera icon.<\/p>\n

    I\u2019ll be using Sketch. However, you can replicate the following steps in other design software, like Figma. If you can\u2019t decide on a tool, check out this comparison of Figma and Sketch<\/a>.<\/p>\n

    Step 1: Get familiar with your subject<\/h3>\n

    To start, let\u2019s get familiar with what cameras look like. An easy way to do so is to Google what you\u2019re going to design. I Googled \u201ccamera\u201d and got the following results:<\/p>\n

    \"Google<\/p>\n

    My results show a variety of cameras, all in different shapes and sizes. However, they have a few common defining characteristics:<\/p>\n

      \n
    1. A big lens in the middle of the body<\/li>\n
    2. Flash<\/li>\n
    3. Button to let me take a shot<\/li>\n<\/ol>\n

      We\u2019ll want to make sure to include these three characteristics in our design as they\u2019ll make our camera icon easily recognizable to a broad audience.<\/p>\n

      Step 2: Break it down<\/h3>\n

      Next, we\u2019ll begin to look for basic shapes. Are there any circles, squares or rectangles we can use to build? Go through a few sketches and iterations to help you identify them.<\/p>\n

      I found the following:<\/p>\n

        \n
      1. The body of the camera can be designed with a rounded rectangle.<\/li>\n
      2. The lens and flash can be recreated with circles.<\/li>\n
      3. The button can be a rectangle.<\/li>\n<\/ol>\n

        These will be our building blocks.<\/p>\n

        Step 3: Start building!<\/h3>\n

        With all of this information, we\u2019re ready to move to the computer. Start off by creating an artboard that is 24x24px, naming it \u201cCamera Icon,\u201d and turning on the pixel grid. Your workspace should look something like this:<\/p>\n

        \"A<\/p>\n

        On it, begin to draw the basic shapes that make up the three defining characteristics we identified before. Make sure all the shapes fit snugly on the pixel grid as we did in the example below.<\/p>\n

        \"A<\/p>\n

        If your pixels aren\u2019t snapping to the grid, take a look at your border settings. Make sure you\u2019ve got your borders set to the outside or inside of the shape and not center. If you set your border to center, you risk ending up with elements outside of the pixel grid.<\/p>\n

        Combine any shapes you can using Boolean operations to simplify your work<\/a>. Say we wanted to add more detail to the lens by adding a larger circle around the small one in the center:we could cut out the larger one from the body of the camera to turn them into one shape.<\/p>\n

        Step 4: Test!<\/h3>\n

        To make sure our work reads clearly, we\u2019ll want to test it. Share your work with a co-worker or friend. Ask them what they see. Did they instantly recognize your icon as a camera, or are you not quite there?<\/p>\n

        Step 5: Tidy up<\/h3>\n

        Before you finalize your icon, double check for any decimal points. Look at the numbers in the inspector and make sure they are all whole.<\/p>\n

        Step 6: Export<\/h3>\n

        Save your work and export it to share with the world!<\/p>\n

        We\u2019ve designed a pretty simple camera icon with minimal details and strokes. You can always increase the complexity of your design and style. However, the process and key things to keep in mind should always be the same.<\/p>\n

        Happy designing! If you\u2019d like to learn more about user interface design, check out the following articles:<\/p>\n