10 Great Samples of Illustrative Web Design

Barbie

http://www.barbie.com/en-us
Since this website is geared towards children, I really like the way it was designed and provides simple navigation. When each main screen cycles through, various pieces of the page swing down or pop up. This animation adds pieces to the picture and I feel like it makes the page more interesting to look at, but doesn’t go overboard by adding complicated animations on a children’s website.

Coca Cola

http://www.ahh.com/?WT.mc_id=Ahh2013
As part of Coca Cola’s campaign, they link to a website called, “www.ahh.com”, which has to do with the sound people make when they drink coke. This website is full of animation in various forms. Little boxes of illustrated letters fill up most of the screen and almost every letter is animated, such as the rocket that hovers as if it was flying. Many of these squares take the user into games that are Coca-Cola themed. I really enjoy these animations, because I think they do a great job at keeping the user interested, as well as thinking about the Coca-Cola brand.

Make Your Money Matter

http://makeyourmoneymatter.org/
This is a website that utilizes their animations in a great way. The whole site is dedicated to teaching people about money and credit union banks. From the style, I feel like it is geared a little more towards children or young people. Because of this, the animations work wonderfully. They engage the user by providing visuals to help the information sink in. Some of the financial wording may be confusing to those that aren’t familiar with it, so the animations and visuals used help to provide a way for someone to understand the information being presented.

Intacto

http://www.flatvsrealism.com/
The way each page changes is really interesting. I like that style for this particular website, because it is presenting information that has to do with artistic styles. The various animations make this site more fun to look at and keeps the user wondering what is going to appear next and how it will do so. I also think that while the animations provide interest, the information is still clean and clear.

Dunlop Tires

http://en.dunlop-tire.ru/company/
This website promotes a brand of tires called, “Dunlop”. My favorite part of the site is a section that reviews the timeline for these tires, starting in 1880. As the image shows, there is a small description of why the year is important to the company, as well as a visual for what the description describes. Next to this is a wheel that spins throughout each year, as if it was driving, as that user selects the different years in the time line. Overall, the design is clean and functional, while still being interesting to look at and search through.

The Eco Zoo

http://www.ecodazoo.com/
This website is a lot of fun. It is another site aimed at children and teaching them about living in a more eco-friendly way. The entire website relies entirely on animation. As the user clicks various buttons, the screen pans up to an animal in 2D style with drop-down to click on a story. When the user enters the pop-up book mode, the screen shows a book that actually has the animation of a page flipping and something popping up from it. I think the animations were done successfully, because they are fun and  easy to use, while definitely engaging children to click around the site and discover what else will happen when they do.

Game Boy

https://ihatetomatoes.net/happy-25th-birthday-game-boy/
This website is another scroll through site. As the user scrolls, the game boy performs various functions like switching on, zooming, and simulating the Tetris game play. I believe the purpose of the website was to celebrate a milestone for Nintendo. I enjoy this site simply because the animations are unique, but it is fun to continue scrolling in order to find out what the Game Boy will do next. These animations work, because they present an idea and it all shows the actual functions of the real hand-held console.

Lilia Planet

www.liliaplanet.com
I enjoy the various moving parts of this website. The little flying creature and the girl walking around, taking pictures are interesting to watch move around. The user simple hovers over the world and a different location pops up with a gallery of photos once it is clicked. It all has a great mix of fun animation with a functionality of viewing the images.

National Geographic Channel – Killing Kennedy

http://www.kennedyandoswald.com/#!/premiere-screen
The animations involved in this website are really fun. The entire purpose of this website is about President Kennedy’s assassination and the lives of both the president and Lee Harvey Oswald. To move through the site, the user simply scrolls down and a little melody begins to play and the screen is split into two halves vertically. Each moves separately until an image matches up and a bit of info is given on something about the topic. I feel like the animations make the content interesting enough to read and information is given in a specific order, so it is in a story form for easy understanding.

Wonderful Colorado

wonderfulcolorado.com
This site is for the state of Colorado. It includes a list of things to do around the state and seems to be aimed mainly at tourists. The entire sites includes a lot of animations. On the main page, a bird flies across the sky and then when the user clicks, using the mouse which is made to say “explore”, the skiier in the middle moves off screen and the page scrolls down to a list. More animations include a teapot on a button that says “Eat, Drink & Be Merry”, which seems to pour as it is hovered over, as well as a shelf of books which tip over when the “Stay Cozy Inside” button is hovered.