Homepage layouts from startups to agencies have adopted the common technique of feature descriptions. These are often little boxes or sections on the page which go into detail about a company’s services or product. But as most people know, block of text can be rather monotonous.
Thus designers have started to incorporate icons beside each major feature. This way visitors can catch a glimpse of the feature and put together its purpose without reading all of the content. Feature icons have become a prominent piece to website design, and this post will take a look at how you can squeeze these icons into your own layout.
Consistency in Features
Both design and placement of feature icons can dramatically affect a website’s overall composition. Many icon styles of this nature tend to go with a matching pattern to make the iconset feel more “natural”.
The goal with consistency should be to create icons that both match and perfectly illustrate the point being drawn. Try using similar design features with your icons or find a free iconset online. The whole page will look so much better if you can use icons designed in a similar pattern.
Knowlla has a bright homepage full of various icon styles. A consistent design type is used to describe various bits of content ranging from services to various user statistics.
The actual features area uses icons which are wrapped inside a circle. Each circle is colored in a different hue but matches the same level of saturation. In this way the features panel appears like one cohesive unit and should draw much more attention from the average visitor.
Another great example can be found on 15Five. Instead of circular-shaped icon containers these are shaped like squares. Each icon uses the same shade of aqua for the background and they all have drop shadow effects. These may be called flat squares or even flat shadow icons – but regardless of their moniker these icons are consistent and beautiful.
Icons for Visual Context
Another point to mention is that icon usage shouldn’t just be random. You shouldn’t just grab icons that look cool or designs that seem to blend with the website’s color scheme.
Each icon should do it’s job to explain the content. Visual context can be powerful when used correctly. Apply a relevant icon beside each section of content which can be improved by the graphic. This way users can get a taste of what the text is about without reading.
Take for example the homepage of Boxana. Their site uses rectangular blocks of content with small thin icons above the feature text. Not all of the icons are perfect but many of them directly relate to the content being displayed(ie: a chart icon for analytics features).
Even just a semi-related icon is better than an unprepared desultory iconset thrown together at the last minute. Take some time to plan out the webpage copy so you can put together icons that truly match.
I really like the icons on ZenPayroll because they don’t even use large multi-sentence descriptions. Their icons are used to display businesses who actually use the product. But instead of just listing professions they’ve organized small icons that relate to each one.
Even brief descriptions can be spruced up with a little bit of icon amity. Take this advice with you on every project and try to seek out a purpose for each icon placed into a webpage.
Explanations through Graphics
Perhaps the most useful reason to include icons with feature text is for direct explanations. These could be mini-tutorials or just brief overviews of how a product works.
Icons are like visual elements for conveying information along with text. The two mediums work hand-in-hand to provide visitors with a clear explanation of what the website actually does. Your job as a designer is to figure out which topics need to be clarified and how to do so.
The homepage for LeadGenius has a number of different icons. The top icons serve to elucidate the different product features. But underneath is a small flowchart using icons to explain the process of how LeadGenius works.
Step-by-step explanations are great for new visitors. These give a clear overview from start to finish outlining how a typical user might benefit from the product. The choice of a simple design is also a factor because the icons are so much easier to comprehend.
Sqwiggle has a beautiful homepage for their collaboration software both from a UX and aesthetic perspective. But what I truly love is their use of simple icon styles to delve deeper into features of the product.
As you scroll down the page you’ll notice a few sections detailing how to use Sqwiggle. The icons in each section are fairly large and certainly meant to draw attention. Although ostentation is not always a reliable design technique, I feel it works well in this case. Sqwiggle definitely wants to draw attention to these icons because they add to the existing content rather than detract from it.
Color Me Fancy
The use of color is an important design choice for all areas both digital and print work. In icon design the use of color is exceptionally important because it will draw a certain crowd of attention.
There’s a very wide margin between hyper-realistic icons and thin line icons. Varying shades of color quality, depth, and light/shadow can be applied to icons to create a more realistic look or a more vectorized cartoony look. There is no right or wrong answer because each website has their own needs.
The icon set found on Home Light is simple but very effective. The colors match on a monochrome scale of blue ranging along many different hues and levels of saturation. The icons draw attention but don’t jump off the page. They’re noticeable but not extravagant.
On the other hand take a peek at Upcomer’s homepage. Their icons are still somewhat “flat” but the use of color is more pronounced. These icons are supposed to look more realistic with varying shades of color matching similar objects in real life.
There is no doubt that the icons found on Upcomer’s website stand out against other similar examples. The design style is flawless and blends naturally into the layout.
When crafting your own icons be sure to think about how much color would be needed. The choice is going to be different for each project but it will have a lasting effect on the layout.
Finding your Style
Icon style is something which takes years of practice to develop. Professional icon designers typically have the skills to craft icons in any style they choose. This comes from hard work and years of training to learn methods for creating great styles from scratch.
Icon styles are comparable to traditional art. Some like to draw realism from life while others prefer to exaggerate with cartoony ideas. Levels of detail, shading, and depth all vary and have a direct effect on style.
Style is also something that you recognize right away whether it’s obvious or not. If a set of icons don’t match it’ll be glaringly obvious. But you’ll be just as aware when finding a set of icons that do match – it’s just more subtle. You may not be able to explain a style in words but visually the cues are all there.
If you want to improve your icon design skills the only real solution is practice. You’ll need to learn how to create icons in various styles which extend far beyond the simplistic trendy modern line icons. Although icon design is a lot of work, the payoff is well worth the effort offering much more control over your creative process.
Final Thoughts
I truly hope these examples and suggestions can help designers craft more straightforward feature displays in homepage layouts. Icons are the perfect extra tidbit for improving a page layout. Granted icon design is a tough profession and if you lack the skills yourself it may be quicker to look for free alternatives. But there’s no doubt that feature icons can radically improve a website by offering visual clarity and drawing attention from visitors.
Leave a Reply