Conceber o design para páginas web

Apresentação

UC02285 (25h · 2,25 pts) do curso Técnico de Multimédia. Ensina a conceber a interface de um site/app antes de a programar: distinção UX/UI, pesquisa de utilizador, arquitetura de informação, wireframes, mockups, design responsivo, sistemas de design e prototipagem/teste com Figma. Liga a UC02258 (design de comunicação) e prepara a UC02634/UC02635 (implementação web) e UC02249 (multimédia interativo).

UX vs UI

São complementares: uma UI bonita sobre uma UX má = produto bonito que ninguém consegue usar. Boa UX sem UI cuidada = funcional mas pouco apelativo. Precisa-se das duas.

Processo (Design Thinking / UX)

Empatizar → Definir → Idear → Prototipar → Testar  (→ repetir)

É iterativo: prototipar e testar cedo, falhar barato no papel/Figma em vez de caro no código.

Pesquisa de utilizador

Desenhar para utilizadores reais, não para o próprio gosto.

• Personas — arquétipos do utilizador-tipo: objetivos, contexto, frustrações, literacia digital. Orientam decisões ("o que faria a Ana, 16 anos, no telemóvel?").
• User journey map — sequência de passos/emoções para cumprir um objetivo; revela pontos de fricção.
• User stories — "Como [papel], quero [ação] para [benefício]".
• Análise competitiva — ver como outros resolvem o problema (referências, não cópia).
• Métodos: entrevistas, inquéritos, observação.

Arquitetura de informação (AI)

Organizar o conteúdo de forma que o utilizador o encontre.

• Sitemap — diagrama de todas as páginas e a sua hierarquia.
• Card sorting — utilizadores agrupam/etiquetam conteúdos → estrutura baseada no modelo mental deles.
• Navegação — clara e consistente; regra prática: o essencial a ≤ 3 cliques; "estás aqui" (breadcrumbs) em estruturas profundas.
• Hierarquia de conteúdo por página (o que é primário, secundário).

Wireframe → Mockup → Protótipo

Aumentar a fidelidade por etapas (não saltar para o visual cedo demais):

Wireframe

Concentra-se em layout e conteúdo, deliberadamente sem estética (evita discussões de cor antes de a estrutura estar certa). É rápido de alterar → permite testar a estrutura cedo e barato. Desenhar mobile-first.

Mockup

Aplica o sistema de design (cor, tipografia, espaçamento, imagens reais). É o aspeto final estático.

Protótipo

Liga os ecrãs (cliques, transições) para simular o uso real → permite testes de usabilidade antes de uma linha de código.

Design responsivo

O site tem de funcionar de telemóvel a desktop.

• Mobile-first — desenhar primeiro para o ecrã pequeno (força priorizar o essencial), depois ampliar.
• Breakpoints — pontos onde o layout muda (típico: ~mobile < 768px, tablet, desktop ≥ 1024px). Definir onde o layout "parte", não por modelos específicos.
• Grelha fluida e imagens flexíveis (max-width:100%).
• Toque — alvos clicáveis ≥ 44-48 px; nada essencial só em hover (não existe em touch); gestos previsíveis.
• Prioridade de conteúdo — em mobile, o mais importante primeiro; menus colapsam (hamburger), mas mantendo descobribilidade.

Sistema de design

Conjunto reutilizável que dá consistência, rapidez e manutenção.

• Design tokens — valores base: paleta de cores, escala tipográfica, espaçamentos, raios, sombras. Mudar num sítio propaga a todo o produto.
• Componentes — botões, inputs, cards, navbar, modais — com estados: normal, hover, foco, ativo, desativado, erro, carregamento. Esquecer estados é um erro clássico.
• Padrões — formas consistentes de resolver navegação, formulários, feedback (mensagens, loading, vazio).
• Documentação — quando/como usar cada componente.

Exemplos conhecidos: Material Design (Google), Human Interface Guidelines (Apple).

Figma

Ferramenta-padrão de design de interface (gratuita para uso educativo/individual; web).

• Frames — representam ecrãs/artboards (definir tamanhos de dispositivo).
• Componentes e variantes — elementos reutilizáveis; alterar o "main" propaga às instâncias; variantes para estados.
• Auto Layout — os elementos ajustam-se ao conteúdo/tamanho (base de layouts responsivos e listas).
• Estilos — cores e estilos de texto partilhados (o "sistema de design" vivo).
• Prototype — ligar frames com interações e transições; testar o fluxo.
• Colaboração — comentários, partilha, handoff para developers (medidas, cores, exportar assets — UC00504).

Alternativas: Adobe XD, Penpot (open-source), Sketch.

Teste de usabilidade

Validar com utilizadores reais antes de programar.

1. Definir tarefas (ex.: "encontra o horário de atendimento e marca uma visita").
2. Recrutar 3-5 utilizadores representativos.
3. Pedir-lhes para "pensar em voz alta"; observar sem ajudar.
4. Registar: conseguiram? quanto tempo? onde hesitaram/erraram?
5. Iterar o design e voltar a testar.

Nielsen: testar com ~5 utilizadores revela cerca de 85% dos problemas — barato e eficaz; mais vale testar pouco e cedo do que muito e tarde.

Acessibilidade na UI (recap)

• Contraste texto/fundo ≥ 4.5:1.
• Foco visível e navegação por teclado.
• Alvos de toque grandes e espaçados.
• Texto redimensionável; não comunicar só por cor.
• Labels claras nos campos; mensagens de erro específicas e úteis.
• Estrutura semântica (preparar para o dev: títulos, landmarks).
• Considerar WCAG desde o design, não no fim.

Erros comuns

• Saltar pesquisa/wireframe e ir direto ao mockup bonito.
• Desenhar para o próprio gosto, não para o utilizador.
• Esquecer estados dos componentes e mobile.
• Navegação confusa / demasiados níveis.
• Nunca testar com utilizadores.
• Ignorar acessibilidade até ser tarde.

Apêndices

A · Checklist de design web

• [ ] Personas / user stories definidas.
• [ ] Sitemap + navegação clara (≤ 3 cliques).
• [ ] Wireframes mobile-first antes do visual.
• [ ] Sistema de design (tokens + componentes + estados).
• [ ] Mockups responsivos (mobile/tablet/desktop).
• [ ] Protótipo clicável testado com 3-5 pessoas.
• [ ] Contraste ≥ 4.5:1, foco visível, alvos grandes.
• [ ] Handoff preparado (medidas, assets, estilos).

B · Glossário

AI. Arquitetura de Informação. Breakpoint. Largura onde o layout muda. Handoff. Entrega do design ao developer. Mockup. Design visual estático de alta fidelidade. Persona. Utilizador-tipo arquetípico. UX/UI. Experiência / Interface do utilizador. Wireframe. Esquema estrutural de baixa fidelidade.

C · Recursos

• Figma · figma.com (+ Figma Learn).
• Penpot · penpot.app — alternativa open-source.
• Laws of UX · lawsofux.com — princípios.
• NN/g (Nielsen Norman Group) · usabilidade.
• Refactoring UI · heurísticas práticas de UI.