Sep 21 2010

Showcase of Cartoon Style Web Designs

Advertisement

By Peteris Kelle

Do you remember yourself as a kid watching cartoons all the time — even when parents didn’t allow you to? Most of us have watched cartoons and even now, as we get older, cartoons don’t lose popularity. Basically, cartoons are animated illustrations that are mainly designed for kids but which some adults also enjoy watching. Cartoons can be drawn by hand or they can be drawn on digital devices, too.

Web design is a creative art and that’s why cartoon elements can also be used for web design. Actually, a whole website can look like a cartoon. It’s an excellent method to help make your website look more friendly and cheerful. We have pulled together here a few websites which will hopefully be a source of inspiration for your own future cartoon style website!

[fblike]

Showcase of Cartoon Style Web Designs

Inspiredology
Inspiredology website has a well-made cartoon header background that draws immediate attention to the central point of the site content. The website’s dark background is seemingly brightened by the energy of the cartoon. A gradient effect is used in many places, but the whole design of the website looks neat and finished.

inspiredology website design

Attack Of The Web
Attack of the Web is a simple website with a simple layout and the action cartoon illustration in the middle of the page portrays a precise personality description of this website owner. The website integrates a light-to-use scroll-down navigation system.

attack of the web website design

Joseph Payton
Joseph Payton’s website has introduced cartoon illustration for web on a new level by using some easy tricks and creating a feeling of the third dimension. The large cartoon portrait of a designer and the clean user-friendly page layout creates a wholesome effect. Various types of Photoshop brushes are used to bring to life the design of this page and make it feel fresh.

joseph payton website design

Alan Rickman
Traditional black and white color selection never gets old, especially when the main attention is drawn to world renown film characters. Dark color interaction with earth colors creates a simple yet sophisticated look for this website. Well defined information and bold illustrations makes it easy to get absorbed in this website.

the many faces of alan rickman website design

Cog’aoke
While grid texture effect in web design is nothing new, what’s refreshing in the Cog’aoke website is the use of the grid texture set behind a bold and bright cartoon illustration. This dynamic illustration on the left side is counter-posed to colorful photographs on the right side making for an interesting composition.

cogaoke website design

David Hellmann
While many designers may think that this cartoon illustration of the designer might be walloping and takes up too much space on the page, with this character, David Hellmann actually points out quite well the importance of the interaction between a designer and his/her clients. Taming it a little, the matte color combination of a calming blue and a steadfast brown makes for a slightly more corporate feel of the webpage.

david hellmann website design

Super Landing Page
Super Landing Page’s website is very much linear-based. Designed using a vivid yellow background together with Superman cartoon, the website delivers the first impression of excitement and power. What is then simplicity in coding is also generous in colors.

superlandingpage website design

BirdBoxx
The BirdBoxx website (or rather “coming soon” page) is simple and aesthetic. A pastel color palette creates a comfy feeling with a detailed illustration of a bird sitting in a tiny house.

birdboxx website design

Natrashka
Natrashka website has all the elements of a scrapbook-like page. Handwritten font in combination with Arial font creates a modern look. Collage-type cartoon illustrations give the impression that all elements were taken from different places and combined in one sporadic design. The pale blue monotone color palette is broken up by dark grey contour lines. The design then actually looks fresh and well composed.

natrashka website design

Somos La Pera Limonera
With the bright color combination of lime green and baby blue, the Somos La Pera Limonera website stands for green design. Their Eco beliefs are illustrated well via a beautifully-drawn cartoon of people watering a tree. At first the design of this website looks quite simple, but it filled with symbolism. The tree represents their web design company and the fruits are the results of their work. The vertical navigation is easy to use and every sub-page opens in a pop-up window with some interesting horizontal and vertical scrolling interaction.

somos la pera limonera website design

Kidd81
The Kidd81 website, which actually first appears as a chaotic explosion of colors, icons and illustrations, is actually a well organized project. The showy colors certainly create an eye-catching webpage. On further investigation though you will find a nice JavaScript framework that allows you to drag some of the words and icons over the page in order to create your own dialogue.

