Using Icons and Infographics to Build a Better Website

The best websites integrate design and content in a way that makes it easy for visitors to find the content they want and understand it once they get there. Icons and infographics offer two important tools for achieving this goal.

A small picture or symbol, an icon quickly and intuitively transmits information to the reader in abbreviated pictorial form. Instead of taking the time to read a bunch of words, the visitor sees the icon and immediately grasps the concept being conveyed. For example, instead of having to read “click this button to start the video,” a simple arrow icon is used to denote the start of an online video.

Icons also serve as important website navigational tools because they align with the way the human eye works. When people visit a website, the eye automatically scans the page for visually interesting content. When something grabs their attention, they begin reading. Adding icons to your navigation not only increases your website’s aesthetic appeal, it also make for a quicker visual read of the link, allowing people to find the content they’re seeking more quickly.

Icons are remarkably flexible tools. You can download them for free or design your own and draw them by hand. They come in all shapes and sizes, from small and colorful to big and vibrant. They can be used virtually anywhere on a website, including headers, menus, lists, and even inside the written content. However you use them, they make the user interface more fun, intuitive, and engaging.

Although more visually complex than an icon, infographics serve the same general purpose – presenting information in a visual format to quickly and clearly communicate an important message. Because of their ability to simplify complex information, infographics have become an integral part of the modern web world. When using infographics on your website:

Be concise.
The idea is to quickly communicate a few key points, so don’t try to do too much with one infographic. Too many data points on a chart or graph, or too many visual elements in the design, will confuse and overwhelm the reader, thereby defeating the purpose of the infographic.

Be distinctive.
Strive to make your infographics stand out from the crowd. Instead of the same old pie chart of vertical column bar graph, add an unexpected design element that will capture people’s attention and make the infographic memorable and engaging.

Use minimal text.
Infographics often require text to help explain the message or put it in context. However, keep in mind that the idea is to get the main point across visually. If you have to use too many words, try a simpler, more intuitive infographic.

Use color appropriately.
Color is good, but not too much. A good rule of thumb is three primary colors per infographic – one for the background and two others to break up the sections. If you need to add more colors, use different shades of the three main colors to maintain a cohesive look and feel.

Pass it on.
Infographics offer a great way for readers to forward your content to their friends and colleagues, which can attract new visitors to your site. Make it easy to do so by including a row of “share me” buttons so that readers can quickly forward your information to their Facebook friends, Pinterest followers, email contacts, and more.

A great website combines design elements and content in a way that they complement rather than distract from each other. Proper use of icons and infographics will enhance your site’s visual appeal while making it easy for people to get what they want from your website.


Want to show your colleagues how smart you are? Get actionable ideas written specifically for B2B marketers – subscribe to the BeBop newsletter today!

Related Posts
B2B Branding | B2B Website Design

B2B Branding Trends for Technology Firms 

B2B Website Design | Web Development

Boost Your B2B Website’s UX: Five Spots to Focus On 

B2B Website Design

Google PageSpeed Insights for B2B Websites