200 best 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 200 of the most astounding characters and illustrations found on the internet during these days, maybe your website was featured if you have a great vein for creativity.

Icon by Iconshock.

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 palette and 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.

Illustration Styles

Every graphic designer has a different way to solve things, and this applies to illustration too. While some guys have strong drawing skills, others prefer to use photography and collage to develop their artworks, but the point

As we know, illustration is everything that fulfills the objective of solving a communication problem in a graphic way. Focusing on the technical part of the theme, we can list 4 essential types of illustrations:

1. Realistic Portraits

These types of graphics works better on sites that are focused on non-digital services, such as clothing, beverages, food, vehicles and similar. Usually photographs cover a major part of the interface, showing people the products offered by the site as the most relevant part, followed by prizes and stuff. You can either choose to download pictures from a photography stock or hire a professional photographer to do the job; either way the designer will have the final word on how to use these pictures.

2. Drawings

For those websites that do not need to focus on showing their products to their clients but instead in developing a good looking website, filling with life every part of the page and even creating the company’s mascot. Usually these artworks are characterized by the presence of great amounts of vectorial art, 3D renders (not recommendable if you’re looking for a fast-loading site) and airbrushes. This is one of the most trending styles among kid’s websites, gaming places and design portfolios.

3. Digital illustrations

Very similar to drawings, digital illustrations are those artworks that are full of details. They’re usually photomontages and artworks that are made using more than just a single graphic software, we can say that this category is a mix of the two previous styles that we mentioned. Among the sites that utilize this style we can find videogame companies, movie sites and many of the most important brands in the world.

4. Collage

If you are a photography lover but don’t want to simply put picture after picture on a site, perhaps the solution is collage. This technique takes several pictures and joins them into a single artwork using different styles, from manual cut and pasting to digital intervention, this is a great style that may not work for elegant sites but will definitely rule when implemented inside sport, youthful and design webpages.

Best practices for illustrating a website

OK we have seen the main illustration styles and the fittest sites to implement them. But it’s not enough to simply know which style works best for you, because without a proper design and composition, you will only have a piece of art with poor navigability.

There are some basic rules that you need to follow when using illustrations inside a website, let’s take a short tour through these design commandments to complete our study case.

1. Identify your brand

Illustrations are not simple wallpapers that magically will make everything to look perfect, there are precisely called illustrations because they illustrate something, they’re signifying something, giving a graphic interpretation to a textual matter and that’s how they always must be utilized.

Let’s take for example the webpages Iconshock and Ten24. If you look at these two sites, you will see the good side of using illustrations within a place. It’s important that these illustrations help the visitor to enjoy a nicer experience and at the same time encourages him to come back to the site, by making him feel part of the whole aura.

1. These two websites have succeeded on placing their brand across the entire page by making a conscious design exercise where everything is integrated. In Iconshock’s case, the integration is performed by keeping an uniform color palette and a singular vector style, along with the presence of the same character on the top and the bottom of the site.

1. As for ten24media, it’s evident the color management, where a specific color palette was chosen and implemented across the entire site. You can see how the circus tent has the same color as the logo, that’s the first good practice, secondly we find the raising grass on the footer that connects the top and the bottom of the site. Finally the font color conserves its essence, making everything part of a global identity.

2. Utilize simple illustrations

What happens with simple illustrations is this: They are easier to work with thanks to its smaller size and color information, which fits perfectly on the internet world, they also allow people to place text blocks in almost every part of the site without jeopardizing the integrity of the design and finally, they facilitate the reading process for the visitors.

1. These two characters have the perfect style that combines simplicity and good design. These type of illustrations make the people feel better while visiting the website and at the same time they do not interfere with the navigation process. You can use vectorial programs like Illustrator to develop these good looking images.

1. Notice the simplicity of this illustrations. A subtle texture to beautify the grass, pixel-like characters and a vectorial tent that was done in less than 5 minutes for sure. That’s all the needing for an illustration to be eye-catching and simple at the same time.

3. Illustrations and interface must be one

Don’t take different directions for the interface and the illustrations just because you think so. If you want contrast then reach it by color or shape, not by style, that will look like a bad collage attempt by someone how couldn’t decide himself between illustrating or designing.

