Projetando contra a galeria: uma jornada de dois anos para uma experiência de portfólio em camadas | Codrops

Criar um portfólio para si mesmo é uma das tarefas mais desafiadoras para qualquer profissional criativo. Esta história não tem tanto a ver com mostrar trabalho, mas sim com provar a mim mesmo que posso criar um projeto excepcional. E assim começou minha jornada de dois anos criando um portfólio.

A história começou com uma ideia problemática: inicialmente, eu não queria apresentar projetos em um formato de galeria padrão. Não gostei muito da ideia de reunir tudo em uma única galeria onde a atenção fica dispersa entre os elementos e cada projeto se perde. Esse foi o maior problema que enfrentei.

Comecei a testar e experimentar. No início não havia nada de concreto ou claro: tive a ideia de uma lista – o mais inconveniente possível para navegar – e também de uma galeria 3D. Mas abandonei rapidamente estas ideias porque, primeiro, eram inconvenientes e, segundo, desenvolver uma galeria 3D teria sido muito difícil. Além disso, os projetos são atualizados periodicamente, o que complica ainda mais o processo.

Comecei então a desenvolver a ideia de uma lista, porque me parecia o sistema mais adequado. Mas havia um problema: era difícil apresentar projetos de destaque individualmente. Esta questão foi resolvida posteriormente nos conceitos, mas por enquanto a lista de obras continuou a evoluir. Inicialmente queria apresentar o projeto da forma mais concisa e vívida possível, para que antes mesmo de clicar a pessoa entendesse o que era e do que se tratava o projeto.

A ideia não surgiu de imediato, mas através da experimentação surgiu um sistema baseado em listas que posteriormente foi utilizado no projeto final. Não foi perfeito, mas já refletia a abordagem que eu buscava. Houve muitos erros e desafios relacionados à experiência e desenvolvimento do usuário, mas eu já estava começando a entender o sistema e a narrativa que queria criar. Este foi o primeiro passo para estabelecer e estruturar o estilo que queria alcançar.

A virada aconteceu quando eu estava pensando em como apresentar o projeto. Percebi que não queria o formato clássico onde informações e fotos se misturam. É inconveniente e não se adapta bem a diferentes projetos. Foi aí que começou a busca por soluções: eu precisava mostrar o conteúdo e fornecer informações sobre o projeto sem sobrecarregar o espectador. Inspirei-me em janelas modais e soluções que apresentam conteúdo em camadas. A ideia de uma janela modal para o projeto surgiu enquanto eu estava refazendo o layout. Gostei que todas as informações essenciais pudessem ser colocadas em uma pequena área para que não distraíssem a exploração do projeto, mas o complementassem.

Surgiu então uma questão estética: como tornar este elemento perceptível sem que ele se destaque do sistema, mantendo a hierarquia correta dentro dele. Meu colega e amigo Artem Markovsky me deu alguns conselhos. Ele sugeriu a diferenciação não apenas pelo estilo ou escolha da fonte, mas também pelo tamanho tipográfico. Essa abordagem foi muito útil. Com essas pequenas mudanças, o sistema funcionou conforme planejado. Em seguida, iniciou-se o processo de desenvolvimento do projeto e das ideias conceituais.

O projeto do site durou dois anos. Durante esse período, foram criados seis conceitos de design, e o sexto – aquele que você vê agora – tornou-se a versão final. Durante o processo, enfrentei muitas dificuldades e barreiras psicológicas porque queria tornar o projeto muito bonito e fácil de usar, e ir além do meu nível atual. Só depois de aceitar o escopo e os prazos, e graças aos conselhos de amigos, é que entendi exatamente o que queria alcançar e como.

GSAP Express

por Carl Schooff

Comece a usar o GSAP rapidamente e aprenda técnicas básicas de animação enquanto cria projetos reais neste curso gratuito para iniciantes.

Pilha de tecnologia

Meu irmão cuidou do desenvolvimento. Construímos o projeto em Webflow , usando GSAP e JavaScript personalizado.

Prestamos atenção especial às microanimações e à capacidade de resposta em diferentes telas para garantir a experiência mais agradável em todas as plataformas.

Interações

Todo o design é baseado em camadas – este princípio está presente por toda parte. Permite aos usuários interagir com o conteúdo, explorá-lo e processar simultaneamente dois fluxos de informação, como os aspectos visuais e semânticos. O design apresenta profundidade e camadas 2D.

