“All text and no icon makes Jack a dull boy” – had The Shining been filmed in our days (and had Jack been a web designer), he might have typed that sentence over and over obsessively. We would have agreed: icons and small illustrations provide an additional visual layer to a web page, on top of the sometimes tiring texts and images. With the right use, they rapidly enhance a layout’s look and feel, making it more fun, professional, or friendly – depending on what you’re aiming for when designing a website. Even more than making a design more communicative, icons and illustrations actually save readers time. We are all visual learners, and as such we often prefer glimpsing at an efficient symbol rather than reading more words.
The more they simplify our lives, the harder they are to design. Creating these small elements is a sophisticated process, which requires a lot of research, attention, and know-how. If you would like to improve your web illustration skills, just stick around. We met with Ariel Wollek, Illustration Team Lead at the Wix Studio. Among many achievements, Ariel is responsible for developing the icons and illustrations across all company’s products including Wix’s smartphone app and Wix ADI, the revolutionary AI solution of the website builder. He gave us some priceless lessons that, just like icons, will save you a lot of reading.
Why are icons so crucial for a website or an app?
Unlike most other elements, icons have this amazing ability to be universal. They’re meant to be understood by everyone. Second advantage: in a world overloaded with information, icons save you time, because they deliver the message quickly and help you navigate the page (or the app). If they take time to decipher, it’s not worth it. Finally, icons can add another design layer to a project. They enrich the overall visual aspect and strengthen the brand’s message, both visually and conceptually.
What are the challenges you face when creating an icon?
Visual simplicity alone doesn’t make an icon clear for its target audience. You need a symbol that will be widely recognized. The biggest challenge is when you’re working on an icon that represents an idea without an agreed upon symbol. You need to find a representation that will be descriptive of the subject and easy to grasp. Most of the times, the solution comes by adopting a minimalistic style.
Another serious challenge is when you need to create a full series of icons. It’s almost like designing a typeface. The process requires in-depth work on styling, defining and creating guidelines. Basically, you create a language that should be ready to contain new icons whenever there’s a need. The guidelines must be very precise, with a set of rules coming down to pixels, radiuses and grids. As you can see, the work of an icon designer is not only visual, it’s also textual!
Talking about processes, can you describe what your work routine looks like?
A lot of trial and error, large scale research and working on multiple projects simultaneously. It’s a world of A/B testing. Moreover, you can find yourself working on two different design languages simultaneously, because during the time it takes to create a new illustration language for a massive product like the Wix Editor, you still have to maintain and update the previous version. For example, apps’ mockups can change frequently, and thus require different sets of icons or illustrations. You also need to know when to stop researching. Having a deadline really helps dealing with perfectionism.
The icons language Ariel built for the Wix App
Do you have any advice for a designer new to icon creation?
Check for an existing universal symbol that delivers the message you’re trying to deliver. In most cases, the best decision is to work on an existing concept, and create your original version of it. The better known the symbol, the easier it will be for people from over the world to understand it (take for example, the heart icon for “like”). Once you’ve found the symbol, you need to fit it into your own design language. And again, the purpose of an icon is to deliver a clear immediate message. That’s why in most cases you’ll want to choose a simple and clean render. Overstyling an icon might create “noise” that will harm its recognizability.
Download Wix’s free kit of icons to use on your website
Let’s talk a bit about illustrations. What’s their purpose on a website or an app?
Unlike an icon, an illustration is not meant to replace a textual message, but rather to reinforce it. Illustrations provide a chance to create a certain atmosphere. You can be more fun, friendly, outgoing. A lot of sites go for that option to create a positive emotion. In general, with illustrations, there’s much more freedom compared to icon design, more limits to stretch, more humor, more room for playing.
What should an illustrator pay attention to when creating something for the web?
You need to check two important things before creating an illustration for the digital world. First, what’s the essence of the brand, and second, what’s the visual landscape in which the illustration will appear. The essence and values of the brand will set the tone of your message – for example: humoristic, dark, suggested, etc. On the other hand, the visual landscape, which has to embody the brand’s value, will help you define the illustration techniques and colors.
How do you make sure the illustrations are aligned with the branding?
The hardest part is making sure your illustrations and branding speak the same language. Of course, if you have existing branding, it’s much easier to create an illustration for a certain message – because someone already answered all the questions for you. You simply have to design something based on the language created by others. The challenge comes when you don’t have a clear branding to rely on. You’ll have to choose the colors, decide on the vibe, pick the characters… In other words: you’ll end up creating a new design language yourself, based on the essence and the values of the company you work for. Obviously, the more the company’s values are clear and well-defined, the easier it will be to elaborate the new language.
Is it wise to follow trends in icon and illustration design?
I wouldn’t recommend sticking too much to trends, in the long run it can be limiting. Of course, it really depends on the type of company you work for (small brands can more easily afford to change their language, because they have less materials to replace). By definition, trends are a risk, something that keeps changing all the time. You need to be innovative and relevant, fresh and up-to-date, but also long-lasting. It is very tempting, but you need to hold yourself back. You want your illustrations to become a ‘classic’: something that is always up to date and will look good in any combination.
With Wix.com, you can easily upload your own icons and illustrations to your website
Lastly, do you have any advice for designers that are getting into the field of icons and illustrations for web design?
Technically speaking, it’s extremely important to learn and understand the meaning and rules of designing for the web. Things like pixel perfect, resolutions, grids, file types, responsivity (and more) should be mastered. In addition, when establishing a visual language for a brand, you need to bear in mind that the guidelines and rules you’ve defined might be reused by others. Therefore, they need to be written in a clear guidebook, available to the other designers working on the same project. Also, it’s crucial to organize all of your materials properly, so that they can be easily accessed and understood by other people, such as UX designers and developers. Luckily, you’ll find a lot of great solutions on the market today, to help you with this part of the job.
Ready to design for the web? Push the creative limits for your website with Wix.com!
Our thanks to Wix.com for sponsoring us this week.