Características de um portfólio moderno
De todos os tipos de sites, o site do portfólio tem que superar o que pode ser um dos obstáculos mais difíceis. Converse com quase qualquer designer e eles concordarão, lançar seu próprio site de portfólio é um processo doloroso. Mais frequentemente, este processo inclui várias versões e, muitas vezes, um lançamento de pura frustração.
A vantagem disso, na minha opinião, é que o site do portfólio pode ser uma janela para o futuro do web design. Sugiro isso porque, quando um indivíduo projeta seu próprio site, ele está apenas sob limitações auto-impostas. Não há cliente para ditar coisas, nenhum comitê para destruir o projeto e nenhum processo de aprovação para arrastar as coisas e destruir o momento.
Mas nem todos os sites de portfólio são criados iguais. Apesar da quantidade insana de sites de portfólio de amostra disponíveis, há surpreendentemente poucos que se sentem distintos e interessantes o suficiente para falar. São esses sites, no entanto, que elevam a fasquia e expõem o que o futuro pode significar para web design.
Vamos mergulhar em um grande conjunto de portfólios impressionantes e procurar alguns elementos comuns que os façam funcionar. Alguns desses elementos expõem as tendências da indústria, enquanto outros demonstram um design simples e comum. Nem todos têm um significado enorme, mas todos eles se somam a designs fantásticos que desafiarão você a criar um site de portfólio realmente extraordinário.
Conte uma história
Um dos aspectos mais interessantes de um site de portfólio moderno é o esforço para criar um ambiente de contar histórias. A ideia é criar um fluxo de conteúdo que essencialmente controle a experiência e a mensagem para o usuário. Esse controle cria um fluxo de conteúdo em uma ordem desejada.
Muitos sites tentam fazer esse tipo de coisa colocando a navegação principal em uma ordem desejável. Mas esses sites levam a abordagem a um nível todo conhecido e fazem dela uma parte inevitável da experiência.
Jan Ploch
O uso de um único site de página não é novidade e, por sua definição, força o usuário a rolar a página. Isso cria um fluxo natural de conteúdo que foi usado inúmeras vezes. Neste site, porém, encontramos uma abordagem raramente usada com um fundo animado. Enquanto você rola a página, é como se o refrigerante no fundo estivesse sendo sugado pelo canudo.
Este elemento simples e decorativo faz algo realmente poderoso; Ele incentiva você a percorrer todo o caminho até a página. Este é fundamentalmente um aspecto crítico do site de uma única página: garantir que os usuários cheguem até o final da história. E o final da história é tipicamente o ponto de conversão do site (como é neste caso).
Tam Cai
O site deste indivíduo também demonstra o modelo de storytelling de página única. O que eu acho interessante sobre este site em particular é que a história é finalizada por dois visuais poderosos, com toda a carne no meio. O grande conjunto de ilustrações no topo da página define um clima, demonstra a personalidade do artista e geralmente convida você a mergulhar em seu mundo. A página é então finalizada com as opções de contato (pontos de conversão) e uma fotografia dramática do que nós supomos ser o criador.
Certamente não é um estilo para todos, mas quando uma abordagem temática é produzida de uma maneira tão polida quanto isso, os resultados podem ser impressionantes. E, embora o site não atraia todos os visitantes, ele atrairá as pessoas certas e ajudará o criador a fazer o tipo de conexões que ele valorizará.
MacMillan Lynch
Este exemplo leva um pouco de uma abordagem diferente. A parte da história deste site é breve e está contida dentro do gráfico principal da home page. Neste caso, a história é praticamente irrelevante, exceto pelo fato de criar um senso de mistério para entender. Ao aterrissar no site, fiquei imaginando o que diabos era essa pessoa. Às vezes você quer colher seus visitantes; outras vezes, pode funcionar muito bem para sugá-los com uma história ou mistério interessante. Isso também tem a vantagem de criar um site bastante distinto e esperançosamente memorável.
Projeto Sallee
No site Sallee Design, encontramos uma abordagem mais típica à estrutura do site. Logotipo no canto superior esquerdo, navegação principal na parte superior e apresentação de slides da página inicial padrão. De muitas maneiras, este é um site muito normal (com um belo design aplicado).
O que eu achei interessante foi que a apresentação de slides da sua página inicial não era apenas uma série de imagens em Flash auto-rotativas. Em vez disso, a apresentação de slides é iniciada pelo usuário e começa com um convite para iniciar um tour. Depois de mergulhar, você é levado a uma série de slides que resumem o que você obteria se, ao invés disso, cavasse as várias páginas do site. E tudo é terminado com os principais pontos fora do resto do site.
Eu acho que essa abordagem é inteligente. Para começar, é interessante ver um elemento como o controle deslizante da página inicial com uma finalidade totalmente planejada. Eu também adoro que eles obtenham o benefício de um único discurso de vendas de páginas, e o bônus de SEO fornecido por ter um número maior de páginas.
Design Responsivo
O tópico de web design responsivo é, para dizer o mínimo, um tema extremamente quente. Portanto, não é surpresa descobrir que essa abordagem pode ser encontrada em portfólios novos que estão sendo produzidos agora. Desimpedidos, esses indivíduos abraçaram a nova técnica. E não surpreendentemente, todos os três exemplos aqui são para sites de portfólios de desenvolvedores front-end, exatamente o tipo de lugar que devemos esperar para encontrar uma coisa dessas.
Ryan Taylor
O site de Ryan segue a fórmula padrão de uma página para um portfólio pessoal. Essa abordagem funciona muito bem ao integrar técnicas responsivas ao site. Com apenas uma página para contabilizar, pode ser muito mais fácil testar e criar um site como este. Mas não pense que é fácil. É preciso muito esforço e planejamento para criar um site limpo e bonito que se transforma dessa maneira.
Aaron Shekey
Em seguida é o portfólio de Aaron Shekey. Este pequeno e belo site abrange muitas técnicas testadas e verdadeiras para um site de portfólio. É semi-minimalista, subjugou cores para permitir que as imagens surgissem e tem um design amplamente baseado na tipografia. Como este site funciona lindamente e é extremamente eficiente em mostrar o trabalho do artista. Mas, com a vantagem adicional de um layout responsivo, o site tem a garantia de ter boa aparência em uma ampla variedade de dispositivos. Isso garante que o usuário tenha uma experiência positiva, sem frustração de zoom e digitalização.
Andrew Cohen
Finalmente, na categoria responsiva, encontramos o site pessoal do desenvolvedor front-end Andrew Cohen. Muito parecido com os outros, ele tem uma estrutura de página única com o que eu chamaria de design orientado para o segundo plano. Desta forma, o fundo pode mudar e mudar sem uma grande necessidade de mudanças estruturais. Isso torna o site um candidato perfeito para a introdução de técnicas responsivas.
Layouts criativos
Às vezes, a melhor maneira de impressionar é se destacar como única e diferente. E que melhor maneira de conseguir isso do que com uma estrutura de layout incomum que zomba das normas e expectativas que todos nós temos. Até certo ponto, quase todos os exemplos nesta coleção demonstram esse atributo específico, mas eu selecionei este pequeno sub conjunto para demonstrá-lo.
E antes de mergulhar, quero salientar que esses sites não fazem uso de layouts criativos apenas por causa da criatividade. Eles ainda são sites funcionais que são extremamente claros e simples de usar. No entanto, eles têm suas próprias personalidades distintas que lhes permitem se destacar. Isso se relaciona exatamente com o que um site de portfólio deve fazer: ajudar seu criador a se destacar da multidão.
Krichevtsova Alexandra
O que eu realmente amo nesse exemplo para o tópico de layouts criativos é que não é um layout radicalmente diferente. Sim, o site não segue o logotipo normal no canto superior esquerdo, a navegação na abordagem superior. O layout é apenas alguns pequenos passos de lá embora. Eu acho que isso demonstra muito bem o ponto.
O objetivo não é inventar um layout para ser criativo. Mas, em vez disso, ser criativo ao dispor a página para comunicar as informações da melhor maneira possível. Nesse caso, o fluxo criado pelo layout ligeiramente atípico funciona maravilhosamente.
David Desandro
Neste caso, o layout parece completamente incomum. Em algum nível, parece incompleto e, ao mesmo tempo, parece completamente organizado e fácil de usar. Explore o portfólio e outras páginas e você ficará impressionado com a diversidade que esse site apresenta. Definitivamente tem um apelo ao criativo, mas tecnicamente atento.
Deidre Bain
Este site de rolagem de uma página também quebra as normas de estrutura de layout. Nesta amostra, quase todo o design é baseado em layouts e ilustrações específicos da página. Normalmente, essa é uma abordagem que não funciona bem e leva a problemas de manutenção. Mas no caso de um site de portfólio pessoal, é realmente uma ótima maneira de demonstrar algumas habilidades úteis. Mais particularmente, há rigor no site que deixa você esperando que esse designer seja do tipo que segue as coisas. São essas mensagens sutis que podem ser extremamente poderosas para se comunicar no site de seu próprio portfólio.
Siddharth Arun
No primeiro take, este site tem a sensação de um que segue o protocolo padrão. Mas interaja um pouco com o site e parece totalmente único. Às vezes, criar seu próprio toque criativo não significa que você tenha que reinventar tudo. Basta mudar o suficiente para que os resultados sejam surpreendentes (e funcionais).
Texto em negrito
Como observei as miniaturas dos sites coletados para apresentar aqui uma coisa realmente se destacou: o uso de texto extremamente grande e em negrito. As amostras listadas abaixo apresentam texto enorme que se destaca no site. A principal razão que posso propor para essa abordagem é a clareza.
Esse grande texto em negrito garante que pelo menos uma mensagem principal seja comunicada. Em alguns casos parece mais funcional que outros, mas no final o resultado é sempre o mesmo. A atenção do usuário é quase garantida para ser direcionada para esta cópia gigantesca. Observe as amostras e anote as várias maneiras pelas quais os criativos colocaram esse elemento para funcionar.
Garth Humphrey
Justin Burns
Amã Jordânia
Ross Angus
Alex Pierce
Apare no topo
Como mencionei anteriormente, alguns dos padrões são muito menos funcionais e significativos do que outros. Neste caso, quase me sinto mal ao colocar as amostras a seguir em um conjunto tão frívolo. Os sites apresentados abaixo são absolutamente lindos; por favor, não leve essa classificação como nenhum tipo de insulto. Na verdade, dois dos meus sites favoritos deste artigo são encontrados aqui.
Basicamente, o padrão é que algum tipo de faixa decorativa, uma linha sólida ou um padrão de ziguezague aparece na parte superior. Limitei esse conjunto a três sites, mas se você examinar alguns dos outros exemplos, encontrará o mesmo elemento no trabalho.
Por que um detalhe tão pequeno como esse é tão comum? Talvez com a abordagem de página única seja bom denotar o topo da página. Dessa forma, os usuários recebem uma pequena indicação visual de onde a página começa.
Mathieu White
Toque nerds
Danilo Giagnoli
Textura textura
Outro detalhe visual que é extremamente comum em sites de portfólio é a textura. Isto é especialmente verdadeiro quando se trata de elementos de fundo. Parte do estilo visual atual incorpora texturas sutis no plano de fundo.
Eu acho que este elemento faz um ótimo trabalho de incorporar um pouco de um elemento orgânico na página que ajuda a removê-lo de seus fundamentos técnicos. Este elemento simples pode adicionar um toque quente que de alguma forma respira uma tonelada de vida em um design. Novamente, vasculhe muitas das amostras anteriormente cobertas e você encontrará numerosos exemplos desse elemento em funcionamento. Aqui estão algumas amostras que fazem isso muito bem.
Bjarke Clauson-Kaas
Aaron Lumsden
DS Higdon
Andrew Ckor
Sites de portfólio adicionais dignos de nota
Existem inúmeros candidatos para este tipo de coleção. É tentador incluir quase muitas amostras nesse caso. Em vez disso, concentrei-me em uma coleção adicional de sites que apresentam uma ampla gama de estilos, estruturas e abordagens gerais.
Uma coisa que você notará é que alguns desses sites não são para designers. Achei muito interessante ver como outras indústrias usaram a web para vender um indivíduo. Afinal, um site de portfólio é destinado a fazer exatamente isso. Então, por inspiração e idéias novas, eu incluí alguns fora da comunidade de web design.
Collin Henderson
Josh Miller
Nate Croft
Torsten Meb
Joey Rabbitt
Eric Salvail
Bekka Reese
Felix Menard
Marija Zaric
Tobias Persson
Jake Dahn
Conclusão
Criar um site para representá-lo online não é uma tarefa pequena. Espero que os sites coletados aqui o inspirem e desafiem.
Alguns dos elementos apresentados aqui representam mecanismos muito intencionais para controlar a experiência do usuário e vender o indivíduo. Outros demonstram mais ou menos tendências de design visual. Acredito que nenhum dos dois deve ser desconsiderado, e tampouco deve controlar sozinho as coisas. É desafiando as normas, adotando padrões funcionais e avaliando sua imagem on-line sob uma nova luz que pode levar a ideias revolucionárias que o ajudam a se destacar.
E em relação ao tema de se destacar, sinto-me compelido a lembrar às pessoas que o objetivo aqui não é inventar a interface mais original. Em vez disso, o objetivo é pensar criativamente dentro das limitações que temos.
Com isso, sempre espero que encontremos as soluções criativas que nos ajudam a destacar-se com resultados incrivelmente funcionais. Se você olhar para as amostras coletadas aqui, elas não são apenas bonitas, mas funcionam surpreendentemente bem.
Quais são alguns dos melhores sites de portfólio que você viu? Alguma outra tendência que você notou nos portfólios de designer recentemente? Deixe-nos saber nos comentários!