Go big, bright and bold to engage, entertain and educate.
Designing a website for children is a whole different ballgame to designing a website for adults. Unlike grown-ups, children aren’t looking for information on a website. They’re looking to have fun and to learn – engagement, entertainment and education – whether it’s games, videos, puzzles, stories or coloring-in.
How do you best design a website for those pint-sized people who are constantly seeking instant gratification? Forget the subtle functionality and restrained color palette. Now is the time to go big, go bright, and go bold.
Because if it’s not easy to understand, simple to use, and exciting to look at, children will be on to the next website, toy or game that can grab and hold their attention. So when it comes to designing websites for kids unleash your inner child, be age appropriate, and consider these trends and best practices.
01. DESIGN FOR DIFFERENT AGES
Targeting the specific age group of children is crucial, particularly as children become evermore web proficient. Research suggests that children are acutely aware of age differences and won’t engage with something they view as ‘too babyish’ and they will have difficulty interacting with something they find ‘too old.’ Thus, designing for children requires distinct usability approaches and narrowly targeted content.
Bright colors and sounds will capture the attention of children aged 3-5 as will cute characters, which are appealing to kids, and nature themes, which are familiar. Because these young ones haven’t yet developed their reading skills, text should be limited and kept to single words.
Peep and the Big Wide World uses all these elements to appeal to very young children with cute, colorful characters in front of a blue sky and green grass background. There are different sections for entertainment and learning and each are clearly marked with more lovable images and obvious titles that parents can help with.
Spot the Dog’s adventures have been popular with children since 1980. With images in bright, saturated colors and bold outlines, the Fun With Spot website offers young kids fun and familiar learning.
Children ages 6-8 like a little more challenge and to recognize they have moved beyond websites for younger children. Colors remain bright but with added depth; graphics and images become more dense or layered; and characters are more human-like. Typography should still be very simple and easy to read but with the challenge of more words.
Starfall is a website dedicated to teaching children to read. Its website has lots of images of animals, people and recognizable objects as well more tightly-spaced buttons and words that would be familiar to children aged 6-8.
Children’s television networks and shows have some of the best kids websites out there as producers are well tuned into how to engage, entertain and educate children. The Sesame Street website features its classic television characters and its layout has depth from shadowing and framed boxes.
Children aged 9-12 are increasingly proficient with the internet and are looking for websites that feel more grown up. While typography stays simple and color saturated, palettes become more complex and word structure more traditional.
The website for the books of much-loved children’s author Beverly Cleary has more realistic illustrations, sentences about the content of the books, and a palette that includes both saturated and muted color schemes.
Using a photograph of a girl in the target age range, the Build a Bear website instantly feels more grown up and is distinctive from those for younger children.
So now we’ve covered some general guidelines on websites for different age groups, let’s look at some of the specific aesthetic, functional and interactive features of designing websites for children.
02. AESTHETIC FEATURES
Use bright colors
More is more when it comes to color so use lots of vivid and vibrant colors to grab attention. Primary and secondary colors – red, blue, yellow, green, purple and orange – are all happy colors and popular options and color schemes can include all of them plus more. Make limited use of pastels and jewel tones or use in combination with saturated colors, such as the Beverly Cleary website above. Above all, have fun with color and consider breaking the rules because it’s all about engaging children’s attention.
These websites for Speed Kids and Moshi Monsters both use a palette of bright, saturated colors in the foreground with slightly less-saturated tones and gradients in the background. Speed Kids uses lots of primary and secondary colors with red, green and yellow dominating, while Moshi Monsters employs a more complex palette with various shades of pink, purple and brown. Both are lively and vivacious to attract children.
Create a happy mood
Children want a happy experience from a website, so just like the colors that are bright and ‘happy,’ the overall mood of the website should be too. Smiling faces, cheerful characters, energetic gestures and positive words will all contribute to an experience packed with fun and friendliness.
Children are very familiar with the Disney and Peppa Pig characters and on their websites every single one of them has a smile plastered from ear to ear. All the Disney characters are looking directly at the child – as if happy to see the children – while all the Peppa Pig characters are doing some form of activity, such as reading or playing with a ball. Active, energetic and engaged, these characters are models for the children.
Incorporate familiar elements
Using recognizable shapes appeals to children, especially younger ones, as it encourages and reinforces the learning process. Animals, shapes from nature and objects from around the home are all familiar and identifiable to children, as they comprise much of their visual and tactile world.
These very fun and busy websites have lots to look at and, although they are targeting different age groups, they both have familiar elements throughout. ABC Kids uses an image of a Ferris wheel to structure the website with bees, smiley faces, scissors and other basic identifiable objects adding color and life. The Nick Jr website is slightly more advanced with animated trucks and even an image of the Eiffel Tower.
Break with traditional structure
Designing a website for kids is your chance to break the rules when it comes to designing to a grid so try an unstructured layout that incorporates many focal points across and up-and-down the screen. Basically, give children’s lots to look at to keep their eyes and brains busy.
PBS Kids have a great range of websites for kids, each of them engaging, entertaining and educational. These two websites – Cyberchase and Design Squad – are examples of breaking the traditional structure of a website and providing kids with lots of focal points. Cyberchase uses depth and layers to highlight and bring attention to important features while Design Squad uses a flat plane and one-dimensional design for clarity of structure.
Create a world with depth
Creating a website with visual depth makes the on-screen world look and feel more real and is particularly relevant as children get older and become more familiar with how a typical website looks. Shadows, beveled effects, gradients and three-dimensions are used to form a more realistic vision.
These websites look like they’re ready for a kid to step right into. PBS Kids’ Oh Noah! website is a fun filled circus while Sveriges Radioapan is a fantastical environment with toadstools, monkeys and delicate flowers. Both sites use shadows, gradients and varying tones and shades to indicate depth and to create a three-dimensional world for children play in visually.
03. FUNCTIONAL FEATURES
Navigation, icons and call-to-action should be obvious
A website for children needs to be user-friendly so make sure the icons, navigation and call-to-action buttons are all very well considered. Use large buttons and graphics instead of text and make them obvious and oversimplified in order to clearly stand out. It’s also a good idea to undertake a usability test and watch how children navigate the site.
Keep in mind that children have more difficulty moving a mouse or sensitively using a touchpad or touchscreen, so, particularly for the younger ones, keep buffering distances and clickable areas larger to help minimize mistaken clicks.
Clear and oversized icons are easy to spot and easy to click on as these websites for CBeebies and Knowledge Kids demonstrate. The navigation icons are also marked with simple text and graphic images that relate to the content of each.
Keep typography simple
Typography needs to be kept as simple as possible, so a few key guidelines apply:
1) Always use sans serif fonts to make text as easy as possible to read
2) The typography palette should consist of only one typeface, maybe two for older children
3) Avoid typeface effects
4) Make sure letters and words are not obstructed
5) Use a color that will stand out against the background
6) Use 14pt font for younger children and 12pt font for older children
Children don’t need reading made any more difficult so clear and simple text is a must. Both these PBS Kids websites use sans serif lettering. Additionally, the Writers’ Contest website uses all white letters to stand out against blue, purple and green backgrounds while the text on the Between the Lions website has an outline for extra highlight and to distinguish it from the different colored backgrounds.
04. INTERACTIVE FEATURES
Develop a storyline
A story line will help to engage children and create a connection between them and the website. That story can be the focus of the website design, including the setting and characters, and it can be kept going across different pages, parts and interactive elements of the site.
Dr. Seuss is a master of story-telling and child-entertaining and the Seussville website calls on lots of Dr. Seuss’s story lines to amuse children. With animation and sound it’s all-engaging and interactive and will keep children (and admittedly adults) coming back time and time again.
Children love animated characters, especially happy, friendly, loveable characters. These may be newly-created characters or they may be familiar from television shows, movies or games (NB. Check all licensing rights before using trademarked characters or images). Give them a smile and make them large. You can even give them a voice or sounds.
These two websites use quite different character development. Club Penguin enables children to customize and name their penguin character, while Fireman Sam is based on the character from the popular children’s television show. Both are animated, happy and colorful to encourage children to stay on the website.
Use animation and sound
Engage and stimulate children’s senses with interactive sounds, music and voice-overs. The flashier and noisier the better (although parents might disagree after a while) while familiar sounds and noises are a good way for children to recall and reinforce what they know of the real world.
As you can imagine it’s a feast for the eyes and ears on The Wiggles and Bob the Builder websites with animated images, moving heads, colorful piano keys and speech bubbles, not to mention music. Unexpected animations and sounds maintain the element of surprise for children, helping to keep them engaged.
Incorporate videos, games and activities
Interactive features should be for the main purpose of entertaining and/or educating children. Videos, games and activities can all be used to enrich listening, reading, and arithmetic; and printable activities such as coloring-in sheets improve creativity, coordination and imagination.
The San Diego Zoo and ABC Kids Make and Do websites both provide children with activities they can do once they’re finished being on the computer or tablet. Crafts and coloring-in print outs will continue to keep them entertained and, based on the same themes and characters of the website, make for a memorable offline experience.
05. BE RESPONSIBLE
Young minds love to learn and a website is a great opportunity to make that learning fun and engaging. Educate and train youngsters with games and activities that incorporate learning, activities and puzzles and build in rewards, such as badges and levels, to encourage their achievement.
Math, reading, puzzles, and noughts and crosses are all fun and easy ways to engage children in learning as these websites for Funbrain and Mike the Knight demonstrate. Once they click into a category there are lots of different options that will keep them entertained and learning for hours (or at least, as long as they can last).
There are many reasons for parents to be weary of websites so it’s important to make them feel confident that the particular website is safe, secure and age appropriate. Include a section for parents that outlines the purpose of the website and provides parents with the necessary information they might need.
The ABC Kids and The Wiggles website both have a parents, or grown-ups section with information and resources for parents. Keeping parents in the loop is essential to providing their with a website they can feel confident with. Consider surveying parents to find out what information they want to read to ensure you’re hitting the mark.
Be mindful of the fact that children, especially the younger ones, can’t distinguish advertising and promotion from real content. Whether there is advertising will depend on the site, but consider the purpose of the website and whether or not it is appropriate.
Some advertising is clearer than others; and some is more appropriate than others. While advertising for a Mike the Knight app is appropriate on the Bob the Builder website the characters and colors do not make it entirely distinctive from the actual website content, and being busy and bright it will likely attract children – the goal of the advertiser but perhaps not of the parent.
While designing a website for children is a chance to break from the norms of designing a website for adults, it still comes with it’s own set of best practice guidelines. It is an opportunity, however, to think differently and to have a lot of fun. And for a general guideline just remember your Bs and your Es:
Big. Bright. Bold.
Engage. Entertain. Educate.