Contexto
Uma escola de 42 anos com um site que não a representava
A Escola Bedelândia atende educação infantil e fundamental I em Joaquim Távora, Fortaleza, há 42 anos. Oferece ensino bilíngue, cultura maker, musicalização, natação, lógica de programação e acompanhamento nutricional, além de sistema de tempo integral.
O site anterior foi montado sobre um template gratuito de Blogger. O rodapé ainda trazia o crédito do template, com caracteres em chinês no meio da assinatura.
A escola tinha muito a mostrar. O problema não era conteúdo, era que quase nada dele estava em um formato que alguém, ou algum buscador, conseguisse ler.
O desafio
O conteúdo existia, mas não estava acessível a ninguém
Auditando o site anterior, o padrão que apareceu não foi de gosto visual, foi de acesso à informação:
- Toda a proposta da escola estava dentro de uma imagem. “42 anos”, “Educação Infantil”, “Ensino Bilíngue”, “Ensino Fundamental I” e “Sistema de Tempo Integral” eram pixels, não texto.
- O texto real no começo da página se resumia a telefone, e-mail, endereço e os itens de menu.
- As seis atividades pedagógicas apareciam como uma grade de fotos sem rótulo. Nome e descrição só surgiam ao passar o mouse ou tocar, conforme a própria página instruía.
- O espaço logo abaixo do topo era ocupado por missão, visão e valores, ilustrados com imagens genéricas de banco.
- O único convite era um botão verde escrito “FAÇA JÁ SUA MATRÍCULA”, pedindo a decisão final antes de a família conhecer a escola.
Auditoria técnica
O que estava quebrado por baixo do visual
Antes de desenhar qualquer tela, rodei uma auditoria técnica e de acessibilidade nas duas versões. Nenhum destes itens aparece em um print, mas são eles que decidem se uma mãe usando leitor de tela, ou um pai que precisa aumentar a fonte, consegue usar o site.
| Critério | Site anterior | Novo site |
|---|---|---|
| Título principal (H1) | Nenhum. O documento começava direto em H2 | “Aqui, seu filho aprende brincando” |
| Estrutura de títulos | Seis títulos invisíveis do template: Top Links Menu, Main Menu, Header Background, Menu based on Icons, Section Background | Apenas títulos de conteúdo real |
| Texto alternativo das imagens | “Header Background”, “01”, “02”, “03”, e seis imagens sem alt algum | Descrição real em todas as 16 imagens |
| Idioma declarado da página | Vazio. O leitor de tela não sabe que o texto é português | pt-BR |
| Meta descrição | Ausente | Presente |
| Zoom no celular | Bloqueado por maximum-scale=1.0 | Livre |
| Altura da página | 13.774 px | 8.412 px |
O item mais grave é o zoom bloqueado: o site anterior impedia a pessoa de ampliar a página no celular, o que reprova no critério 1.4.4 da WCAG. Somado ao idioma vazio e ao texto alternativo inútil, o efeito prático é que uma família com baixa visão simplesmente não conseguia ler o site de uma escola. E como a proposta pedagógica estava dentro de imagens, nem o Google conseguia indexar aquilo que a escola tem de melhor.
A direção
As decisões que guiaram o redesign
A escola tinha 42 anos de história e seis diferenciais pedagógicos reais. A direção do redesign foi basicamente uma: tirar tudo isso de dentro das imagens e colocar em texto que qualquer pessoa, e qualquer buscador, consiga ler.
Transformar a imagem do topo em texto
O banner promocional deu lugar a um título de verdade, “Aqui, seu filho aprende brincando”, com o recorte de idade e as frentes pedagógicas logo abaixo. A mesma informação que antes era pixel virou conteúdo indexável, redimensionável e legível por leitor de tela.
Tirar as atividades de trás do cursor
As seis frentes pedagógicas passaram a ser cards com nome e descrição visíveis. Cada uma ganhou uma linha explicando qual capacidade desenvolve, e a seção abre dizendo que todas acontecem dentro da rotina, não como aula extra.
Responder a pergunta que a família realmente faz
Criei uma seção organizada por idade, de 2 a 10 anos, que descreve o foco de desenvolvimento em cada fase. Pai e mãe não pesquisam metodologia, pesquisam o que esperar quando o filho tiver quatro anos.
Trocar a matrícula pela visita
“FAÇA JÁ SUA MATRÍCULA” virou “Agende uma visita”, e a seção de contato abre com “antes de matricular, venha conhecer a escola”. Escolher escola é uma decisão longa e emocional: pedir a matrícula de imediato pula todo o processo de confiança.
Dar ao institucional o lugar certo
Missão, visão e valores saíram da posição logo abaixo do topo, onde ocupavam o espaço mais valioso da página com linguagem abstrata e ilustrações de banco de imagem. O que entrou ali foi a proposta pedagógica concreta.
Tratar acessibilidade como parte do desenho
Idioma declarado, zoom liberado, texto alternativo descritivo em todas as imagens e estrutura de títulos limpa. Em site de escola isso não é detalhe técnico: é o que define se a família consegue ou não ler a página.
Antes e depois
O que mudou, tela a tela
Cada bloco abaixo mostra um trecho da experiência com a leitura do que motivou a mudança. Alguns são comparações diretas; outros são camadas que o site anterior não tinha.
Abertura
A proposta da escola estava dentro de um JPG
O topo anterior era um banner promocional montado como arte, no formato de um panfleto impresso. “42 anos”, “Ensino Bilíngue”, “Sistema de Tempo Integral”: nada daquilo era texto, tudo era imagem. Por isso o site não tinha H1 e por isso o Google não tinha o que indexar. A nova abertura diz a mesma coisa em texto, sobre uma foto real da fachada da escola.
Metodologia
Seis fotos sem rótulo, e o conteúdo escondido atrás do cursor
A seção de atividades era uma grade de seis fotos sem uma palavra. A própria página instruía: passe o cursor ou clique nas imagens para ver mais informações. Ou seja, o maior diferencial competitivo da escola só existia para quem descobrisse que precisava interagir. No celular, isso significa seis toques. A nova seção mostra nome e descrição de cada frente sem exigir nada do visitante.
Inclusão
A pergunta que a família faz, organizada por idade
Nada no site anterior dizia o que muda entre matricular uma criança de dois anos e uma de sete. Esta seção descreve o foco de desenvolvimento em cada fase, do vínculo e da autonomia nas primeiras rotinas até a alfabetização plena e o pensamento crítico no Fundamental. É a tradução da proposta pedagógica para a dúvida real de quem decide.
Inclusão
Um convite para visitar, no lugar de um pedido de matrícula
O site anterior tinha um botão verde escrito “FAÇA JÁ SUA MATRÍCULA” e nada entre a família e essa decisão. Aqui entra um agendamento de visita que já pergunta o segmento de interesse, e a seção abre dizendo “antes de matricular, venha conhecer a escola”. Escolher escola leva semanas e envolve visitar, comparar e conversar. O site passou a acompanhar esse tempo em vez de atropelá-lo.
O processo
Como o projeto foi conduzido
- 01
Auditoria técnica e de acessibilidade
Antes de olhar para o visual, medi o que estava quebrado por baixo: estrutura de títulos, texto alternativo, idioma declarado, zoom e o que era texto de verdade contra o que era imagem. Foi essa auditoria que definiu a prioridade do projeto.
- 02
Extração do conteúdo preso em imagens
Transcrevi para texto tudo que estava dentro dos banners e escondido atrás dos estados de hover, que era justamente a proposta pedagógica da escola.
- 03
Reordenação e reescrita
Remontei a página pela sequência de dúvidas de quem escolhe escola, e reescrevi o conteúdo falando com o pai e a mãe sobre a criança, no lugar da linguagem institucional em terceira pessoa.
- 04
Protótipo de alta fidelidade
Construí a nova home como protótipo navegável, usando as fotos e os textos institucionais reais da escola, e sinalizando na própria página quais blocos ainda são conteúdo de exemplo.
O resultado
O que o site passou a comunicar
A entrega é um protótipo de alta fidelidade, e o próprio site declara isso no topo: logo, fotos, textos institucionais e endereço são reais, extraídos do site atual, enquanto nomes de equipe, depoimentos e parte do FAQ são exemplos a validar com a escola. O que já dá para afirmar é o que mudou na base.
- A proposta pedagógica saiu de dentro das imagens e virou texto legível por pessoas e por buscadores.
- As seis frentes pedagógicas aparecem com nome e descrição, sem depender de passar o mouse.
- A página passou a declarar idioma, permitir zoom e descrever todas as imagens.
- Existe uma seção que responde o que esperar em cada faixa etária, que antes não existia.
- O convite passou a ser conhecer a escola, e não fechar a matrícula de imediato.
- A página encurtou de 13.774 para 8.412 pixels, mesmo passando a mostrar mais informação em texto.