### Designing Icons (por hacer)

Icon Libraries are great time savers... but:

- You will have to commit to their style of icon
- Sometimes you need an icon and it's not part of the library, and now you need to create an icon that replicates that style.

If you want to give it a shot and design simple icons, you need to practice your **vector** and **boolean** tools that we went over during the prework.

**Editing Shapes**
{%youtube KviZr5v2zbU%}

**Boolean Tools**

<iframe width="560" height="315" src="https://www.youtube.com/embed/1SHTd1jfah8" frameborder="0" allowfullscreen></iframe>

#### Steps to designing icons:

1. Hand Sketching
- Sketch Ideas for all the icons you need
- Pick 1 or 2 favorites for each category
2. Scan Them/ Take Pictures
3. Go to Sketch
- Design them together in their own artboard
- This will allow you to compare them and keep the design consistent
- Turn on your grid

:::success
:+1: Rule of Thumb: The smallest your icons should ever be is 16x16 px
:::

:::info
*control+p* lets you switch between **pixel** mode and **vector** mode, so that you can zoom into your icons and either look at the pixels or look at the smooth vector shape.
:::

### Consistency :key:

:::warning
:exclamation: Yes, we will drill this down into your UI designer brains until you dream with the word :hear_no_evil:
:::

When you create a set of icons (either by importing them from libraries or making them yourself) you need to make sure that they are consistent!

- size
- proportion (width x height)
- line weight
- corners (sharp vs round)
- amount of detail

You want each icon to have the same amount of "ink" (pixel proportions). So their *visual weight* should be similar.

- If you have an icon that's square, all your other icons shouldn't be round, or elongated. Try to be as consistent as possible.

### Icon Active/Selected vs. Unselected States


Plan for how they will look

- Same as buttons, the selected state should be visually distinct

A. Line icons sometimes go darker in color or change color
B. Change from line icon to filled in icon
C. Some designers "underline" the selected icon with a pop color

:::warning
Remember that for the visually-impaired, changing the color only might not be enough.
:::

Be consistent with the rest of your UI.

- How do your buttons and form controls behave on different states?
- Make sure that all of the elements behave consistently (unless you intentionally want them to behave differently)

## Summary

- Forms are one of the main things that can make or break your user's experience
- Control States describe the state of a task in a certain moment of the task perform
- Every error, regardless of cause, becomes a point of friction for your users and blocks them from moving forward in their experience
- Hover States only work if you have a mouse, so if you are making a mobile app, remember that hover states won't work!
- Focus states help users know where they are within your interface, which is especially useful when they are completing a form
- Icons are one of the biggest opportunities to communicate your product's personality

This post is divided into two sections:

7 Golden rules for the icon design process
How to design an icon from scratch (step by step)
Ready? Let’s dive in!

1. The icon design process: 7 golden rules
In this section, we’ll go over seven key considerations to keep in mind as you design icons.

1. Mind the grid
Many things in digital design are governed by a grid. Icons are no different. When designing icons, you’ll want to pay close attention to the pixel grid and how your icon fits into it.

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—these guys yield blurry edges. Let’s take a look at what this looks like in practice.

Below, I drew a simple house icon and left the pixel grid turned on. On the left, you’ll 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—they cut right through the stroke.

Two house icons drawn on a grid

Now, let’s look at the diagonals that make up the roof for a sec. These don’t sit perfectly on the grid. We wouldn’t 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.

2. Look around first
It’s tempting to want to design a brand new, crazy novel icon or set. We’re creatives, after all! However, we’ve got standards we wish to adhere to. We’ve become familiar with specific icons that signify standard functionality.

Consider the little magnifying glass we see everywhere that says “search.” Magnifying glasses aren’t the only item that can say “search.” However, we’ve 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!

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’t! If the icon isn’t 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’s perfectly OK to add your own design flair!

3. Don’t go detail crazy
We’re often slapping icons in tiny places, like the tab bar on an iPhone. As things get small, too much detail begins to get lost.

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.

4. Be consistent
When we design a set of icons, they should feel like a family. They won’t all look the same but will have similar visual attributes, making them feel related.

As you design, make consistent styling choices. If, for example, you’ve 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—a crucial part of branding!

5. Mind the gap
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.

6. Test your work
The best way to make sure your icons communicate clearly and quickly with users is to test them. Once you’ve finished designing your icons, it’s good practice to run a quick test.

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’ve intended to communicate, you’re in good shape!

7. Build with simple shapes
Everything can be broken down into basic shapes. Remember our house icon above? We designed with two rectangles and a triangle.

Once you’ve 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.

2. How to design an icon from scratch: Step by step
We’ve gone over what to consider when designing an icon. Now, let’s put it into practice. To do so, we’ll go through the process of building a simple camera icon.

I’ll be using Sketch. However, you can replicate the following steps in other design software, like Figma. If you can’t decide on a tool, check out this comparison of Figma and Sketch.

Step 1: Get familiar with your subject
To start, let’s get familiar with what cameras look like. An easy way to do so is to Google what you’re going to design. I Googled “camera” and got the following results:

Google image results for search query "camera"

My results show a variety of cameras, all in different shapes and sizes. However, they have a few common defining characteristics:

A big lens in the middle of the body
Flash
Button to let me take a shot
We’ll want to make sure to include these three characteristics in our design as they’ll make our camera icon easily recognizable to a broad audience.

Step 2: Break it down
Next, we’ll 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.

I found the following:

The body of the camera can be designed with a rounded rectangle.
The lens and flash can be recreated with circles.
The button can be a rectangle.
These will be our building blocks.

Step 3: Start building!
With all of this information, we’re ready to move to the computer. Start off by creating an artboard that is 24x24px, naming it “Camera Icon,” and turning on the pixel grid. Your workspace should look something like this:

A blank artboard with gridlines in Sketch

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.

A basic camera icon created using Sketch

If your pixels aren’t snapping to the grid, take a look at your border settings. Make sure you’ve 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.

Combine any shapes you can using Boolean operations to simplify your work. 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.

Step 4: Test!
To make sure our work reads clearly, we’ll 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?

Step 5: Tidy up
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.

Step 6: Export
Save your work and export it to share with the world!

We’ve 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.

## Additional Resources

- Hack Design: [Using Icons in Interfaces](https://hackdesign.org/lessons/24?utm_source=email&utm_medium=lessonLink&utm_content=24&utm_campaign=weeklyLesson)
- Series of short articles with insightful information on Icons and UI
- :+1: Top Pick: [9 Guidelines for Clear and Intuitive Icons](http://uxmovement.com/buttons/9-guidelines-for-clear-and-intuitive-icons/)
- The [IconFont plugin](https://github.com/keremciu/sketch-iconfont) for Sketch -- which we installed during the Prework
- [Entypo](http://www.entypo.com/) by Daniel Bruce
- [IKONS](http://ikons.piotrkwiatkowski.co.uk/) by Piotr Adam Kwiatkowski
- [Material Icons](https://material.io/icons/) by Google
- [Why icons are important](