---
title: "UI Design & UX Design - José DA COSTA"
description: "UI design e UX design, na minha prática, e a **disciplina a montante** que raciocina sobre jornadas de usuario, wireframes e arquitetura de informação **antes do primeiro componente React**. E a compe"
locale: "pt"
canonical: "https://portfolio.josedacosta.info/pt/habilidades/ui-design-ux-design"
source: "https://portfolio.josedacosta.info/pt/habilidades/ui-design-ux-design.md"
html_source: "https://portfolio.josedacosta.info/pt/habilidades/ui-design-ux-design"
author: "José DA COSTA"
type: "skill"
slug: "ui-ux-design"
generated_at: "2026-04-26T21:15:18.863Z"
---

# UI Design & UX Design

Ícone: 🎨

## Minha definição

UI design e UX design, na minha prática, e a **disciplina a montante** que raciocina sobre jornadas de usuario, wireframes e arquitetura de informação **antes do primeiro componente React**. E a competencia que permite a um CTO questionar um brief mal enquadrado, produzir um wireframe legivel antes do código e **decidir quando um design está pronto o suficiente para ser entregue**.

### Contexto

Eu a exerco em **2 fases distintas**. **Discovery**: entrevistas com usuarios, journey mapping, wireframes em papel e depois Figma leve validados em menos de 30 minutos pelo responsavel de negocio. **Produção**: UI kit minimo, design tokens, acessibilidade WCAG, ownership da implementacao front-end. Bases adquiridas no **Master ESIEA** (UX, jornadas de usuario, arquitetura de informação), mantidas em cada papel de produto sucessivo desde o Pichet (wireframes ferramental interno, **80 interlocutores** adotando as ferramentas com treinamento minimo) até os storefronts Magento Enterprise (3 temas responsivos coerentes) e ao SaaS contabil em solo (experiencia de 6 papeis enquadrada a montante).

### Relevância

