Imaginary Use of Illustrations in Web Design

Following the current trends in the web design business, we have seen that illustration is becoming an important part of the entire design process of a webpage. We were used to see many minimalistic designs, slab typefaces and plenty of clean areas; but with the pass of the months, this trend is starting to change, leaving room to artists and designers to begin creating beautiful illustrations that can integrate and even become an essential part of interfaces.

On this countdown, you’re about to take a breathe of inspiration and see a huge collection of Imaginary Use of Illustrations in Web Design found on the internet during these days, maybe your website was featured if you have a great vein for creativity.

Every good designer that went through art school or just made his career as a self studier knows that the process of designing a website requires a series of elements that in good hands can recreate beautiful interfaces. Since the definition of the starting grid, the designer must choose a proper font, establish a color paletteand basically determine the whole aesthetics of the site.

Among these elements we find illustrations, which are the components that can really make a site to outstand in front of the rest.

Hopefully you like the post, Please don’t forget to subscribe to our RSS-feed, follow us on Twitter and like our facebook Fan page for recent updates.

OK before you start scrolling down across the entire showcase, let us tell you our personal recommendations, we selected the best illustrations in web design from each category, so you can have a gourmet selection for inspiration. We judged each illustration by concept, technical complexity, color management and eye-catchiness.

Imaginary Use of Illustrations in Web Design

Flourish

1. Flourish has one of the nicest illustration applications on a website. You can get realistic in many ways, for example by playing with weather effects as they did on the making of this astounding website, the tree element gets all the attention when you enter the site, and it’s not just a single illustration but 4, which is even nicer.

Diablo 3

1. One of Blizzard’s most anticipated games has also a great site featuring a powerful realistic illustration occupying an extended area of the site. The quality of this character’s artwork is just astonishing, and the general atmosphere of the site plays very well with it, by using a similar color palette and graphic elements.

Morphis

1. Everything goes along on this site. A classic vintage typeface accompanied by some retro vector illustrations. It’s a perfect interpretation of old school graphics. The color palette has been well chosen, the contact section has a lovely touch with the little mole staring at it, definitely a nice example of illustration in web design.

Level 2D

1. Stunning vintage design, this Flash-based website is a good example of how to use the vintage style and not getting old on the process; everything on this site talks about illustration, from the menu buttons to the clock, the designer did not left anything to the guess, you can tell that everything was carefully executed to make this amazing illustrated page.

Yoshinoya Singapore

1. Fabulous illustration, great character design, color selection and font design, for true that this is one of the nicest concepts of this roundup, it’s important to realize that the type-face selection is an important part of the design process, because just imagine how the site’s appearance will change if the central text was written in a regular Sans Serif font.

The Pixel

1. Astounding website, it’s not like it has an incredible interface, but the way that the gorgeous illustration integrates with the rest of the site is just brilliant. This shows you that brilliant airbrush paintings are not just meant to be used in galleries and cars, but they can also be integrated into a website with just knowing how to optimize it and taking advantage of it for the diagramming.

Scarygirl

1. Scarygirl’s site features and splendid background picture that changes depending on the part of the site that you’re navigating in. Definitely a beautiful Flash-based website that shows the great power that Flash still maintains, the quality of every single illustration featured on the page is just amazing.

The Great Bearded Reef

1. You can make vector artworks with gradients and everything and include textures on top of it without making it look strange, as it happens on this lovely site; it’s evident that without illustrations, this site would be dead, so that’s how important this person considers illustration, giving to it the leading role.

Lotie

1. Impressive site, the amount of hand drawn illustrations is just amazing and worth to see them. You can realize at simple view the amount of time that was spent on the conceiving of this page, even if it was made completely vector, the perfection of every detail and great management of white areas is astonishing.

Meomi

1. This entire site is an illustration, the quantity of details, subtle animations and color palette are just some of the nicest things of the page. Developed also in Flash, this let us know that many of the top designers around are still not ready to give up with their beloved ActionScript.

And now that you have seen our top selection, we invite you to read the rest of this post. We classified these illustrations into specific categories, based on technical level, concept, complexity and graphic style. We decided to classify the rest of this showcase in:  Realistic, Vintage Vector, Abstract and Conceptual, High End, Hand Drawn and Cartoon, we hope that this will aid you define the most appropriate styles for your projects and also to gather a lot of graphic inspiration during the process.