kidd81 website design

Miki Mottes
Miki Mottes’ website prefers to speak completely through cartoon illustrations rather than words. As an animator and illustrator, Miki Mottes has created a truly impressive amount of illustrative works that are used in combination with various cartoon-style Flash animations. Additional sound effects certainly give the impression that this website is alive and you are right there in it!

miki mottes website design

Stickermule
A vibrant orange background and a collection of illustrations in the header demands your attention straight away on the Stickermule website. The monochromatic color scheme affords a modern look and feel and the light modular navigation makes it very user-friendly.

stickermule website design

Octonauts
Octonauts website combines traditional design rules, such as centric composition and symmetry, with modern elements. A navy-blue patterned image repeated along the X and Y axes creates a stylish website background. The Flash animated cartoon illustration in the centre brings a fresh breeze from the ocean underworld into the design.

octonauts website design

GetMeFast
GetMeFast website, through using cartoon illustrations, creates a fun and adventurous feel about the page. The simple design makes it possible to present more information without frustration. The page content is well structured with borders and icons.

getmefast website design

Squared Eye
This website may not be as flashy or inspirational as is expected from a cartoon website, but its pleasant pastel color palette certainly creates a calming space. This is a user-friendly website with a portfolio slideshow that provides the main information needed. The various block-serif font sizes also makes this website more cartoon-inspired in look and feel.

squared eye website design

Fatburgr
Dishing up a cartoon illustration of a child eating fast food, the Fatburgr website pays regard to importance of obesity problems. Although the site content might be a “heavy” read, the simple and airy design with light blue and white gradient background creates a good balance in the website. A comic style font creates a fun and playful atmosphere.

fatburgr website design

Moshi Monsters
Fine cartoon illustrations and flash animations is what this game website uses to attract new players – first, let them get to know the game characters and then new members will join. One click on the game characters in this site and you are able to hear some pretty cool sound effects. The illustrated scene of houses, trees and sea in the background creates a vastness of space.

moshi monsters website design

Hutchouse
The dark blue background and mixture of different Photoshop brushes here creates a modern and eye catching website. Two cartoon illustrated giraffes symbolize the Hutchouse logo. According to four categories – “Space”, “Jungle”, “Night” and “Depth” (found in the upper right-hand corner of the website) – the website design changes its appearance. The image slideshow provides easy navigation of latest information.

hutchhouse website design

Francie Pants
Bright colors, rounded corners, sassy font style and cartoon illustrations of different types of girls – these are the methods employed by Francie Pants website to show that it is a site meant for females. Simple, but sophisticated design.

francie pants website design

Designzillas
Designzillas website has multiple textures including rough leather, concrete and claw scratches to break-up the dark background of the website. Bright green, yellow and orange create a good combination of colors for highlight. Rollover images are well-suited for small-scale presentations to show some valid information.

designzillas website design

Vedin Kids
Vedin Kids website is reminiscent of a handmade board where drawings and different information have been stuck with scotch tape. A pastel color palette and small illustrations sketched by children fosters this positive and calm online presence that children can inspire. Vertical navigation at the left and right is created like a note paper and highlighted with pale pink and blue – which is a rather good design tool to draw attention out from the mostly wash-brown background.

vedinkids website design

Knowtebook
Two cows sitting and playing cards – this is a scene that we don’t see everyday, but Knowtebook website has an explanation for this cartoon illustration. The illustrated scene depicts everything this blog is about – communication, freedom of ideas, positive attitude and learning opportunities.

knowtebook website design

Happy Webbies
Happy Webbies website takes the next step in using cartoon icons as essential communication tools by bringing them into the middle of the page and letting them speak for themselves. A simple page layout and white background is well suited for the colorful ‘T-Shirt’ icons.

happy webbies website design

Made By Guerrilla
Roughly made cartoon illustrations and additional smudges is what gives the Made By Guerrilla website a unique look. Traditional centric composition of the page layout is exaggerated by a cartoon illustrated gorilla that is staring right at you. The website has the nice added design feature – to help the gorilla stand out on first landing – whereby only upon hovering with the mouse over the navigation images are they highlighted.

