Skip to main content
Image of a blue and pink donut - Illustration and Icons for Awesome Web Design

Illustration and Icons for Awesome Web Design

Reading a wall of text is not exciting. A communication that is entirely text looks stiff and too formal. That’s why icons were invented. Icons add a visual layer to communication that makes it appealing and more expressive. Take, for example, getting a thank you message for a gift you sent. A plain “thank you for the gift” is okay. However, if you put a smiley face or a kiss emoticon at the end , it’s better, right?

When it comes to web design, icons can enrich a layout’s look by making it friendlier or more professional, depending on your goal. Aside from aesthetics, icons and illustrations are friendly to readers. Symbols are easier to read than words and it bridges communication barriers. The thing is, while icons and illustrations makes our life easy, when it comes to web design, they are hard to create. It calls for a tedious process that necessitates research, attention and skill.

If you are looking to work on your web illustration skills, here are the nuggets of wisdom we got from experts:

Websites and apps must have icons

Icons can be understood by anybody, even by those who cannot read. It also saves time. Why string long words together when you can deliver your message with a single symbol? Navigating a page will be faster that way. Icons also add another design layer to your website.

Designing icons is challenging

When designing icons, you need to think of a symbol that can be recognised by everybody. There are existing symbols that you can use. All you need to do is add your personal touch.  The challenge lies in coming up with an icon for an idea that there is no symbol for yet. You need to come up with a symbol that represents your idea and is easy to understand. Another challenge in designing icons is when you have to create a series.  Look at the emoticons — the creators had to come up with different symbols to represent the wide array of emotions. A smiley face and a sad face were enough in the beginning, but after a short while, they had to come up with angry, scared, surprised, disgusted, confused, etc. Coming up with a series icon requires not just artistic skill. You need to be creative because you are practically creating a symbolic language that should be as dynamic as the written form.

You don’t have to reinvent the wheel

In icon creation,  a designer’s first step should be to check if there are existing universal symbols for their intended message. If there is, all that’s needed is to work on the existing symbols and create an original version. When customising, the goal should be to come up with a simple design that will communicate the message clearly. Do not over-style or it will get misinterpreted.

Illustrations in Web Design 

While icons replace the written text, illustrations in web design reinforce the message. When coming up with illustrations, identify first your brand’s essence. Is it fun? Laid back? Trendy? Adventurous? Then, come up with illustrations that are aligned with it.

Align illustrations with branding 

Make sure that your illustrations and branding are singing the same tune. This is easy to achieve if you already have an existing brand. You just have to come up with an illustration based on a language that is already there. The challenge happens when you don’t have a clear branding yet. You have to start from a blank page to come up with a design language. You have to choose your colors, vibe and characters.

Be cautious in following trends, stay on brand

Keeping up with trends is tempting because you will always be current. Aiming to be current all the time can be exhausting because you have to keep on changing your language. If you are a big company, it can be a daunting task due to the volume of material you need to update. Small companies, on the other hand, may find it easy because they have lesser material to update. With that said, having your illustrations look current all the time is not a wise move. Aim for the “classic” and “on brand”look so it can withstand any trend.  

Master your craft and make it transferrable 

If you are a designer who wants to venture into the field of icons and illustrations for web design, you must first be an expert in its rules. You should have mastered pixel perfect, grids, resolutions, responsiveness, file types and more. Also, when you are establishing a visual language for a brand, make sure that the brand rules can be replicated by your successors. Create a manual of the brand guidelines that can be easily accessed and understood by the other people in your team.