Realistic

This style is characterized by having precisely a very realistic look that crosses the limits of simple digital illustration. Among the parameters that determine the fact of an illustration being realistic we find the use of perspective, constrained proportions, a thoughtful application of light and shadows and most of all an intention of recreating reality, let’s take a look at some awesome examples.

Comcast Town

1. Welcome to Comcast Town, a enormous city where you will be invited to meet their people, take a ride across the streets and just have some fun.

Erguvan Platin Evleri

1. Find a tiny city model while surfing on this site, the design keeps the realistic to the top and even placed some animated characters inside of it.

Icreon

1. Well yes, this is not exactly a hyper realistic artwork, but the management of proportions and use of shadows and highlights took this site to this category.

84 Colors

1. Realistic can be used with subtlety and yet achieve nice results, as it happens on the side bar of Cristiana’s site.

K4 Laboratory

1. Well this is definitely not a realistic picture, but each one of the elements that integrate this illustration are realistic as taken by a camera (maybe they were).

Visit Cascadia

1. Using photomontage these guys created this nice landscape that it’s obviously not taken from a picture but from several.

Studio7Designs

1. The realistic side of this site comes from the background image, which is a recreation of earth’s appearance done digitally.

Marchand de Trucs

1. Awesome realistic illustration used as header on this magical site, literally speaking. Very nice airbrush artwork.

Umbrella Today

1. There’s no need of implementing a complete landscape to communicate the message, just some vectorial water drops and a realistic umbrella.

Serj

1. Stunning illustration, you can appreciate all the amount of details that were applied without even have to zoom in.

Viget Extend

1. Close-up of a garden’s cut with a few leaves joining the logo, everything pursuing a realistic appeal.

Villager Kent

1. These kind of montages are often seen at condo’s sales, because they can show people an idea of what they’re going to experience in the future.

Tolingo

1. What could possibly more realistic than utilizing a photograph on your website?.

Radium

1. The idea of realism is trying to imitate reality, but it’s acceptable if you use a little sparker colors.

Matriz Comunicaçao

1. A fancy scenery created with some of the classic elements found on any kid’s room and joined together through the photomontage technique.

Webdesignbe

1. Astounding octopus illustration, the amount of details is just incredible, making him look real despite of being not.

Postbox

1. Being realistic does not always mean that you need to utilize a large amount of details, as you can see on the postbox icon on this website.

The Oleg

1. As part of the FWA awards, this site is a beautiful example of how to use and animate real-life objects.

Infinite OZ

1. One of the most amazing websites around. This is a clear demonstration of a site that has been developed with the only objective of fulfilling a aesthetical purpose.

Hull Digital Question Time

1. On this design it’s evidently that there’s a respect for the perspective and light management, two of the main components of any realistic artwork.

1LY Design

1. An unusual employment of perspective, taking the whole site’s perspective from a zenithal plane.

Alex Buga’s Livingroom

[ad name=”bnr-middle-post”]

1. Really great website, this guy is letting us know all of his intimacy in a fun and creative way.

Daniel Marques

1. This kid really nailed it by making this site, a very authentic way of showing the world who he is.

Adlervia

1. Beautiful scenery, the book’s detail looks just amazing at the viewing.

Pixlogix

1. Besides of being a great realistic design, it can be animated when rolling over, which is nice.

Cathedral City

1. Strange but realistic, nice way of saying that their product can reach all the audiences across the UK.

Kiwi

1. Airbrushing is one of designer’s favorite techniques to create realistic elements such as this kiwi.

Digiti

1. Just a chair and the site was done, all the rest is not even close of being realistic but still look nice.

Tekken 6

1. Japanese websites, specially the videogame type, tend to use stunning realistic illustrations such as the ones seen on Tekken’s page.

Battlefield Bad Company 2

1. It’s hard to know how much is real and how much is digital on artworks like this one.

BioShock 2

1. One of the nicest videogame websites, BioShock 2 will definitely ensure a lot of sales thanks to this brilliant design.

I am Alive

1. Coming soon we will see the release of this new game by the people of Ubisoft, let’s see if it’s more than just a really good looking website.

Abstract and Conceptual

All those illustrations where creativity has been taken beyond the standards, delivering incredible and some times hard to understand artworks can be included within this category. We are talking about abstract every time we find illustrations that are definitely beautiful but it’s hard to understand their meaning, while conceptual are those artworks that require a careful observation to find the message. Both types have in common a richness in terms of aesthetics and a thoughtful design.

