Des ajouts illustrés à des sites Web peuvent conférer aux thèmes les plus simples un niveau supplémentaire d'intérêt visuel et de complexité.

Les illustrations varient considérablement d'un site à l'autre. Certains semblent dessinés à la main (qu'ils le soient ou non) alors que d'autres sont visiblement rendus numériquement.

Vous trouverez ci-dessous plus de trente excellents designs de sites Web illustrés.

Les illustrations les plus courantes sont les en-têtes et les arrière-plans, souvent des mascottes ou des personnages de sites.

Mais les illustrations sont également utilisées. Si vous avez un site illustré préféré qui n'est pas mentionné ici, veuillez nous en informer dans les commentaires.

Sites avec illustrations numériques

Ces sites ont des illustrations évidemment numériques. Les lignes lisses et les couleurs vives sont les caractéristiques de ce style, même si toutes les fonctionnalités présentées ci-dessous ne sont pas conformes à ces normes.

F5

Le site Web F5 utilise une illustration numérique fantaisiste pour leurs antécédents. Les couleurs vives et les personnages de dessins animés sont typiques des illustrations numériques. Ce qui n'est pas visible ici, c'est que l'illustration continue sur la page, révélant différentes couches.


Wireframe Plus

Wireframe Plus utilise une illustration d'arrière-plan monochromatique pour leur site. C'est subtil, mais ajoute vraiment quelque chose de visuel supplémentaire et fait ressortir le site même si les couleurs et la typographie sont assez standard.


Tom Bradshaw Design

Tom Bradshaw Design utilise une typographie de style illustré sur l'ensemble du site, ainsi qu'une mascotte de personnages de dessins animés, qui apparaît dans chaque section de la page (il s'agit d'un site d'une page).


Mediocore

Les illustrations numériques brillantes comme celle-ci ne sont pas très souvent vues et se distinguent des autres sites. Celui-ci se distingue encore plus car il est positionné sur un fond noir et utilise les seules couleurs vives sur la page.


htmlMafia

Les illustrations ici sont en quelque sorte un mélange de styles numériques et dessinés à la main, bien que les dégradés utilisés les placent plus fermement dans la catégorie numérique. C'est un excellent exemple de la façon dont les illustrations animent un site et donnent une impression plus dramatique.


CreativeSwitch

Le robot illustré ici est en fait animé sur le site lui-même, même de manière subtile. Des illustrations supplémentaires sont utilisées sur tout le site.


690 Design

Lier des illustrations à la copie d'un site Web est une stratégie fantastique. Ici, le texte du slogan traite de l'harmonie et un chef d'orchestre est utilisé pour l'illustration.


Kipu

Des illustrations simples de style vectoriel ont un impact très audacieux. Utiliser une palette de couleurs plus sourde pour eux, comme ci-dessus, les fait se fondre plus facilement dans le reste du site.


Siringa 1

Ces personnages sont un autre exemple d’illustrations numériques qui ont un effet dessiné à la main. Combinées à la palette de couleurs, ces illustrations confèrent au site une atmosphère décontractée et conviviale.


PixelBaecker

Il se passe beaucoup de choses dans cette illustration de style vectoriel, des gars qui travaillent dans le trou sous terre jusqu’à l’oiseau dans l’arbre. Stylistiquement, c'est une illustration vectorielle assez typique, bien que l'exécution soit merveilleuse.


Pieoneers

Utiliser des illustrations pour parler des avantages ou offrir d'autres informations sans en faire un info-graphique est une excellente stratégie. C'est un moyen amusant et intéressant de transmettre des informations plus susceptibles d'engager vos visiteurs. De plus, la combinaison d'une tarte et d'une soucoupe volante est tout simplement exceptionnelle!


Jacob Lee

Le pingouin illustré ici semble presque dessiné à la main, mais il est juste un peu trop poli et lisse. La couleur blanche et rigide (ou son absence) se détache vraiment sur le fond coloré.


Treehouse édition

L'arrière-plan illustré ici change d'une page à l'autre et présente des animations subtiles. Mais c'est une belle œuvre d'art digne d'un second regard.


Code Crunchers

Les illustrations numériques les plus courantes sont des personnages simples ou des monstres comme celui-ci. Et en tant que mascotte, cela fonctionne parfaitement avec le nom du site.


Premier

Des fonds illustrés comme celui-ci deviennent de plus en plus courants. L'intégration complète entre le contenu et l'arrière-plan est ce qui fait vraiment ressortir celui-ci.


Coo / Coo Core

Des illustrations plus abstraites comme celle-ci donnent à un site un sentiment plus moderne. Celui-ci est juste assez abstrait pour le faire, tout en étant reconnaissable comme un arbre.


Joystick Généraux

La répétition du caractère de base en arrière-plan de l'en-tête ajoute une couche supplémentaire d'intérêt visuel à une illustration relativement simple. La palette de couleurs utilisée ici est simple, mais combinée avec le fond grungy, elle est fantastique.


Faire du film

Les illustrations sont moins souvent vues sur des sites de style grunge, probablement parce qu'elles risquent de créer un fouillis visuel. Mais la simple illustration ici, avec ses couleurs discrètes et sa texture subtile, fonctionne parfaitement dans un design grunge plus minimaliste.


Les Solid Studios

Un autre excellent exemple de monstres numériques simples utilisés dans un design. Ces gars-là sont décontractés et amusants, et font que le site Web est le même.


Olive Crush

Les en-têtes sont l'une des zones les plus infaillibles pour utiliser les illustrations. Grâce à l'utilisation créative des ombres portées, cette illustration d'en-tête ressemble presque à 3D.


Sara Tusar

Un autre excellent exemple de monstres, cette fois dans un design d'en-tête. Ils sont subtils, faisant écho aux couleurs du reste du site, mais apportent une touche plus personnelle.


Arbel-Designs

Le site Web d'Arbel-Designs utilise un arrière-plan illustré multicouche, commençant dans l'espace en haut de la page, et progressant sous l'eau. Ce style de fond illustré fonctionne très bien sur les sites d'une seule page.


Monstres Mêleurs

Ce sont quelques-uns des caractères vectoriels les plus simples de cet article. Ils sont très mignons, cependant, et sont entièrement intégrés dans la conception du site. En fait, ils sont l’intégralité du site.


Sites avec illustrations dessinées à la main

Les illustrations dessinées à la main sont moins courantes dans la conception de sites Web, mais il existe encore quelques exemples fantastiques. Ils vont des dessins d'art aux griffonnages, et tout le reste.

Steve Schoger

Des croquis simples comme celui-ci conviennent à tous les sites, mais surtout lorsqu'ils remplacent une photo de concepteur (ou de n'importe quel professionnel). Ils sont également une excellente alternative pour ceux qui ont peur de la caméra! Laisser apparaître la texture d'arrière-plan pour donner une couleur de peau est une bonne idée.


Kenny Meyers

Une illustration d'un super-héros sur ce qui est par ailleurs un site assez minimaliste peut aider à inspirer la confiance à vos visiteurs sans avoir recours à un design de site de type «corporate». Faire écho aux couleurs d’ailleurs sur le site garantit que l’illustration se fond parfaitement.


Andy Ward

Il est logique qu'un illustrateur inclue des illustrations sur son site. Andy Ward utilise un diaporama de ses illustrations dans son en-tête, mais elles sont incorporées de telle manière qu'elles deviennent une partie intégrante du design.



Kilian Muster

Un dessin au trait plus formel et raffiné comme celui-ci est un clin d'œil à la tradition. dans ce cas: méthodes de composition traditionnelles. C'est simple mais assez audacieux pour vraiment avoir un impact.


ADN à Darwin

Un autre excellent exemple de site qui utilise des dessins au trait formels pour créer un sens de l'histoire. Les illustrations en couches le rendent d'autant plus intéressant.


Nœud papillon

Un site dessiné à la main plus décontracté, avec des monstres dessinés à la main (ou est-ce un extraterrestre?). Le site utilise une illustration d'arrière-plan multicouche, commençant dans l'espace et se retrouvant dans la mer.



xhtmlCafe

Une illustration dessinée à la main combinée à des aquarelles crée un en-tête fantastique et informatif sur le site xhtmlCafe. Les éléments esquissés dans la peinture lui donnent une sensation plus stylisée qu'une aquarelle droite.



Attaque du web

Que serait un article sur des sites Web illustrés sans un exemple d'illustration de style bande dessinée? Tout, des épaisseurs de lignes à la coloration texturée, rappelle votre roman comique ou graphique préféré.



Janko à Warp Speed

Une illustration simple dans l'en-tête ici est subtile et discrète, mais ajoute un énorme attrait esthétique à la conception du site.



Écrit exclusivement pour WDD par Cameron Chapman .

Si vous avez d'autres sites Web illustrés préférés, veuillez les partager dans les commentaires!