Friendly illustrations such as this one can make the audience feel more relaxed and comfortable regarding this particular site. The character was designed with some basic Illustrator tools and a very intuitive sense of color harmony, besides that we must realize that he’s not just placed next to the banner, but it becomes part of it by being the one that is carrying the banner. That’s why we mean when we say that illustration and interface must be one, a complete integration between these two aspects that can only beautify the content of the page.

4. Make sure that your site is the right one for that illustration

In web design everything is reciprocal, banners can work excellent along with text blocks, footers can match with search bars and of course that illustrations are also a important part of this soup. It could be an occasion when your staff decides that it’s imperative to use an illustration on the revamping of your company’s site, you are not sure about that but you decided to go ahead with the decision, to finally realize after the delivery that you were actually right and the illustration does not look well inside the revamped site. So what we want to tell you is that just because your site is not suitable for using illustrations it means that it’s going to be relegated from the rest, it’s just that you are maybe behind a more sophisticated site that can work with only typography and fancy boxes. Nevertheless, it’s probably that at least one of the 4 illustration styles will fit on almost any site during these days.

We suggest you to always look at references and see what’s going on in the web design, because it’s not only with good design that you can reach major audiences, but also being aware of the trending styles and trying to always stay up to date while maintaining your own identity.

Icon by Iconshock.

Now, let’s take a look at the best examples of illustrations in web design. It can vary from small characters to a whole illustration defining the site’s identity, but the thing is that these illustrations are playing an important role inside each of these sites, take some of your time to take a look at these examples and then think about if this could be the best way to plan your website’s design.

Our Top Selection

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.

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.

More great examples

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.

Justin Woods

1. You could vectorize all these leaves and place them across the site, or simply take some photographs, retouch and then place them as you wish.

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

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.

Vintage Vector

One of the most trending words of the last years, the vintage looking can be applied on different areas, from photography to fashion design, the vintage look is taking more force everyday among young designers. You can notice a vintage style based on the color palette, which is compounded by fabric tones, desaturated colors, classic typefaces and retro styles in general, let’s take a look at some sites that implemented vintage illustrations within their sites.

Giraffe

1. Here you can notice many vintage elements, from the color palette to the old school vignettes.

Haafe & Halph

1. Just by looking at the two characters and the site’s theme you have to notice the vintage aesthetics.

Beraterherz

1. Everytime you find this kind of illustrations, you’re looking at a vintage style, which is usually found over Pinup girls.

Shaun Groves

1. Quite a retro design, excess of elements, vintage color palette and handwritten typefaces.

Andy Ward

1. Andy Ward’s style gets a lot of inspiration from old school artists and designers, and that can be feel whilst visiting his webpage.

N.Design Studio

1. Koi fishes are classic among tattoo artists and pinup girls, and on this site you can see an example of vintage design using this red little swimmer.

Verlee’s Blog

1. Lovely color palette and typeface developing, Veerle is definitive a vintage lover.

CreamScoop

1. Beautiful character next to a clean and thoughtful typeface, more than vintage, this site is lovely.

Lataka

1. Inspired by the old school advertisements, you will find a lot of vintage references throughout this website.

Pieoneers

1. Lovely retro illustration, a mix of sci fi and fruit salad, I be there’s nothing more vintage than that.

Mamie Bouillabaisse

1. A lot of vector elements, surreal hummingbirds and a subtle vintage environment across the site.

i Avion

1. Almost monochromatic, this beautiful site is an example of how to be vintage without losing trendiness.

Dean Oakley

1. The vintage look on this site is given by its color palette, desaturated colors all over the place.

Envira Media

1. Beautiful typeface selection complemented with an correct color selection.

D-F-Z

1. Inspired by classic artworks, the little landscape featured on this site resemblances a lot of the vintage style.

Olive Crush

1. One of vintage’s features is the implementation of simple objects that overlap among each other.

Sara Tusar Portfolio

1. You can say about this site that it has some nice characters, typeface and color palette selection.

Siringa

1. Gorgeous illustration, flawless color picking and well, just a great vintage-looking website.

Cow and Monkey

1. Funny cow looking at you from a vintage sunset landscape, a well elaborated design.

Banjax

1. Clean and elegant site with just a simple piece on work located at the top of it.

ZZZ

1. The theater strings are simply a great detail, it makes some reminiscence of Lumiere’s work.

Drupalcon DC

