The Art of using Illustrations in Web Design
There are many of elements that go into enhancing a web design project. Typography, new technologies and UX design patterns are only some of them. One the most powerful is illustrations and vector graphics. They can be handy in a broad range of applications. Remember the cliché, a picture is worth a thousand words? In using them, we designers are able to do more while spending less.
Illustrations are a good way to make a design unique and memorable. When they are used appropriately, users will associate them with your website, thus enhancing your brand. They also make the page more attractive, and draw attention to particular parts of the layout. They can also be informative or directive, such as to show steps in a process or how to use a service.
While most designers will use illustrations to supplement their design (for example using them for characters, landscapes and so on), others go so far as to base their entire layout on them. This can lead to problems, such as SEO and page-loading time, but such designs do look fancier.
Also, illustrations are ideal for humor. It’s up to the designer to decide what kind of illustration fits their needs. But they can be used effectively in some way in almost every project.
Illustration in Web Design
Below are some examples of how designers out there use illustration in different contexts, from commercial to personal. Enjoy and get inspired!
htmlMafia
htmlMafia uses appropriate illustrations (of mafia men) in the appropriate position (above the fold), just next to the list of prices and ordering button. The illustrations draw attention to the well-placed ordering button, the call to action on the website.
Webdesignbe
This is a good example of using illustration for branding. The focal point is the octopus, which catches the visitor’s eye right away. It also draws attention to the slogan just above it.
WPCoder
WPCoder’s website before they redesigned it was one the best examples of illustration in web design. The creative illustration made the company’s service the focus of the page, telling visitors everything they needed to know without the need for description. Also, the ordering button was subtly effective.
Brian Handley Design
An example of a design based entirely on illustration. If you opt for this approach, make sure your design conveys exactly the personality that you want; not all users are interested in spending time on fancy websites. The style seems to be well suited to portfolios.
TinyVerse
Great illustration like this could be the best case for convincing visitors to select you as their designer. It functions almost as a design sample, showing what we can do for others. Done properly, illustration is the most powerful demonstration of a designer’s abilities.
Sabina Nore
Another example showing off the designer’s ability in illustration. This person succinctly explains at the top what kind of work she likes to focus on, and the header beautifully shows the evidence of that.
Small White Bear
This gentle and funny design puts appropriate illustration as the focal point. The design has symmetry and guides the eye to the call to action.
Aka-Acid
Illustrations could be confusing or distracting, too. Aka-Acid’s illustrations are cute, but the lack of good navigation or a focal point makes the website hard to use. Illustrations are only a means to an end and should be used where appropriate, or else they could be counterproductive or even seen as obnoxious.
Piipe
The main illustration here is the center of attention and directs the visitor’s eye to the introductory text below and navigational items around it. This illustration adds a bit of fun to the design.
Polecat
Here is an example of thoughtful usage of illustration in Web design. Through its artistic illustrations, Polecat shows its unique process of making applications. Another funny idea is to use illustrations for the team’s portraits.
Interlink Dodgeball
Whenever possible, illustrations should be driven by some rationale. In this example, a chimp was chosen for the main illustration because of the tournament’s sponsor, MailChimp.
Inservio
Illustrations could be used merely to add fun to the design. Sometimes there is no need for complex or instructive illustrations.
WPactive
A simple and stripped down illustration in the header . The WordPress logo on the character’s t-shirt gives users an idea of what the product does at a glance. That is, this illustration works as a visual introduction.
StrawberryJ.am
The subtle illustrations tell users what they can do with the app and how to do it. It’s a beauty.
pixelGenio
One common way that designers use illustration is to show action behind the scene. pixelGenio does this beautifully.
UFO
This design is almost entirely illustration-based. While the illustrations are beautiful, they are a bit overused and could create page-loading problems for some users. Also, the page is far longer than normal. Still, the illustrations are astonishing and show off the designer’s abilities.
HTML5 Lab
Creative and interesting illustrations show the steps in HTML5 Lab’s service, serving as an introduction.
Bully!
The absolutely beautiful illustration here serves different functions: it’s the main focus of the page, it adds fun to the page, and via it tells visitors what the website is about.
BlackMoon Design
Alignment between illustrations and the company name comes in handy for branding and makes the design more memorable.
Logoman
Logoman has a funny and creative illustration in the right spot. The illustration relates to the company’s service in a humorous way. Good idea, good execution.
Stop the Vom
Stop the Vom’s illustrations are based on scenes and characters from the game it is selling. And engaging and informative use of illustrations that could be used in other such situations.
Tentacle
Tentacle’s layout and design are relatively simple, the most notable part being the illustration, which enlivens the design with its color, position and size. The illustration is also the focal point of the page; without it, the design would be heavily degraded.
Webideapond
This design relies entirely on its illustrations. The landscape drawing looks like a tableau with some text embedded in it.
Greater Dunnellon Historic Society
This illustration is not so much for fun or branding, but rather to map a real-life cityscape as a graphic. The design is fresh and brings the page to life.
Theo Thermometer
Using powerful illustrations in an otherwise minimal design can have two major benefits. First, it can serve as the main visual hook and grab the user’s attention. Secondly, it can enrich the design and make it more compelling. The website for Theo Thermometer takes advantages of these benefits. Imagine the design without the illustrations: it would be weak.
Find Something Missing?
While writing this article, it’s always a possibility that we missed some other great “Illustration in Webdesign” examples. Feel free to share it with us.
Hello all! Mohammad, thank you for sharing some inspiring and beautiful digital art creations and designs. Works for me.
It is really amazing collection of inspiring design: I am sure it help everyone who works in Webdesign Insdury. Thanks
I haven’t any word to appreciate this post…..Really i am impressed from this post….thanks for shared this with us… :)
HY Mohammad Moradi
your post is great and informative. you always bring something extra ordinary and new for me. thanks for sharing it with me.
Wonderful article! I just wanted to let you know that the link to Sabina Nore’s Flash site, the one you mentioned in your article above, is here: http://www.sabinanore.com/flash/
As an illustrator, I was delighted to read your post demonstrating the power and appeal of illustrations in web design.
You included some excellent examples– thank you, sir! : )
some great examples. Thanks
webideapond & inservio are beautiful, thanks for the collection Mohammad!
I absolutely love Bully!’s design. Some illustrations are so overpowering in their layout that it makes the whole thing awkward. But since it’s a focal point, everything just works in their site.
Very wonder to see such amazing illustrated web designs! thanks for the beautiful collection :)
Wow, exciting illustrations here, Loved by most designs here, i want to learn this type of illustration and enhance my skills like this. Good round-ups. Thanks
I liked HTMLMAfia. Nice post.
Nice list. But I only see English-language pages. So here are two German-language pages: droessnitz.de and naturpfade-jena.de
Some very nice examples, thanks.
amazing! this All collection it’s look great and isnpirational! it’s very suitable for the web design and entertainment
the goofy cartoons in a business environment will always attract my attention. really nice work on gathering this collection.
This is so great. I really love illustrations in webdesign. A modern feeling but still with a playfull touch!
You have a really amazing blog.. I love the design. I will be back when I need a new theme. You are bookmarked now..Thanks
the goofy cartoons in a business environment will always attract my attention. really nice work on gathering this collection.
This is a great list–lots of good inspiration here. I recently pulled together a similar list to explore the many different ways illustration can be used to bring a website to new levels. Take a look if you are interested! http://blog.stationfour.com/the-many-uses-of-custom-illustration-in-web-design/
nice list thanks