criação de páginas web Para as Crianças: Tendências E as Melhores Práticas

• 12 min de leitura
• Inspiração, Vitrines, Web Design, Crianças
• Compartilhar no Twitter, o LinkedIn

sites projetados para crianças foram amplamente negligenciados em artigos de Web design e roundups, mas há muitos elementos de design bonitos e interessantes e layouts apresentados em sites infantis que são dignos de discussão e análise. Há também uma série de práticas recomendadas que são exclusivas do Web design para sites infantis — práticas que geralmente não devem ser tentadas em um site típico.

Você pode querer dar uma olhada em artigos relacionados:

• Melhores Práticas Para Web Design Para Crianças
• design Para Crianças Não É brincadeira de Criança
• Concepção de Interfaces Web Para Crianças
• Um Pai Apelo Para que os Desenvolvedores De Aplicativos do iPad Para Crianças

Este artigo vai mostrar um número de populares sites comerciais dirigidas às crianças com uma análise de tendências, elementos e técnicas utilizadas para ajudar a manter as crianças interessadas e estimulado.

Design que estimula os sentidos

os seres humanos são mentalmente estimulados por uma série de fatores, e isso é especialmente verdadeiro com as crianças. Os sites infantis de sucesso implementam uma série de elementos e princípios de design que criam um ambiente adequado à personalidade e aos interesses de uma criança.

cores brilhantes e vivas

as cores brilhantes capturam e prendem facilmente a atenção de uma criança por longos períodos de tempo. Embora a escolha de cores seja um fator principal no design de qualquer tipo de site, isso é especialmente verdadeiro ao projetar um site para crianças, pois as cores causam uma grande impressão nas mentes das crianças. Escolhas de cores e combinações que provavelmente seriam rejeitadas ou ridicularizadas ao projetar um site típico podem ser bem-vindas em um site para crianças.

quantas das combinações de cores usadas nas capturas de tela abaixo teriam sucesso em um site voltado para um público adulto? Não muitos. Assim, ao projetar um site voltado para crianças, use cores vivas e brilhantes que estimularão visualmente de maneira inesquecível.

PBS KIDS

Herman Homepage

Funbrain Playground

Um Humor Feliz

as Crianças vão lembrar e voltar a um site se a sua experiência é feliz. Os elementos podem ser incorporados ao design para garantir que um humor alegre e positivo seja apresentado.

Mickey Mouse Clubhouse cria um clima feliz, tornando o próprio Mickey um ponto focal visual na página. Seu rosto feliz e linguagem corporal ajudam a melhorar esse sentimento feliz, criando uma atmosfera bem-vinda.

o site Play-Doh cria um clima feliz usando uma criança radiante como ponto focal.

o site Fifi e Flowertots tem um grande personagem flowertot sorridente em foco visual, criando um clima feliz.

Elementos Da Natureza

Crianças são estimuladas por elementos reconhecíveis que eles podem se relacionar. Como as experiências das crianças na vida são limitadas, algumas das coisas com as quais elas estão mais familiarizadas são encontradas na natureza. Elementos naturais como árvores, água, neve e animais são usados nos sites mostrados abaixo. Em muitos casos, esses elementos são superestimados pelo tamanho ou simplicidade do design.

o site da Disney altera seu tema dependendo do produto que está sendo promovido. Nesta captura de tela, eles usam uma paisagem semelhante ao Grand Canyon para criar uma experiência visual memorável.

Discovery Kids usa um tema subaquático.

Club Penguin apresenta um tema Ártico.

CBC Kids usa um tema sazonal baseado em gráficos simplistas e atraentes.

PopCap Games usa uma paisagem gramada na frente de grandes raios de sol.

Design maior que a vida

grandes elementos de design provaram ser eficazes em todos os tipos de Web design, demonstrado pelo fato de que grandes tipografia, botões grandes e grandes áreas de call-to-action se tornaram comuns no design moderno. Como as crianças são naturalmente atraídas por objetos simples, óbvios e reconhecíveis, os sites projetados para crianças aumentarão sua eficácia através do uso de grandes elementos de design.

personagens animados

