Sugestões de design para o teacherld
Testamos o site e a notícia no iPhone e no computador em 9 de novembro de 2026. Cada sugestão mostra a tela de hoje e uma versão aplicada por cima do seu próprio site, sem mexer em nada do que está no ar.
O que já está muito bom
- Na home e no teste de nível: nenhuma falha de contraste (a home também no modo escuro), nenhum texto abaixo de 13 px, todos os botões com 44 px ou mais e todas as imagens com descrição.
- Uma fonte só (Figtree) e uma paleta enxuta: o site tem cara própria.
- A manchete é forte e direta: “Você já sabe o que dizer. Falta dizer em inglês.”
- A questão de amostra já reserva o espaço da resposta, então o botão de baixo fica parado.
- O teste é limpo: uma questão por tela, botões grandes, “Não sei” separado e o progresso sempre visível.
As sugestões vêm das práticas que usamos nos projetos da Nobox e estão em ordem de impacto.
1. Uma marca só nos dois sites
Quem sai da home para a notícia troca de produto sem perceber o porquê. A notícia usa outra fonte (a do sistema, mais uma de código), outro fundo (um cinza frio), botões verdes em vez do laranja, e até as cores dos níveis mudam: o C1 é roxo no site e laranja na notícia.
Sugestão: usar na notícia a mesma fonte, o mesmo fundo e o laranja do site, com a sua foto no topo. Na primeira tela, os 4 níveis numa linha só, “Não sei meu nível” como link (hoje é o botão mais chamativo da tela) e o resumo já aberto, para a pessoa começar lendo.
2. Nada muda de lugar sozinho
Essa é uma regra fixa nos nossos projetos: a tela só muda quando a pessoa toca ou rola. Quem está lendo, ou vai tocar num botão, não pode ver o conteúdo andar.
- A vitrine da home troca de aba sozinha a cada 7 segundos, e cada aba tem uma altura (386, 420 e 494 px). Com a página parada, tudo o que vem abaixo pula até 109 px.
- Na notícia, o “Conferir” desce 71 px (ligar palavras) e 87 px (marcar frases) logo depois do toque, porque a resposta entra acima do botão.
- Na primeira tela do celular, a barra do WhatsApp cobre 93 px do cartão, bem em cima do “Fazer o teste completo”.
Sugestão: vitrine que muda só por toque ou deslize, com a altura da aba mais alta (testamos: o título de baixo ficou no mesmo lugar nas 3 abas). A resposta do exercício vai abaixo do botão (testamos: o “Conferir” passou a mexer 3 px). A barra do WhatsApp aparece depois que a pessoa passa do topo.
3. Rótulos sem cara de IA
Letra miúda em caixa alta, espaçada e em fonte de código virou a assinatura de site feito por IA. Na notícia são 13 rótulos assim e 19 textos em fonte de código, e 20 textos têm menos de 13 px (os níveis A2 a C1 estão com 9,9 px). O nome interno do exercício também aparece para o aluno: “marcar-corretas”, “gap-banco”.
Sugestão: título abrindo direto, sem etiqueta em cima, e rótulo em texto normal, como fazemos nos nossos projetos. Pelo mesmo motivo, tirar o travessão, que aparece no título da notícia e no rótulo dos degraus 3 e 4.
4. Mais rosto
Em aula individual, a pessoa escolhe o professor. Hoje a sua foto tem 44 px, o tamanho de um ícone, e os “500+ alunos” aparecem sem nenhum aluno falando.
Sugestão: foto de 64 a 72 px no topo e 2 ou 3 depoimentos curtos de alunos reais, com nome, cargo e empresa (ou só o cargo, se preferirem). A versão ao lado também mostra dois itens das outras sugestões: a barra do WhatsApp só depois do topo e o botão de tema com a lua.
5. No computador, duas colunas
No computador o site usa 560 dos 1440 px da tela (39%): vira um celular no meio de uma página vazia. E executivo abre muito link no computador, pelo e-mail e pelo LinkedIn.
Sugestão: a partir de 1024 px, manchete, provas e WhatsApp à esquerda; vitrine e caminhos à direita.
6. Tema: abrir no claro
Hoje os dois sites seguem o modo do celular. Quem usa o celular no escuro abre tudo escuro, e na notícia escura os botões ficam difíceis de ler: texto branco sobre verde-claro (contraste de 2,15) e sobre salmão (2,85), quando o mínimo recomendado é 4,5.
Sugestão: como no nosso padrão, a página abre clara e escurece só pelo botão, com a lua no modo claro e o sol no escuro. O laranja do site resolve os botões nos dois modos: 5,18 com texto branco.
7. A prévia do link
Colado no WhatsApp, no Instagram ou no LinkedIn, o link sai sem imagem, porque falta a og:image. As abas do navegador também ficam sem ícone, porque não há favicon.
Pronto para usar: a imagem de prévia já está no tamanho certo, com a sua manchete. Baixar a imagem (1200×630). O título também fica melhor sem o travessão, como na versão sugerida.
Lista para aplicar
Para quem for mexer no código. Tudo foi testado por cima do site, no navegador do teste.
- Notícia: fonte Figtree e fundo
#f4f3f1, iguais aos do site; botão principal em#c2410c; verde só para resposta certa; cores dos níveis iguais às do site (--lv-a2a--lv-c1). - Notícia: em
.kick, tirar a fonte de código, a caixa alta e o espaçamento; nada abaixo de 13 px. - Notícia: esconder
.ex-head .type, que é o nome interno do exercício. - Notícia:
[hidden]{display:none!important}. Hoje o.btn{display:inline-flex}vence ohidden, e o “Ver resumo” aparece antes da hora. - Notícia: níveis em 4 colunas numa linha no celular; “Não sei meu nível” como link abaixo deles; resumo aberto por padrão.
- Exercícios: a resposta (
.gabarito) depois dos botões (.actions). - Home: vitrine sem troca automática (só toque e deslize) e
.vt-palco{min-height:494px}. - Home: barra
.vt-fixosó depois de rolar o topo; foto.vt-fotode 64 a 72 px. - Home no computador (a partir de 1024 px): grid de 2 colunas, com o
headerà esquerda e omainà direita. - Os dois sites: abrir em
light; o botão alterna só claro e escuro, com a lua no claro e o sol no escuro. - Compartilhamento:
og:imagede 1200×630 (a imagem acima), título sem travessão, favicon (sua foto em círculo ou um monograma) e título e descrição próprios em /diagnostico e /aulas.