Desenvolvimento web · estudo de caso
Portfólio editorial para estudante de Psicologia
Um site editorial, com uma página principal e três cadernos em páginas próprias, que conta uma trajetória em início de carreira com honestidade, do briefing à publicação.
Visão geral
O projeto em poucas palavras
Um portfólio pessoal, de página única, para uma estudante de Psicologia apresentar sua trajetória, suas experiências e suas reflexões. O site tem tom editorial, de revista, e três textos autorais em páginas próprias, chamados de “cadernos”. Não há formulário nem backend: o contato é um link direto para o e-mail.
Por respeito à privacidade da estudante, o nome e as fotos não aparecem neste texto.
Desafio
O ponto de partida
Apresentar alguém no começo da carreira exige cuidado. O site precisava ser honesto sobre o estágio em que a pessoa está — sem se passar por profissional formada, sem oferecer atendimento — e ainda assim transmitir seriedade, sensibilidade e vontade de aprender. Havia também um cuidado ético: nada de informações que pudessem identificar pessoas atendidas em estágios.
Processo
Do briefing ao visual
O conteúdo saiu de uma entrevista em cinco rodadas, registrada num briefing que consolida objetivo, público, tom de voz (primeira pessoa, reflexivo) e o que fica de fora. Só depois de o briefing ser confirmado, comecei a explorar o visual.
Para escolher uma direção sem gastar semanas em protótipos, gerei dez propostas visuais com uma ferramenta de imagens por IA, usadas apenas como mockups exploratórios, e conversei sobre elas com a própria estudante. A escolha foi por uma direção de revista, com muito espaço em branco e tipografia de destaque, que virou o portfólio final.
Solução
O que foi construído
Estrutura narrativa: apresentação, trajetória em linha do tempo, aprendizados e leituras, nessa ordem, para que quem chega entenda a história antes de chegar ao contato.
Identidade editorial: tipografia serifada de alto contraste combinada com uma sem serifa, sobre uma paleta de papel, tinta, vinho e dourado.
Três leituras em páginas com endereço próprio, fáceis de compartilhar e com link de volta ao portfólio.
Menu para celular acessível: abre e fecha por botão, informa o estado a leitores de tela, fecha com a tecla Esc e ao navegar.
Cuidados de acessibilidade: link para pular ao conteúdo, marcos semânticos, foco visível, textos alternativos em português e respeito à preferência por menos movimento.
Layout responsivo com pontos de quebra pensados para celular, tablet e telas grandes.
Resultados
Resultado
Um site leve, sem dependências de código nem etapa de build, que pode ser publicado em qualquer hospedagem de arquivos estáticos. A verificação de conteúdo, responsividade e acessibilidade foi feita manualmente, e o projeto não tem testes automatizados — uma limitação registrada no repositório.
Aprendizados
O que guiou as decisões
Num portfólio, o design serve à honestidade: o que a pessoa ainda não é importa tanto quanto o que ela já fez. Escrever o briefing antes de qualquer tela evitou que a estética decidisse o conteúdo, e usar IA só para explorar direções — não para produzir o resultado final — manteve a decisão nas mãos de quem vai assinar o site.