Durante o processo foram criadas máscaras SVG para apresentação dos trabalhos selecionados, bem como para o próximo projeto. O painel que revela informações, o botão de contato expansível, a visualização do currículo e assim por diante – todos esses elementos têm um único propósito: mostrar camadas sem atrapalhar a exploração do conteúdo. Vamos examinar essas ideias com mais detalhes.

Página inicial

O principal elemento que as pessoas encontram ao entrar é a página inicial. Uma tela e um vídeo. Simples, muito leve e intuitivo, mas controverso. Pensei muito sobre como projetar a página inicial e isso também foi uma experiência.

Rejeitei imediatamente a ideia de tornar a página inicial uma página completa porque não queria sobrecarregá-la. Era importante para mim que o usuário decidisse por si mesmo o que queria ver, em vez de rolar imediatamente para baixo para encontrar o conteúdo usual. Talvez esteja errado, mas foi o que fiz.

Essencialmente, a tela inicial é um hub: contém todos os itens necessários e navegação com dois cliques. O carrossel fornece contexto e engajamento, enquanto o modal de contato conecta convenientemente eu e o cliente com um único clique. E se o cliente precisar de tempo para pensar, pode sempre selecionar um item interessante do menu e explorá-lo mais a fundo.

Galeria de projetos

Este é o sistema principal e padrão. Inicialmente, eu queria exibir os projetos como uma lista, mas estava preocupado que esse formato não me permitisse destacar os principais projetos. Foi assim que nasceram duas soluções radicais.

A página principal de todos os projetos possui uma estrutura clara, simples e intuitiva: um cartão pop-up, informações do projeto e fotos. Você não precisa clicar em um projeto para entender do que se trata. Esta não é uma galeria clássica com uma única foto: aqui estão várias imagens que descrevem o projeto desde os primeiros segundos e ajudam a decidir se vale a pena clicar e se o projeto é relevante. É conveniente porque você pode explorar imediatamente os projetos de seu interesse.

Os projetos selecionados usam um mecanismo diferente – o efeito uau – com formas e máscaras SVG. Isso é feito para dar profundidade aos projetos e mostrar que eles são mais do que apenas design: os projetos se destacam pela singularidade ou pelos resultados alcançados. São dois sistemas distintos que convivem em perfeita harmonia e atendem às necessidades de públicos distintos.

Informações do projeto

É apresentado como um menu suspenso e segue o mesmo algoritmo em todos os lugares. Alguns campos ficam ocultos se não estiverem presentes nos projetos. Isto é conveniente: as informações do projeto estão sempre ao seu alcance e não interferem na navegação.

No celular, isso é implementado com um botão na parte inferior da tela para facilitar o clique. A informação se expande totalmente, permitindo que você a leia, feche-a convenientemente e continue explorando o conteúdo.

Ao final de cada projeto, há um breve resumo e uma transição para o próximo projeto, apresentado em um formato único com uma dica de ferramenta instantânea. As dicas de ferramentas flutuantes em todo o site apresentam um ligeiro atraso e animação suave, fazendo você querer vê-las repetidas vezes!

CV

Uma estrutura simples, que faz muito sentido e é muito necessária no mundo de hoje. Percebi que quando você não atualiza seus projetos e os retoma por muito tempo, fica muito difícil fazer alterações depois. Adicionei um resumo atualizável de todos os meus projetos e experiências ao site, que pode ser baixado com um único clique como um documento conveniente.

Isso é conveniente para eu atualizar o conteúdo e para os clientes ou RH entenderem de forma rápida e fácil quem eu sou e como posso ser útil. O formulário foi projetado para ser o mais conciso e simples possível, para que você não precise rolar para cima e para baixo ou olhar de uma borda a outra da tela: tudo que você precisa está no centro – simples, claro e rápido.

Blog

O blog está organizado em seções: o conteúdo fica à direita e as informações gerais sobre o artigo à esquerda. O lado direito é organizado para facilitar a leitura e a navegação. Para simplicidade e navegação rápida, um botão de índice foi adicionado ao artigo, ajudando os usuários a irem para a seção que precisam ou que consideram interessante.

