Processo de web design: das ideias aos ecrãs finais
Um bom processo de web design não é burocracia: é a ordem que evita refazer trabalho. Cada fase produz uma decisão que a fase seguinte assume como resolvida.
Este guia percorre as fases, o que cada uma entrega, quanto tempo demora, e os pontos em que os projetos de desenho costumam travar.
As fases e o que cada uma entrega#
A ordem importa. Saltar uma fase não a elimina — apenas empurra a decisão para mais tarde, quando já custa mais mudar.
| Fase | Entrega | Duração típica |
|---|---|---|
| Descoberta | Objetivos, público, restrições | 3 a 5 dias |
| Estrutura | Lista de páginas e navegação | 3 a 5 dias |
| Esquemas | Disposição sem estilo visual | 1 a 2 semanas |
| Direção visual | Tipografia, cor, tom — numa página | 3 a 5 dias |
| Ecrãs finais | Modelos aplicados, desktop e móvel | 2 a 4 semanas |
| Protótipo | Percursos clicáveis para teste | 2 a 4 dias |
| Entrega | Sistema, exportações, especificações | 3 a 5 dias |
A direção visual numa única página é a fase que mais poupa tempo. Aprovar o tom antes de aplicar a trinta ecrãs evita refazer trinta ecrãs.
Esquemas antes de estilo#
Esquemas sem cor nem tipografia forçam a discussão sobre conteúdo e hierarquia, que é a discussão que importa.
- Desenhe primeiro o móvel. Cabe menos, por isso obriga a decidir prioridades.
- Use conteúdo real, ou o mais próximo possível. Texto de exemplo esconde problemas de espaço.
- Mostre os estados vazios, de erro e de carregamento — costumam ser esquecidos e depois improvisados.
- Marque o que é a ação principal em cada ecrã. Se houver três, não há nenhuma.
- Não discuta cores nesta fase. Se surgir, é sinal de que os esquemas estão detalhados demais.
- Valide a estrutura de conteúdo com quem o vai escrever, antes de avançar.
Onde o processo costuma travar#
Os bloqueios são quase sempre os mesmos, e quase todos são organizacionais e não criativos.
| Bloqueio | Causa | Como resolver |
|---|---|---|
| Feedback contraditório | Vários decisores sem hierarquia | Um responsável único pela decisão |
| Rondas infinitas | Rondas não definidas no contrato | Número fixo, com critério de aprovação |
| Conteúdo em falta | Ninguém foi nomeado | Nome próprio e data por página |
| «Não é o que imaginei» | Direção visual saltada | Aprovar tom numa página primeiro |
| Ecrãs impossíveis de construir | Desenho sem contacto com quem constrói | Rever cedo com o programador |
| Móvel improvisado no fim | Desenhado só para desktop | Desenhar móvel primeiro |
«Rondas infinitas» é quase sempre um problema de contrato, não de desenho. Defina o que é uma ronda e quantas existem.
Entregar desenho que se consegue construir#
A entrega decide se a construção corre bem ou se se transforma em interpretação.
- Entregue um pequeno sistema, não apenas ecrãs: cores, tipos, espaçamentos, componentes.
- Documente os estados de cada componente: normal, foco, ativo, desativado, erro.
- Especifique o comportamento entre pontos de rutura, não apenas duas larguras fixas.
- Inclua os estados vazios e de erro de cada ecrã.
- Exporte imagens em formatos modernos e nos tamanhos em que serão usadas.
- Marque o que é fixo e o que pode adaptar-se — quem constrói vai encontrar casos que não previu.
- Faça uma sessão de entrega ao vivo. Meia hora poupa uma semana de perguntas.
Perguntas frequentes
Quantas rondas de revisão são normais?
Duas a três por fase é o habitual e deve estar no contrato, com definição do que conta como ronda. Sem esse limite, o desenho tende a expandir-se indefinidamente porque cada nova pessoa que vê os ecrãs tem uma opinião. Um responsável único pela decisão vale mais do que qualquer limite numérico.
Preciso de esquemas se já tenho referências?
Sim, porque as referências mostram estilo e os esquemas resolvem estrutura. Passar diretamente de referências para ecrãs finais costuma resultar em discussões sobre cor quando o problema real é a hierarquia da informação. Os esquemas são rápidos de fazer e ainda mais rápidos de mudar.
Devo desenhar todas as páginas?
Desenhe os modelos, não as páginas. Um site de cinquenta páginas costuma ter cinco ou seis modelos distintos. Desenhe cada modelo com o caso mais difícil de conteúdo — o título mais longo, a lista mais comprida — e as páginas restantes seguem sem trabalho adicional.
Quem deve aprovar o desenho?
Uma pessoa, com autoridade real. Pode recolher opiniões de várias, mas a decisão tem de ser de alguém. Aprovação por comité produz desenhos que ninguém detesta e ninguém defende, e é a causa mais frequente de projetos que se arrastam meses na fase visual.
processo web designfases design sitewireframesdesign systemrevisões designentrega design
