7 months ago


112 The Principles of

112 The Principles of Beautiful Web Design Whimsical Cartoon Style Marie Catrib’s site balances playful creativity with sophisticated craft, but what if you want more of the former than the latter? Using simplified illustrations, vivid colors, and a focus on imagery over content can help give your designs a childlike feel—what I like to call the whimsical cartoon style. If you’re designing for a target audience that consists of young children, the whimsical cartoon style is a great choice. An example of this is the site for Disney’s Club Penguin, 15 seen in Figure 3.33. If the interactive elements and animation on this page don’t grab a child’s attention, the coloring bookstyle illustrations and intense colors certainly will. Notice also the repeated use of rounded corners throughout the design, helping to tie the top navigation area into the rest of the site. Figure 3.33. Playful creativity at Disney’s Club Penguin 15

Texture 113 Another notable example of the whimsical cartoon style is the site for Pop Cap Games seen in Figure 3.34. Pop Cap publishes games like Bejeweled and Plants vs. Zombies. It’s capitalizing on this by populating the home page with characters from its games. Normally, cluttering a design with eye-catching graphics like this would be a huge distraction from the content. When your business is selling games, though, creating fun distractions is what you’re all about. In this particular case, the plants and zombies staring each other down helps to move your focus back and forth over the page, and perhaps encouraging you to actually read some of the content before going back to playing games. Minimal Texture Figure 3.34. Pop Cap Games Now that I’ve spent the entire chapter explaining texture and convincing you to add it to your designs, I feel obligated to let you know that sometimes texture is just unnecessary. Just as you might eliminate color from a design to create a specific effect, discarding texture may just be the best way to establish your site’s personality and character. Take Brian Nathan Hartwell's portfolio 16 site in Figure 3.35, for instance. There are no gradients, no rounded corners, no subtle noise textures… not even any boxes. 16

Layout and Design - In Easy Steps
Boot Camp
30 ways to create amazing web experiences on tablets
Download PDF -
The Complete Guide to a High Converting Website
PDF Specimen Booklet - Fontworks UK Ltd
Web Site Design & Usability Testing - HIPNet
Visual Design and Web Site Usability
Creative Services - Keiger Graphic Communications
slides - HTML5 Developer Conference