Noupe Editorial Team September 21st, 2010

Showcase of Cartoon Style Web Designs

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!

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 Further Reading: (afb)

Noupe Editorial Team

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.

36 comments

  1. 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!

  2. 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”

  3. 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.

  4. 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!

  5. 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!

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

  7. 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!

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

  9. 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.

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

  11. We are a gaggle of volunteers and opening a new scheme in our community. Your web site offered us with useful information to paintings on. You have done an impressive job and our entire neighborhood can be thankful to you.

Leave a Reply

Your email address will not be published. Required fields are marked *