Bien que l'accent soit souvent mis sur des éléments de conception parfaits au pixel près, ils ne conviennent pas à tout. Parfois, vous voulez quelque chose avec un peu plus? fantaisie. Quelque chose d'un peu plus authentique!
Les icônes ou les éléments dessinés à la main peuvent être la bonne technique de conception pour ajouter quelque chose de spécial à un projet. Bien que la plupart des concepteurs ne deviennent pas fous avec des éléments qui semblent dessinés à la main, quelques touches peuvent ajouter une impression personnelle qui attire les utilisateurs.
C'est quelque chose qui est aussi tendance dans la conception web. Qu'il s'agisse de gribouillis dans une icône ou d'une expérience complète à la fois conviviale et artistique, les éléments dessinés à la main sont une option de conception populaire. Voici huit nouvelles façons d’utiliser cette tendance!
Créer une séparation
Les éléments de conception dessinés à la main peuvent être mélangés et associés à presque tout type d'affichage visuel. Ils peuvent travailler à côté de photos ou de vidéos, dans une mer d'espaces ou à proximité d'éléments de texte. N'éliminez pas le concept d'utilisation de ce type d'élément, car vous avez peur de son intégration dans le modèle de conception global.
L'essayer On ne sait jamais.
Digital Visitor utilise ces éléments tout au long de la conception pour créer une séparation entre les éléments et les bits du contenu. Bien que les éléments de la page d'accueil ne soient que des points, il existe des exemples à plusieurs endroits sous le parchemin et même la favicon a ce style dessiné à la main.
Le placement de chaque élément est conçu pour garantir que l'utilisateur regarde le bon contenu. Dans l'exemple ci-dessus, l'élément est au centre de l'écran, utilisé pour créer une séparation entre deux zones de contenu. Plus bas dans la conception, des éléments similaires sont utilisés, style icône, autour de petites zones de texte afin de présenter les activités de l'entreprise.
Griffonnages interactifs
Les éléments dessinés à la main peuvent faire des pièces interactives amusantes dans la conception. Des animations de chargement (de nombreux exemples de sites Web dans ce post utilisent ce style) à une expérience totalement interactive, cette technique de création est suffisamment intéressante pour susciter l’intérêt des utilisateurs.
Real Estate Stained Glass est un bel exemple de jeu interactif qui combine à la fois une tendance en matière de conception de site Web et un élément créatif, permettant aux utilisateurs de colorier des dessins à l'écran. Ce qui lie tout cela, c'est que le look est dessiné à la main, les éléments sont précis et fonctionnent parfaitement. La coloration fonctionne comme il se doit - et vous ne gribouillez pas en dehors des lignes - pour une expérience qui fidélisera les utilisateurs.
Typographie presque dessinée
Parfois, les meilleurs éléments dessinés à la main ne sont pas réellement écrits. Les styles de typographie qui imitent l'écriture sont particulièrement populaires, notamment pour l'affichage.
Ce style a une sensation plus légère et plus agréable à laquelle les utilisateurs peuvent s'identifier. (L'astuce consiste à s'assurer que les lettres sont très lisibles.)
Tradewinds Hotel fait un excellent travail avec une police de caractères simple, de style cursif, suffisamment large et lisible pour pouvoir être lue en un coup d'œil. La typographie de soutien s’inscrit dans un style simple et sans empattement, ce qui permet de mettre davantage l’accent sur la police de caractères d’affichage et de tout simplifier pour l’utilisateur.
Design Divots
Certains éléments dessinés à la main servent uniquement à des fins visuelles. Ils existent pour créer un flux ou une idée de la conception qui pourrait être difficile à établir autrement. Ces divots peuvent être particulièrement amusants lorsqu'ils sont utilisés dans des endroits minuscules tout au long de la conception.
Mother's Brewing fait justement cela. Il y a le grand coeur sur la page d'accueil - c'est évident. Mais il y a aussi de minuscules éléments sur presque toutes les autres pages - certains évidents, d'autres assez cachés. Chaque bouton comporte des touches dessinées à la main avec le dessin du ruban, des éléments apparaissent à l'arrière-plan et se superposent sur des éléments coulissants pour combler les espaces morts du dessin. L'effet global est intelligent et visuellement intéressant.
Pour créer l'ambiance
Les éléments de design dessinés à la main prennent souvent une tonalité plus légère et enjouée. Ils peuvent conférer ce type d’ambiance à presque tous les projets. Plus vous utilisez d’éléments dessinés à la main, plus le projet apparaîtra clair.
Signs for Science est un excellent exemple de la façon de présenter un dessin avec des éléments dessinés à la main pour une esthétique amusante et presque enfantine (la couleur contribue également). De la typographie aux icônes en passant par les soulignements de gribouillis, le concept dans son ensemble a une humeur très spécifique. Il est créatif, léger et encourage l’interaction de l’utilisateur.
Vitrine de la créativité
Un concept dessiné à la main peut être une excellente opportunité pour la conception de sites Web de portefeuilles, car il peut mettre l'accent sur la créativité. Ces éléments mettent davantage l'accent sur le processus de conception et sur la manière dont la pensée et le travail peuvent être intégrés à un projet.
(De plus, c'est un moyen amusant d'étirer ces muscles créatifs.)
Le Feebles utilise des éléments dessinés à la main pour l'image principale de la manière ci-dessus et se combine au logo dessiné à la main en haut à gauche. (Vous pourriez le manquer si vous ne regardez pas de près.)
Pour les icônes ou les logos
Comme il s’agit de l’une des utilisations les plus courantes des éléments dessinés à la main, ce n’était pas au sommet de la liste. (Surtout pour vous aider à penser à d'autres idées avant de passer à quelque chose de plus courant.)
Touches dessinées à la main peuvent être un excellent ajout à une icône ou un logo. Qu'il s'agisse de gribouillis, de formes excentriques ou de cercles peu arrondis, les imperfections ajoutent du caractère et du charme là où les styles de formes informatiques parfaits ne le peuvent pas.
Higher Ground utilise le squiggle pour séparer les lettres dans le logo de style icône. Le style minimal est frappant et efficace, et l’élément dessiné à la main lui confère une personnalité qu’une ligne droite ne véhiculerait pas.
Comme effets d'animation
Donnez vie à un élément dessiné à la main avec animation.
Les images dessinées à l'écran peuvent être amusantes à regarder et à regarder. Bien que l'avantage évident pour l'utilisateur soit le divertissement lorsqu'il voit quelque chose se concrétiser, il présente également des avantages pour le propriétaire du site Web: un temps passé sur le site plus long et le potentiel de conversions supplémentaires.
Long Story Short utilise ce concept sur la page d'accueil.Premièrement, dessinez le logo, qui utilise un style typographique dessiné à la main. Et ensuite, l'animez dans un ensemble de projets de conception qui se déplacent rapidement et incluent plusieurs dessins à la main. La boucle entière ne dure que quelques secondes.
Conclusion
Même si vous ne pouvez pas dessiner, la simulation d'éléments dessinés à la main dans des projets de conception peut ajouter une touche personnelle que les utilisateurs apprécient. De la typographie aux jeux en passant par les animations de chargement, ces éléments peuvent mettre en valeur la créativité et la personnalité.
Si un élément dessiné à la main ne convient pas à tous les projets, réfléchissez-y la prochaine fois que vous devrez alléger l'ambiance ou ajouter un petit quelque chose à conserver pour les utilisateurs. Conservez l’idée simple et connectez-la à un thème qui figure tout au long de la conception. Et amusez-vous! Voilà en quoi consistent ces éléments.