premiumpacks

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.

200characters00

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.

200characters04

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.

200characters02

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.

200characters03

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.

200characters01

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.

200characters06

  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.

200characters05

  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.

200characters07

  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.

200characters08

  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.

200characters09

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.

200characters13

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

200characters24

  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

200characters41

  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

200characters52

  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

200characters68

  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

200characters86

  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

200characters121

  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

200characters134

  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

200characters132

  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

200characters141

  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

200characters207

  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

200characters10

  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

200characters11

  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

200characters12

  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

200characters14

  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

200characters15

  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

200characters16

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

Studio7Designs

200characters17

  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

200characters18

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

Umbrella Today

200characters19

  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

200characters20

  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

200characters21

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

Viget Extend

200characters22

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

Villager Kent

200characters23

  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

200characters25

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

Radium

200characters26

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

Matriz Comunicaçao

200characters27

  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

200characters28

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

Postbox

200characters29

  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

200characters30

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

Infinite OZ

200characters31

  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

200characters32

  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

200characters33

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

Alex Buga’s Livingroom

200characters34

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

Daniel Marques

200characters35

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

Adlervia

200characters36

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

Pixlogix

200characters37

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

Cathedral City

200characters38

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

Kiwi

200characters39

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

Digiti

200characters40

  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

200characters42

  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

200characters43

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

BioShock 2

200characters44

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

I am Alive

200characters45

  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

200characters46

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

Haafe & Halph

200characters47

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

Beraterherz

200characters48

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

Shaun Groves

200characters49

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

Andy Ward

200characters50

  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

200characters51

  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

200characters53

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

CreamScoop

200characters54

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

Lataka

200characters55

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

Pieoneers

200characters56

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

Mamie Bouillabaisse

200characters57

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

i Avion

200characters58

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

Dean Oakley

200characters59

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

Envira Media

200characters60

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

D-F-Z

200characters61

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

Olive Crush

200characters62

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

Sara Tusar Portfolio

200characters63

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

Siringa

200characters64

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

Cow and Monkey

200characters65

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

Banjax

200characters66

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

ZZZ

200characters67

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

Drupalcon DC

200characters69

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

Adit Shukla’s Portfolio

200characters70

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

Go Glamping

200characters71

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

Custom Design

200characters72

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

Ushahidi

200characters73

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

Sweet Water

200characters74

  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

200characters75

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

Take a Benylin Day

200characters76

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

The Moxie Girls

200characters77

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

Eric Steuten Design

200characters78

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

Kira Kira Designs

200characters79

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

Owltastic

200characters80

  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

200characters81

  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

200characters82

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

Web Designer Wall

200characters83

  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

200characters84

  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

200characters85

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

Eutem

200characters87

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

Thousand Minds

200characters88

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

Stripes

200characters89

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

Douglas Menezes

200characters90

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

ReservoirBuzz

200characters91

  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

200characters92

  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

200characters93

  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

200characters94

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

Romina

200characters95

  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

200characters96

  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

200characters97

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

Carol Rivello

200characters98

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

ILoveColors

200characters99

  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

200characters100

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

Radu Ceucă

200characters101

  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

200characters102

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

Neweracaptalk

200characters103

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

45Royale Inc.

200characters104

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

Tangled Decals

200characters105

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

Gomediazine

200characters106

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

Vimeo

200characters107

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

BrightHouse

200characters108

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

Bogdan Teodorescu

200characters109

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

Vunky Blog

200characters110

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

Artua Design Studio

200characters111

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

TUT Candy

200characters112

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

Design19

200characters113

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

Concept 007

200characters114

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

FeedStitch

200characters115

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

The Happy Time Cafe

200characters116

  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

200characters117

  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

200characters118

  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

200characters119

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

WOW Toys

200characters120

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

Duirwaigh

200characters122

  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

200characters123

  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

200characters124

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

IndoFolio

200characters125

  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

200characters126

  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

200characters127

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

Tracy Chapman

200characters128

  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

200characters129

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

Zologicka

200characters130

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

Piipe

200characters131

  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

200characters133

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

Iii Garage

200characters135

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

VOB Nedir

200characters136

  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

200characters137

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

Hull Digital Live 09

200characters138

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

Carsonified

200characters139

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

Deborah Cavenaugh

200characters140

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

Robbin Waldemar

200characters142

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

The Digital Invaders

200characters143

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

Attack of the Web

200characters144

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

Galan

200characters145

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

Starbucks Coffee

200characters146

  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

200characters147

  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

200characters148

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

BlackMoon Design

200characters149

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

Pigeon & Pigeonette

200characters150

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

Pally Giraffe

200characters151

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

RobbVision

200characters152

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

Miki Mottes

200characters153

  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

200characters154

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

AnswerJam

200characters155

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

WPCoder

200characters156

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

Branded07

200characters157

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

Green Globe

200characters158

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

The Alamo Basement

200characters159

  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

200characters160

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

Old Loft

200characters161

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

Gertis

200characters162

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

Octwelve

200characters163

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

PSDRockstar

200characters164

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

Silverback

200characters165

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

Cute Little Factory

200characters166

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

Fatburgr

200characters167

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

Wishlistr

200characters168

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

Moourl

200characters169

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

PSD to WP

200characters170

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

Safe Driving Academy

200characters171

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

WebbliWorld

200characters172

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

Creative Spark

200characters173

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

Yodaa

200characters174

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

Sofitek

200characters175

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

Orman Clark

200characters176

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

Web Talents

200characters177

  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

200characters178

  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

200characters179

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

Creative Switch

200characters180

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

Mediocore

200characters181

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

MailChimp

200characters182

  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

200characters183

  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

200characters184

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

Global Zoo

200characters185

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

Communicator World

200characters186

  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

200characters187

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

Jill and John

200characters188

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

Creative Style

200characters189

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

Gisele Jaquenod

200characters190

  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

200characters191

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

Inspiredology

200characters192

  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

200characters193

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

The Color Cure

200characters194

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

Mochi Media

200characters195

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

Kung Fu

200characters196

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

Forrst

200characters197

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

Web Design Beach

200characters198

  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

200characters199

  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

200characters200

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

Made by Guerrilla

200characters201

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

Raskulls

200characters202

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

Pinjata

200characters203

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

Silverio

200characters204

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

Maxtron Media

200characters205

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

Stone Skipper

200characters206

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

Tijuana Flats

200characters208

  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

200characters209

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

Iceberg

200characters210

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

The Octonauts

200characters211

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

Stoodeo

200characters212

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

Yipori

200characters213

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

Smashing Magazine

200characters214

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

Iconshock

200characters215

  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.


Featured Deals


Related Posts


Related Lists