Giovanni Trivellato / Processo & inspirações

Nada nasce
do zero.

Um pouco das referências, tentativas e ideias que foram transformando meu portfólio em algo cada vez mais com a minha cara.

01

O primeiro portfólio

Um projeto que deu certo, mas que ainda não parecia tão meu quanto eu queria.

2025 · O ponto de partida

Eu queria que meu professor usasse meu portfólio como exemplo. Dito e feito.

E deu certo. Além de ser mostrado para os alunos do ano seguinte, ele ainda foi escolhido como um dos melhores portfólios do meu ano. Tenho muito carinho por ele, mas alguma coisa sempre me incomodava. Eu tentava continuar o projeto, mexia em uma parte, trocava outra e, no fim, nada parecia me satisfazer de verdade.

Mesmo assim, ainda gosto bastante das cores, dos cards de projetos, da primeira página e do menu lateral. Já a primeira parte de habilidades, o contato e o rodapé são coisas que até hoje eu olho e penso: não era isso que eu queria passar.

Visitar versão antiga Ver repositório
02

Das referências para a interface

Mais ou menos na ordem em que fui encontrando as ideias e pensando: “isso pode ficar legal”.

Primeira tentativa

Uma referência abriu o caminho, mas ainda faltava alguma coisa.

Como sempre faço quando preciso de ideias, fui ficar um tempo navegando pelo Pinterest. Achei esse design, gostei bastante da proposta e resolvi testar no portfólio. Fiz até uma animaçãozinha para acompanhar. Ficou legal, não ficou ruim, mas a página ainda parecia muito vazia.

Primeira referência visual encontrada no Pinterest
Referência: @artemkutcher
Pastas, não aplicativos

Foi aí que a página começou a ganhar mais personalidade.

Depois achei essa referência com pastas e pensei que faria mais sentido usar isso no lugar de ícones comuns de aplicativos. A página ficou bem mais visual e começou a se aproximar do estilo que eu estava buscando.

Referência visual com pastas usada na página inicial
Referência: @ontoflow
Composição

Um grid 2 × 2, cards ao redor e o conteúdo no centro.

Depois foi hora de arrumar o layout. Em vez de deixar tudo em uma linha, montei um grid 2 × 2 e coloquei o conteúdo principal no centro. Uma referência me deu a ideia dos cards ao redor e a outra parecia uma mesa cheia de ícones. Juntei as duas coisas e adaptei para ficar mais limpo e mais “Apple”.

Referência de uma mesa visual com ícones Referência de cards ao redor de um conteúdo central
@abhishekbariyaa + @ruslan_siiz
Páginas internas

Demorou, mas achei uma estrutura que funcionava para o resto.

A página inicial já estava começando a fazer sentido, mas eu fiquei bastante tempo sem saber o que fazer nas páginas internas. Quando achei essa referência, gostei da organização, dos espaços e da navegação lateral. Aí usei essa lógica como padrão para o resto do portfólio.

Referência de layout usada nas páginas internas
Autoria não identificada
Uma trilha de verdade

Formação e experiência não precisavam ser só uma lista.

Eu queria que essa parte parecesse uma trilha de verdade, mostrando o caminho que fui fazendo. Peguei a referência como base e conectei as datas, escolas e estágios em uma sequência mais visual.

Referência de uma linha do tempo vertical
Referência: @ninhstudio
03

Movimento e identidade

As referências acabaram mudando muito mais do que só o layout.

Off+Brand

Foi daqui que veio a vontade de animar tudo

Desde o ano passado, o site do Lando Norris chamava muito a minha atenção. Fui atrás de quem tinha feito e acabei encontrando a Off+Brand. Curti muito o menu hamburger, o cursor, as setas e, principalmente, como as animações faziam parte da navegação sem deixar tudo pesado. Aí comecei a pesquisar como eu poderia criar meus próprios ícones animados para sites e aplicativos.

Visitar Off+Brand
LottieFiles

Da curiosidade para a prática

Foi pesquisando essas animações que eu encontrei o LottieFiles. Comecei vendo aulas, fiz cursos da plataforma e aprendi a preparar animações para usar em interfaces. Foi daí que saíram as ideias para o hamburger, as setas, o botão do formulário e outros detalhes deste site.

Conhecer LottieFiles
Apple

Bonito, claro e sem exagero

Sempre gostei da forma como a Apple junta um visual bonito com uma comunicação simples. Quis trazer um pouco dessa sensação para o site e isso também me ajudou a organizar a identidade da trvzera, que saiu do laranja e cinza para o branco e azul.

Ver documentação de design
04

O que ficou desse processo

Depois que achei a direção certa, o resto foi fluindo bem mais naturalmente.

Design como comunicação

“Se você copiar de um autor, isso é plágio, mas se você copia de muitos, é pesquisa.”

Roube como um artista.

No fim, fui pegando um pouco da essência de cada referência e adaptando tudo para ficar com a minha cara. Nesse meio-tempo, continuei lendo Não Me Faça Pensar, acompanhando a documentação de design da Apple e fazendo o curso de design da Origamid.

Pra mim, o design e a comunicação são algumas das partes mais importantes de qualquer site, aplicativo ou marca. O projeto pode ser muito bom, mas, se ele não consegue mostrar isso direito, a primeira impressão já fica estranha.

Um design nunca nasce de uma coisa só. Ele reúne referências, experiências e escolhas diferentes — e é a forma como cada pessoa combina tudo isso que torna o resultado único.
05

Créditos

Os perfis que consegui encontrar por trás das referências usadas no processo.

Voltar ao topo