18.12.2025
O design e a separação de papéis (UX/UI) em um projeto web – pt-br
1. Resumo Técnico
Esta aula detalha a Fase 4: Design, que é a tradução visual e funcional do Escopo definido no Briefing. O objetivo é estabelecer a distinção clara entre o papel do Programador (focado na funcionalidade e na lógica) e o Designer UX/UI (focado na experiência e na estética).
Abordaremos as três opções de execução do design: Contratação de um Especialista (o modelo corporativo ideal), Execução Própria (o modelo comum para o freelancer iniciante) e a importância crítica de não aceitar um design entregue pelo cliente sem uma validação técnica prévia, que garanta a viabilidade e a performance do projeto.
2. Mapa Mental da Aula
-
O Papel do Design
- UI (User Interface): Estética e Aparência
- UX (User Experience): Navegação e Lógica
- Design = Tradução Visual do Escopo
-
Opções de Execução
- Contratação UX/UI (Modelo Ideal)
- Execução Própria (Modelo Freelancer)
- Terceirização (Parceria com Outro Freelancer)
-
Regra de Ouro
- Não aceitar design entregue pelo cliente
- Necessidade de validação técnica (viabilidade e performance)
3. Guia Detalhado: Estratégias para a Fase de Design
3.1. Entendendo o Design: UI vs. UX
O Design em um projeto web não é apenas sobre deixar o site bonito; é sobre torná-lo funcional e intuitivo.
- UI (User Interface – Interface do Usuário): É a parte estética. Cores, tipografia, botões, layout. É o que o usuário vê.
- UX (User Experience – Experiência do Usuário): É a lógica de navegação. É a facilidade com que o usuário encontra o que procura. É o que o usuário sente ao usar o site.
O Design é a tradução visual do Escopo. Se o Briefing diz que o objetivo é “captar leads”, o Design deve garantir que o formulário de contato esteja em um local estratégico (UX) e seja visualmente atraente (UI).
3.2. A Separação de Papéis: Programador vs. Designer
Em uma empresa de grande porte, o Programador e o Designer são funções distintas.
| FUNÇÃO | FOCO | ENTREGÁVEL |
|---|---|---|
| Designer UX/UI | Experiência do Usuário, Estética, Fluxo de Navegação. | Protótipos (Wireframes) e Layouts Finais (Figma, Sketch). |
| Programador | Funcionalidade, Lógica, Performance, Viabilidade Técnica. | Código (HTML, CSS, JS, PHP) que transforma o layout em um sistema funcional. |
O Programador deve respeitar o Design, mas o Designer deve criar algo que seja tecnicamente viável.
3.3. Opções de Execução do Design (Para o Programador)
Para o aluno que atua como freelancer, existem três caminhos principais para executar a Fase de Design:
| OPÇÃO | VANTAGENS | DESVANTAGENS |
|---|---|---|
| Contratação UX/UI (Modelo Ideal) | Resultado profissional, divisão clara de responsabilidades, design otimizado para conversão. | Custo mais alto, necessidade de gerenciar um terceiro. |
| Execução Própria (Modelo Freelancer) | Custo zero (apenas tempo), controle total sobre a viabilidade técnica. | Risco de design amador, tempo gasto em uma área que não é sua especialidade. |
| Terceirização (Parceria) | Custo intermediário, qualidade profissional, aprendizado mútuo. | Dependência do cronograma de terceiros. |
No nosso projeto (WordPress): A execução própria é simplificada pela escolha de um Tema Profissional. O tema já resolve a maior parte do UI/UX, permitindo que o aluno se concentre na customização e na inserção estratégica do conteúdo.
3.4. A Regra de Ouro: Não Aceitar Design Entregue
É comum o cliente dizer: “Eu já tenho o design pronto, é só codificar.” Esta é uma armadilha que deve ser evitada.
O Programador NÃO DEVE aceitar um design entregue pelo cliente ou por um designer sem antes realizar uma Validação Técnica.
| RISCO | IMPACTO TÉCNICO | COMO MITIGAR |
|---|---|---|
| Design Não Responsivo | O layout quebra em celulares, gerando retrabalho e má experiência. | Validação: Verificar se o design segue o princípio Mobile First. |
| Design Pesado | Uso de muitas imagens de alta resolução ou fontes complexas. | Validação: Garantir que o design não comprometa a Performance e a velocidade de carregamento (SEO). |
| Funcionalidade Impossível | O design exige uma funcionalidade que é inviável ou muito cara de codificar. | Validação: Comparar o design com o Documento de Escopo aprovado. Se houver divergência, o escopo deve prevalecer ou o preço deve ser renegociado. |
4. Conclusão
A Fase de Design é a última etapa de planejamento antes da execução. Ao entender a diferença entre UI e UX e ao dominar as estratégias de execução e validação técnica, você garante que o projeto avance para a próxima fase (Infraestrutura) com um plano visual que é, ao mesmo tempo, atraente e tecnicamente viável.
