How would you like to design a beautiful, colorful, stimulating website that is captivating, memorable and allows you to let your creative juices flow without the need to worry too much about conventional usability and best practices? In today’s Web design market, it’s rare that such a project would present itself — unless you were asked to design a website for children!
Websites designed for children have been largely overlooked in Web design articles and roundups, but there are many beautiful and interesting design elements and layouts presented on children’s websites that are worthy of discussion and analysis. There are also a number of best practices that are exclusive to Web design for children’s sites — practices that should usually not be attempted on a typical website.
This article will showcase a number of popular commercial websites targeted towards children with an analysis of trends, elements and techniques used to help keep children interested and stimulated.
Design That Stimulates The Senses Link
Humans are mentally stimulated by a number of factors, and this is especially true with children. Successful children’s websites implement a number of elements and design principles that create an environment suited for a child’s personality and interests.
Bright, Vivid Colors Link
Bright colors will easily capture and hold a child’s attention for long periods of time. Although color choice is a primary factor in designing any type of website, this is especially true when designing a website for children since colors make a big impression on children’s young minds. Color choices and combinations that would likely be rejected or laughed at when designing a typical website may be welcomed on a website for children.
How many of the color combinations used in the screenshots below would succeed on a website aimed at an adult audience? Not many. So, when designing a site aimed at kids, use bright, vivid colors that will visually stimulate in an unforgettable way.
A Happy Mood Link
Kids will remember and return to a website if their experience is a happy one. Elements can be incorporated into the design to ensure that a cheerful, positive mood is presented.
Mickey Mouse Clubhouse5 creates a happy mood by making Mickey himself a visual focal point on the page. His happy face and body language help enhance this happy feeling, creating a welcome atmosphere.
Elements From Nature Link
Children are stimulated by recognizable elements that they can relate to. Because children’s experiences in life are limited, some of the things they are most familiar with are found in nature. Natural elements such as trees, water, snow, and animals are used in the websites shown below. In many cases, these elements are overemphasized through size or simplicity of design.
Larger-Than-Life Design Link
Large design elements have proved to be effective in all types of Web design, demonstrated by the fact that large typography, large buttons, and large call-to-action areas have become commonplace in modern design. Because children are naturally drawn to simple, obvious, and recognizable objects, websites designed for children will increase their effectiveness through the use of large design elements.
Animated Characters Link
Large, animated, speaking characters are a fascinating and captivating way to grab and hold a child’s attention. Many sites designed for children use this element effectively.
Depth in Design Link
Children like to let their imaginations run wild in a world that looks and feels real. This kind of atmosphere can be created through depth in design elements. This might include extruded shapes, shadows, landscapes, beveled effects, shiny gradients, or floating objects. Often, many of these elements are present in cartoon-like displays, as shown below.
Navigation and Call-to-Action Areas That Stand Out Link
In any website design, navigation and call-to-action areas should be focal points. Children’s website designers can oversimplify these areas so that children can navigate easily. Text-based navigation on children’s websites would not be as effective as large buttons and graphics, because they would lack visual focus on a page.
My Little Pony uses text-based navigation, creating a less-graphical experience, which allows focus on the content elements. This might be ideal in some situations, but on a children’s website a graphic-based navigation bar is more likely to be effective.
User Interaction Link
Probably one of the most important ways for a children’s website to succeed is to include elements that allow a child to interact with the site in some way. Children don’t want to do intense reading or research; they want to play and be entertained.
On a typical website, certain design elements are viewed as distracting, unusable, and cumbersome. On a child’s website, those same elements are viewed as an effective means of attracting users.
Interaction Through Animation and Sound Link
Roary the Racing Car47 has a brief “flash intro” with a “skip” button. This is an old-school trend in typical Web design, but is an effective means of catering to a child-based audience. The intro animates through a road until the characters appear on the horizon. This helps the user feel as though they’re personally entering Roary’s animated world.
Interaction Through Video Link
Television is known to captivate child audiences for hours, which is why “Saturday morning cartoons” have for decades been a lucrative part of the broadcast schedules for many TV Networks. Similarly, video on a child’s website adds a fun, interactive, and educational aspect to a site’s content.
Interaction Through Games Link
What child does not enjoy playing games? One of the most effective ways to entertain, educate or otherwise occupy a child on a website is to include a “games” section. Almost all the websites researched for this article include games that educate, stimulate, and allow direct interaction, while also incorporating many of the design elements already discussed. Below are some examples.
Disney Pixar’s World of Cars allows users to create, share, and race their own custom cars.
Printable Elements Link
Kids like to have something tangible to take with them, to help them remember their experience. Printable pictures and colouring pages allow kids to have a keepsake of their experience, while giving website owners an opportunity to enhance and promote their brand outside of the computer screen. Below are some examples of printable colouring pages on kids’ websites.
Thomas and Friends Online Colouring
Unconventional Methods Link
We’ve already discussed a number of elements that, in modern typical Web design, are now considered unconventional. Sound, animation, and large obtrusive graphics are often frowned upon in typical Web design. On children’s websites, these elements help the user experience. Other unconventional elements and design choices are discussed below.
Changing the Cursor Link
This is absolutely viewed as a bad practice in standard Web design, but can be a fun, effective way of adding a playful element to a kids’ website theme. This can be done using dynamic HTML, but is more often done via Flash.
The cursor on the Sesame Street7141 website is followed by a yellow star when it hovers over standard HTML elements, and turns into a yellow star surrounded by smaller animated stars when the cursor is moved over clickable Flash elements.
Talking Navigation Link
Sometimes a navigation bar will produce sound effects, but in other cases, the navigation links will sound out what they represent in a cheerful voice.
Breaking the Grid Link
While traditional modern Web design techniques have embraced the benefits and aesthetics of grid-based design, kids’ websites can break free from an overly structured layout to create a unique world that a child will enjoy experiencing.
This is not to suggest that using a grid as the basis of the design is wrong. It may be beneficial to start with a grid, then design elements outside the grid in a controlled manner. This flexibility in design and layout is demonstrated on a number of the sites already discussed, but is also evident in the navigation bars of the examples below.
Below are some examples of websites that utilize a more rigid, grid-based format, and as a result are not as unique, memorable, or captivating as some of those already considered in this article.
Taking Responsibility Link
If you are attempting to reach the minds and hearts of young, impressionable people through an online experience, you are entrusted with a weighty responsibility. Children are mentally fragile, and easily affected by what they see, hear, and touch. There are certain factors that need to be addressed on every children’s website, to ensure no harm is being brought to the children.
Promoting Education Link
Games and other interactive elements should be created not just to promote your company’s brand and identity, but to help educate and train young minds in a beneficial and positive way. Promoting education through games and activities will show that your company cares about the user and how their online experience might affect them in the future.
Information for Parents Link
Parents will be keeping a close eye on their children’s internet habits. Many children’s sites are aware of this, so they include information that is geared towards parents. Sometimes this is in the form of a tip, as is the case with the Sesame Street games website, or simply a navigation item that points to a parent’s section.
Sesame Street Games includes a “Parent Tip” box.
BEN 10 has a “Parent Stuff” link in their primary navigation bar.
Usability Testing Link
Finally, one of the best ways to help build a successful online experience for children is through watching children navigate and interact with your site’s games and other unique features. Not all companies will have the budget for extensive testing, but almost all will have the ability to do at least a minimal amount of testing — even if it’s with just one child. This will allow you to see the site through a child’s eyes and make any necessary modifications, the same as would be done in any usability tests.
Companies like Disney, Sesame Street, and PBS, of course, have been studying the behaviour of children for years, so many of the examples showcased above could be utilized to form the basis for a successful children’s website, even if no usability testing is done.
Here is a summary of both conventional and unconventional best practices for designing a website for kids:
Conventional Best Practices Link
- Create elements that are large and visually memorable
- Use bright, vivid colors that stimulate the senses
- Incorporate elements from nature
- Create depth in the design
- Add navigational elements that are large and easy to find
- Use video
- Include printable elements
- Break the grid
- Make modifications based on usability testing
Unconventional Best Practices Link
- Create a happy, playful mood
- Use animated characters
- Use graphic-heavy navigation bars
- Use Flash animation abundantly
- Embed motions and sounds that trigger on page load
- Include a “games” section
- Change the cursor to contribute to the theme
- Add voices to navigation rollovers
- Be accountable to both children and parents
A Web designer who has worked on a children’s website would likely say that it was one of the most fun and interesting projects they’ve had the privilege of working on. If you ever have the opportunity to create a user experience that is geared towards children, be sure to follow some of the proven methods demonstrated on many of the sites discussed here, and your website will have a good chance to be a big hit with children.
- 1 http://pbskids.org/
- 2 http://pbskids.org/
- 3 http://www.funbrain.com/brain/SweepsBrain/sweepsbrain.html
- 4 http://www.funbrain.com/brain/SweepsBrain/sweepsbrain.html
- 5 http://tv.disney.go.com/playhouse/mickeymouseclubhouse/index.html
- 6 http://tv.disney.go.com/playhouse/mickeymouseclubhouse/index.html
- 7 http://www.hasbro.com/playdoh/en_US/
- 8 http://www.hasbro.com/playdoh/en_US/
- 9 http://www.fifiandtheflowertots.com/
- 10 http://www.fifiandtheflowertots.com
- 11 http://disney.go.com/index
- 12 http://disney.go.com/index
- 13 http://kids.discovery.com/
- 14 http://kids.discovery.com/
- 15 http://www.clubpenguin.com/
- 16 http://www.clubpenguin.com/
- 17 http://www.cbc.ca/kids/
- 18 http://www.cbc.ca/kids/
- 19 http://www.popcap.com/
- 20 http://www.popcap.com/
- 21 http://barbie.everythinggirl.com/
- 22 http://barbie.everythinggirl.com/
- 23 http://pbskids.org/rogers/castle.html
- 24 http://pbskids.org/rogers/castle.html
- 25 http://disney.go.com/princess/
- 26 http://disney.go.com/princess/
- 27 http://www.thomasandfriends.com/
- 28 http://www.thomasandfriends.com/
- 29 http://www.barney.com/
- 30 http://www.barney.com/
- 31 http://www.webkinz.com/
- 32 http://www.webkinz.com/
- 33 http://www.poissonrouge.com/
- 34 http://www.poissonrouge.com/
- 35 http://www.rainbowmagiconline.com/
- 36 http://www.rainbowmagiconline.com/
- 37 http://www.peppapig.com/
- 38 http://www.peppapig.com/
- 39 http://disney.go.com/pooh/
- 40 http://disney.go.com/pooh/
- 41 http://www.sesamestreet.org/
- 42 http://www.sesamestreet.org/
- 43 http://www.paulysplayhouse.com/
- 44 http://www.paulysplayhouse.com/
- 45 http://www.hotwheels.com/
- 46 http://www.hotwheels.com/
- 47 http://www.roarytheracingcar.com/
- 48 http://www.roarytheracingcar.com/
- 49 http://kids.yahoo.com/
- 50 http://kids.yahoo.com/
- 51 http://www.cbc.ca/kidscbc/#/videos/
- 52 http://www.cbc.ca/kidscbc/#/videos/
- 53 http://kids.yahoo.com/movies
- 54 http://kids.yahoo.com/movies
- 55 http://kids.nationalgeographic.com/Videos/
- 56 http://kids.nationalgeographic.com/Videos/
- 57 http://www.bbc.co.uk/cbeebies/#/lb/gordonthegardengnome/gordonsgardeninggame
- 58 http://www.bbc.co.uk/cbeebies/#/lb/gordonthegardengnome/gordonsgardeninggame
- 59 http://disney.go.com/ToyStory/#/games
- 60 http://disney.go.com/ToyStory/#/games
- 61 http://www.pingu.net/ca/english/more_free_pingu_coloring_pages_for_free.htm
- 62 http://www.pingu.net/ca/english/more_free_pingu_coloring_pages_for_free.htm
- 63 http://www.crayola.com/coloring_application/
- 64 http://www.crayola.com/coloring_application/
- 65 http://www.peppapig.com/
- 66 http://www.peppapig.com/
- 67 http://pbskids.org/teletubbies/print.html
- 68 http://pbskids.org/teletubbies/print.html
- 69 http://kids.discovery.com/
- 70 http://kids.discovery.com/
- 71 http://www.sesamestreet.org/
- 72 http://www.sesamestreet.org/
- 73 http://pbskids.org/
- 74 http://pbskids.org/
- 75 http://www.bbc.co.uk/cbeebies/
- 76 http://www.bbc.co.uk/cbeebies/
- 77 http://www.bobthebuilder.com/
- 78 http://www.bobthebuilder.com/
- 79 http://www.fifiandtheflowertots.com/
- 80 http://www.fifiandtheflowertots.com/
- 81 http://spongebob.ytv.com/
- 82 http://spongebob.ytv.com/
- 83 http://tv.disney.go.com/disneychannel/hannahmontana/index.html
- 84 http://tv.disney.go.com/disneychannel/hannahmontana/index.html
- 85 http://www.inthenightgarden.co.uk/
- 86 http://www.inthenightgarden.co.uk/
- 87 http://www.kidswb.com/
- 88 http://www.kidswb.com/
- 89 http://www.crayola.com/
- 90 http://www.crayola.com/
- 91 http://www.neopets.com/
- 92 http://www.neopets.com/
- 93 http://www.sikids.com/
- 94 http://www.sikids.com/
- 95 http://www.fisher-price.com/fp.aspx?st=10&e=gamesLanding&mcat=game_infant,game_toddler,game_preschool
- 96 http://www.fisher-price.com/fp.aspx?st=10&e=gamesLanding&mcat=game_infant,game_toddler,game_preschool
- 97 http://www.funbrain.com/
- 98 http://www.funbrain.com/
- 99 http://www.thomasandfriends.com/
- 100 http://www.thomasandfriends.com/
Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.