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.
Check out my blog for more of my thoughts on the web platform and the various other topics that I am interested in.
Top comments (9)
Why not have both? Icons and text?
I think, at minimum icons are just eye-candy and make the site more pleasing.
Having said that, your pages doesn't seem to need icons! The only icons that I'd imagine you'd have is here
Of course there might be designs out there that totally remove the link name after the icon, but you wouldn't usually.
So, if done right, it's just nice eye-candy in that case
But then there are pretty established icon sets that, whether individuals like it or not, have become part of our digital language.
For example the bell icon for notifications. I'm willing to bet anyone that doesn't understand the bell icon (by now) will equally need to explore the feature if it was called "notification". Is it notifications from admin, or users reaction? The only reason we know is notifications from other users is not the icon or the word but the pattern: You go to dev.to, quora, github, facebook, twitter, and that bell (or that word) does the same thing. Tell my grandma that that button gives her notifications and she'd still not know what they are However, I bet she'll have a better instinctive idea upon seeing the bell, though granted, with her other icons might not always make sense: like what on earth does that unicorn do :)
I believe your site looks great (homepage doesn't scroll!! - I'm on a mac, chrome) but it would be extra nice with icons!
I like the idea of flipping the phrase on his head and saying "a word is worth a thousand images", not sure it holds though.
A lot of good points, and I think the idea of having both is the real key. Icons for the ability to quickly know what it does and to develop a common language like you said, and a word to remove ambiguity. Certainly long lists of icons can be overwhelming, but many icons are so universal that at this point that there is not much of a reason to try to do it any other way.
The no icon route has been something of a curiosity, and it could be a way to offer something unique that stands out. It also might be a good way to force thoughtful design and smart use of space. I go back to the menu example, I could have added an icon sense it is something of a default design choice, but using the page title and then make it obvious that it is the source of site navigation I have achieved two things and added less design clutter.
I'm wandering if there are other ways to do the same thing (more functionality with less design clutter) by at least giving a little bit of resistance to the default icon choices and asking the question, "Is there something else already in the design that can serve this purpose?"
I don’t think the blog is part of the no icon scope, which can be inferred from the op.
Yep that is correct. I'm using a different content management solution for the blog content and then pulling that content into the about.alexlockhart.me site.
I see a blank page on mobile...
thepracticaldev.s3.amazonaws.com/i...
That's the no icon/no content design. It's the new minimalistic movement.
ha!
I think this is their 'No Icon' version