Também havia a questão de como exibir artigos adicionais. Não queria usar o método clássico com lista de artigos. Então coloquei dois formulários no canto inferior direito e adicionei uma dica de ferramenta instantânea que muda conforme o mouse se move sobre os formulários. Para tornar as mudanças mais visíveis, adicionamos uma inclinação em diferentes direções.

Sobre mim

A página “Sobre mim” contém alguns elementos interessantes. Um deles é um vídeo de rolagem em que saio do quadro e começa uma narrativa sobre quem eu sou. Esse efeito gerou muitas reações positivas porque, desde o início, as pessoas são apresentadas à pessoa de quem a história se trata. Além disso, a página usa um formulário baseado em rolagem que se expande conforme você rola, revelando uma imagem de altura total mostrando os principais princípios de design. É um excelente gatilho de sotaque, após o qual a página muda para um estilo preto. Na parte inferior da página, há um botão de foco que aparece quando você passa o mouse sobre o texto no rodapé. Este é um bom exemplo de interação com o cliente.

Arquitetura e estrutura: organizando código, garantindo desempenho e permitindo escalabilidade

Essencialmente, todo o projeto é baseado na estrutura e arquitetura do conteúdo e na forma como os usuários interagem com ele. Não vem com efeitos surpreendentes em cada pergaminho, mas não precisa ser. O objetivo inicial era criar um sistema de exploração de projetos intuitivo, fácil de usar e rápido, para que as pessoas pudessem entender os pontos principais sem sequer clicar.

Para criar um efeito “uau”, adicionamos uma lista de trabalhos selecionados: é preciso destacar os melhores projetos e dar-lhes atenção especial. Mas o foco principal estava em todas as obras. Também colocamos ênfase especial na adaptabilidade e flexibilidade, para que os elementos de design funcionem igualmente bem em telas pequenas e grandes. É por isso que os botões apresentam ícones e os elementos são destacados com alto contraste e fáceis de entender. Eles não se chocam nem se misturam. Foi dada especial atenção ao desenvolvimento e otimização para garantir que o site funcione em dispositivos de diferentes níveis de desempenho.

Os elementos da marca têm uma história própria. Na marca, eu queria criar uma simbiose entre minha abordagem minimalista e um estilo ousado e com sotaque. Graças a essa abordagem, criamos bonés, velas, isqueiros e muito mais – todos com designs e estilos que transmitem a mensagem que eu queria transmitir. O logotipo também foi utilizado no site em um estilo simplificado para criar um ponto focal e equilibrar a composição, enquanto a marca inclui uma versão em escala real do logotipo que funciona em diversas mídias.

Na essência da marca, eu queria refletir a natureza multifacetada e os princípios que incorporo em meu trabalho. É por isso que a versão final da marca inclui dois formatos de logotipo: uma versão grande e uma versão pequena, além de mídias e elementos com humor e estilo completamente diferentes: itens, adesivos, chaveiros, mercadorias e assim por diante. Eu queria trazer toda a versatilidade e estilo que incorporei ao site – incluindo o uso de quatro fontes – para o mundo real, tornando-o claro, tangível e físico.

Reflexões

Nesta seção vale a pena abordar a relevância de um portfólio e de um site para uma pessoa criativa em geral. É realmente um sistema muito complexo e difícil, incrivelmente difícil de construir. Ao passar por esse processo, você começa a se entender de maneira diferente. Você aprende a avaliar suas ideias e mensagens e a trabalhar na forma como os outros as percebem.

Gostaria de refazer alguma coisa? Definitivamente sim – o portfólio não é perfeito e tem muitos problemas em relação aos padrões de design e UX, mas é o meu portfólio e se adaptará a mim com o tempo. Se eu tivesse a chance de viajar no tempo e recomeçar, ficaria feliz em passar novamente por todos os desafios que enfrentei nos últimos dois anos. Eu apenas tentaria não me limitar e projetar com o coração – não para criar um site ou projeto insípido que apenas gere leads, mas para criar um visual e um site que você vai adorar e do qual se divertirá muito.

A parte mais difícil é começar e não se criticar pelos erros – provavelmente é isso que eu teria feito. Espero que meu projeto e apresentação tenham ajudado a transmitir tudo o que eu queria compartilhar. Para alguns, o projeto servirá de espelho e os ajudará a encontrar soluções para seus próprios problemas, enquanto outros podem não gostar.

Espero que meu projeto e apresentação sejam úteis e ajudem a inspirar mais algumas pessoas. Eu amo tudo!