personagens grandes, animados e falantes são uma maneira fascinante e cativante de chamar a atenção de uma criança. Muitos sites projetados para crianças usam esse elemento de forma eficaz.

Barbie

Mr. Rogers’ Neighborhood

Princesa da Disney

Thomas o Motor de Tanque

Barney & Amigos

> Profundidade em Design

As crianças gostam de deixar sua imaginação correr solta em um mundo que olha e sente real. Este tipo de atmosfera pode ser criado através da profundidade em elementos de design. Isso pode incluir formas extrudadas, sombras, paisagens, efeitos chanfrados, gradientes brilhantes ou objetos flutuantes. Muitas vezes, muitos desses elementos estão presentes em exibições semelhantes a desenhos animados, como mostrado abaixo.

o Webkinz “Centro de adoção” usa sombras, um personagem semelhante a uma vida e outros elementos tridimensionais para criar um design que tenha profundidade.

Poisson Rouge cria uma atmosfera profunda e realista usando uma janela que olha para o sol, junto com vários outros elementos tridimensionais.

Rainbow Magic cria profundidade em seu design através de uma cena de paisagem animada por Flash que se move à medida que o usuário paira sobre diferentes elementos.

áreas de navegação e Call-to-Action que se destacam

em qualquer design de site, as áreas de navegação e call-to-action devem ser Pontos Focais. Os designers de sites infantis podem simplificar demais essas áreas para que as crianças possam navegar facilmente. A navegação baseada em texto em sites infantis não seria tão eficaz quanto botões e gráficos grandes, porque eles não teriam foco visual em uma página.Peppa Pig tem uma barra de navegação horizontal que inclui ícones grandes e Descrições fáceis de ler para cada item.

o site Winnie the Pooh incorpora sua barra de navegação em seu tema “floresta”, usando grandes elementos gráficos de madeira que não serão negligenciados pelo Usuário.

Sesame Street tem uma barra de navegação horizontal fácil de localizar, juntamente com grandes áreas de call-to-action.

My Little Pony usa navegação baseada em texto, criando uma experiência menos gráfica, que permite focar nos elementos de conteúdo. Isso pode ser ideal em algumas situações, mas em um site infantil é mais provável que uma barra de navegação baseada em gráficos seja eficaz.

interação do Usuário

provavelmente uma das maneiras mais importantes para o sucesso de um site infantil é incluir elementos que permitem que uma criança interaja com o site de alguma forma. As crianças não querem fazer leitura ou pesquisa intensa; elas querem brincar e se divertir.

em um site típico, certos elementos de design são vistos como perturbadores, inutilizáveis e incômodos. No site de uma criança, esses mesmos elementos são vistos como um meio eficaz de atrair usuários.

interação por meio de animação e som

efeitos e experiências criadas com o Adobe Flash são desencorajados no design moderno típico da Web, mas em sites infantis quase não há outra opção. É verdade que a animação e os efeitos JavaScript percorreram um longo caminho por causa das muitas bibliotecas JavaScript disponíveis, mas a facilidade com que animações complexas podem ser criadas com o Flash torna esse método a primeira escolha para muitos sites comerciais projetados para crianças.

o site Playhouse do Pauly, como a maioria dos sites apresentados neste artigo, é construído inteiramente em Flash.

o Site Hot Wheels inclui um “carro do dia” animado que aumenta o zoom na tela quando a página é carregada, criando Interação visual.

Roary o carro de corrida tem uma breve “introdução em flash ” com um botão” pular”. Esta é uma tendência da velha escola em Web design típico, mas é um meio eficaz de atender a um público infantil. A introdução anima por uma estrada até que os personagens apareçam no horizonte. Isso ajuda o usuário a se sentir como se estivesse entrando pessoalmente no mundo animado de Roary.

o Yahoo! Kids navigation bar é criado com Flash e faz efeitos sonoros e anima quando seus itens são pairados sobre. Essa tendência é muito comum em muitos dos sites apresentados neste artigo.

a interação por meio de vídeo

