Les illustrations prennent le dessus sur le Web. Les concepteurs créent des sites Web avec tout, des illustrations en plein écran aux divots dessinés à la main utilisés dans les projets. C'est une tendance qui ne cessera pas de croître, car les illustrations donnent l'impression qu'un design est personnalisé (même si ce n'est pas le cas).

Voici comment en tirer le meilleur parti dans votre conception.

Illustration du site Web 101

Les illustrations sont un moyen polyvalent et amusant de créer un site Web personnalisé. Des images dessinées à la main aux éléments, en passant par le lettrage, tout ce qui concerne une image entièrement illustrée ou esquissée ressemble à une image. C'est l'une des raisons pour lesquelles il est si populaire.

concept

Mais il y a beaucoup d'autres raisons pour lesquelles les designers sautent sur la tendance des illustrations:

  • Les illustrations permettent aux utilisateurs de se représenter dans la scène que vous définissez, car elle ne se concentre pas sur les autres personnes.
  • Il y a un élément de fantaisie qui ne peut être accompli qu'avec un dessin.
  • Les illustrations peuvent engranger la réalité et l'imagination pour un design extraordinaire.
  • La personnalisation est facile lorsque vous dessinez les éléments artistiques.
  • Les illustrations sont souvent très colorées et peuvent vous aider à tirer parti de la grande tendance des couleurs vives.
  • La technique est utilisable même si vous n'êtes pas un illustrateur grâce à des kits de conception ou des packs remplis de pièces illustrées utilisables tout au long d'un projet.
  • Les illustrations peuvent revêtir différentes ambiances ou styles, allant des esquisses aux dessins élaborés en passant par les graphiques générés par ordinateur.
Hwawi

Illustrations de style héros

Parce que les en-têtes de héros sont grands, c'est l'un des endroits les plus faciles à voir dans la tendance des illustrations. Il est également utilisé pour un grand nombre de sites, des portefeuilles aux pages de prévisualisation des applications.

Ce qui est bien avec une image de héros illustrée, c’est qu’il ya assez de place pour une œuvre assez complexe. Les petits détails, les ombres, les couleurs et les interactions peuvent respirer, ce qui facilite l'exploration de chaque élément.

seattle

Il y a quelques astuces à ce complexe illustrant:

  • L'œuvre doit être bonne. Les utilisateurs ne vont pas passer du temps à regarder une illustration qu'ils n'obtiennent pas ou ne sont que du désordre. Alors, prenez le temps et prenez soin de cela.
  • Bien que l'illustration puisse avoir des profondeurs de complexité, le message global devrait être simple. Sachez ce que l'image est censée dire et assurez-vous que les éléments contribuent au message.
  • Travaillez avec un professionnel. Ce n’est pas parce que vous pouvez dessiner des coeurs sur une serviette que vous êtes prêt à dessiner une illustration complète. Ce processus prend du temps et de la planification pour vraiment travailler. (Et cela peut être coûteux, alors assurez-vous que c'est la bonne esthétique avant de plonger.)
climat

Ajouter une animation simple

Bien qu'un dessin statique puisse avoir beaucoup d'impact par lui-même, le Web est en pleine effervescence ces jours-ci. Associez une illustration avec des animations subtiles ou des effets de défilement pour encourager les utilisateurs à cliquer.

ot24

De petits mouvements subtils, tels que le texte tournant sur le site Web pour Le hugo , aide à attirer l’attention sur le design. De petites animations peuvent également aider les utilisateurs à comprendre les actions à effectuer lors de la visite d'un site. Cela peut être particulièrement vrai pour les illustrations qui contiennent beaucoup d'éléments ou qui ont un design "occupé".

Ces petites surprises peuvent encourager les visiteurs à s’attarder et à regarder autour d’eux. Les animations en vol stationnaire constituent un bonus particulièrement intéressant pour les utilisateurs, qui peuvent servir à la fois d’élément amusant et d’outil de navigation.

hugo

Icônes illustrées ou éléments d'interface utilisateur

Si vous ne souhaitez pas concevoir un site Web illustré, pensez à quelques icônes illustrées ou éléments d’interface utilisateur. C'est un moyen simple de faciliter la tendance. (Et il y a beaucoup de kits d'icônes et d'interfaces utilisateur qui proposent des styles illustrés pour vous aider à démarrer.)

iqor

Les éléments illustrés peuvent ajouter une touche de fantaisie à un site qui pourrait autrement se sentir trop formel. Quelque chose à essayer est une icône représentant un contour. Ce style est facile à supprimer dans presque tous les designs, fonctionne parfaitement avec les images et tous les modèles de couleurs, et fournit un thème visuel cohérent d'une page à l'autre.

Si vous voulez aller au-delà des icônes, pensez à des éléments d'interface utilisateur surdimensionnés. Iqor , utilise des boutons illustrés de plus grande taille pour guider les utilisateurs et rendre le site un peu plus amusant. Le style illustré circule de page en page avec de grands éléments en utilisant les trois mêmes touches de couleur. Le résultat est amusant et cohérent et juste un peu inattendu de la part du service client.

Kunstman

Lettrage dessiné à la main

Une autre grande tendance dans la conception de sites Web est la typographie personnalisée. Combinez les concepts d'illustration et de lettrage pour un logo dessiné à la main, un bloc de texte principal ou un élément d'art typographique. Ce visuel basé sur du texte peut avoir un impact important (en particulier lorsqu'il est surdimensionné ou utilisé comme élément artistique principal dans la conception).

mort

L'astuce ici est la modération. Avec le style de lettrage dessiné à la main, vous souhaiterez vous en tenir à un seul bloc de texte ou d’élément de texte pour cet effet. Plusieurs utilisations d'un bloc de texte personnalisé peuvent être écrasantes pour les utilisateurs et avoir un impact sur la lisibilité. Il est important de s’assurer que les mots sont toujours clairs et que les utilisateurs ne comprennent pas le message.

Tous les deux Le jour des morts et Résister au cancer , faites un excellent travail avec un lettrage à la main pour un message simple. Day of the Dead utilise d'autres illustrations, une typographie facile sans empattement et des photos pour aider les utilisateurs à parcourir le reste du site. Le résultat final est amusant et facile à suivre. Stand up to Cancer utilise davantage un style d'aquarelle qui est entièrement basé sur l'illustration, mais s'appuie sur des caractères plus standard pour une meilleure lisibilité. Les deux sont de bonnes options pour travailler avec un lettrage personnalisé.

cancer

Conclusion

Bien que pénétrer dans le monde de l'illustration pour des projets de conception de sites Web puisse sembler un peu intimidant au début, de nombreux concepteurs peuvent le faire. Du dessin à la main à l'assistance informatique ou au travail avec un kit, les options sont sans limites.

C'est quelque chose à penser quand il s'agit de projets qui exigent de faire quelque chose de différent. Et c'est assez tendance pour vous demander de créer quelque chose dans ce style. C'est donc un bon moment pour rafraîchir vos compétences en dessin et réfléchir à la manière dont un cadre de conception de site Web illustré pourrait vous convenir.