No Icon Web Design

In my current about me website I chose to go with a no icon based design for the site. This was mainly a product of how I went about creating the website and having limited amount of effort that I could put into the design and implementation. However after obsessing over the idea for the website one night and waking up to work on it, I really started to like the decision to not use icons.

So for example instead of requiring a hamburger icon for the menu, I used the current page title. Another example would be to instead of having an X icon on the top right of the mobile navigation, I added the word "close" to the bottom of the navigation links which closes the navigation menu. This latter example also fits in with the idea of having a bottom based navigation which is very common on mobile apps and should be more common in mobile web design.

This is not to say that you should just replace words and text in the same designs and locations that are meant to have icons. Rather, the idea is to rethink the designs to avoid the need of icons, and to most certainly avoid going out of your way to insert icons into the design.

The benefits of this is of course communication. A word can very often communicate more than an icon. This is not always the case, and very clever iconography can communicate more than even one or two sentences could with regards to complex user interaction and functionality. However this is not always necessary and even when necessary can be very difficult to achieve. This type of use of iconography usually also requires extended usage from the user to develop an intuition for what the icons mean and how they are used.

Whereas a word can often communicate exactly what you want to communicate for most simple user interactions and feature sets. Open, close, tabs of information, left navigation items, menus, users preferences and account functionality; all of this should not require icons and can usually be simplified and streamlined by just using the name of the thing that the icon would otherwise represent. This of course also requires intentional design choices when it comes to the spacing, sizing and organization of elements to allow for variable length words as apposed to icons which can have known sizing ahead of time.

This is of course one of the benefits lost when choosing to go with a no icon design. Icons can be square or circular, increasing the flexibility of their usage within a design. They also do not need translated which can be more flexible from a localization and maintenance perspective. However on this note icons usually do not play well with right to left languages, or at least require more special attention than does simple text.

For my own website one of my goals was to minimize the amount of kilobytes I send over the wire to the browser and to simplify both the implementation and the design. For this reason I am going to try to push the limits of what a no icon design can do as I have time available to work on it. Hopefully I can do a follow up article at some point in the future with more details on when and where to choose a no icon design, and when the benefits of icons make it the right choice. For now however I just wanted to open the door to a conversation around no icon web design.

Comments

Popular Articles

The Vanilla Javascript Component Pattern

The Sunless Citadel: A D&D 5e Session Report

Getting Started with Harp