Como criar a imagem perfeita do herói para o seu site de portfólio

Este artigo foi criado em parceria com a BAWMedia. Obrigado por apoiar os parceiros que tornam o SitePoint possível.

Basta apenas alguns segundos para que os visitantes formem uma impressão sobre um site. Considerando que a imagem principal na página inicial é a primeira parte do conteúdo que a maioria dos visitantes encontra, que tipo de impressão você quer que eles tenham quando virem a sua?

Para aproveitar ao máximo esses encontros iniciais, sua imagem de herói precisa ser bem pensada e executada. Ele precisa transmitir que tipo de criador você é, oferecer uma prévia de seus talentos e dar aos visitantes um motivo para explorar mais.

Para criar a imagem perfeita para o seu site de portfólio, existem 6 elementos para focar. Neste post, veremos quais são esses elementos, bem como alguns exemplos de sites pré-construídos do BeTheme – um dos temas WordPress mais populares e altamente cotados do mundo, com mais de 264.000 vendas e uma classificação de 4,83 de 5 estrelas – e outras marcas que demonstram várias maneiras de reuni-los artisticamente.

Projetando a imagem perfeita para o seu site de portfólio

Em geral, existem 6 elementos que se juntam para formar cada seção de herói, independentemente do tipo de site que você está construindo. Aqui estão algumas coisas para pensar ao criar sua imagem de herói usando esses componentes críticos:

1. Escolha imagens que serão o melhor reflexo do que você faz

As imagens que você escolhe para sua imagem de herói devem ter uma conexão direta com o tipo de trabalho que você faz.

Por exemplo, Lauren Waldorf Interiors é um estúdio de design de interiores boutique. Como tal, a seção de heróis contém uma galeria de fotos deslizante de projetos concluídos:

Para fotógrafos, cinegrafistas, web designers e outros artistas visuais, você provavelmente tem muitos gráficos que poderia exibir no herói. Para artistas que trabalham com outros tipos de mídia, pode ser difícil representar visualmente o que você faz.

Neste último caso, você pode decidir fazer do seu rosto a imagem principal na seção herói, como vemos na imagem herói do site pré-construído do BeDJ 2:

O rosto do DJ dá aos visitantes algo mais visualmente interessante de se ver do que apenas um monte de cores e gráficos relacionados à música. Também cria uma conexão direta entre o corpo da obra e o artista.

Ao projetar sua imagem de herói, considere o seguinte:

• O que ou quem deve ser o assunto principal da seção?
• A imagem pertence ao primeiro plano ou mesclada ao plano de fundo?
• A imagem ficará intocada ou há uma maneira de torná-la mais artística?

Além disso, você ainda precisa de imagens? Por exemplo, se você é um designer de fontes ou redator, pode decidir pular as imagens e deixar seu texto falar.

2. Use o histórico para fornecer mais detalhes sobre o que você faz

Existem diferentes maneiras de lidar com o plano de fundo da seção de heróis.

Em alguns casos, seu trabalho pode ocupar o pano de fundo. Por exemplo, um cinegrafista pode colocar uma apresentação de slides de seus vídeos em segundo plano. Isso não apenas faria o site parecer animado, mas também daria aos visitantes uma visualização rápida do seu trabalho.

Em outros casos, você pode querer dar uma pequena provocação do seu trabalho na seção de heróis, como este exemplo do site pré-construído do BeInterior 6:

A galeria de fotos ocupa cerca de um quarto da largura da seção. Embora o designer pudesse ter usado um fundo colorido para enquadrar o trabalho, eles optaram por adicionar uma foto texturizada. A folha não apenas fornece uma cor reconfortante ao cenário, é uma maneira criativa de adicionar contexto ao que o designer de interiores faz.

Sua outra opção seria usar cores sólidas ou gradientes (junto com ilustrações) no plano de fundo da maneira que o Mindgrub faz:

Para criativos digitais, essa pode ser sua melhor opção. Embora você possa exibir capturas de tela de sites que criou ou kits de interface do usuário que desenvolveu, pode usar esse espaço para criar sua própria obra-prima digital. Você pode salvar o trabalho que criou para clientes em outra seção ou página.

3. Estilize suas fontes para que sua voz fique cristalina

Mesmo que você não escreva o texto que aparece na seção de heróis, as escolhas estéticas que você faz podem comunicar tanto aos clientes em potencial quanto as próprias palavras.

Existem várias maneiras de adicionar uma voz às mensagens do seu herói. A primeira é com o tipo de fonte que você usa. Por exemplo, o site pré-construído BeDetailing 4 usa uma fonte do Google chamada Italiana:

Esta empresa de detalhamento de automóveis expressa um carinho por carros clássicos e antigos logo na frente. O texto, as imagens do carro e a elegante fonte inspirada em caligrafia nos dizem isso.

Outra coisa a considerar é como o estilo de suas frases pode fazer com que sua mensagem soe diferente. Por exemplo, Get Em Tiger faz várias coisas para mudar a maneira como o texto da imagem do herói soa dentro da cabeça das pessoas que o lêem:

Primeiro, o título principal está em letras maiúsculas. O texto estilizado dessa maneira geralmente é interpretado para soar alto e em negrito.

