How to Use Illustrations to Spice Up Your Web Design Work

Aug 26 2010 by Jake Rocheleau | 21 Comments

How to Use Illustrations to Spice Up Your Web Design Work

Graphic illustrations have become commonplace in today’s web design. They can add a unique branding element into an otherwise bland world of templates and corporate logos.

Although just 5 years ago you would be hard-pressed to find many websites looking for illustrators, times have changed, and we’re on the brink of many new and exciting web design trends.

Illustrations that come in the form of beautiful background scenery, animals and mascots for branding, or even cartoon versions of authors and designers can be found all over web design portfolios spanning the globe. Web illustrators and branding gurus have become a staple and have come to be high in demand in the web design industry.

I’ll be touching upon a few tips for incorporating illustrations in your web designs by looking through a handful of websites that use illustrations effectively.

I’m talking about digging deeper into the bedrock of design; truly searching for what makes illustrations "click" in the mind of our website visitors.

Why Branding is So Important

When you build a website, you want the look and feel of the design to be an extension of your business. Whether this means incorporating an already existing logo into the design or creating a memorable experience, the site needs to fit your brand.

When visitors fall into your site, you also want to make sure it leaves a lasting impact. By this, I mean that you want them to remember your site.

Illustrations help a lot with making a site memorable because with an eye-catching graphic scene or vector artwork, the page jumps out and has a visual element that’s unique just to that site. This is what helps your brand stick like fresh sap out of a maple tree!

Users eat creativity up; it shows that you really care about your brand and your site to go through the trouble of incorporating illustrations, which are difficult to conceptualize and pull off effectively in the context of websites.

Let’s take a look at a good example of how illustrations can be used effectively to establish a brand identity: an SEO company called ten24 Media.

Their site uses a background of a circus tent with a beautiful skyline and open grassy fields to entice readers into the upper area of the web design. The concept of using circus tents as a central illustrative element is from creative wordplay: their name spelled out is "tentwentyfour media." The web layout includes a brief description of what they do, as well as a link to their Services page ("Enter the Show").

The branding is consistent throughout the site; continuing onto other pages, you’ll see the circus tent outline near the top navigation links.

In addition, the site’s footer contains more grassy hills.

All these illustrative elements keep the whole site feeling very innovative and fun — the perfect positive emotions you want to create, especially to dispel negative misconceptions some people have about the SEO profession.

Simple Illustrations Work Well

Never underestimate the power of a simple illustration. Adding too much to your design will overwhelm your readers and have the opposite effects you are looking for.

Fatburgr is an interesting web application. Many would classify their design into the realm of new age "Web 2.0" gradients and fluff, but the concept actually stands for itself.

Just browsing the site is appealing and you can enjoy the cartoony aspects of each area.

The footer is good for a few laughs as well. Imagining the detail put into such a web design is breathtaking.

You can recognize each piece and understand how it ties into the overall site brand. Even the buttons and text areas have additional creative effects added to them.

Keeping content where it belongs will help your readers decipher what you’re trying to say a lot faster. Easy-to-read paragraphs with large enough font sizes and plenty of spacing is essential — simplicity at it’s best.

Another concept to take away from this example is the importance of typography.

Typography should match your illustration design concepts; they should be big, and almost pop out to your visitors — something illustrations and simpler structures can complement.

Implementing Your Illustrations into the Site’s User Interface

The next point I want to discuss is creating harmony with the site’s functions and the illustrations you use.

You can see this happening with Forrst, a new community for designers and developers for sharing code snippets and snapshots.

Although currently in private beta, you can check out their homepage with a flourishing background of trees and wooded areas.

In the foreground, you can see a park ranger parading around with a Forrst badge attached to his uniform. You can also see a brief description of the site and informative signs transposed on wooded backgrounds. This all adds to the ambiance of the site, including the clever "log in" log floating on what appears to be some sort of cloud.

And if that were all, you could consider Forrst quite the visual inspiration.

However, they push the use of illustrations further. You can go beneath the ground into the dirt below to see a sign up form. You can apply for membership quickly with just a few details, and the web form looks great.

A design like this can get complicated and will require plenty of skills. To produce this level of illustrative work could take years of practice in software like Adobe Illustrator to master, but they can be just the perfect touch in boosting your site design into the big leagues.

Never Use Illustrations Just for Aesthetics

Looking good is important. But adding design elements just to fancy up your site is the wrong attitude because a web design is a functional product.

All elements of your design should hold a purpose and have importance, including the addition of beautiful intricate illustrations.

Do you really need illustrations? How do they help meet your site’s objectives? These are a couple of questions you should be answering constantly as you conceptualize and execute your illustration ideas.

Sit down with a pen and paper to draft up ideas before even stepping into the digital world. This will help hash out a lot more ideas at once without locking yourself into the medium you use to design websites with.

Using similar ideas for inspiration can help a lot. CSS and graphic design galleries can be found everywhere. Go through a few and take notes on how their designs play out. Do they go a bit overboard compared to what you want? Maybe they don’t use color correctly? How does their content mesh with their illustrations?

Asking these questions will help get you on track. It’s always a long process when designing for the web. Keeping your designs in line with check and balances is a very handy skill to master.

The examples above are just simple ideas, but larger concepts can be implemented to realizing amazing results. Not everybody is an illustrator; I certainly don’t claim to be anywhere near an expert in creating illustrations like Brad Colbow or the guy over at Behind the websites. But with the power of Twitter and other networking tools, it’s not very difficult to meet very creative and talented designers from all over the world.