made by guerrilla website design

Jihane Amal
Jihane Amal website has managed to create a both flawless and simple design. Even if we don’t know this foreign language, a cartoon illustration of a toddler, baby blue background and rounded corners assures you that this website is connected with children. The animation that is playing in an infinite loop adds a nice accent in the design. Bright green grass in the foreground of the website’s content creates the feeling that content is further behind the ground.

jihane amal website design

Gotta Get To Fowa
Gotta Get To Fowa website has quite successfully combined a photo of clouds with cartoon illustrated clouds. A black background contrasts with a Sky blue gradient header achieving a modern and cartoon style design. The finished look gives four icons that have Javascript tooltips with fade-in and fade-out animations.

gotta get to fowa website design

Fritz Quadrata
This very straight forward blog page layout is seriously brightened by three cartoon illustrated characters that give the impression of movement and action.

fritz quadrata website design

Danjoedesign
Solid grey background, a contrasting cartoon illustration of an owl in a military outfit and a simple font style points out clearly to users that web design is supposed to be clear and straight forward – just like in the military.

danjoedesign website design

Cute Little Factory
Cute Little Factory is a website of icon designer and illustrator, Andrea Austini. He has successfully added some cartoon illustrations in the header giving us immediately a glimpse of his skills and style. An eye catching and bright design.

cutelittlefactory website design

Crown
With cartoon illustrated candies, waffles and gift boxes around different houses, Crown website takes you immediately to a small town of entertainment. Flash animations are used in appreciable amount. Even such tiny animations as traffic light changes have been considered. Very detailed cartoon illustration with tooltips. For some however, the bright color palette and sound effects could make for confusion.

crown website design

CreamScoop
With a large blue cartoon illustration of a ‘creature’ plus multiple colors and a Javascript image slider that looks very much like a browser window, this website creates an illusion that the background of the website is the desktop of your computer. What appears simple is actually a sophisticated result.

creamscoop website design

Il Frutetto
This Il Frutteto website may look simple and ordinary, but it has successfully incorporated the logo into the general structure of the page layout. A clean country side view and a bright red apple, that also symbolizes a sun, creates a perfectly centered composition. The simplicity of the design ensures that the large illustrated logo provides clear general information.

campingilfrutteto website design

Best Mortgage Deals
Though Best Mortgage Deals is a company that presents the daily lowest UK mortgage rates, the sunny cartoon illustration depicting British country side exemplifies how even ‘boring’ business can seem fun and exciting.

best mortgage deals website design

Goin Nutty
Bringing users straight into a gaming atmosphere is the best way how to introduce them to a game. The Goin Nutty cartoon website offers desktop and iPhone wallpapers, designed in the same pastel earthy colors as in the game, to immerse visitors into what the game delivers.

goin nutty website design

(afb)

About the Author

The jungle is alive: Be it a collaboration between two or more authors or an article by an author not contributing regularly. In these cases you find the Noupe Editorial Team as the ones who made it. Guest authors get their own little bio boxes below the article, so watch out for these.

Homepage

