Produto implementado · projeto para uma médica veterinária
Plataforma educativa sobre répteis feita sob medida para um santuário, com enciclopédia própria, ficha de cada morador e um arquivo de acontecimentos. Site público e painel de administração saíram como um produto só.
3partes ligadas entre si: a Covilpédia, a ficha de cada morador e o museu de registros
OrigemUm espaço próprio para ensinar sobre répteis
SoluçãoConectar conhecimento, perfil individual e registros
ARQUITETURASISTEMA VISUALGESTÃO DE CONTEÚDOIMPLEMENTAÇÃO
Antes de abrir o Figma, quero saber o contexto, as restrições e quem sente o problema no dia a dia.
ContextoBenchmarkingRestrições
02
Duvidar
Separo o que eu sei do que eu acho. Na Matriz CSD, coloco certezas, suposições e dúvidas lado a lado, e cada suposição vira uma hipótese para testar.
Matriz CSDHipótesesPesquisa
03
Estruturar
Primeiro fluxo, arquitetura e hierarquia, depois a estética. Sigo a Lei de Jakob: a interface deve funcionar como as que a pessoa já conhece.
ArquiteturaFluxosLei de Jakob
04
Desenhar
Defino componentes, tipografia, cor e espaçamento para manter a interface consistente entre telas e estados.
Design SystemTokensUI
05
Avaliar
Coloco a proposta à prova com tarefas de uso, medição de contraste e o feedback que tiver. Anoto o que observei e o que ainda falta testar.
Teste com usuáriosWCAG 2.2Dicromacia
06
Implementar
Levo telas e estados para o código, para ver se as decisões de design funcionam, se adaptam a qualquer tela e são viáveis.
ReactTypeScriptHTML/CSS
IA · transversal
Uso IA para organizar material, explorar ideias e acelerar a implementação. Confiro as fontes, reviso o que sai e as decisões de design continuam sendo minhas.
Medido/ Este site
Contraste foi uma das decisões deste site. Os pares abaixo mostram como mantive a leitura confortável sobre o fundo pastel.
AaLeitura confortável em qualquer tamanho.15,48:1
Texto principal sobre papel
15,48:1
Texto normal AAA
≥ 7:1
Foreground
#171C17
Background
#F8F2E4
#171C17 sobre #F8F2E4. Par do texto principal, mantendo o fundo pastel original.
WCAG 2.2 · 1.4.6 · contraste de texto
AaLeitura confortável em qualquer tamanho.7,28:1
Texto secundário em superfície de apoio
7,28:1
Texto normal AAA
≥ 7:1
Foreground
#3B4537
Background
#E4DBC5
#3B4537 sobre #E4DBC5. Medido na superfície clara mais escura do site. Navegação, legendas e metadados usam cores cheias, sem transparência.
WCAG 2.2 · 1.4.6 · contraste de texto
As cores dessas medições6 tokens · hex, nome e função
Papel Cru#f8f2e4Superfície de leitura de todas as páginas.
Tinta Bosque#171c17Corpo de texto, tipografia display e seções invertidas.
Tinta Sombra#3b4537Texto secundário e traço de controle.
Papel Envelhecido#efe8d6Superfície de apoio para leituras e legendas.
Verde Mata#035338Ação primária e ênfase.
Verde Profundo#023c29Estado hover das ações e links.
Calculei a partir dos hexadecimais, com a fórmula de luminância relativa (sRGB) da WCAG 2.2, só para os pares sólidos mostrados aqui. As capturas antigas dos projetos mantêm as cores originais. Teclado, foco e conteúdo são verificados à parte.
Sobre/ Sobre mim
sobre-mim.css
1.nome::after {
2content: "Christian Barnard";
3font-family: "Unbounded";
4color: #171c17;
5}
Matriz CSD
Certezas
Suposições
Dúvidas
Handoff · Botão
14253.85rem 1.5rem · gap .55rem
Frame · Botão
Ver cases ↓142 × 53
Acessibilidade
15,48:1
WCAG AAA
Do problemaà interface.
Métodos e concepção
Design & Produto
FigmaUX ResearchPersonasMatriz CSDArquitetura da InformaçãoUser Flows & WireframesPrototipagem InterativaDesign SystemsDesign TokensAcessibilidade (WCAG 2.2)Testes de UsabilidadeA/B TestingMVP & RoadmapsHandoff
Do design ao código
Implementação
ReactTypeScriptJavaScript (ES6+)HTML5 & CSS3Tailwind CSSAPIs REST & CRUDSQL & Modelagem de DadosGit & GitHubLLMs & IA AplicadaAutomação (n8n)
Postura e colaboração
Soft Skills
Ponte Design-EngenhariaPensamento Crítico & AnalíticoResolução de ProblemasVisão de ProdutoAtenção aos DetalhesAutonomia & ProatividadeAdaptabilidadeEmpatia com o Usuário
Trajetória/ Minha trajetória
Formação
Bacharelado em Design na CESAR School, iniciado em Ciência da Computação.
Base
Recife, Pernambuco.
Procurando
Vaga júnior ou estágio em Product Design e UX/UI, com front-end como diferencial.
No design, trabalho com organização da informação, fluxos e interface. Gosto de entender a necessidade de verdade, deixar as escolhas fáceis de entender e acompanhar como a solução se sai no uso.
Comecei em Ciência da Computação na CESAR School, e foi lá que aprendi front-end. Nos projetos da faculdade, fui percebendo que eu contribuía mais quando estava definindo interfaces, organizando fluxos e decidindo interações. Por isso mudei para Design, e trouxe o lado técnico comigo.
No curso de Design, estudar Interação Humano-Computador me aproximou da acessibilidade. Comecei a prestar mais atenção em como affordances, feedbacks e navegação mudam o jeito como alguém entende e usa uma interface. Hoje acessibilidade é critério de projeto para mim e entra nas decisões desde o começo.
Uso o design para entender necessidades, organizar fluxos e tirar atrito do caminho. Uso o código para testar decisões e ver a ideia funcionando. Para mim, uma solução só amadurece quando alguém pode usar, avaliar e melhorar.
Procurandoumdesignerqueentendeocódigo?
Estou disponível para estágio, vagas júnior e projetos freelance em UX/UI e Product Design. Conte sobre a oportunidade ou o produto que você está construindo.