Em 2026, a **IA generativa basculou na UI**: a ferramenta de referencia e o **v0 by Vercel**, que transforma uma descricao em **componentes React production-ready** com shadcn/ui + Tailwind, integrações de banco de dados e deploy, e que reivindica **mais de 6 milhoes de desenvolvedores** na plataforma. A Vercel detalha como acopla-lo a um design system existente em [AI-powered prototyping with design systems](https://vercel.com/blog/ai-powered-prototyping-with-design-systems). O custo de produção de telas desaba. mas as **decisões de jornada, de arquitetura de informação e de acessibilidade** continuam humanas, e e exatamente ai que se joga o valor do design em 2026.

## Minhas evidências

### Wireframear o ferramental ESB para as direcoes de negocio Pichet

**Contexto:** No perimetro ESB do Grupo Pichet, eu tinha que equipar **cerca de 80 interlocutores diarios** vindos de **12 direcoes de negocio** (Finanças, Contabilidade, RH, Marketing, Hotelaria, Imobiliario, Seguranca, TI, etc.). Essas pessoas não eram usuarios tecnicos: precisavam de dashboards de integração, visualizadores de fluxos, ferramentas de reporting claras - mas sem formacao tecnica profunda e com uma carga cognitiva já saturada pelo próprio trabalho.

**Ação:** Recusei mergulhar diretamente no código Symfony. Antes de cada tela, produzi um **wireframe em papel e depois um Figma leve** que fazia validar em 30 minutos pelo responsavel do departamento, fazendo 3 perguntas: **o que estamos buscando** (intencao do usuario), **em que ordem** (o percurso), **com qual vocabulario** (linguagem de negocio, não tecnica). Uma vez aprovado o wireframe, passava aos controllers Symfony e a integração Twig + jQuery, mas o journey ficava travado. Para os fluxos financeiros (os mais sensiveis), também produzi **journey maps** documentados no Confluence.

**Resultado:** **Cerca de 80 interlocutores** adotaram as ferramentas com **treinamento minimo**, o tempo medio de treinamento caiu de meio dia para menos de uma hora, e as direcoes de negocio voltaram a procurar o time ESB para enquadrar 3 novas ferramentas transversais sem repassar por uma fase de evangelizacao.

**Valor agregado:** Nesse projeto entendi de forma duradoura que **um wireframe legivel vale 3 iteracoes de código**. E o reflexo que rejogo hoje em cada missao ACCENSEO e no SaaS contabil: rabiscar antes de abrir o Figma, validar o journey antes da primeira linha de React, e aceitar que **uma folha A4 e 10 minutos costumam valer mais do que 2 horas no Figma**.

### Conceber 3 storefronts responsivos coerentes para Fleurance Nature

**Contexto:** Na refatoracao da Fleurance Nature em 2017 na Smile, eu precisava redesenhar **3 storefronts** (Fleurance Nature France, International, Mincifine) com uma **identidade compartilhada** mas códigos locais diferentes. As **especificacoes graficas** atravessaram **7 versoes em 2 meses** a medida que os casos limites de negocio iam surgindo (grupos de clientes, promocoes multi-site, tradução de categorias, gestao de avaliacoes). No responsivo, eu precisava sustentar mobile + tablet + desktop sem multiplicar os temas.

**Ação:** Coloquei uma **grade responsiva compartilhada** (mobile-first, breakpoints calibrados nos analytics existentes) e um **UI kit minimo** que fatorava os componentes visuais criticos (categorias, fichas de produto, funil de checkout, navegacao). Para cada storefront, produzi **wireframes responsivos em 3 breakpoints**, validei iterativamente as maquetes visuais com o cliente, redigi as **especificacoes graficas dos 3 temas** distintos, e depois assumi o **ownership da implementacao** front-end no Magento. O blog WordPress integrado via RSS foi alinhado visualmente na mesma grade.

**Resultado:** **3 storefronts coerentes** entregues em produção em **8 ambientes**, identidade visual compartilhada preservada sem reescrita por loja, e a **garantia de 58 dias** pos-lancamento assegurada pessoalmente sem incidente UX major.

**Valor agregado:** Essa disciplina UI/UX e o que me permite hoje **questionar um brief mal enquadrado** na ACCENSEO sem depender de uma agencia de design externa. No SaaS contabil em solo, rejoguei a mesma mecanica para enquadrar a experiencia de **6 papeis diferentes** (Admin, Colaborador, Consultor, Contador, Contabilidade, Banco) antes da primeira linha de código - e e exatamente o que me poupou as semanas de reenquadramento que iteracoes pos-entrega teriam custado.

## Minha autocrítica

### Grau de domínio

Nível **Confirmado**. Bases adquiridas no Master ESIEA (UX, jornadas de usuario, arquitetura da informação), mantidas por todos os papeis de produto sucessivos: wireframes de ferramental ESB (≈80 interlocutores adotando as ferramentas com formacao minima), 3 storefronts responsivos coerentes em Magento Enterprise, experiencia a 6 papeis enquadrada a montante no SaaS contabil. Capacidade de redigir uma journey map, esbocar um wireframe legivel e desafiar um brief. O que falta fortalecer: **design system token-based** em larga escala e acessibilidade WCAG 2.2 AAA.

### Importância no meu perfil

Competencia diferenciadora para um CTO scale-up B2B SaaS. Sem ela, o CTO fica confinado a camada tech e delega toda a camada produto, o que afasta do board e dos clientes. E o que me permite empurrar de volta um brief mal enquadrado, produzir um wireframe legivel antes do primeiro componente React e decidir *quando um design está suficientemente terminado para ser entregue*.

### Conselhos (para mim e para os outros)

### Meus conselhos

*Esbocar no papel antes de abrir o Figma*. uma folha A4 e 10 minutos valem muitas vezes mais do que 2 horas no Figma. Para outros:

- nunca pular a fase **discovery** (entrevistas + journey map), mesmo quando o brief parece claro
- investir em um **design system token-based** desde a segunda tela de um produto
- testar acessibilidade antes do polish visual, um site bonito mas inacessivel exclui no minimo **15 % dos usuarios**

## Minha evolução nesta competência

### Papel no meu projeto profissional

O par UI/UX e **o que torna minhas decisões CTO crediveis pelo lado produto**. No plano de 24 meses, ele me permite animar um cadragem de produto sem depender exclusivamente de um PM, defender um design system diante do board como investimento escalavel e desafiar uma agencia de design externa com base num brief preciso. Sem ele, o papel restringe-se a camada tecnica e perde a alavanca de produto.

### Nível almejado a médio prazo

Até o fim de 2027, o objetivo observavel e triplo: **entregar para a próxima linha SaaS um design system tokenizado** (Figma + Tokens Studio), **passar uma auditoria de acessibilidade WCAG 2.2 AA** sem nao-conformidade maior e **animar um workshop discovery de usuario** em autonomia. O deslizamento Confirmado -> Senior se mede sobre essas tres entregas.

### Formações em andamento

Revisoes de design diarias com os alternantes ACCENSEO em **mentoring inverso** (eles dominam Figma mais rápido, eu trago a profundidade arquitetura da informação). Participacao nos workshops de design system internos. Master Expert em Engenharia de Software ativo.

### Formações futuras

Possivel imersao de acessibilidade ([WCAG 2.2](https://www.w3.org/WAI/standards-guidelines/wcag/), ARIA avancado) prevista 2026. Programa Maven Design Systems (Brad Frost ou equivalente) visado 2027 para formalizar a prática de tokens. Possivel certificacao ADA se o papel alvo tocar o setor público.

Versão interativa com navegação: https://portfolio.josedacosta.info/pt/habilidades/ui-design-ux-design