August 14, 2017
For those of you that have designed a website, think; how difficult would it be to navigate your pages if all discernible words were removed?
While it may not necessarily be the first thing you notice when overlooking the design stages of a page, icons are the point of interaction for the majority of a website’s functionality. Therefore, it’s important to ensure that your site is displaying information clearly and concisely, to avoid unnecessarily losing readers and customers alike to poor navigation.
With that said, what impact can fantastic iconography have on a website? And what issues can arise if this factor in your Web design is handled improperly? That’s what we’re here to discuss today.
Consistency within iconography can be broken into two distinct areas:
It’s inevitable that the mobile version of your site is going to differ in some ways from the traditional desktop experience. However, while some things can be altered for ease of use on a smaller screen, or optimized for touch accessibility, the basic components of your page should be identifiable across all versions.
These issues are especially visible with icons that when not implemented by professional Web developers, can be stretched or misplaced when viewed on other devices. You must ensure that icons across your site are viewable and usable across all devices to ensure that each user is getting the same level of professionalism and consideration when navigating your site.
Consistency Within Your Site
Iconography becomes extremely powerful when used in a site-wide context.
Allowing users to easily identify a ‘construction’ or ‘hospitality’ instance of the site by identifying the associated icons (by way of recall and association).
Symbolism is its own language and, as with all areas of your service, it’s important to be consistent with your tone. This can be difficult without utilizing a Web designer or basic template design program, especially once you begin to require icons and buttons that aren’t facilitated by pre-built packs.
Australian Web design and development specialists Pixelstorm suggests these two sites when looking to expand your icon library:
While it may be exciting to stretch your creative wings designing a set of new symbols and informational imagery, sometimes, it’s best to stick with the classics. Decades of iconography and webpage design have meant that newcomers have an ingrained treasure trove of potential symbolism to choose from when improving the intuitiveness of their page functionality.
Icons are most effective when they can communicate to the user without the use of a text label. For example, on an educational website, icons could represent areas of study such as hospitality or construction. A construction hard-hat will accurately represent construction, while a knife and a fork would accurately represent hospitality.
These are images that have been ingrained into our minds through recall and familiarity, allowing for a level of ease and simplicity for users when scanning your site for desirable or relevant information. With that said, it’s best practice to label your icons to avoid unnecessary confusion or frustration.
Assuming that you have developed your website with a specific demographic in mind, it’s safe to say that your site’s look is relatively consistent and follows a theme of some variety. Not only does this allow users within that demographic to connect with and understand your site’s intentions, it gives your brand a distinguishable image that people can use to identify you.
Icons are directly linked to this because you need to choose icons that are eye-catching enough to avoid being overlooked by users, without drawing attention or distracting from the rest of your page. The icons used on your website should all be from the same family (similar line thickness, line rounding, shape fills and color scheme etc.) to ensure that your pages appear uniform and professional. For aesthetically pleasing icons that allow for high levels of versatility, SVG Icons are the ideal choice.
SVGs, otherwise known as scalable vector graphics, are basically editable illustrator EPS files for Web platforms. Scalable vector graphics can also be animated, both to draw the user’s eye and add an effective dash of life to your pages. Unfortunately, you must have vector graphics of your icons, as converting .PNGs or JPGs to SVGs doesn’t work.
Website development allows you to create icons that can be incorporated seamlessly into your pre-existing pages, or build your website alongside their accompanying icons for a fully cohesive design. This also encapsulates a wide array of factors that need to work together for your website to be optimally functional for users.
So, it’s important to ensure that each step within the process is completed with the user experience in mind. However, as long as you are diligent with your research and understanding of these components, your webpages are sure to benefit from it.
Samuel Shepherd is a writer, editor and content marketing specialist currently working for a variety of established SEO agencies across Melbourne. Working across an array of fields, industries and publications, Sam is passionate about giving newcomers a chance to broaden their understanding of the digital landscape.