Your website’s design is a very important piece of the puzzle. It’s the part of a website your users can actually see.

Further Reading

Here are a few articles and resources on the topic of illustrations in web design.

How to Create an Illustrative Web Design in Photoshop

This step-by-step web design tutorial goes over the creation of a web design that has an illustrative landscape baked right in.

30 Creative Illustrative Website Headers

Here is a showcase of website headers that have illustrative design elements.

30 Beautiful Photoshop Illustration Tutorials

Not comfortable with Adobe Illustrator? This is a roundup of Photoshop tutorials to help you become a better illustrator.

30 Creative Examples of Illustrations in Web Design

Here is another showcase of web designs that feature illustrations.

Getting Comical with Brad Colbow

For inspiration, this is an interview of Brad Colbow who is both a web designer and an illustrator. By the way, check out his The Brads comic series, a comical look at the life of web designers.

Related Content

About the Author

Jake Rocheleau is a social media enthusiast and an Internet entrepreneur. Having spent over 4 years working freelance web design, he frequently writes articles involving new-age design concepts and personal motivation. You can find him all around the web via Google Profile or on Twitter as @jakerocheleau.

21 Comments

Brandon

August 26th, 2010

I love seeing clever illustrations incorporated in web design. It’s something I’ve always wanted to improve in, any tips from you illustration experts for illustration beginners?

Harry Marsch

August 26th, 2010

Nice collection.

Good to see there’s not too many interaction in the footers. Often see that, that sites paste too many important things there. In my opinion, they should either get rid of it, or put it on better places. Many SmashingMagazine lists got those thigns. Nice to see some more examples which are imo better.

Got one more for the list, not sure if it is good enough.
Saw some funny, bit witty drawings under this one, not very active website, but has funny drawings:

http://www.coffeealchemists.com/

cheers

Bret Juliano

August 26th, 2010

Great article. Worth the read.

jason

August 26th, 2010

Brandon – In my experience, the best way to improve is through consistent practice. A good site for honing your illustration skills is Illustration Friday – they have a weekly word that participants illustrate and submit. It’s a good way to see how others handle the same assignment and let’s you know there can be more than one good way to illustrate content. And simply doodling doesn’t hurt either;it’s a good way to have happy accidents that could turn into a signature style. Hope that’s useful. Cheers.

Nikola Dadić

August 26th, 2010

Awsome examples, so as article.

Theo

August 26th, 2010

Awesome post, you may say here to ( illustrations ) that less is more.

Jodi

August 26th, 2010

Sometimes I think using illustrations like these can also turn people off…like being a little to cartoon/child like. My experience is you should know who you want to target and what is the “image” your client is trying to portray when actually using illustrations for the web and other. This is a great article though and I certainly appreciate a good illustration!

Mandeep

August 26th, 2010

Very good article, I have noticed that my website looks very bland and needs some illustrations. I’ve been looking for articles like this for a while. Great post!

Pusparaj

August 26th, 2010

Worth reading article.

Hunter

August 26th, 2010

Great examples of how to get readers attention

Kolin

August 27th, 2010

Nice examples, I’m surprised you missed http://silverbackapp.com/ with this one!

Helen

August 27th, 2010

Searching for what makes illustrations “click” in the mind of our website visitors.

Cristiano Bunte

August 27th, 2010

Thanks for such a great article.
I really enjoyed your thoughts and also the content you recommended.

I’m totally involved in a project such as those, so this will be pretty handy.

Cheers from Brazil!

inspirationfeed

August 28th, 2010

Great article, a tutorial on how to design a custom mascot would be nice in the future ;)

Rafi

August 28th, 2010

I have been a true fan of illustrations being a designer myself. I have come across several people often thinking that illustrations are a part of comical conception and dilute the seriousness of a website / blog, but they can read this article and see how the concept of illustrations can be a very powerful instrument for a serious business. Wonderful one!!!

Craig

August 29th, 2010

Great article and very talented, nice post, One thing I thought is Forrst could change the cloud below the log-in into a birds nest to fit in the tree?

Jeorge Peter

August 30th, 2010

I love these graphics, though I’m sounding like a 7-year old but I believe that good fun illustrations have a good impact on readers. It makes the site more playful.

Benjy

August 31st, 2010

Some great examples there, I’ve used some illustrations on my own site in the past, but this has inspired me to get around to adding some more.

pigtimes

September 20th, 2010

These illustrations and cartoons are just simply gorgeous and I’d rather visit a site that is interesting and lively than one that’s dull and full of writing. Images are great, whether it be cartoons or photos help to break up paragraphs and give the reader something pleasant to focus on. I fully endorse your ideas!!

Eric

October 1st, 2010

I agree with the comment made by Jodi, but ti applies to all things creative. You need to know your target audience, and what they’re going to expect to see. If you’re building a community for designers, then yes, beautiful fanciful illustrations are fantastic. If you’re building a site to attract small business owners to develop their websites, illustrations may be perceived as unprofessional. YOU need to know YOUR audience. Always.

Great article. Very much enjoyed it.

Sachin Gupta

November 17th, 2010

Excellent examples of Illustration it’s works as tips, tricks & tutorial for us.

Thanks for sharing with us.

Leave a Comment

Subscribe to the comments on this article.