Plantas Medicinais

Design UI&UX para um website de plantas medicinais – Interface digital acessível e inclusiva

---

O Desafio

Apesar da crescente procura por informação sobre plantas medicinais, a maioria dos websites apresenta problemas graves de organização, acessibilidade e credibilidade. Muitos excluem utilizadores com necessidades especiais e propagam informação não validada.

Desafio: Como criar uma plataforma digital que democratize o acesso ao conhecimento sobre plantas medicinais, de forma clara, credível e inclusiva para todos os públicos?

Este projeto Final de Licenciatura em Design de Comunicação e Audiovisual propôs desenvolver um protótipo navegável de website, com identidade visual completa, focado em três pilares fundamentais:

• Acessibilidade: Garantir que todos possam aceder à informação, incluindo pessoas com limitações visuais, motoras ou cognitivas
• Usabilidade: Criar uma experiência intuitiva, eficiente e sem fricções na navegação
• Credibilidade: Apresentar conteúdos validados cientificamente, com referências claras e linguagem acessível

Pesquisa & Estratégia

Estudo de Casos

Foram analisados três websites de referência (Tua Saúde, Vitat, Plantei) e definidas 5 personas representativas, incluindo utilizadores com limitações visuais, pessoas daltónicas e diferentes faixas etárias

Identidade Visual

Conceito do Logótipo

O logótipo combina uma cruz (símbolo universalmente reconhecido de saúde e cuidado) com uma folha ao centro, estabelecendo visualmente a ponte entre medicina tradicional e natureza. Esta fusão comunica de forma imediata a essência do projeto sem necessidade de explicações adicionais.

A forma circular não foi uma escolha estética isolada — transmite equilíbrio, proteção e harmonia, valores fundamentais quando se fala de saúde. Além disso, a estrutura compacta permite versatilidade de aplicação, funcionando perfeitamente desde favicons até materiais impressos, sem perder legibilidade.

Paleta Cromática

