Often I will incorporate icons into my web designs, they quickly translate information to the viewer without using words. They are useful for when there is little room for text, which is why they’re being ever increasingly used in mobile designs. They can also be applied as a design element to add visual appeal to the site. Here is what I think are some of the most important things to consider when designing and using icons in web design successfully.
Keep the icon styles consistent. They should look like they all belong in the same family. Make icons as clear and as simple as possible. The ultimate goal would be to be able to have the icon stand-alone without text and still have it be understood. Try to make sure that the icons work well in black and white. But when more detail is needed, color can be added to provide more depth and clarity.
Use icons as a visual language. Icons can be helpful for websites with users of different languages. In a current project for a school we needed to use icons to help relay meaning of the text, since for many of the users, English may not be their first language. The icons will help the user the find the language translator as well as determine which information on the site they are pursuing.
Icons cannot always stand-alone. At Netrix we frequently use icons in the branding of the company. One of the challenges we face is how to make icons for each branch of service stand apart from each other. From an outside perspective Netrix’s information technology services are so similar. Ultimately we use the icons to provide a hint of the area of service and still include the text to clearly describe the service.
Consider using icons for functionality. Designing for mobile websites and app user interfaces is the perfect time to use icons for menus and buttons, since real estate on mobile devices is limited. When a client wanted their new intranet to be designed mobile first. It was a no brainer to make icons be the main focus of the site navigation. On mobile the buttons are only icons, then in a browser on computer they expand to show text as well.
Icons can be used to add visual interest on the the page. It helps break up the content, which allows the user to find the content they want quicker and easier. When a user visits a site for the first time they scan the page for something that will attract their attention. For Crist | Kolder Associates’ website design we used large icons to separate the text into smaller sections for easier readability.
Use icons where appropriate, not everything needs to have an icon. They should support and enhance the content to not overwhelm it. Sometimes a simple arrow to inform the user works wonders. With Cabernet Corner, the intranet for KoenigRubloff Realty Group, we used arrows and plus signs to emphasize the calls to action.
Whether you use icons in website navigation, to increase legibility, or to draw attention to content, icons are a great addition to any web design.