Eutem

1. Very funny concept, from the cars leading into the mountain to the smoking cat, really nice illustration.

Thousand Minds

1. Feels like staring at a Gorillaz cover, which means that the design is crazy and attractive.

Stripes

1. Nice way of mixing real life objects with colorful artistic brushes.

ReservoirBuzz

1. I don think that Mick Jagger will feel happy of seeing his tongue coming out from an old camera while some fingers are pointing at it.

Jaime Torres

1. Jaime Torres is a young graphic designer that recently released his personal site, showing the world some beautiful illustrations for the world to stare at.

Primstone

1. This Japanese site shows on its header some lovely illustrations that include an eagle and some other elements.

Ten24Studio

1. The circus has arrived, everyone is invited to visit it, along with these little pixel characters.

Vimeo

1. Vimeo has probably one of the most pretty footers around, simple illustrations full of concept.

BrightHouse

1. Full interactivity, this site truly understood the lesson of stop making static webpages during the web 2.0 era.

Bogdan Teodorescu

1. Cyan and magenta is one of the nicest color combinations when well applied, as it happens on this place.

Vunky Blog

1. The right side character it’s probably the coolest on this header, a sad looking Lego boy.

Artua Design Studio

1. Fantastic scenery, the trees, the spaceship, everything looks just great.

TUT Candy

1. The people from TUT Candy definitely have some knowledge regarding 3D design, as seen on their footer.

Design19

1. Mister and Miss Green Plantain look happy whilst hanging around on their island.

Concept 007

1. Interesting concept behind this webpage, you can feel a little Russian constructivism aesthetic on it.

High End

Well what can we say about high end illustrations?, they are on top of the top. Large amounts of details, colorful objects, really creative characters and just flawless designs that shows the level of illustration that these persons can achieve, let’s take a look at some examples to see if you can get a little inspired.

AutoMagical

1. Very intricate design, definitely the best part are those little monkey buddies.

WOW Toys

1. Based in Flash, the graphic level of this is just beautiful, kids will have a lot of fun visiting this page.

Duirwaigh

1. Fabulous illustration, it’s probably that the spent more time on the artwork than on the site’s programming, but it was definitely worth it.

Orange Label

1. Pixel perfect is a technique that not many designers dominate, as it requires a lot of patience and observation, but at the end you can achieve nice artworks such as this one.

Adam Woodhouse

1. It may seem easy to do, but having that control over color and vector is hard to reach.

Matt Salik

1. This guy has a well-defined personal style, the line trace, colors and textures are all part of the site’s powerful identity.

Tori’s Eye

1. A mix of origami and digital vector joined together, forming a really beautiful site.

Tracy Chapman

1. Tracy Chapman’s site is one of the most amusing places on the internet, because it lets you define the entire color palette of this site in a very simple and intuitive way.

Los Colores Olvidados

1. Brilliant cruise illustration, as well as the typography chosen and the color palette.

Zologicka

1. Really nice illustrations, a mix of reality and cartoon style that looks just awesome on the site.

Piipe

1. Lovely webpage, the fish character is an essential part of the interface, evidencing how illustration and web design can go by the hand.

ROTH ANIKO

1. This design portfolio is also a part of it by being a representation of this artist’s work.

Iii Garage

1. Combining photography and drawings could be a good idea if it looks the way it does on this place.

VOB Nedir

1. Brilliant idea, the design team behind this site came up with one of the most original and lovely ideas in graphic design.

Hand Drawn

For the people that have always loved the classic techniques, using pen and paper, making a mess with tons of oil painting or airbrushing the entire house, this is their section. On this part of the countdown we will reunite the best examples of old school techniques applied to the digital media, let’s take a look to those sites where the application was performed at its highest level.

Bootb

1. The site’s background works as a board where the designer took a chalk and drew over it.

Hull Digital Live 09

1. Sketching can be used as a finished art if well used, this is a great example of it.

Carsonified

1. Carsonified’s place is a mix of vintage vector and hand drawn techniques, and it does look nice.

Deborah Cavenaugh

1. Deborah’s place is just her, all her artwork is present across the site, empowering her identity.

Robbin Waldemar

1. Well it’s a little childish but we have to recognize his effort, good job Robbin.

