Designing websites for kids: Trends and best practices

Designing-websites-for-kids-04

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

01. ABCYA
ABCYA

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.

Ages 3-5

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.

02. Peep and the Big Wide World
Peep and the Big Wide World

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.

03. Fun with Spot
Fun With Spot

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.

Ages 6-8

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.

04. Starfall
Starfall

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.

05. Sesame Street
Sesame Street

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.

Ages 9-12

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.

06. Beverly Cleary
Beverly Cleary

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.

07. Build a Bear
Build a Bear

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.

08. Use bright colors
Speed Kids, Moshi Monsters

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.

09. Create a happy mood
Disney Junior, Peppa Pig

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.

10. Incorporate familiar elements
ABC Kids, Nick Jr

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.

11. Break with traditional structure
PBS Kids Cyberchase, PBS Kids Design Squad

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.

12. Create a world with depth
PBS Kids Noah, Sveriges Radio Radioapan

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.

13. Navigation, icons and call to action
CBeebies, Knowledge Kids

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

14. Keep typography simple
PBS Kids Between the Lions, PBS Kids Writers’ Contest

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.

15. Develop a story line
Seussville

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.

Develop characters

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.

16. Develop characters
Fireman Sam, Club Penguin

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.

17. Use animation and sound
The Wiggles, Bob the Builder

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.

18. Incorporate videos, games and activities
San Diego Zoo, ABC Kids Make and Do

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

Foster education

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.

19. Foster education
Funbrain, Mike the Knight

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).

Inform parents

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.

20. Inform parents
ABC Kids for Grown Ups, The Wiggles Parents’ Section

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.

Advertising

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.

21. Advertising
Bob the Builder

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.

YOUR TURN

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.