Em segundo lugar, as palavras “STAND OUT” são destacadas em laranja. Isso significa um substituto para itálico ou negrito que normalmente seria usado para dar ênfase em texto simples.

Além disso, o subtítulo é escrito em maiúsculas e minúsculas. Quando os visitantes lerem isso, provavelmente assumirá um tom mais amigável e conversacional dentro de suas cabeças.

4. Descubra o papel que as cores desempenharão

Quando estiver pronto para criar a imagem principal para o site do seu portfólio, você provavelmente já descobriu quais serão as cores da sua marca.

Normalmente, a paleta de cores da marca é útil para estilizar botões, além de adicionar acentos às principais áreas do seu site. No entanto, você pode decidir usar muito para criar sua seção de heróis, como o G Sharp Design fez:

A paleta de cores nesta seção de heróis é relativamente simples. No entanto, o vermelho e o amarelo vibrantes que dominam o design tornam impossível tirar os olhos dele.

Embora esse espetáculo de cores funcione bem para essa agência, pode não parecer certo para outros tipos de criativos. Por exemplo, um site pré-construído de fotografia como o BePhoto 2 usa um tema escuro:

A imagem do herói tem um controle deslizante de foto no centro, onde um pop brilhante de cor é revelado com cada foto subsequente. Como o resto do site é estilizado em um cinza escuro suave com texto esbranquiçado, as fotos chamam a atenção instantaneamente.

Então, ao decidir sobre sua própria paleta de cores, faça as seguintes perguntas:

• Quantas cores você precisa?
• Quais cores da paleta de cores da sua marca você usará?
• Existem outras cores que você deseja puxar?
• Que papel cada cor desempenhará em termos de definir o humor, ação inspiradora, etc.

A cor não precisa consumir tudo para ser eficaz. Tudo depende do que você precisa que ele faça por você nesta seção.

5. Torne-o mais impressionante com interações

Sem animação, sua imagem de herói nada mais é do que um outdoor estático.

Agora, não há nada de errado com a publicidade em outdoors – quando tem mais de 200 pés quadrados de tamanho e fica a mais de 10 pés do chão. Sem a grande presença que os outdoors têm no mundo real, porém, os designs estáticos em um site podem parecer sem vida e sem inspiração.

Assim como os outros elementos que vimos hoje, existem diferentes maneiras de adicionar movimento e interação ao design da imagem do seu herói.

Por exemplo, Awesome Inc é um estúdio de animação e design. Seria estranho se não víssemos nada de seu trabalho de animação de alto perfil depois de entrar no site:

Por outro lado, se você é um criativo que não faz trabalho de animação, não haveria razão para levá-lo a esse extremo. Isso não significa que sua imagem de herói deva ser desprovida de movimento.

Por exemplo, o site pré-construído do BeModel 3 tem um design de imagem de herói dinâmico:

Não é apenas o controle deslizante de imagem que é animado. A paleta de cores do controle deslizante muda em sincronia com as alterações da foto.

Mesmo isso pode parecer muito movimento para você. Se for esse o caso, existem maneiras mais sutis de usar animações para tornar sua imagem de herói mais atraente – como adicionar transformações de foco a botões ou animações de transição para a seção.

6. Escolha uma única frase de chamariz

Por último, mas não menos importante, você deve descobrir qual deve ser a próxima ação lógica para os visitantes.

Uma opção é mantê-los rolando a página. Se for esse o caso, talvez você nem queira incluir um botão de call-to-action. A maioria dos visitantes naturalmente começará a rolar depois de ver tudo o que precisa ver.

Outra opção é convidá-los a visitar outra página do seu site. Se for esse o caso, qual página deve ser? Em um site de portfólio, você provavelmente desejará que os visitantes acessem sua página de portfólio ou serviços.

O site pré-construído BePhotography 2, por exemplo, direciona os clientes em potencial para a página do Portfólio:

Mais uma opção é incentivar os visitantes a se envolverem com a imagem do herói antes de dar a eles a opção de ir para outro lugar. Isso será útil se sua imagem principal oferecer uma apresentação de slides do seu trabalho com a qual os usuários possam se envolver. Isto é o que Perky Bros faz:

O cursor do visitante mudará de aparência com base na parte do controle deslizante sobre a qual ele passa. No lado esquerdo ou direito da tela, uma ponta de seta azul aparece, informando que há mais trabalho a ser explorado. No centro da tela, aparecem as palavras “View Project”. Ao clicar, o visitante será direcionado para uma página de estudo de caso do projeto.

Crie uma imagem de herói que faça justiça ao seu trabalho criativo

O design da imagem principal é especialmente crítico em sites de portfólio, pois não apenas precisa refletir o que os visitantes encontrarão em seu site, mas também refletir seus talentos como criativo. Portanto, você precisa criar uma imagem de herói que prepare adequadamente o cenário para você.

O que é bom em usar um tema WordPress como o BeTheme é que ele vem com 101 sites de portfólio pré-construídos. Cada um deles vem com um design de imagem de herói feito à mão que facilitará a atualização dos 6 componentes cruciais que analisamos acima.