Caio Pavoski · Site de apresentação profissional

Caio Pavoski: site de apresentação profissional

UX/UI
Construção com IA
SEO

Uma linguagem editorial com cor para apresentar um profissional de texto

Desenhei e construí o site de Caio Pavoski a partir da copy e das fotografias fornecidas por ele. A interface combina tipografia serifada, superfícies claras e azul escuro para organizar apresentação, serviços, processo e trajetória.

Explorar as telas

Cliente: Caio Pavoski
Tipo: Site de apresentação profissional
Minha atuação: Direção visual e design
UX/UI e organização da informação
SEO
Construção do site
Ferramentas: Lovable, ChatGPT
Prazo estimado: Cerca de um dia, com ajustes breves em outro
Abrir o projeto: caiopavoski.com.br ↗

§ 01

Contexto

Caio é redator publicitário e analista de comunicação. O site precisava reunir sua apresentação, competências e trajetória em um endereço profissional para agências, empresas e recrutadores.

Recebi dele os textos e as fotografias e organizei esse material na página. O principal cuidado de design foi compor um layout editorial com uso de cor, mantendo uma apresentação contida e ligada à sua atuação com texto.

§ 02
Decisões de UX/UI
01
Dar ritmo à página com tipografia e cor
Usei Libre Baskerville nos títulos e Source Serif 4 no corpo para construir a linguagem editorial. O azul escuro aparece em blocos como visão e contato, além dos botões e marcadores.
A alternância com as superfícies claras diferencia as seções. Linhas finas, ícones e espaço entre elementos completam a composição.
A cor diferencia o bloco de visão das superfícies claras. O trecho anterior no topo pertence ao enquadramento original.
02
Organizar os materiais por função
Distribuí o conteúdo recebido entre apresentação, visão, serviços, processo, trajetória e formação. Na abertura, texto, retrato e ações de contato ocupam áreas próprias.
Para os serviços, usei uma grade com ícones, títulos e descrições. O trabalho foi dar forma e hierarquia à informação; a redação veio do cliente.
Uma estrutura comum para os serviços. A redação é do cliente; a organização visual e a hierarquia são de Matheus.
03
Representar o processo como sequência
O processo de trabalho de Caio ganhou uma composição de quatro etapas alinhadas no desktop. Números, linhas e rótulos conectam briefing, pesquisa, estrutura e escrita, e revisão.
Essa seção tem uma organização diferente da grade de serviços. A sequência visual acompanha um conteúdo que explica como ele conduz o próprio trabalho.
Briefing, pesquisa, estrutura e escrita, e revisão em uma sequência visual do processo do cliente.
04
Levar a composição para telas menores
Os serviços passam de três colunas no desktop para duas no tablet e uma no celular. O processo também se reorganiza, enquanto apresentação e retratos passam a seguir um fluxo vertical.
Mantive a paleta e a hierarquia tipográfica, ajustando grades e botões. No celular, as ações da abertura ficam empilhadas e o menu, recolhido.
A grade de serviços em duas colunas, em emulação de tablet. O contorno no menu indica foco, não menu aberto.

§ 03

Construção com IA

Usei Lovable e ChatGPT para levar a direção visual à interface construída, a partir dos materiais recebidos.

Componentes de consulta: A página reúne navegação por âncoras, recomendações com controles de avanço, certificados ampliáveis e FAQ.
Execução: Estimo cerca de um dia na execução principal, com alguns minutos de outro dia dedicados a alterações.

§ 04

SEO

Implementei os fundamentos de SEO da apresentação profissional, ligados à atuação e à localização de Caio.

Apresentação para busca: Title e descrição específicos, URL canônica na raiz do domínio e idioma declarado.
Semântica: Um H1, títulos de seção, textos alternativos nas imagens e dados estruturados para o profissional, o serviço e o site.

↳ Os elementos foram observados no DOM renderizado. Não há dados de ranking, tráfego ou contratação atribuídos ao site.

§ 05

Entrega e estado do conteúdo

Caio gostou da entrega, pelo retorno que tive. Na versão documentada, a seleção de trabalhos ainda aguardava os projetos que ele iria separar. O case apresenta a interface já construída, com essa etapa de conteúdo em aberto.

§ 06