a televisão é conhecida por cativar o público infantil por horas, razão pela qual” desenhos animados de sábado de manhã ” há décadas são uma parte lucrativa dos horários de transmissão de muitas redes de TV. Da mesma forma, o vídeo no site de uma criança adiciona um aspecto divertido, interativo e educacional ao conteúdo de um site.

Kids’ CBC – Video

Yahoo! Guia De Filmes Para Crianças

National Geographic Kids – Vídeos

Interação Através de Jogos

Qual criança não gosta de jogar jogos? Uma das maneiras mais eficazes de entreter, educar ou ocupar uma criança em um site é incluir uma seção “Jogos”. Quase todos os sites pesquisados para este artigo incluem jogos que educam, estimulam e permitem interação direta, ao mesmo tempo que incorporam muitos dos elementos de design já discutidos. Abaixo estão alguns exemplos.

CBeebies – Gordon Jardim Gnome

Toy Story – Woody Big Escape

Disney Pixar do Mundo dos Carros permite aos usuários criar, compartilhar e corrida seu próprio personalizado carros.

elementos imprimíveis

as crianças gostam de ter algo tangível para levar com elas, para ajudá-las a se lembrar de sua experiência. Imagens imprimíveis e páginas para colorir permitem que as crianças tenham uma lembrança de sua experiência, enquanto dão aos proprietários de Sites a oportunidade de aprimorar e promover sua marca fora da tela do computador. Abaixo estão alguns exemplos de páginas para colorir imprimíveis em sites infantis.

Pingu Páginas para Colorir

Crayola Digi-Cor

Peppa Pig para Colorir Páginas

Thomas e seus Amigos para Colorir Online

Teletubbies – Impressão A Cores

Métodos não Convencionais

já discutimos uma série de elementos que, no moderno típico de Web design, são agora consideradas não convencionais. Som, animação e grandes gráficos intrusivos são frequentemente desaprovados no design típico da Web. Nos sites infantis, esses elementos ajudam a experiência do Usuário. Outros elementos não convencionais e opções de design são discutidos abaixo.

alterar o Cursor

isso é absolutamente visto como uma prática ruim em Web design padrão, mas pode ser uma maneira divertida e eficaz de adicionar um elemento lúdico ao tema de um site infantil. Isso pode ser feito usando HTML dinâmico, mas é feito com mais frequência via Flash.

o cursor no site Discovery Kids se transforma em um gráfico snapping Bear trap.

o cursor no site Sesame Street é seguido por uma estrela amarela quando paira sobre elementos HTML padrão e se transforma em uma estrela amarela cercada por estrelas animadas menores quando o cursor é movido sobre elementos Flash clicáveis.

navegação falante

às vezes, uma barra de navegação produz efeitos sonoros, mas em outros casos, os links de navegação soam o que eles representam em uma voz alegre.

a barra de navegação PBS KIDS fala usando vozes infantis, quando o usuário paira sobre ela.

a barra de navegação CBeebies usa uma voz para soar o destino de cada item de navegação.

a barra de navegação Bob the Builder fala ao usuário no mouseover.

o Fifi e os Flowertots apresenta uma barra de navegação falando.

Quebrar a Grade

Enquanto os Web modernas técnicas de design, abraçaram os benefícios e a estética de grade baseado no design, as crianças de sites pode se libertar de um demasiado estruturado de layout para criar um mundo único em que uma criança gosta de experimentar.

isso não sugere que o uso de uma grade como base do design esteja errado. Pode ser benéfico começar com uma grade e, em seguida, projetar elementos fora da grade de maneira controlada. Essa flexibilidade de design e layout é demonstrada em vários sites já discutidos, mas também é evidente nas barras de navegação dos exemplos abaixo.

a barra de navegação no site Spongebob Squarepants é inclinada, indo contra a convenção em um Web design típico baseado em grade.

o site Hannah Montana apresenta gráficos de barra de navegação que quebram a grade.

o site In the Night Garden apresenta um design de barra de navegação muito incomum que tem pouca semelhança com o encontrado em um design convencionalmente estruturado.

abaixo estão alguns exemplos de sites que utilizam um formato mais rígido e baseado em grade e, como resultado, não são tão únicos, memoráveis ou cativantes quanto alguns dos já considerados neste artigo.