Comments and Discussions
  • Alfie, 21 September 2010

    Nice roundup. This is one inspiration I’d follow. I must say, my next project would be cartoon(y)

  • RB, 21 September 2010

    Inspiredology is great! How about a real cartoon site – such as Caterwaul Studios?! My apologies for the shameless plug. As always, an appropriate and a well placed illustration can add immense visual interest to a website.

    Cheers!

  • Bram, 21 September 2010

    Safari warns me that visiting Joseph Payton’s website may harm my computer! Great portfolio Joseph LOL!

  • Arslan, 21 September 2010

    Really Inspirational, I was thinking to design my website that use cartoon

  • colecmc, 21 September 2010

    I recently did a hand drawn illustrated site for a day care (correctlydesigned.net/portfolio/p/?projectID=21) and I’m working another daycare site which will be similar but more “cartoony”

  • Scott, 21 September 2010

    Very good collection, thanks for the post. The “Many Faces Of” is a really entertaining both visually and in it’s content.

    I tried making an illustrated website a couple of months ago, have a look at http://scottcarmichael.co.uk/healthy/index.html

  • codeur, 21 September 2010

    Really nice, I love ! Merci pour ces très beaux exemples :)

  • James Holmeson, 21 September 2010

    How about http://www.tijuanaflats.com ?

  • Jireck, 21 September 2010

    I love cartoon website

    Thanks

  • Kevin, 21 September 2010

    Here’s a great one by Keebs: http://www.rhymeriot.com

  • Lee Gustin, 22 September 2010

    love it guys! great inspiration to have :)

  • Mohanraj, 22 September 2010

    Fresh article. I like and it is very inspiring.

  • Simon, 22 September 2010

    Thanks for this article. So often lately I’ve seen articles about the importance of minimalism in design, and it seems like fun, cartoony sites aren’t getting enough credit, or aren’t taken seriously. I’m happy to see that fun and cutesy still has some currency in the design world.

  • Nima Heydarian, 22 September 2010

    The inspiredology one is by far the best one. Love it

  • frankie, 22 September 2010

    In Italy I know this: http://www.yeswebcan.it

  • stArk, 22 September 2010

    Good list! What about http://www.nevermindthebullets.com ? :)

  • Hugo, 22 September 2010

    Nice list, some of those are superb! How about: http://hoopbot.com/ ?

  • Gerry Thom, 23 September 2010

    All of us have to find more solutions to help save our earth. Good learning about this.

  • Emmanuel, 23 September 2010

    I have been working on http://www.kosherjoe.com – it actually is a cartoon too!

  • oli, 24 September 2010

    nice cartoon style website. Thanks :) and here some more cool cartoon art: http://www.cruzine.com/2010/08/26/animals-illustrations/

  • Andrew, 24 September 2010

    Great article Peteris! Thanks very much for including Inspiredology! We’re very happy with the way our header came out, and it’s great to see that others like it as well!

  • Seb, 28 September 2010

    I love these cartoonish web sites !
    And here is a very cool french designer website made with a comics. I love it : http://kevinhamon.fr/

  • e11world, 06 October 2010

    Very lovely collection.
    Pixton.com is another great site for comics if anyone is interested!

  • Rizky Syazuli, 02 November 2010

    we recently launched this comic book style website called Ionopolis. it’s an Indonesian based social media game. go check it out: http://bit.ly/cTd7Vq

  • android, 03 December 2010

    im seriously tired and tired of the battery on my phone going down so fast, seriously annoys the heck out of me, see what happens, find a good site and BAM my battery is dead, so yeah, i luckily had enough battery to read this and post the comment haha, i have no life. yay me!

  • Naomi Lucas, 08 January 2011

    Awesome post.. thanks!!

  • Blue Speck, 28 February 2011

    Love these sites perticularly the Octonauts my kids are totally addicted to the TV series

  • Brand Design, 08 March 2011

    A great collection here, we love the use of good illistrated drawings that are both entertaining and visually good to look at.

  • iamseventh, 16 March 2011

    I’ll be creating a comic website and this is a good inspiration for the project. keep it coming!

  • Friv, 17 April 2011

    Hi there, just became aware of your blog through Google, and found that it’s truly informative. I’m going to watch out for brussels. I will be grateful if you continue this in future. Lots of people will be benefited from your writing. Cheers!

  • sabrina, 27 April 2011

    Really great site, will be sure to check in again!!!

  • Andre Adams, 12 May 2011

    Excellent collection. You can take a look as well to thecartoonexpress.com . Lots of hand drawn cartoons. Cheers.

  • Marcelle Maddin, 18 June 2011

    Props for the entry.

  • Orlando, 19 August 2011

    Inspiredology has inspired me. Ive been working on this hobby site of mine, and the design has been bugging me. This is the direction I want to go. Very nice sites here.

  • ED, 27 June 2012

    I’m inspired…great works!

  • Good collection…. great inspiration :) I have also used my own caricature in my website but my website is very simple and minimalistic.

search form
 
image description image description