5 astuces pour mélanger des photos et des illustrations dans un seul design

Prêt à prendre un risque de conception? Essayez de mélanger des photos et des illustrations dans le même projet de conception. Un élément dessiné à la main peut ajouter de la fantaisie et de l’intérêt à un dessin qui inclut la photographie. Inversement, une photo peut donner à un dessin illustré plus léger une apparence plus réelle ou plus importante.

Cette technique peut être un peu difficile à imaginer jusqu'à ce que vous voyiez quelques exemples de son efficacité. Aujourd'hui, nous examinons cette tendance et fournissons des conseils et des exemples pour vous aider à développer des moyens créatifs de créer votre propre design.

1. Utiliser des illustrations comme éléments d’interface utilisateur

Vous pouvez à tout moment incorporer des éléments illustrés dans la conception sans même vraiment y penser. De nombreux éléments d'interface utilisateur sont souvent illustrés. Ils ne sont pas nécessairement dans ce style dessiné à la main mais ont un bouton moins tactile et plus? Web? Regardez.

Relevez ce cran si vous voulez essayer un effet dessiné à la main. Ou envisagez d'utiliser un croquis comme marque d'accent.

WittyCookie, ci-dessus, utilise un mélange d'illustrations et une vidéo de style héros pour amener les utilisateurs à la conception. La page d'accueil (non affichée) comporte une illustration. Ce qui est bien, c'est la fantaisie ici. Éléments dessinés à la main? Accrocher? de la vidéo. Le résultat fait en sorte que le site ressemble moins à un argument de vente que de travailler avec l’agence et donne plutôt l’impression de s’amuser ensemble.

Le concept est intéressant et non irrésistible. Et la meilleure partie? C'est un moyen amusant de créer un intérêt visuel lorsque vous ne disposez pas d'un catalogue d'images ou de vidéos intéressant.

2. Illustrer d'abord

Si une illustration est votre premier instinct pour un projet, tracez-en d'abord les grandes lignes. Esquissez les parties illustrées et voyez où va le dessin avant d'ajouter des éléments photo ou vidéo.

C'est la voie empruntée par la conférence Made by Few ci-dessus. Les illustrations complexes de la conception sont impressionnantes et incluent un niveau de détail que tout concepteur peut apprécier. Juste en dessous de l'image du héros se trouve une vidéo en boucle avec des scènes de la conférence. Ce petit, mais réel élément, montre qu’il s’agit d’un événement en direct. Associez cela à l'imagerie étonnante et vous voulez simplement vous inscrire pour voir de quoi il s'agit. L'atmosphère de la conférence semble amusante et branchée grâce au couple vidéo d'illustrations.

Il y a une autre voie à suivre lorsque vous commencez par une illustration. Dessinez une image de fond incroyable pour la conception. C’est une façon amusante d’obtenir exactement ce que vous voulez dans un arrière-plan sans parcourir les images prédéfinies.

One Happy Camper, ci-dessus, le fait de manière intéressante avec un mélange de panneaux de fond illustrés, de fonds blancs et même de fonds de photos noir et blanc. Les changements de fond signalent effectivement un changement de contenu et de nouvelles informations pour les utilisateurs explorant ce camp pour enfants.

3. Utilisez des illustrations comme la typographie

Lorsque vous n'avez pas beaucoup d'images de qualité à travailler, mélangez des illustrations de la même manière que vous pourriez jouer avec la typographie. Bien que le concept paraisse étrange, réfléchissez-y une minute: une belle illustration peut mettre l’accent sur une vidéo ou une photo. Cela peut mettre en évidence ce que vous voulez que les utilisateurs sachent.

Achrival, ci-dessus, fait cela d'une manière intéressante. Les illustrés, "danser" A sert de logo à l'agence et attire davantage l'attention sur la courte boucle vidéo. Sans cela, vous pourriez passer les images sans vous arrêter. Mais il est juste assez différent pour vous attirer de la même manière qu'un titre puissant.

4. Pensez aux animations illustrées

Que les illustrations soient dessinées à la main ou sur ordinateur, elles offrent une excellente occasion d’incorporer une animation simple. Des outils de navigation aux divots amusants qui engagent les utilisateurs, une illustration animée peut être informative, inattendue et amusante.

Vous ne voulez pas aller trop loin avec des animations. Gardez-les simples et déterminés. Chaque animation doit avoir un objectif pour l'utilisateur: un lien, une indication directionnelle ou une surprise qui les intéresse.

Vous ne vous attendez peut-être pas à ce traitement de la part d'un groupe de planification financière, mais Taylor Made, ci-dessus, utilise à merveille un mélange d'animations illustrées et de photographies. Les parties illustrées des images rendaient la planification financière un peu moins intimidante et aidaient les utilisateurs à suivre les chemins d'accès au clic.

Les illustrations sont également colorées là où le site Web ne se limite pas à d’autres images. Le résultat final est un design cohérent, amusant, attrayant et facile à utiliser.

5. Racontez une histoire

Lorsqu'il s'agit de mélanger des images réelles et illustrées, les meilleures combinaisons racontent efficacement une histoire. Le visuel correspond à l'ambiance du contenu et donne l'impression de faire partie de l'identité de la marque.

L'utilisation de cette technique peut fonctionner pour des applications uniques, mais est souvent intégrée à une stratégie de marque plus complète. Regardez ci-dessus la crème de fleur de cône. Le logo est illustré. La conception du site Web utilise une histoire principalement illustrée pour définir la bonne ambiance et encourager les utilisateurs à continuer à en apprendre davantage sur la marque. Et juste au moment où vous voulez en voir plus, il y a une image à compléter. Le design est incroyablement simple et se concentre sur l'histoire elle-même, pas sur les techniques utilisées pour la créer.

À l’autre bout du spectre, on trouve Kuoz, un site de portefeuille, qui mélange des images et des illustrations. De la même manière, le mixage permet de raconter une histoire de qui et de ce que Kuoz est tout en présentant des projets. Examinez attentivement les groupes pour comprendre pourquoi cette conception fonctionne sans être accablée ni encombrée. Les images et les illustrations sont liées par des combinaisons de couleurs similaires, de sorte que chaque emplacement se sente intentionnel et harmonieux.

C’est vraiment la clé pour mélanger des images et des illustrations: elles doivent avoir l’air intentionnel. Ils doivent apparaître en harmonie. Ils ne doivent jamais ressembler à un tas d’éléments collés sur une page.

Conclusion

Êtes-vous assez courageux pour affronter cette tendance en matière de design? Bien que la technique puisse paraître étonnante, elle est intimidante et difficile à vendre à un client.

Apportez des exemples de travaux qui utilisent bien les effets pour montrer aux autres ce que vous pouvez faire. Dessinez quelques illustrations à l’avance pour mieux vendre le concept. Et n'oubliez pas de raconter une histoire qui engage l'utilisateur!