Ilustrações estão tomando conta da web. Os designers estão criando sites com tudo, desde ilustrações em tela cheia até divisores desenhados à mão que são usados ​​em todos os projetos. É uma tendência que provavelmente continuará crescendo porque as ilustrações fazem com que um design pareça personalizado (mesmo que não seja).

Veja como tirar o máximo proveito deles em seu design.

Ilustração do site 101

Ilustrações são uma maneira versátil e divertida de criar um design de site personalizado. De imagens desenhadas à mão, a elementos, a letras, tudo sobre uma imagem totalmente ilustrada ou esboçada, parece e se sente um de um tipo. Essa é uma das razões pelas quais é tão popular.

conceito

Mas há muitas outras razões pelas quais os designers estão pulando na tendência de ilustração:

  • As ilustrações permitem que os usuários se visualizem na cena que você está configurando, porque não se concentra em outras pessoas reais.
  • Há um elemento de capricho que só pode ser realizado com um desenho.
  • As ilustrações podem combinar realidade e imaginação para um design que é extraordinário.
  • A personalização é fácil quando você está desenhando os elementos de arte.
  • As ilustrações são muitas vezes bastante coloridas e podem ajudá-lo a tirar proveito da grande e brilhante tendência das cores.
  • A técnica é utilizável mesmo se você não for um ilustrador graças a kits de design ou pacotes cheios de peças ilustradas que podem ser usadas em todo o projeto.
  • As ilustrações podem assumir diferentes modos ou estilos, desde esboços a desenhos elaborados até gráficos gerados por computador.
hwawi

Ilustrações de estilo herói

Como os cabeçalhos de heróis são grandes, esse é um dos lugares mais fáceis de ver a tendência das ilustrações. Ele também está sendo usado para um grande número de sites, de portfólios a varejo, a páginas de visualização de aplicativos.

O que é bom em uma imagem de herói ilustrado é que há espaço suficiente para uma obra de arte bem complexa. Pequenos detalhes, sombreamento e cores e interações têm espaço para respirar, facilitando a exploração de cada elemento pelos usuários.

seattle

Existem alguns truques para todo esse complexo ilustrando:

  • A obra de arte tem que ser boa. Os usuários não vão gastar muito tempo olhando para uma ilustração que eles não entendem ou é apenas uma bagunça desleixada. Então, tome tempo e se importe com isso.
  • Embora a ilustração possa ter profundidades de complexidade, a mensagem geral deve ser simples. Saiba o que a imagem deve dizer e certifique-se de que os elementos contribuam para a mensagem.
  • Trabalhe com um profissional. Só porque você pode desenhar corações em um guardanapo não significa que você está pronto para desenhar uma ilustração do site em grande escala. Esse processo leva tempo e planejamento para realmente funcionar. (E pode ser caro, então certifique-se de que esta é a estética correta antes de mergulhar.)
clima

Adicionar animação simples

Enquanto um desenho estático pode ter muito impacto por conta própria, a Web está viva com o movimento nos dias de hoje. Combine uma ilustração com animações sutis ou efeitos de rolagem para incentivar os usuários a clicarem ao redor.

ot24

Pequenos movimentos sutis, como o texto giratório no site para O Hugo , ajuda a chamar a atenção para o design. Pequenas animações também podem ajudar os usuários a entenderem quais ações executar ao visitar um site. Isso pode ser especialmente verdadeiro para ilustrações que incluem muitos elementos ou têm um design geral "ocupado".

Essas pequenas surpresas podem encorajar os visitantes do site a permanecerem e olharem ao redor também. As animações em foco são um bônus particularmente interessante para usuários que podem servir tanto como elemento divertido quanto como ferramenta de navegação.

Hugo

Ícones ilustrados ou elementos da interface do usuário

Se um design de site ilustrado completo não é sua coisa, considere alguns ícones ilustrados ou elementos de interface do usuário. Esta é uma maneira simples de facilitar a tendência. (E há muitos ícones e kits de interface do usuário que apresentam estilos ilustrados para ajudá-lo a começar.)

iqor

Elementos ilustrados podem adicionar um toque de capricho a um site que, de outra forma, poderia parecer muito formal. Algo para tentar é um ícone de contorno ilustrado. Esse estilo é fácil de incluir em quase todos os designs, funciona bem com imagens e qualquer esquema de cores e fornece um tema visual consistente de uma página para outra.

Se você quiser ir além dos ícones, pense em elementos de interface do usuário superdimensionados. Iqor , usa botões ilustrados em tamanhos maiores para guiar os usuários e tornar o site um pouco mais divertido. O estilo ilustrado flui de uma página para outra com elementos grandes usando os mesmos três pops de cor. O resultado é divertido e consistente e apenas um pouco inesperado do negócio de atendimento ao cliente.

kunstman

Letras desenhadas à mão

Outra grande tendência no design do site é a tipografia personalizada. Combine os conceitos de ilustração e letras para um logotipo desenhado à mão, bloco de texto principal ou elemento de arte tipográfica. Esse visual baseado em texto pode ter um grande impacto (especialmente quando é superdimensionado ou usado como o principal elemento de arte no design).

morto

O truque aqui é moderação. Com o estilo de letras desenhadas à mão, você vai querer ficar com um único bloco de texto ou elemento de texto para este efeito. Vários usos de um bloco de texto personalizado podem ser esmagadores para os usuários e podem afetar a legibilidade. É importante ter certeza de que as palavras ainda estão bem claras e que os usuários não têm dificuldade em entender a mensagem.

Ambos Dia dos Mortos e Levante-se ao câncer , faça um ótimo trabalho com letras de mão para uma mensagem simples. O Dia dos Mortos usa outras ilustrações, tipografia e fotos sem serifa fáceis para ajudar a atrair usuários pelo resto do site. O resultado final é divertido e fácil de seguir. Stand up to Cancer usa mais de um estilo de aquarela que é todo baseado em ilustração, mas depende de fontes mais padronizadas para legibilidade. Ambas são boas opções para trabalhar com letras personalizadas.

Câncer

Conclusão

Embora invadir o mundo da ilustração para projetos de design de sites possa parecer um pouco intimidador no início, é algo que muitos designers podem fazer. De desenhar à mão para ter assistência de computador ou trabalhar com um kit, as opções são bastante ilimitadas.

É algo para se pensar quando se trata de projetos que exigem algo diferente. E está na moda o suficiente para que você seja questionado sobre como criar algo nesse estilo. Portanto, este é um bom momento para aprimorar suas habilidades de esboço e pensar em maneiras pelas quais uma estrutura de design de website ilustrada poderia funcionar para você.