A escolha do verde-menta (#166B3E) como cor principal foi estratégica. Segundo a psicologia das cores, o verde está diretamente associado à natureza, frescura, regeneração e confiança — exatamente as emoções que um website sobre plantas medicinais deve transmitir.

O laranja (#FF7A1A) foi introduzido como cor secundária para criar contraste dinâmico e chamar atenção para elementos interativos (títulos, botões, avisos). Esta combinação equilibra a serenidade do verde com a energia do laranja, evitando monotonia visual.

A paleta foi expandida para ~20 cores funcionais (estados de hover, alertas, categorias), todas validadas com rácios de contraste WCAG para garantir legibilidade.

Sistema Tipográfico

A tipografia foi escolhida com duplo critério: identidade visual forte + acessibilidade máxima.

Poppins foi selecionada para títulos e marca gráfica pela sua geometria limpa, traços arredondados e aspeto contemporâneo. Transmite modernidade e proximidade sem comprometer a seriedade necessária num contexto de saúde. A sua neutralidade permite que funcione bem em múltiplos tamanhos e contextos.

Para o corpo de texto, optei pela Atkinson Hyperlegible Next — uma decisão crítica para o sucesso do projeto. Esta fonte foi desenvolvida pelo Braille Institute especificamente para pessoas com baixa visão, com diferenciação clara entre caracteres facilmente confundíveis como “1”, “I”, “l” ou “O”, “0”, “8”.

Porquê Atkinson? Porque em contextos de saúde, a leitura incorreta de informação pode ter consequências graves. Uma fonte que elimina ambiguidade não é um luxo — é uma responsabilidade ética.

Esta escolha foi validada nos testes: participantes com dificuldades visuais destacaram a facilidade de leitura mesmo em textos longos, algo que não acontece com fontes “bonitas mas ilegíveis”.

Design de Interface

Arquitetura & Estrutura

O protótipo foi construído sobre uma grelha de 8 colunas otimizada para 1440px: 2 colunas de margem lateral (garantindo que o conteúdo nunca “cola” às bordas), 4 colunas para conteúdo principal e 2 colunas para a sidebar.

Esta estrutura não foi arbitrária. A sidebar foi um requisito específico do cliente, que solicitou uma navegação lateral permanente com conteúdos contextuais (plantas relacionadas, artigos recentes). A grelha foi desenhada para acomodar este requisito sem comprometer a hierarquia do conteúdo principal.

Sistema de Filtros

A funcionalidade de pesquisa avançada com filtros foi outro pedido direto do cliente: “quero que os utilizadores consigam encontrar plantas por sintomas, propriedades ou botânico que as descobriu”.

Implementei filtros horizontais com combo boxes acessíveis, permitindo pesquisa por:

• Botânico: Filtrar por quem documentou/descobriu a planta
• Propriedades terapêuticas: Anti-inflamatória, calmante, digestiva, etc.
• Substâncias ativas: Compostos químicos específicos
• Modo de uso: Infusão, pomada, cataplasma

Esta abordagem transforma uma base de dados complexa numa ferramenta prática: em vez de percorrer listas intermináveis, o utilizador encontra exatamente o que precisa em 2-3 cliques.

Componentes Reutilizáveis

Foi desenvolvida uma biblioteca de 50+ componentes modulares: cards (plantas, botânicos, artigos), botões (primários, secundários, hover states), inputs, breadcrumbs, paginação, modais.

Porquê modularidade? Porque o website seria alimentado por API. O cliente, um webmaster/programador sénior ligado à Google, enfatizou desde o início que precisava de componentes reutilizáveis que pudessem receber dados dinamicamente. Cada card segue a mesma estrutura HTML/CSS, apenas mudando o conteúdo carregado.

Esta decisão técnica teve impacto direto no design: em vez de criar layouts únicos para cada página, desenvolvi templates flexíveis que funcionam para plantas, botânicos, terapêuticas e compostos — mudando apenas cabeçalhos e metadados.

Páginas Desenvolvidas

O protótipo inclui mais de 15 páginas distintas:

• Homepage: Hero com pesquisa por sintomas, plantas em destaque, estatísticas do site
• Listagens: Grid com filtros, paginação e opção “carregar mais”
• Páginas individuais: Estrutura modular para plantas/botânicos/compostos/terapêuticas
• Artigos: Blog educativo com sistema de comentários e newsletter
• Institucionais: Sobre, Contactos, Políticas (RGPD), Mapa do Site
• Estados de erro: 404 e resultados vazios (com mensagens empáticas)

Acessibilidade como Prioridade

Porque Implementar Nativamente?

Muitos designers confiam em extensões de navegador ou plugins externos para acessibilidade. O problema? Não funcionam em todos os dispositivos, falham frequentemente e exigem conhecimento técnico do utilizador.

Decidi implementar as funcionalidades diretamente na interface, garantindo que qualquer pessoa, em qualquer dispositivo, tenha acesso imediato aos controlos de acessibilidade — sem instalar nada, sem configurar nada.

Modo Alto Contraste

Ativado através de um botão no cabeçalho (ícone de lua), este modo altera dinamicamente a paleta cromática para tons escuros com contraste elevado, mantendo a estrutura visual intacta.

Porquê? Pessoas com baixa visão ou sensibilidade à luz necessitam de contrastes mais fortes. Mas ao contrário do “modo escuro” comum, este foi testado especificamente com pessoas daltónicas e com deficiência visual para garantir legibilidade real.

Feedback real: “Normalmente uso filtros do sistema operativo para corrigir contraste, mas raramente funciona. Aqui, o modo alto contraste foi imediatamente eficaz.” — Participante daltónico

Ajuste de Fonte

O segundo controlo permite aumentar o tamanho da fonte em 2-4 pontos. Parece simples, mas há uma razão técnica importante: zoom manual do navegador quebra layouts.

Ao aplicar zoom (Ctrl +), a maioria dos websites desconfigura-se — conteúdos sobrepõem-se, sidebars desaparecem, texto sai dos limites. O meu sistema aumenta apenas a tipografia, mantendo grelhas, espaçamentos e hierarquias intactas.

Impacto: Participantes com baixa visão destacaram que conseguiram ler confortavelmente sem perder a estrutura da página — algo raro em websites similares.

Conformidade WCAG 2.1 (Nível AA)

Todas as decisões foram validadas contra as diretrizes oficiais de acessibilidade web:

• Contraste: Rácios superiores a 4.5:1 para texto normal, 3:1 para elementos gráficos (validado com WebAIM Contrast Checker)
• Navegação por teclado: Ordem lógica programada (Tab, Enter, Setas) — essencial para pessoas com limitações motoras
• Leitores de ecrã: Marcação semântica HTML5 + atributos ARIA para anunciar conteúdos corretamente
• Texto alternativo: Todas as imagens com descrições contextuais
• Hover states: Feedback visual claro (mudança de cor, sublinhado, sombra) em todos os elementos clicáveis

Porquê Isto Importa?

Segundo a OMS, 2.2 mil milhões de pessoas têm alguma forma de deficiência visual. Em Portugal, estima-se que 5-8% da população tenha daltonismo. Ignorar acessibilidade não é apenas má prática — é excluir milhões de potenciais utilizadores.

Este projeto demonstrou que acessibilidade não compromete estética. Pelo contrário: um design pensado para todos tende a ser mais claro, mais organizado e mais eficaz para todos os utilizadores.

Resultados

Os testes de usabilidade foram realizados através da plataforma Maze, com participantes incluindo pessoas com limitações visuais, daltónicas e profissionais de IT/Design.

“O website apresenta uma experiência agradável, fluida e credível. A combinação entre design visual, acessibilidade e coerência temática está muito bem conseguida.”

O projeto foi destacado pela abordagem metodológica rigorosa, qualidade técnica do protótipo e compromisso com a acessibilidade e design inclusivo.

Reflexão

Este projeto consolidou a perceção de que um bom design não nasce apenas de talento ou estética isolada, mas da capacidade de escutar ativamente, adaptar soluções e testar com humildade.

A validação junto dos utilizadores com necessidades especiais reforçou a urgência de implementar acessibilidade real, não apenas cumprir requisitos técnicos. Ver pessoas com dificuldades visuais a navegar sem barreiras confirmou que a inclusão digital é possível quando bem implementada.

A excelência não está apenas em atingir um objetivo técnico ou estético, mas em criar algo que toque verdadeiramente quem o utiliza — algo que seja ao mesmo tempo belo, funcional e profundamente humano.