Kids WB é rígida, e não tão memorável.

o site Crayola é um tanto antiquado com seu formato de grade e navegação vertical.

Neopets também é projetado em uma grade mais estruturada.

concedido, em alguns casos, um design baseado em grade mais forte seria necessário se o público fosse um público infantil mais velho, como é o caso do SI Kids, mostrado abaixo.

assumindo a responsabilidade

se você está tentando alcançar as mentes e corações de pessoas jovens e impressionáveis por meio de uma experiência on-line, você é encarregado de uma responsabilidade de peso. As crianças são mentalmente frágeis e facilmente afetadas pelo que vêem, ouvem e tocam. Existem certos fatores que precisam ser abordados no site de todas as crianças, para garantir que nenhum dano esteja sendo causado às crianças.

promover a educação

os jogos e outros elementos interativos devem ser criados não apenas para promover a marca e a identidade da sua empresa, mas para ajudar a educar e treinar mentes jovens de uma forma benéfica e positiva. Promover a educação por meio de jogos e atividades mostrará que sua empresa se preocupa com o Usuário e como sua experiência on-line pode afetá-lo no futuro.

os jogos de Aprendizagem Online da Fisher Price incluem jogos que variam de acordo com a faixa etária.

Funbrain promove-se como “o Site de Educação #1 da Internet para crianças e professores K-8.”

informações para os pais

os pais estarão de olho nos hábitos de internet de seus filhos. Muitos sites infantis estão cientes disso, então eles incluem informações voltadas para os pais. Às vezes, isso é na forma de uma dica, como é o caso do site da Sesame Street games, ou simplesmente um item de navegação que aponta para a seção dos pais.

Sesame Street Games inclui uma caixa” Parent Tip”.

BEN 10 tem um link “parent Stuff” em sua barra de navegação principal.

Thomas O motor do tanque inclui um link “pais”.

testes de usabilidade

finalmente, uma das melhores maneiras de ajudar a construir uma experiência on-line bem-sucedida para as crianças é assistir as crianças navegar e interagir com os jogos do seu site e outros recursos exclusivos. Nem todas as empresas terão o orçamento para testes extensivos, mas quase todas terão a capacidade de fazer pelo menos uma quantidade mínima de testes — mesmo que seja com apenas um filho. Isso permitirá que você veja o site através dos olhos de uma criança e faça as modificações necessárias, o mesmo que seria feito em qualquer teste de usabilidade.Empresas como Disney, Sesame Street e PBS, é claro, estudam o comportamento das crianças há anos, muitos dos exemplos apresentados acima podem ser utilizados para formar a base para um site infantil de sucesso, mesmo que nenhum teste de usabilidade seja feito.

conclusão

aqui está um resumo das melhores práticas convencionais e não convencionais para projetar um site para crianças:

Convencional Melhores Práticas

• Criar elementos que são grandes e visualmente memorável
• Usar brilhante, cores vivas que estimulam os sentidos
• Incorporar elementos da natureza
• Criar profundidade no projeto
• Adicionar elementos de navegação que são grandes e fáceis de encontrar
• Uso de vídeo
• Incluir imprimível elementos
• Quebre a grade
• Fazer modificações com base no teste de usabilidade

não Convencionais Melhores Práticas

• Criar um feliz, brincalhão humor
• Usar animado caracteres
• Use gráfico-pesadas barras de navegação
• Usar animação em Flash abundantemente
• Incorporar movimentos e sons que provocam no carregamento da página
• Incluir uma seção “jogos”
• Alterar o cursor para contribuir para o tema
• Adicionar vozes de navegação rollovers
• Ser responsáveis para as crianças e para os pais

Um Web designer que trabalhou em um site para crianças dirão que foi um dos mais divertidos e interessantes projetos que tive o privilégio de trabalhar. Se você tiver a oportunidade de criar uma experiência de usuário voltada para crianças, siga alguns dos métodos comprovados demonstrados em muitos dos sites discutidos aqui, e seu site terá uma boa chance de ser um grande sucesso com crianças.