The Digital Invaders

1. Only original and animated characters, the combination of red, black and white is always a great idea.

Attack of the Web

1. Oh yeah, this guy is ready to kick some butts while delivering an awesome website.

Galan

1. Hand drawn details always provide a lot of humanity to the standard and cool interfaces.

Starbucks Coffee

1. Starbuck’s site is one of the most remarkable places on the internet, the color management, the hand drawn style and just everything are exactly on the right place.

My Favourite Things

1. What happens when you use illustrations such as the one on this site is that you’re letting the world find out how you really are, which can be good if you’re making a blog or a portfolio.

Bruno Souza

1. You can scan your artworks and then beautify them by adding some fancy textures and shadings.

BlackMoon Design

1. There’s definitely a personal style behind this site, it’s not often to see places with this type of artworks.

Pigeon & Pigeonette

1. The site’s offering exactly what you can get throughout the entire interface, beautiful books featuring these two cute little birds.

Pally Giraffe

1. The watercolor technique can be seen on this beautiful header, this will probably be an inspirational place for many people.

RobbVision

1. This famous illustrator owns a gorgeous place where his illustrations take all the leadership.

Miki Mottes

1. Miki Mottes has a personal style that is very reminiscent of the nineties design, when everything was crazier and simpler.

Cartoon

The final style of this countdown is cartoon. Every illustrator and designer that chose not to place photographs on their site but at the same time does not want to spend hours and hours making stunning illustrations can solve this graphic problem making cartoons. Cartoons are those designs that are not based on reality and try to create a world of this own, almost every animated series can be classified as cartoon. Now we can proceed taking a look at the last series of examples of this roundup.

Artcore Illustrations

1. Cartoons are the way to express things the way we want, is playing with reality and creating fancy characters and scenarios.

AnswerJam

1. Vector can be utilized for creating lovely illustrations with a minimal amount of details, as you can see on this example.

WPCoder

1. So there’s a machine that actually turns Photoshop files into WordPress?, well at least it does on this land.

Branded07

1. Toucans meets penguins on this lovely character illustration by Rob Palmer.

Green Globe

1. Save natural resources, make more vector trees and landscapes.

The Alamo Basement

1. So that’s the real thing behind The Alamo story, well it’s for sure more fantastic and amusing than the original.

Isola dei Bimbi

1. Using cartoons usually works great when making child-oriented websites.

Old Loft

1. You can take reference from reality and then exaggerate or alter it to make your own world.

Gertis

1. Cute illustration, mixing vector gradients and solid colors usually makes great appearances.

Octwelve

1. Another great thing about cartoons is that you can portrait yourself without having to actually place a picture of yourself.

PSDRockstar

1. It’s important that your cartoons have a direct relation with the rest of the website, either by name or identity.

Silverback

1. Can you imagine a gorilla looking like this on real life?, it will be hilarious.

Cute Little Factory

1. Andrea Austoni launched a pretty looking website, the best part are the three little birds behind the site’s logo.

Fatburgr

1. Considered as one of Web 2.0 forerunners, this site certainly makes a nice appropriation of cartoons.

Wishlistr

1. The typography selection was a great right guess when placed next to the character illustration.

Moourl

1. Pastel colors are often utilized for social networks, internet services and friendly websites.

PSD to WP

1. Cartoons can be effectively utilized for representing fancy and colorful scenarios, such as the one on this example.

Safe Driving Academy

1. It’s not usual to find driving academy’s websites, and even less usual one with such a nice cartoon design.

WebbliWorld

1. This style is iconic in Japanese graphic design. Acid colors, rounded shapes and most of all, a lot of surrealism.

Creative Spark

1. Only 3 colors and this guys created this awesome cartoon, that’s the greatness of design, simpler things are often the greatest.

Yodaa

1. For those who illustration is their best way of expression, they can easily diagram their sites by illustrating them.

Sofitek

1. Almost naive, this type of illustration tends to slightly make the cut because they’re usually funny.

Orman Clark

1. Playing with subtleness and simpleness is something that every designer should try once in a while.

Web Talents

1. Once you dominate the Illustrator’s basics, it’s all a creativity matter, because this awesome illustration is not complicated at all

Arbel Designs

1. A good way to learn how to make this kind of illustrations is by looking at references, such as the Discovery Kids channel.

Yaron Schoen

