Web Design Critique #17: ToonyTuts
Every week we take a look at a new website and analyze the design. We’ll point out both the areas that are done well as well as those that could use some work. Finally, we’ll finish by asking you to provide your own feedback.
Today’s site is the ToonyTuts coming soon page.
2 Million+ Digital Assets, With Unlimited Downloads
Get unlimited downloads of 2 million+ design resources, themes, templates, photos, graphics and more. Envato Elements starts at $16 per month, and is the best creative subscription we've ever seen.
If you’d like to submit your website to be featured in a future Design Critique, it just takes a few minutes. We charge $24 for critiquing your design – considerably less than you’d pay for a consultant to take a look at your site! You can find out more here.
About ToonyTuts
Since ToonyTuts is the very secret project of Liam McCabe, very little is known about it at this point. From Liam’s personal site we can see ToonyTuts described as a place for “amazingly fun and creative tutorials.” I can only assume then that ToonyTuts will be an awesomely illustrated tutorial site with plenty of fun and humor to facilitate the learning process (great idea!).
Here is a screenshot of the coming soon page:
Some of our critique subjects are packed with content and take quite a bit of analysis but this page is both really simple and really attractive so there’s not too much to critique. As always, let’s break it down piece by piece.
Overall Design
The ToonyTuts design is well… toony. Bright colors, fun fonts, and heavily rounded corners all add to that great cartoon style.
The rays in the background draw your attention to the logo in the center and bring a sense of excitement to the design.
The Logo
The logo typeface is a perfect selection for the content. Notice that it’s definitely fun and toony but is still highly readable. The uppercase “T” characters are really the only letter that is significantly distorted with the vertical lines at the top being tilted into a diagonal form.
The part that really grabs your attention is the thick black stroke. This contrasts heavily against the blue letters with a subtle but attractive gradient. The stroke is also heavily rounded on the edges even though the actual letters aren’t. This is the real trick for preserving readability while conveying a fun, almost childish appearance.
The accent font under the logo is much more playful with distorted letter forms that look straight out of a Goofy cartoon. This type is kept small so the effect isn’t overpowering but done in just the right amount.
I love that a Twitter bird was thrown in here. It perfectly fits with the cloud motif and doesn’t seem like an afterthought at all. Those who are familiar with the Twitter brand will recognize the symbol and click through if they want to follow ToonyTuts.
Sneaky Peek
The little sign up field is where the rounded corners come into play. This area had to be functional and yet was made to fit in perfectly with the rest of the design. Note the splash of color used to catch your attention.
I like that the field has a shadow effect that makes it look inset while the button uses the same shadow in a different direction to look like it comes off the page a little. If these shadows were feathered they would bring a sense of realism that would clash with the rest of the design but they’ve been kept hard so that they adhere to the cartoony style.
The “Want a Sneaky Peek?” text is actually live and selectable. It’s a font called DoctorSoosBold implemented here with @font-face. I like the font choice but I don’t like the implementation of the shadow behind the text. The dark shadow is only slightly peeking out from the text and therefore makes the letters look a little messy rather than accomplishing its actual goal of increasing readability.
My suggestion is to bump this shadow out and down a little so that the text doesn’t look like it just has bits of black mixed in. .
Animation & Music
When you first load the page the animations start automatically. The clouds slowly hover up and down in an offset manner while the rays in the background spin clockwise.
Since the page is so simple, the animation effect really adds a lot to the experience. If you crack open the code you can see that webkit features were used to accomplish the animations so you won’t see them in other browsers.
I don’t see this as a problem in the least. If you view the page in a browser that doesn’t support the animations, it’s still perfectly functional and aesthetically pleasing.
I addition to the animation, there is a wonderfully circus-esque clip of music that starts when you hit the play button in the upper right.
It’s important to note that the music doesn’t start automatically. Tons of users, myself included, hate it when a website throws music at you whether you’re ready or not. If your speakers are cranked and you’re in a coffees shop, the ToonyTuts music would no doubt earn you some annoyed and confused looks from the people around you.
The little circle next to the play button stops the animation of the clouds. This is a good idea as well for anyone that either doesn’t like the look of the bouncing clouds or doesn’t want to waste the processor power. Strangely, hitting this button doesn’t stop the rays from rotating.
I think if you’re going to give the users the option to cease the animations on the page then you should make sure it covers everything, otherwise it seems a bit pointless.
On the whole, this page is an awesome piece of work and my critiques were mostly poking around at extremely minor aspects of the site. This is a great example of how you can have some fun with a “Coming Soon” design because of the limited functionality necessary. The more interesting your coming soon page, the more likely people are to share it and the more exposure you’ll earn!
Your Turn!
Now that you’ve read my comments, pitch in and help out by giving the designer some further advice. Let us know what you think is great about the design and what you think could be stronger. As always, we ask that you also be respectful of the site’s designer and offer clear constructive advice devoid of any harsh insults.
Interested in having your own site critiqued? You can find out more here.