1. Lovely vector style, Drupalcon has one of the prettiest designs around, also with vintage touches on it.

Adit Shukla’s Portfolio

1. Using well known landscapes inside web designs is something inspired by old school magazines and advertisements.

Go Glamping

1. It was usual to find handwritten fonts in old-school designs, now they’re coming back.

Custom Design

1. Super retro site, using an old TV picture as interface, this website is just great to have fun with.

Ushahidi

1. The colors, the drawings, everything on this site has a subtle vintage touch.

Sweet Water

1. The logo itself is vintage as it might get, it’s just too reminiscent of old sea food restaurants, but well implemented anyway.

Mark Forrester

1. Pale colors used properly can help you make brilliant artworks like the one Mark did on his site.

Take a Benylin Day

1. Beautiful vintage illustrations and thoughtful color selection, for sure that is a nice web design.

The Moxie Girls

1. If you saw Austin Power’s movies, you will really enjoy visiting this site and her retro-looking characters.

Eric Steuten Design

1. Fantastic vintage illustration, the textures, the characters, the color selection, it’s just an awesome web design by Eric Steuten.

Kira Kira Designs

1. Inspired by classic Japanese artworks, this vintage design welcomes people to this girl’s design portfolio.

Owltastic

1. If you want to have a vintage website, a good idea is start working with a cyan and sepia color palette, like the one implemented on this page.

Veboo Labs

1. It was usual to see this cartoon style a few decades ago, and now vector artists are revamping its style.

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.

New to York

1. Pure art, not even a single button or menu can be find, just this sweet piece of work.

Web Designer Wall

1. Web Designer Wall has one of the nicest interfaces over the internet. Cool vector objects and a beautiful color palette, which integrates across the entire site.

Hugs for Monsters

1. Joe Lifrieri’s site features a lovely illustration on the top of the interface, a lot of colors and shapes that together create a great abstract design.

R.I.P Club

1. One of the best things about this illustration is the color palette, the combination of cyan, red and white looks really great.

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.

Douglas Menezes

1. A little Bauhaus inspiration can be sense throughout the site, abstract shapes and minimalistic color palette are some of the determining elements.

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.

Siete de Febrero

1. Siete de Febrero is a design studio that knows that the first image is important, and that’s why they developed this great looking site.

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.

Romina

1. Many vector elements, placed in a way that they begin to work as graphic elements with an actual meaning, nice idea by Romina.

Candy Candy

1. Girly style molded to fit into this jewelry website, a lot of pink tones and gradients were used on the design.

Just Made My Day

1. An ordinary landscape with some photo retouching and vector elements incorporated.

Carol Rivello

1. The header designs makes a little bit of resemblance to cartographic documents and stuff, very cool idea.

ILoveColors

1. I Love Colors is a lovely Argentine website. Its design could be either featured on vintage vector or here, at the abstract zone because of its crazy shapes and elements.

Pixele

1. Pixel has some really nice shapes and elements on its header, a nice mix of clean vector and grunge brushes.

Radu Ceucă

1. A subtle bokeh effect, some vector shapes and a warm color palette, these are the ingredients to make a nice header for a website such as this one.

Ten24Studio

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

Neweracaptalk

1. Surreal character illustrations, reinforced by the fact of being created in black and white.

45Royale Inc.

1. Fancy scenery that mixes great vector elements and textures, all made using a nice color palette.

Tangled Decals

1. The entire site is an illustration, full of color and details and most of all complete abstraction.

Gomediazine

1. Using concentric objects is a recurrent resource in web design, as you can notice on the Gomediazine webpage.

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.

FeedStitch

1. What a creative idea to use vector elements to emulate a wool texture crossing the site.

The Happy Time Cafe

1. Using old school techniques for later incorporate them into web design can turn out into really great designs such as this one.

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.

Webdesigner Depot

1. Webdesigner Depot has a similar design that other sites implemented on their pages, but the carefully done objects, thoughtful color management and aesthetics put it on this category.

Web Designer Wall

1. Beautiful interface, the subtleness with which they were made is worth of admiring, as for the aesthetics, it has a little bit of Asian appearance.

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.

IndoFolio

1. It’s unusual to see illustrations like this one, seems like everything was made Photoshop’s Burn and Sponge tool, maybe it was.

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, more than 200 beautiful illustrations in web design. 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.