1. You can also take real life objects and “cartoonize” them as they did with these chemical lab elements.

Creative Switch

1. Beautiful robot illustration by Vibor Viskovic, the vector management is really great on this site.

Mediocore

1. Crazy little mascot, just some gradient vectors and blending effects were utilized during the making.

MailChimp

1. This is one of the most famous chimps on the internet, maybe it’s his lovely messenger hat or just the carefully done vector job.

E-Space

1. Another thing that you can achieve with carton is use reality and alter it so it looks like it will never be on real life.

Birdbrain

1. Oh, we’ve just found Twitter’s bird little brother, he was hanging around on this website.

Global Zoo

1. Cartoons can be used to iconize elements, such as the world monuments that you see on this illustration.

Communicator World

1. Another good use of cartoon is in animation, lighter artworks and reduced effect help you to optimize the rendering times while animating.

Heidi Seymour

1. Cute penguin characters made with just a few gradients and solid color vector shapes.

Jill and John

1. Taking photographs and vectorize them is another way of generating cartoon illustrations.

Creative Style

1. American style is one of the most practical resources in web design due to its simplicity and beauty.

Gisele Jaquenod

1. Gisele’s site has a very innocent and lovely look, from the typeface to the color, complemented by the cute girl character.

Eric Johansson

1. One of funniest portfolios ever, Eric Johansson nailed design and personal branding in a single place.

Inspiredology

1. Amazing cartoon illustration, it may seem a little bit complex but it’s just a matter of being organized and creative.

A Modern Eden

1. Simplicity at its best, this lion is probably most beautiful than many airbrush paint jobs out there.

The Color Cure

1. You can become your favorite superhero cartooning, or what can you say about these two?.

Mochi Media

1. Hello Mochi, this lovely character was done probably in five minutes, the harder part was designing it.

Kung Fu

1. There’s definitely a Hello Kitty inspiration coming out from this character.

Forrst

1. Forrst has one of the nicest splashes on the internet, beautiful color palette and the Ranger character is simply great.

Web Design Beach

1. Grab some time to experiment with gradients, highlights and textures and you’ll probably end up making this like the header showed on the previous screenshot.

Hey Indy

1. You need to learn when to use stroke and when not to, on this case it was a clever decision to use it.

Fator Criativo

1. Rio de Janeiro is present on this illustration without a single photograph inserted on the site, nice one.

Made by Guerrilla

1. Mr. Ape his aware of your visit, so do not disturb or make any loud noises whilst surfing the page.

Raskulls

1. Here comes the Raskulls, the newest skeleton family in Xbox town.

Pinjata

1. There’s a little cell-shading look on this site, but done in a very childish way.

Silverio

1. Very intuitive design, a mix of sketching and vector trace that looks really cool on the site.

Maxtron Media

1. Take cover, the big blue monster is coming to town, and he’s willing to devour everything.

Stone Skipper

1. Boy and his dog, what a classic combination illustrated in a pretty cool way.

Tijuana Flats

1. Super retro website, there’s a lot of 90’s reference on this site’s aesthetics, it’s nice to see someone bringing back the old school style.

SketchBlog

1. Awesome character design, the darkness of the site is not looking as an error but as a right-guess.

Iceberg

1. It’s on this cases when is better to use a simple and elegant cartoon than a heavy photograph.

The Octonauts

1. Beautiful characters, there’s definitely a thoughtful design process behind the making of this little characters.

Stoodeo

1. Vector illustration offers a lot of freedom in terms of technical problems that are harder to fix while working with manual techniques.

Yipori

1. What a beautiful set of characters, vivid colors and just a peaceful environment sensed around the whole page.

Smashing Magazine

1. Awesome American illustrations, great job by the Smashing Magazine staff.

Iconshock

1. And the last item of the list comes from our great friends at Iconshock. The characters look just great with the global aspect of the website, they were also implemented on the site’s Twitter page.

And we have reached the end of this countdown, From the most realistic to the simplest and colorful designs, we have brought you a shot of inspiration that you can visit anytime you want to start a new web design project. Remember that there’s more than one style and it’s up to you to define which one is the fittest for your project, leave us your comments and suggestions so we can continue delivering the best web design contents on the web, see you in our next post.

Hopefully you like the post, Please don’t forget to subscribe to our RSS-feed, follow us on Twitter and like our facebook Fan page for recent updates.