8 façons d'utiliser des icônes et des éléments dessinés à la main
Bien que l'accent soit souvent mis sur les éléments de conception au pixel près, ils ne conviennent pas à tout. Parfois, vous voulez quelque chose avec un peu plus… de fantaisie. Quelque chose d'un peu plus authentique!
Les icônes ou é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 être dessinés à la main, quelques touches peuvent ajouter une impression personnelle à laquelle les utilisateurs sont attirés.
C'est quelque chose qui a également tendance dans la conception Web. D'un gribouillis dans une icône à une expérience complète qui est une utilisation et un art égaux, 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 assortis avec presque n'importe quel type d'autre affichage visuel. Ils peuvent travailler aux côtés de photos ou de vidéos, dans une mer d'espaces blancs 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 la façon dont il pourrait s'intégrer dans le modèle de conception global.
Essayez-le; 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 sur la page d'accueil ne soient que des points, il existe des exemples à plusieurs endroits sous le défilement et même le favicon a ce flair 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 sous forme d'icônes sur les petites zones de texte pour montrer ce que fait l'entreprise.
Doodles interactifs
Les éléments dessinés à la main peuvent créer des pièces interactives amusantes dans la conception. Du chargement des animations - de nombreux exemples de sites Web dans ce billet utilisent ce style - à une expérience entièrement interactive, cette technique de conception est suffisamment intéressante pour susciter l'intérêt des utilisateurs.
Le vitrail immobilier est un bel exemple de jeu interactif qui combine à la fois une tendance de conception de site Web et un élément créatif, permettant aux utilisateurs de colorier des dessins à l'écran. Ce qui relie cela est que tandis que le look est dessiné à la main, les éléments sont précis et fonctionnent de manière transparente. La coloration fonctionne comme il se doit - et vous ne griffonnez pas en dehors des lignes - pour une expérience qui gardera les utilisateurs accrochés.
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 manuscrite sont particulièrement populaires, en particulier à des fins d'affichage.
Ce style de type 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 et cursive qui est à la fois assez grande et suffisamment lisible pour être lue en un coup d'œil. La prise en charge de la typographie se fait dans un style simple sans empattement, ce qui permet de mettre l'accent sur la police d'affichage et permet également à l'utilisateur de tout digérer facilement.
Design Divots
Certains éléments dessinés à la main ont un but purement visuel. Ils existent pour créer un flux ou une sensation pour la conception qui pourrait être difficile à établir par d'autres moyens. Ces divots peuvent être particulièrement amusants lorsqu'ils sont utilisés dans de petits endroits tout au long de la conception.
Mother's Brewing fait exactement cela. Il y a le grand cœur 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, certains assez cachés. Chaque bouton a des touches dessinées à la main avec la conception du ruban, des éléments apparaissent en arrière-plan et se superposent sur des éléments coulissants pour remplir l'espace mort dans la conception. L'effet global est intelligent et visuellement intéressant.
Pour créer l'ambiance
Les éléments de conception dessinés à la main prennent souvent un ton plus léger et plus ludique. Ils peuvent donner ce type d'ambiance à presque tous les projets et plus vous utilisez d'éléments dessinés à la main, plus le projet apparaît léger.
Signs for Science est un excellent exemple de la façon d'emballer un design avec des éléments dessinés à la main pour une esthétique amusante, presque enfantine (la couleur y contribue également). De la typographie aux icônes en passant par les soulignements, tout le concept a une ambiance très spécifique. Il est créatif, léger et encourage l'interaction avec l'utilisateur.
Faire preuve de créativité
Un concept de design dessiné à la main peut être une excellente opportunité pour la conception d'un site Web de portefeuille 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 entrer dans un projet.
(De plus, c'est une façon amusante 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 avec le logo dessiné à la main en haut à gauche. (Vous pourriez le manquer si vous ne regardez pas de près.)
Pour les icônes ou logos
Parce que c'est l'une des utilisations les plus populaires des éléments dessinés à la main, elle n'était pas en haut de la liste. (Surtout pour vous aider à penser à d'autres idées avant de passer à quelque chose de plus commun.)
Les touches dessinées à la main peuvent être un excellent ajout à une icône ou un logo. Des gribouillis aux formes décentrées ou aux cercles qui ne sont pas tout à fait ronds, l'imperfection ajoute du caractère et du charme là où les styles de forme d'ordinateur parfaits ne le peuvent pas.
Higher Ground utilise le squiggle pour séparer les lettres du 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 animés
Donnez vie à un élément dessiné à la main grâce à l'animation.
Les images dessinées à l'écran peuvent être amusantes à regarder et à regarder. Alors que l'avantage évident pour l'utilisateur est le divertissement lorsqu'il regarde quelque chose prendre vie, il y a aussi des avantages pour le propriétaire du site Web: augmentation du temps sur le site et possibilité de plus de conversions.
Long Story Short utilise ce concept sur la page d'accueil. Tout d'abord, dessiner le logo, qui utilise un style de typographie dessiné à la main. Et puis l'animer dans un ensemble de projets de conception, qui se déplacent rapidement et incluent plusieurs dessins à la main dans le processus. 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é.
Bien qu'un élément dessiné à la main ne soit pas pour chaque projet, pensez-y la prochaine fois que vous devez alléger l'ambiance ou ajouter un petit quelque chose à conserver aux utilisateurs. Gardez l'idée simple et connectez-la à un thème qui se retrouve tout au long de la conception. Et amusez-vous! C'est de cela qu'il s'agit.
