L'utilisation de l'illustration dans la conception Web
L'illustration est un outil incroyablement polyvalent qui peut trouver de nombreuses utilisations différentes dans la conception. Et en matière de conception de sites Web, nous pouvons trouver une très grande variété d'implémentations.
Aujourd'hui, je veux explorer certaines des principales manières dont cet outil a été mis au point afin que nous puissions tirer de nouvelles idées pour inspirer et remettre en question les conceptions que nous produisons.
Commençons quelque part que je fais rarement, avec une définition de base: Illustré: 1) Rendre clair ; 2) clarifier en donnant ou en servant d'exemple ou d'instance; 3) Fournir des caractéristiques visuelles destinées à expliquer ou à décorer .
Il semble que dans le monde réel de la conception de sites Web, l'illustration a tendance à remplir les deux fonctions à la fois. Il embellit tout en clarifiant. Et si vous ne faites qu’un d’eux, vous devrez peut-être vous demander pourquoi. Peut-être qu'en mettant l'illustration en pratique, remplir les deux rôles est le moyen de tirer pleinement parti de l'élément de conception pour tout ce qu'il vaut.
Ceci, bien sûr, ne veut pas dire qu'un design ne peut pas réussir s'il ne traite que l'un ou l'autre; certainement c'est possible. Mais pour tirer le meilleur parti de notre travail, je trouve que contester notre réflexion est toujours utile. Comme d'habitude, examinons quelques regroupements d'échantillons pour voir ce que l'on peut faire avec cet appareil visuel. En cours de route, déterminez si chaque approche apporte de la clarté, de la décoration ou les deux.
Illustration thématique
La première approche à l'illustration que je veux aborder ici est l'utilisation de ce style pour produire une approche thématique globale. Dans cette situation, des illustrations sont utilisées pour établir un thème général. Sommes-nous en train de grimper des montagnes, de visiter une station spatiale ou d’explorer le bureau d’une entreprise?
Bien que cette approche ne doive pas nous amener dans un endroit, elle le fait assez souvent. Dans d'autres situations, le style établit simplement un motif global que le site suit.
La raison pour laquelle nous nous y intéressons ici est qu’elle est utilisée pour piloter la conception globale de manière radicale. L'illustration n'est pas un petit élément de support. Au lieu de cela, il est l'élément de conception le plus important et contrôle l'ensemble de la mise en page.
Amène mon chef à North Cape
Dans cet échantillon, l'approche ne pourrait pas être plus claire. La conception du site fait clairement écho à son objectif le plus fondamental. L'illustration fournit une référence visuelle à ce que fera l'individu. Et en termes de définition de l'illustration, l'œuvre d'art apporte de la décoration et de la beauté à la page.
Dans ce cas, le thème établit clairement le but du site et aide l'utilisateur à adhérer au concept.
Kit de lancement
Une approche thématique ne doit pas nécessairement être aussi directe. Parfois, cela peut être une partie plus naturelle d'un site plus structuré. Dans ce cas, le site est légèrement unique dans sa mise en page et le thème ne force pas une interface over-the-top basée sur les fusées.
Au lieu de cela, le thème est tissé dans le design de telle manière qu'il communique ses touches décoratives sans interférer avec le contenu. Ici, l'illustration sert à décorer, mais pas trop à clarifier. Cela n’est pas du tout surprenant et montre bien sûr qu’il n’ya pas de formule à suivre.
Atelier Anonyme Design
Dans d'autres situations comme celle-ci, l'illustration thématique est littéralement le site. Ce n'est pas un élément de support mais devient complètement le design lui-même.
Ici, l'utilisation de l'illustration joue clairement un rôle de décorateur. Mais je dirais que cela fournit également un grand niveau de clarté au visiteur. Ceci est un site web pour une agence de design. La conception et la nature de ce site communiquent beaucoup aux visiteurs. En tant que tel, je suis certain que cela sert de filtre massif à leur clientèle. Vous serez soit attirés et aimerez leur approche ludique et créative, soit vous serez totalement désemparés. Donc, à ce stade, je pense que cela apporte beaucoup de clarté sur l'agence et sa mentalité.
Allure Graphic Design
Sur ce site, l'utilisation de l'illustration joue également une approche thématique claire. Bien que le site suive certaines formules de mise en page standard, l'intégralité de la conception est intégrée dans une mise en page thématique. Ces éléments pilotent non seulement la conception du site, mais ils fusionnent avec le logo principal et la copie utilisée sur le site. Le thème est immersif et dirige tout le message que le site présente.
Échantillons thématiques supplémentaires
Voici quelques sites supplémentaires qui utilisent des illustrations thématiques pour établir un environnement ou un thème pour un site.
Chipmunk
Drift Boys
Iutopi
Chandu4u
Mascottes
Comment pourrais-je couvrir l'idée d'utiliser des illustrations sans revoir l'une des plus évidentes: les mascottes? Avec cet élément visuel, les concepteurs ont tendance à personnifier le site, son produit ou son objectif avec un personnage. Non seulement la mise en œuvre d’un tel élément varie, mais le pouvoir et le raisonnement qui l’appuie le sont également.
encre
Dans cette conception, la mascotte illustrée joue un rôle assez clair. Clair en ce sens qu'il fait écho au nom du produit. Cela ne donne pas seulement de la vie à la conception, mais cela lui donne un visage. De cette façon, le public a quelque chose d'un peu plus unique à classer dans son cerveau. Si tout va bien, la mascotte aide à faire une expérience plus mémorable et unique qui aidera le produit à se démarquer de l'audience.
Peut-être que c'est le but le plus puissant derrière une mascotte, pour aider à faire ressortir quelque chose. La grande chose à propos d'une mascotte comme celle-ci, c'est qu'elle peut être totalement unique et spécifique à ce produit. En supposant qu'il a été fait sur mesure pour cette conception, il devrait être le seul endroit où cette illustration exacte existe.
Le evnt
Ironiquement, nous trouvons ici une autre mascotte illustrée semblable à une pieuvre (qu'est-ce qu'une créature marine à trois pattes?). Dans ce cas, la mascotte est évidemment un pas beaucoup plus éloigné de la réalité: un robot à trois pattes avec un cerveau dans une bulle.
Bien que cela puisse être un choix étrange, il fournit un bel élément de distinction pour l'événement. Cette mascotte unique donne un élément visuel cool pour se connecter à l'événement. Cela prend une vie qui lui est propre et relie vraiment les gens avec quelque chose de concret. Je suppose que c'est exactement le but d'une mascotte.
La conception de ce site est magnifique, mais considérez combien il serait terne sans cette mascotte folle en place. Produire un tel élément n'est pas facile, mais il est extrêmement efficace dans cette situation.
Big Eye Creative
Pour un exemple de mascotte sans octopus, jetez un oeil à la Big Eye Creative site. Ici, la mascotte ne joue pas un rôle prédominant dans la conception. Il y ajoute cependant beaucoup de personnalité. Evidemment les autres illustrations et le style général du site en font une présentation moins formelle. Mais la mascotte du logo est présente sur tout le site. Cela garantit leur style léger imprègne le design.
Illustrations de mascottes supplémentaires
Voici quelques échantillons supplémentaires de mascottes au travail dans la conception. Y compris encore une autre pieuvre; il semblerait que ce soit populaire à utiliser.
Pioneer Records Management
Pieuvre argyle
Coucou
Konsebt
Décoration illustrée
Le prochain type d'utilisation que je voudrais considérer est ce que j'appelle la décoration thématique. C'est à ce moment que l'illustration est mise en œuvre de manière décorative, ce qui ne fournit pas vraiment de référence physique spécifique. Par exemple, le plus souvent, l'illustration comprend des images de personnes, d'animaux, d'objets ou de lieux. Mais dans ce cas, l'illustration ne représente pas vraiment quelque chose de réel, mais plutôt, elle fournit simplement une décoration pour embellir le design d'une manière que seule l'illustration peut. Comme toujours, clarifions ceci à travers quelques échantillons.
1000 thèmes WP
Pour notre premier exemple, considérons le 1000 thèmes WP site Internet. Sur ce site, l'utilisation d'illustrations fournit un cadre et un style sous-jacents pour le site. Mais il le fait dans ce qui est le plus purement décoratif. Le style général ressemble à une illustration et pourtant, il ne contient pas les éléments humanistes typiques.
Maintenant, je veux me contredire totalement. Je pense que le style est principalement décoratif. Mais je peux réellement voir comment nous pourrions prétendre que cela fournit un niveau de clarification pour le site. Le style utilisé par le design se connecte à un certain public. Cela en dit long sur le style du site et les thèmes qu’ils pourraient produire. À bien des égards, la qualité de la mise en page illustrée démontre la qualité du travail que vous pouvez vous attendre à voir sur ce site. De cette façon, la clarification est peut-être plus subtile et moins importante pour vous, mais néanmoins présente.
Histoire de Coca-Cola
Sur ce site Web, nous trouvons un autre design piloté par l'illustration. Il y a des éléments illustrés ici qui démontrent des choses réelles, mais la plupart de l'approche thématique est établie avec la décoration pure. Cet exemple démontre non seulement l'approche, mais montre également que presque aucune technique n'est utilisée de manière puriste. La réalité est que vous allez probablement fusionner ces éléments de différentes manières.
Métaphiziks
Dans ce dernier exemple d'illustration décorative, vous trouverez d'excellents éléments d'arrière-plan. Certains d'entre eux sont plus tangibles que d'autres, mais dans l'ensemble, ils concernent davantage les éléments de support stylistiques qu'autre chose. Il est remarquable de constater à quel point ces simples dessins au trait peuvent être combinés avec un texte magnifique, des couleurs bien choisies et des icônes simples. Le résultat final est fantastique et d'une beauté remarquable.
Plus de designs avec décoration illustrée
Voici quelques exemples supplémentaires pour compléter ce type d'illustration dans la conception.
Moo's Cupcakes
Emplois Tech
Stade Pixel
Sacs personnalisés
Texte illustré
Le texte rendu à la main n'est certainement pas un concept nouveau et c'est quelque chose que j'ai couvert plusieurs fois avant . Cependant, je n'ai jamais envisagé une telle approche avec une perspective d'illustration.
Le texte de rendu à la main est une variante populaire du texte illustré et une excellente solution pour de nombreuses créations. D'une part, c'est un excellent moyen de mettre à profit cette formation pratique des écoles d'art. Deuxièmement, c'est un excellent moyen de produire quelque chose d'unique. Après tout, si vous restituez du texte, il sera unique à 100%. Même si vous dessinez sur une police existante, celle-ci deviendra une création distincte.
Rangus
Ceci est un exemple parfait de type illustré. Le style est extrêmement magnifique, totalement unique et très accueillant. Mais ça ne s'arrête pas là. Le type rendu à la main montre les talents de l'individu. Cela montre qu'il crée des œuvres avec ses mains et qu'il se connecte parfaitement à ses compétences d'animation. J'aime particulièrement le fait que tout soit basé sur un thème de tableau, car il lie parfaitement le thème et les éléments. À mon avis, ce site montre à quel point l'illustration peut être unifiée avec le but et le message du site.
Joey Lomanto
Dans ce cas, le texte illustré est beaucoup plus subtil. Au lieu de diriger toute la direction du design, il joue simplement bien. En fait, au premier abord, vous pourriez même ne pas remarquer le style de rendu à la main du texte de la page d'accueil. Certes, le texte peut en réalité être une police, mais il a été utilisé de telle manière qu'il se confond parfaitement avec le style du site. Quoi qu'il en soit, le style est magnifiquement unifié et l'illustration joue de nombreux rôles dans la conception globale.
Aller en direct
Le texte illustré ne doit cependant pas être rendu à la main. Comme vous le constaterez dans cet exemple, le texte est stylé de différentes manières qui transforment le texte en bits de l'illustration générale. La beauté de cette approche est qu’elle unifie le texte avec les autres illustrations. Cela évite une impression moins unifiée où vous avez simplement des illustrations sur du texte Web standard. Ce dernier peut fonctionner, mais dans ce cas l’impact du texte illustré est clair.
Échantillons supplémentaires de texte illustré
Les exemples suivants s’insèrent librement dans cette catégorie. Je dis vaguement parce que c'est parfois difficile à dire car c'est parfois une chose subtile. Dans certains de ces cas, le texte ressemble simplement à une œuvre d'art, alors je l'ai placé dans cette collection.
Rébellion de contraste
Fakta
La Web Shop
Illustrations informatives
Par définition même de l’illustration, l’un de ses objectifs est de clarifier et d’expliquer. Il est donc normal que nous trouvions des exemples où les illustrations le font avec une clarté extraordinaire.
Bookish
Commençons par le Bookish site. Dans cette mise en page inhabituelle, nous constatons que les illustrations symbolisent très clairement les différents points de la mise en page. Chaque bloc a un élément visuel qui non seulement l’embellit, mais surtout l’explique. Tant et si bien qu'en tant que lecteur, je n'ai presque pas besoin de lire la copie. L'illustration des périphériques en bas à gauche en est la preuve.
Conférer
De manière beaucoup moins importante, l'illustration de cette conception se révèle tout aussi informative. La simple illustration illustre à elle seule le sujet du site. Son message ne vous battra peut-être pas la tête, mais cela fait écho au but du site.
Activer
L'illustration de cette conception communique non seulement des informations sur l'événement qu'elle représente, mais fait également écho à l'objectif même de l'événement. Cet événement particulier tourne autour de la déconnexion de la technologie. C'est une chance pour les gens inondés de technologie d'échapper à ses griffes.
L'illustration ici nous montre ce que les participants vont faire, donc c'est informatif. Et de par sa nature même, l'illustration rompt avec la technologie et s'enracine dans une sensation purement organique, une manière fondamentalement géniale de communiquer le but du site.
Illustrations plus informatives
Ces sites supplémentaires illustrent également l'idée d'illustrations qui nous informent. Certaines sont des icônes minuscules et élémentaires, tandis que d'autres sont des éléments immersifs qui définissent et représentent entièrement le contenu.
Ville de vitalité
Uklizenodoma.cz
Qubiq
Un antidote technologique
Avec le dernier exemple (The Activer site), nous sommes entrés dans ce que je veux examiner ensuite, l’utilisation de l’illustration pour rompre avec l’aspect technologique des choses. Parfois, il est nécessaire de se déconnecter des fondements technologiques du Web et de démontrer une sensation très organique. L'illustration est l'un des outils les plus puissants pour réaliser une telle idée.
Application d'expédition
Cette page simple à venir est tout simplement extraordinaire. Et clairement, la façon dont elle accomplit sa beauté est radicalement simple. Une seule grande illustration nous distrait du fait qu’il s’agit d’une page Web. Cela ressemble plus à une œuvre d'art qui a un petit élément interactif, certainement un excellent moyen d'avoir un impact énorme sur les utilisateurs et d'établir une image mémorable.
Muziekpark
Bien que ce site ne fasse pas appel à une approche tout à fait aussi radicale, l'illustration est encore importante et présente dans la mise en page. Ici, l'imagerie animée insuffle la vie à la page. Combinez cela avec une mise en page créative et inhabituelle et il se sent complètement détaché de la technologie qui le pilote. Peut-être le fait qu’il ne ressemble pas à un site normal joue-t-il également un rôle important à cet égard. Considérez également que l'illustration dans ce cas aide vraiment à nous informer du thème du site.
Egopop
Dans une autre mise en page atypique, nous trouvons que cette illustration a bien fonctionné. Ici, l'œuvre d'art nous parle non seulement de l'individu que représente le site, mais elle nous permet également de nous démarquer de la mentalité Web normale qu'un visiteur pourrait avoir. Encore une fois, cela ressemble plus à une œuvre d'art interactive qu'à un site Web. Si tel est votre objectif et ce dont vous avez besoin, c'est une excellente approche à prendre en compte.
Zaarly
Par rapport aux exemples précédents, le Zaarly le site est en contraste frappant. Bien que la conception soit régie par une seule grande illustration et que cette illustration sert à définir le ton du site, la fonction sous-jacente est beaucoup plus complexe que ces autres exemples.
Ce site est une application destinée à être utilisée. Et l'illustration aide à établir un certain ensemble d'attentes. Cela donne une sensation d'humanité légère, qui est clairement très organique et naturelle. Imaginez ceci contrairement aux applications semi-minimalistes sans aucune personnalité. La conception donne au site un sentiment d’accessibilité et modifie nos attentes.
Conclusion
L'utilisation de l'illustration dans la conception est une pratique séculaire et son application sur le Web est claire. Comme pour tout élément de conception, j'apprécie le processus de reconsidération de son objectif et de son utilisation. À travers un tel effort, je constate inévitablement que je comprends mieux la façon dont cela fonctionne, les moyens de l’utiliser de manière ciblée et, en fin de compte, des idées nouvelles et inspirantes.
Comment utilisez-vous l'illustration dans la conception de sites Web? S'il vous plaît partager vos propres expériences ci-dessous ....