Saltar para o conteúdo
Manuel García-Llera Añón / Product Designer · Design EngineerContacto

Processo

Como trabalho, passo a passo.

Trabalho com método para que uma intuição possa ser explicada, testada e melhorada sem perder a sua dimensão humana.

Não sigo estas fases como uma receita fechada. Uso-as para libertar atenção: quando o trabalho repetitivo tem uma estrutura, posso dedicar mais tempo a ouvir, interpretar e tomar as decisões que realmente mudam o produto.

Cada fase deixa evidência e uma razão. Assim posso discutir o trabalho com outras pessoas, retomá-lo meses depois e reconhecer com honestidade o que sabemos, o que estamos a supor e o que falta verificar.

As seis fases

01

Enquadramento

Definir o problema, o público e a restrição real antes de desenhar seja o que for.

Decisões da pessoa
Problema, âmbito, critérios de sucesso e o que fica de fora.
Apoio de IA
Recolha de contexto e síntese de material anterior.
Evidência
Enunciado do problema e critérios de aceitação por escrito.

02

Investigação

Confrontar as primeiras impressões com o contexto e as necessidades das pessoas.

Decisões da pessoa
O que preciso de aprender, com quem o verificar e que técnica de investigação UX me pode ajudar.
Apoio de IA
Preparação de guiões e organização de material autorizado, com verificação das fontes. Não substitui as pessoas participantes.
Evidência
Perguntas, método escolhido e conclusões com a respetiva origem. Distingo observações, interpretações e hipóteses por verificar.

03

Sistema

Definir uma base de tipografia, cor, espaçamento e componentes que possa ser mantida à medida que cresce.

Decisões da pessoa
Direção de arte, hierarquia, escala tipográfica e caráter do movimento.
Apoio de IA
Estrutura de variáveis, estados dos componentes e verificação de contraste.
Evidência
Coleção de tokens e componentes com todos os estados definidos.

04

Protótipo

Ecrãs montados com instâncias do sistema, navegáveis desde o primeiro dia.

Decisões da pessoa
Composição, fluxo e o que se testa antes de programar.
Apoio de IA
Montagem de variantes, adaptação a diferentes tamanhos de ecrã e documentação de estados.
Evidência
Protótipo navegável e adaptável aos tamanhos de ecrã acordados.

05

Passagem para desenvolvimento

Manter uma relação reconhecível entre os componentes do Figma e a sua implementação.

Decisões da pessoa
O que faz parte do contrato e o que fica livre na implementação.
Apoio de IA
Leitura estruturada do design, geração de componentes e testes.
Evidência
Componentes em código que reproduzem a hierarquia do sistema de design.

06

Verificação

Testar o resultado no navegador e rever o que um teste automático não consegue avaliar.

Decisões da pessoa
Limiar de qualidade aceitável e dívida que deve ser declarada.
Apoio de IA
Testes, auditoria de acessibilidade e medição de desempenho.
Evidência
Testes aprovados, contraste validado e comparação entre design e navegador.

O papel da IA

A fronteira entre critério e execução, por escrito.

O que decide a pessoa

Defino o problema, as prioridades e os critérios de qualidade. A IA pode propor alternativas, mas cabe-me avaliar se fazem sentido para o utilizador e assumir a decisão que tomamos.

O que executa a IA

Utilizo-a para explorar variantes, preparar componentes, rever código e propor testes. Dou-lhe contexto e limites concretos. Depois comparo o resultado com o design e com o comportamento esperado.

Como mantenho o controlo

Deixo por escrito o que cada ferramenta pode fazer, o que precisa da minha aprovação e como verificarei o resultado. Quando uma decisão é importante, procuro uma revisão independente e guardo o motivo da alteração.

Princípios

Sistema antes do ecrã

Interessa-me que uma boa decisão possa ser repetida. Por isso relaciono os ecrãs com componentes, estados e regras comuns, e revejo o sistema quando surge uma necessidade nova.

Evidência acima da afirmação

Tento mostrar como cheguei ao resultado: o protótipo, os componentes e as verificações disponíveis. Também explico o que está em desenvolvimento ou ainda não foi validado.

A estética é função

Cuido da tipografia, dos espaços e do movimento porque influenciam a compreensão de uma interface. Se um efeito distrai ou uma composição dificulta a leitura, revejo a decisão, mesmo que goste dela visualmente.

Retirar o que não ajuda

Adapto o método ao problema. Documento o que facilita o trabalho e a aprendizagem, sem acrescentar passos de que a equipa não precisa.

Ver na prática

Em cada caso explico o que consegui aplicar, que decisões tomei e o que ficou por verificar.

Explorar os casos