New website & the icon challenge

Here it is—my new website. The previous one was entirely hand-coded, and as much I liked its simplicity, the lack of a content-management system became too tiring after a while. Plus, I wanted to have a blog that is more design-focused than my personal essay-style blog. Being a big fan of WordPress, I had no doubts that I would want to move my website there, but the challenge was to redesign it for an entirely new platform.

Designing the layout was easy enough, as I pretty much followed the previous design. Colour-wise, not much has changed either: the light grey is a bit lighter, and the dark grey strip is a little darker, while the pink has remained the same. The biggest challenge were, however, the icons. Initially, I quite wanted to keep the icons from the top menu bar and use them to navigate within the portfolio section. I spent quite a lot of time researching ways to do it in WordPress, but the problem wasn’t so much about technicality but usability, ie. making sure that my navigation is clear to the viewer. I looked at various websites that use icons for navigation, and read various articles discussing the use of icons alone vs. icons with text. The AWWWARDS website had an article presenting 31 examples of in navigation menus, some of which I found really cool, like the website of designer Tim Roussilhe, and three websites dedicated to beverages: beer, the Mexicna Mezcal Buen Viaje vodka, and tea. I quickly noticed though that most of these sites had text labels either next to the icon or visible on hover. (Those that only had icons with no text, seemed to have had to be redesigned, because when I clicked on the links within the articles, I would be taken to a site that looked nothing like the screenshot.) In the case of long labels like mine (“graphic design for film”) and a horizontal menu bar, the hover idea wouldn’t really work. It would be fine with a vertical menu bar, where the labels could slide to one side, but I simply didn’t want my menu bar to be vertical.

Aside of these technical difficulties, I soon realised that icons are actually a lot more tricky to use than we may think. There are numerous articles and discussions among designers and developers on forums whether new icons can be implemented successfully on a website. Many people are sceptical. In an article on icon usability, Aurora Bedford says that “there are a few icons that enjoy mostly universal recognition from users. The icons for home, print, and the magnifying glass for search are such instances. Outside of these examples, most icons continue to be ambiguous to users due to their association with different meanings across various interfaces.” Even the 3-line “hamburger” icon stills gets misunderstood despite its omnipresence. The author argues that icons should always be accompanied by text labels, visible without any interaction from the user. “Don’t rely on hover to reveal text labels: not only does it increase the interaction cost, but it also fails to translate well on touch devices.” So the various examples of striking web design I’ve seen might sadly be more about form that functionality.

In the end, I’ve decided to have text navigation in the top menu bar, plus a traditional category system on portfolio page, and keep my icons as an extra element on a single project page, where they would specify the type of design work. So the film, stage, music, art and real life icons are now visible on the grey strip, where other icons (about, blog, testimonials and contact) are also located, but it is not essential for the viewer to understand their meaning in order to find his way around the site. The icons have undergone a little change though—they are no longer textured. On my previous site, all icons (including back and forward arrows) had texture so they would visually correspond with Cabin Sketch font I was using. But as I am no longer using the font on this website, the texture seemed out of place.

So here we go: a few changes to the look of icons and the way they’re used, plus some small colour changes to the background. I hope you like it.