[00:00] Think of a way that we can communicate with one another that bridges language gaps. Easy, that'd be photographs, illustrations, and icons. In this lesson we're going to focus on icons and iconography. We see icons everywhere and for good reason, they help us navigate both the digital and physical world. Icons play an important role in our everyday life, whether they are letting you know the floor's wet, warning about the windy road ahead or helping you get back to the homepage of a website. In this lesson we'll be learning all about icons in relation to user interface design. We'll also cover some best practices for successfully implementing icons into your design. Let's begin by asking what is an icon? An icon is a visual representation of an object action or idea. It's sort of like a picture stripped down to its most minimalistic form. The idea being, they can convey information about things we already understand with just a simple symbol. Before we get too far, I should clarify that we're going to be focusing on the world of user interface icons, so we won't spend much time discussing illustrations.

[01:11] User interface icons are very simple, restrained in detail, usually made up of one to two colors and are baked into the user interface of applications or websites. Illustrations on the other hand can really be anything beyond that. The main difference is that they are part of the content and not part of the interface. Also illustrations can be more complex and visually interesting. Also illustrations tend to stand out while icons blend in with their surrounding user interface. So some key points here; Icons visually represent something. User interface icons are part of the application. Whereas illustrations support the content and are not part of the interface. Alright, so we know what icons are but why should we use them? Well, they're very useful in a lot of cases, from navigating to representing a status, letting the user know they can interact with something in the interface and even act as a visual anchor to highlight areas of the screen.

[02:06] Each of these are important on their own but when you can leverage all of them cohesively and in the right ways, your interface will be simpler to use and will give the user a better overall experience. In modern applications a left facing arrow is commonly associated with going back a screen or moving to a previous thing. You could use text to convey this information but an icon is widely understood and far more elegant. Similarly, an icon of a house is an easy way to convey that a user can navigate to a home page or initial section of the application. One of the primary ways icons are put to use is by helping users navigate through an interface. Icons can also show the status of something, they can be used to warn us if there's a problem, or if something will soon go wrong. If you're using an application and there's an issue it's always nice when the application lets you know visually that there's a problem. Depending on the of the status, the visual dominance can vary but the main point is that icons can be used to signify an issue of some sort that stands out and can get the user's attention.

[03:08] Usually this is paired with a message of some sort but the icons are how we get the user's attention. Icons can be used for even more than that, forgetting warnings and errors for a moment, you can use different icons to visually associate certain pieces of content. For example, the table on screen lists several transactions, icons are being used to represent different types of transactions. Even though there are a lot of entries on this list at a glance, you have an idea of what transactions are similar in nature because of the icons displayed on the left. Icons can be used to trigger actions. In a large table of content, icons can suggest that the information within can be interacted with in some way. Symbols like trash cans or envelopes are already well recognized. So users will likely be able to figure out their functionality without being explicitly told. For simple and common actions like these, using an icon instead of the full text, can save a lot of space in an interface, keeping it simple and intuitive.

[04:06] Icons work great for creating visual anchors and a user interface. When reading a body of text on a page or viewing a screen with lots of content that is mostly type lines and boxes you'll find your eyes are automatically drawn to things that stand out from the rest of the content. Icons are one way to grab the user's attention without overloading them with large graphics or bright colors. When implemented correctly, you can use them to your advantage by guiding the users to make quicker decisions. This implementation works best when the icons compliment the content they are representing. We spent some time talking about reasons to use icons but when should you not use icons? Well, if they appeared to provide no real value and clutter the interface, it's probably best to pass on them. Icons on the left of the table, don't really add any extra value but they do add more visual noise to the design. This is especially true when you're repeating tiles with the same information over and over again. You should avoid using icons that aren't instantly identifiable.

[05:06] I'm sure everyone has seen the washing machine instruction icons. Does anyone know what those mean yet? Avoid icons that are open to interpretation. It's important to keep in mind the cultural interpretations of any icons you use. Something as simple as a thumbs down can mean a very different thing depending on culture. In the United States thumbs down means no or don't like, in Japan, thumbs down has a far harsher meaning that I'm not going to state here. And yes I do see you opening a new browser tab to go look it up yourself, don't worry, I'm not judging. Alright. So what are our key points? Icons are at their strongest when they're used to signify navigation, report a status, trigger something, or act as visual anchor. You should really avoid using icons if they don't provide any sort of actual value. You should also avoid them if they're not instantly identifiable or can be misinterpreted. Now that you have an of what icons are, as well as where and how to use them, you might want to source some for yourself.

[06:02] The quickest and easiest way to incorporate icons in your project is to use what's called an icon set. This is a collection of icons in a similar style. These sets are usually created by one person or organization and make use of a cohesive style throughout. Sometimes these sets even include multiple variations of icons, which makes it easier to incorporate them into your current branding. Whether you use one set or combine multiple sets together the goal is that you have them all visually look and feel the same. Having icons in your system is a great start but having icons that relate to your brand style make the experience of your product much more cohesive. Icon sets can be purchased, but many design and application platforms have built an icon sets. Regardless, the description of this video has links to some great icon sets to help get you started. With that in mind I wanted to go over a few things you should know about when building a library of icons. Now say you want to add a new icon to your library. You should first be aware of your current icons and how they're being used. With multiple people designing things over a period of time, it's especially easy to get a plethora of similar icons used for the same action.

[07:07] Your goal is to create a consistent, easy to use interface and you can do that by using the same icon for the same action across all screens. If you start to stray from consistency, users will be easily confused and question whether they're making the right decision before clicking. So all of those download buttons, you're putting into your project, make sure they're using the same icon. So take a moment to look through your project, check all of those download buttons and make sure they're using the same icon. What is the icon for? A navigation bar, a button, a warning. Does the icon implies something specific? If you have something in mind but aren't sure if it makes sense, do a quick search on the web to compare it to other icons of the same nature. It's important to choose familiar icons that people can recognize easily while still incorporating your brand or style so the viewers don't have to guess or even think twice about what it means or does. There are a lot of stylistic choices to make when choosing an icon.

[08:05] If you don't have any icons yet in your brand, then you have free reign to make some decisions as to what fits best. If there are already some icons in your brand you'll likely want any new icons to match the existing. Start by taking your current icons and reduce them to their core aspects. Are they filled? Do they have sharp angles? Are they outlined? Do they use one color or are they flats? Once you have a better understanding of your current icons it will be easier to add additional ones. The end goal is to have a group of icons that look and feel like they were all made by the same person at the same time. You'll want to be mindful of their size. If you have a navigation bar with four icons and they are all slightly different scales, it can create an uneasy feeling in that area of the design. When you choose an icon from a set, it should already be scaled appropriately but if not, you will need to scale them on your own. Similarly shaped icons can be uniformly scaled by using the same pixel size. For icon shapes like circles, you may have to make them slightly larger, since circles have less visual weight compared to rectangles.

[09:10] One last thing to consider is an icons color. Colors have native implications as to what they represent, especially in the industrial control space. So you'll want to be careful when selecting a color. It's worth stating that you should keep accessibility in mind as a significant portion of your viewers could have some form of colorblindness. So any color you choose for your icons, should strongly contrast with other nearby colors. Our key points here; We'll reuse icons throughout a project if possible. Stick with familiar concepts. Consider the shape form and size of your icons. And remember that colors carry meaning. In this lesson we discussed what icons are and how they can be used to support an application or a website. The quickest way to start incorporating icons into your project is by finding an icon set that matches the style and branding of your project. As a reminder, if you check the description on this page you'll find some links to several popular icon sets to get you started.