Portfolio, o que eu aprendi com ele

Um relato dos altos e baixos, idas e vindas do processo de contrução do meu portfolio como designer.

A etapa de pesquisa está presente em todo projeto de design, em alguns casos basta uma conversa ou entrevista para compreender o problema passado pelo cliente e em outros é preciso uma investigação maior, que pode envolver longos períodos de imersão e visitas a outros lugares.

Construir um portfólio pessoal é um tipo específico de projeto. Para entender o objeto dessa pesquisa é preciso olhar pra dentro e nao pra fora; é preciso entender que mesmo sem você ter consciência ele já vem sendo estudado há anos; ele é inconstante e carregado de sentimentos. Esse tipo pesquisa só pode feita por você e para você pois o resultado precisa resumir de forma objetiva a abstração do seu ser individual. Por isso que projetar para si pode ser uma tarefa difícil.

Recentemente passei por esse desafio, e esse texto é um relato dos altos e baixos do processo de construção do meu portfolio de design. Espero que possa ser útil a qualquer um que esteja em um momento parecido com o meu.

Por onde começar

O principal objetivo foi fazer com que o meu trabalho tivesse um alcance maior. Por isso escolhi fazer meu portfólio online ao invés de um pdf ou impresso. Poderia usar alguma plataforma já pronta, como behance ou cargo collective, mas esperava fazer com que o próprio suporte tradusse quem eu era e o que eu fazia, além de acreditar que ter meu próprio endereço na web me traria um ponto extra de credibilidade.

Não sei programar, preciso contratar um desenvolvedor para fazer o site? Eu diria que não, de fato a maioria dos projetos comerciais exige um conhecimento técnico de código que um designer gráfico não conseguirá atender, mas como se trata de um projeto pessoal, penso que pode ser uma boa oportunidade pra quem ainda não começou, se aventurar no meio mundo da web.

Já venho estudando as tecnologias da web a alguns anos, hoje tenho uma certa autonomia para construir sites, isso de fato acelerou muito o processo. Uso prioritariamente o Webflow, que é uma ferramenta que permite escrever código de maneira diferente, ele agiliza as etapas de programação pois traz elementos visuais de edição e preview instantâneo eu uma só tela. Não funciona como outros programas que propõem mágica como o Muse da Adobe, o Webflow exige conhecimento básico de html e css e isso faz com que resultado seja um código limpo e leve.

Neutro X Personalidade

A maioria dos portfólios são como galerias de arte, possuem paredes brancas, são claros com muito espaço em branco, o que eu particularmente acho uma chatice. Assim como nas galerias quero o foco total no meu trabalho, mas não quero pasteurizar a apresentação, afinal não é qualquer galeria, é a minha galeria, e sendo uma coisa tão particular ela tem que me representar. Partindo desse pressuposto o portfólio precisava ter impacto, ser interessante e se diferenciar da maioria.

Caminhos

Vou apresentar alguns estudos que me fizeram chegar até o layout final. É importante citar que dentro de cada caminho aconteceram dezena de experimentação, mas para encurtar o texto decidi mostrar apenas o passo final de cada uma delas.

O Tipográfico ⤶ Começando os estudo de como poderia expor meus trabalhos. Optei por seguir por um caminho experimental, que fugisse um pouco dos padrões da web e discutisse questões relacionadas a estética mainstream. Buscando trazer o máximo de impacto, montei um layout completamente tipográfico, com letras em caixa alta, grandes, expandidas, fundo preto e texto “full justify”. Os textos de contato e sobre, estavam sobre a tela sob uma segunda camada de informação que só era acessível quando o mouse passava por cima.

Proposta de layout do primeiro caminho.
Elementos gráficos.

Compartilhei com alguns amigos a primeira versão desse estudo já online para captar feedacks. Ouvindo a opinião deles e deixando a ideia maturar por alguns dias, percebi que esse exagero gráfico, poderia prejudicar a função. Com isso passei a achar que esse layout não estava mas me representando. Num ato de loucura, decidi jogar tudo fora e tentar algo diferente.

O todo azul Dessa vez a funcionalidade do portfólio era um ponto de atenção, mesmo usando uma navegação não tradicional, todos os links para projetos estavam em uma mesma tela, até quando estivesse em uma página de detalhes do projeto, tudo ficava a mostra para facilitar a descoberta de todos os outros trabalhos.

Caminho 2 já em um estágio avançado de desenvolvimento.
Telas auxiliares.

Busquei ainda alguns elementos de impacto, como as informações adicionais na camada acima e as letras bold em caixa alta. Além de optar por deixar tudo em azul, acreditando que isso poderia criar uma característica visual de identidade que faria com que as pessoas lembrassem dele.

Depois de já estar trabalhando a algumas semanas com esse caminho, abri meu armário de roupas e percebi que eu não tinha nenhuma camisa azul, tudo era preto, branco ou cinza. Definitivamente eu era não azul. Além de ver que a partir do momento que eu substitui os projetos placeholder pelo conteúdo final, o azul competia com as cores dos trabalhos, tirando a atenção do era principal. Mais uma vez vi que não poderia continuar com o esse caminho.

O Melhor de cada um ⤶ Depois de já estar a mais de 3 meses tentando construir algo que me fizesse sentir confortável e representado, decidi parar para avaliar tudo que aprendi com os estudo anteriores e tudo que eu ainda precisava trabalhar, com isso, comecei construir a terceira e última versão desse projeto.

Layout final.

Navegação — O layout do site agora está separado em 3 categorias: Trabalhos selecionados, Sobre mim e Pequenos trabalhos e experimentos. Decidi adicionar essa terceira parte para dar vazão a pequenos projetos que desenvolvo, os quais tenho muito apego e gostaria de mostrá los, mas como não eram grandes o suficiente para compor um estudo de caso, precisaram de uma parte especial.

Os trabalhos principais podem ser acessados a partir da primeira página. Quando abertos, surge uma nova parte que agora passa a ocupar quase toda a tela, para criar espaço para os detalhes de cada projeto.

Curores personalizados.

Tentei agrupar o máximo de informações que pude dentro de uma tela única. As seções funcionam como mini telas que comportam as informações que podem ser expandidas com a interação do visitante.

Todas essas mini telas precisam funcionar em dispositivos menores. Quanto acessado por tablets ou celulares elas se re-organizam de forma diferente.

Elementos visuais.

Elementos visuais — Recuperando os aprendizados anteriores, optei por um esquema usando somente o preto eo branco e trabalhando melhor as hierarquias entre textos e títulos. Tentando trazer as imagem com destaques assim que o mouse estiver sobre o elemento em foco.

Informações sobre projetos— Quando um projeto selecionado fica em destaque, algumas informações precisam ser passadas. Como a descrição do projeto, imagem do resultado e do processo, além de legendas e infos que ajudarão a contar a história do trabalho. Informações de crédito e links também estão presentes.

Página de detalhes de projeto.
Desdobramentos visual a partir do site em forma de cartão de visitas.

Conclusão

Não acho que o caminho que segui ou as escolhas que tomei foram as mais certas, também não acredito que possa existir um passo-a-passo ou metodologia de como fazer um portfólio, pois a intuição e a livre experimentação são etapas extremamente importantes neste percurso. O fato é que esse processo me ajudou a definir a minha personalidade como designer. Foi um projeto real e trabalhoso, pois ter que lidar com rótulos que criei para mim mesmo não foi fácil, mas sei que o resultado desse esforço pode abrir portas importantes na minha carreira.