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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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!
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Further Reading:
(afb)
Nice roundup. This is one inspiration I’d follow. I must say, my next project would be cartoon(y)
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!
Safari warns me that visiting Joseph Payton’s website may harm my computer! Great portfolio Joseph LOL!
Really Inspirational, I was thinking to design my website that use cartoon
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”
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
Really nice, I love ! Merci pour ces très beaux exemples :)
How about http://www.tijuanaflats.com ?
I love cartoon website
Thanks
love it guys! great inspiration to have :)
Fresh article. I like and it is very inspiring.
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.
The inspiredology one is by far the best one. Love it
In Italy I know this: http://www.yeswebcan.it
Good list! What about http://www.nevermindthebullets.com ? :)
Nice list, some of those are superb! How about: http://hoopbot.com/ ?
All of us have to find more solutions to help save our earth. Good learning about this.
I have been working on http://www.kosherjoe.com – it actually is a cartoon too!
nice cartoon style website. Thanks :)
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!
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/
Very lovely collection.
Pixton.com is another great site for comics if anyone is interested!
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
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!
Awesome post.. thanks!!
Love these sites perticularly the Octonauts my kids are totally addicted to the TV series
A great collection here, we love the use of good illistrated drawings that are both entertaining and visually good to look at.
I’ll be creating a comic website and this is a good inspiration for the project. keep it coming!
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!
Really great site, will be sure to check in again!!!
Excellent collection. You can take a look as well to thecartoonexpress.com . Lots of hand drawn cartoons. Cheers.
Props for the entry.
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.
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.
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.