Plantas Medicinais
Protótipo interativo de website desenvolvido como projeto final de licenciatura: da identidade visual ao design de interação, com acessibilidade como critério de design desde o primeiro wireframe.
Projeto desenvolvido para um cliente real, um webmaster que pretendia criar um website de referência sobre plantas medicinais. O desafio: unir tradição e ciência numa interface clara, acessível e credível, num mercado onde os websites existentes falham em todos estes pontos.
Websites existentes: confusos, pouco credíveis, pouco acessíveis.
O utilizador que procura informação sobre plantas medicinais encontra websites sobrecarregados, sem hierarquia visual, sem fontes científicas e sem qualquer preocupação com acessibilidade.
Objetivo 01
Informar de forma clara e intuitiva
Objetivo 02
Garantir usabilidade, acessibilidade e credibilidade científica
Objetivo 03
Equilibrar tradição e ciência no tom e no design
Objetivo 04
Criar uma referência fiável e inclusiva
Liberdade criativa com limites funcionais claros.
O cliente deu liberdade criativa geral, mas com quatro requisitos não negociáveis que moldaram toda a arquitetura do protótipo.
Dois perfis, necessidades opostas, solução para todos.
Ao servir bem os dois extremos do espectro de acessibilidade, garante-se uma experiência melhor para todos os utilizadores.
António Lopes, 67
Reformado · Ex-motorista · Glaucoma (óculos progressivos)
"Não vejo tão bem como antes. Se o site for claro, uso com gosto. Se não for, desisto logo."
Objetivos
Frustrações
Andreia Matos, 29
Designer gráfica freelancer · Distonia muscular (mão direita)
"Se não consigo clicar ou fazer scroll com uma mão, desisto. Um bom site adapta-se, não obriga."
Objetivos
Frustrações
Tom educativo, clareza e equilíbrio entre tradição e ciência.
Referências visuais antes de qualquer decisão.
Recolha de referências visuais para definir a direção estética: natureza, credibilidade científica, tipografia clara e equilíbrio entre tradição e modernidade.
De 9 testes a uma marca: natureza e saúde.
O logótipo combina um símbolo de cruz médica com folhas dentro de uma circunferência, comunicando simultaneamente saúde e natureza. 9 testes → 3 propostas ao cliente → 1 aprovada. Existe em versão horizontal, vertical e símbolo isolado.
Verde como âncora. Laranja como destaque.
Fundo creme que suaviza o branco puro sem perder luminosidade. Verde escuro como cor de credibilidade. Laranja como energia e ação, nunca em corpo de texto longo. Cinzento escuro para legibilidade máxima.
Verificação WCAG 2.1 em todos os pares de cor.
A escolha de cores foi funcional antes de ser estética. Texto principal e cor primária passam AA. O laranja é usado exclusivamente em botões e elementos gráficos, nunca em corpo de texto longo.
Legibilidade como critério de design.
Poppins Bold para títulos: forte, geométrica, moderna. Atkinson Hyperlegible Next para todo o resto, desenvolvida pela Braille Institute especificamente para utilizadores com baixa visão, diferenciando claramente: 1 / l / I e O / 0.
Poppins Bold: H1 · 40px · Títulos
Plantas Medicinais
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0 1 2 3 4 5 6 7 8 9
Caracteres em teste: 1 l I · O 0 · 8 B
H1 · 40px Bold
H2 · 32px Bold
Atkinson Hyperlegible Next: Corpo e Sub-headings · Braille Institute
Por que esta fonte?
Criada pela Braille Institute para utilizadores com baixa visão. Cada glifo foi desenhado para ser inconfundível. Escolhida como fonte de corpo para garantir acessibilidade real em qualquer tamanho de ecrã.
Caracteres ambíguos: claramente distintos nesta fonte
1 l I
um · ele · I maiúsculo
O 0
O maiúsculo · zero
8 B
oito · B maiúsculo
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0 1 2 3 4 5 6 7 8 9
H3 · 28px
H4 · 24px
H5 · 20px
p · 16px Regular · Line-height 1.7 para leitura prolongada confortável.
10 destinos, navegação hierárquica clara.
Conteúdo organizado em torno do catálogo de plantas, com ramificações para botânicos, terapêuticas, compostos e artigos. Páginas legais no footer, fora da navegação principal.
- Plantas
- Planta Individual
- Botânicos
- Perfil Individual
- Terapêuticas
- Terapêutica Individual
- Compostos
- Composto Individual
- Artigos
- Artigo Individual
- Sobre
- Contactos
- Políticas (footer)
- Privacidade
- Cookies
- Termos de Uso
Estrutura antes de cor: 8 templates distintos.
Os wireframes definiram o layout em grayscale, validando navegação, hierarquia e funcionalidades antes de qualquer decisão visual.
Cabeçalho, pesquisa avançada, barra lateral e rodapé.
Os componentes-chave foram desenhados para serem modulares e reutilizáveis. A barra lateral mantém contexto de navegação sempre visível. A pesquisa avançada suporta seis filtros simultâneos.
Cabeçalho e Rodapé
Pesquisa Avançada
Barra Lateral
Quatro camadas de inclusão.
A acessibilidade foi um requisito de design desde o primeiro wireframe, não um add-on no final do processo.
Alto Contraste
Modo dedicado para utilizadores com baixa visão: aumenta o contraste de todos os elementos da interface para níveis máximos.
WCAG 2.1 AA ✓Ajuste de Tamanho de Fonte
Botão + / − acessível por teclado para aumentar ou reduzir o tamanho de toda a tipografia da página sem recarregar.
WCAG 2.1 AA ✓Navegação por Teclado
Tab order lógico, skip links, focus visível em todos os elementos interativos. Navegação completa sem necessidade de rato.
WCAG 2.1 AA ✓Screen Reader
Estrutura HTML5 semântica completa, ARIA labels em todos os elementos, roles definidos, landmarks corretos em todas as páginas.
WCAG 2.1 AAA ✓Três comparações: o impacto do design thinking.
Comparações retiradas diretamente do processo de redesign, identificando os problemas dos websites existentes e a resposta do protótipo.
Comparação 1: Cartão de Botânico
Comparação 2: Página de Conteúdo
Comparação 3: Cartão de Planta
Maze. Perfis variados. 100% recomendariam.
Testes realizados na plataforma Maze com utilizadores de perfis variados, avaliando facilidade de navegação, clareza visual e acessibilidade. Resultado positivo em todas as dimensões.
Melhorias implementadas após testes
Espaçamento e respiro visual
Aumento do espaçamento entre elementos e secções para melhor legibilidade e hierarquia visual.
Ajuste no tamanho das fontes
Redimensionamento para garantir maior legibilidade em todos os dispositivos e condições visuais.
Revisão das cores dos cartões
Ajuste nas cores de fundo e texto para melhor hierarquia visual e contraste.
Protótipo validado com utilizadores reais. Nota: 19 valores.
Protótipo interativo completo em Figma, validado com utilizadores reais. Equilíbrio alcançado entre design, usabilidade e acessibilidade; 100% dos utilizadores recomendariam o website. Projeto final de Licenciatura em Design de Comunicação e Audiovisual.