Illustreret tilføjelser til hjemmesider kan endda give det enkleste tema et ekstra niveau af visuel interesse og kompleksitet.

Illustrationer varierer meget fra et sted til et andet. Nogle ser håndtegnet (uanset om de er eller ej), mens andre selvfølgelig er digitalt gengivet.

Nedenfor er mere end tredive store website designs, der indeholder illustrationer.

Mest almindelige er illustrationer i overskrifter og baggrunde, ofte af stedsmascots eller tegn.

Men illustrationer bruges også på andre måder. Hvis du har et foretrukket illustreret site, der ikke er nævnt her, så lad os vide det i kommentarerne.

Websteder med digitale illustrationer

Disse steder har illustrationer, der naturligvis er digitale. Glatte linjer og lyse farver er kendetegnende for denne stil, men ikke alt, der er angivet nedenfor, er i overensstemmelse med disse standarder.

F5

F5 hjemmeside bruger en lunefuld digital illustration til deres baggrund. De lyse farver og tegneserieagtige figurer er typiske for digitale illustrationer. Hvad der ikke er synligt her er, at illustrationen fortsætter ned på siden, der afslører forskellige lag.


Wireframe Plus

Wireframe Plus bruger en monokromatisk baggrunds illustration til deres websted. Det er subtilt, men tilføjer virkelig nogle ekstra visuelle oomph og får webstedet til at skille sig ud, selvom farveskemaet og typografien er ret standard.


Tom Bradshaw Design

Tom Bradshaw Design bruger illustreret stil typografi over hele siden, samt en tegneserie karakter maskot, der vises på hver sektion af siden (det er en side side).


mediocore

Glatte digitale illustrationer som denne ses ikke meget ofte og skiller sig ud fra andre steder. Denne skiller sig ud endnu mere, da den er placeret mod en sort baggrund og bruger de eneste lyse farver på siden.


htmlMafia

Illustrationerne her er en blanding af digitale og håndtegnede stilarter, selvom de anvendte gradienter sætter dem mere fast i den digitale kategori. Dette er et godt eksempel på hvordan illustrationer oplever et websted og giver et mere dramatisk indtryk.


CreativeSwitch

Roboten illustreret her er faktisk animeret på hjemmesiden selv, omend subtilt. Yderligere illustrationer bruges overalt på siden.


690 Design

Binde illustrationer i kopien af ​​et websted er en fantastisk strategi. Her diskuterer tagline-teksten harmoni, og en orkesterleder bruges til illustrationen.


Kipu

Simple, vektor-stil illustrationer gør en meget fed indflydelse. Ved at bruge en mere dæmpet farvepalet til dem, som ovenfor, får de dem til at blende mere problemfrit ind i resten af ​​siden.


Siringa 1

Disse tegn er et andet eksempel på digitale illustrationer, der har en håndtegnet følelse for dem. Kombineret med farveskemaet giver disse illustrationer hjemmesiden en tilbagegang, venlig følelse.


PixelBaecker

Der er meget foregået i denne vektorstil illustration fra gutterne, der arbejder i hullet under jorden til fuglen op i træet. Stylistisk er det en temmelig typisk vektor illustration, selvom udførelsen er vidunderlig.


Pieoneers

Brug illustrationer til at snakke om fordele eller tilbyde andre oplysninger, uden at omdanne det til en info-grafik, er en god strategi. Det er en sjov og interessant måde at formidle oplysninger, der er mere tilbøjelige til at engagere dine besøgende. Plus, kombinationen af ​​en tærte og en flyvende tallerken her er bare enestående!


Jacob Lee

Den her viste pingvin ser næsten håndtræk ud, men det er bare lidt for poleret og glat. Den stærke hvide farve (eller mangel deraf) står virkelig ud for den farverige baggrund.


Træhusredigering

Den illustrerede baggrund her ændrer sig fra side til side, og har subtile animationer. Men det er et smukt stykke kunstværk, værdigt til et andet udseende.


Kode Crunchers

De mest almindelige digitale illustrationer er simple tegn eller monstre som denne. Og som maskot fungerer det perfekt med webstedets navn.


Forrst

Illustreret baggrunde som denne bliver mere og mere almindelige. Den fuldstændige integration mellem indholdet og baggrunden er, hvad der virkelig gør dette skiller sig ud.


Coo / Coo Core

Flere abstrakte illustrationer som dette giver et websted en mere moderne følelse. Denne er bare abstrakt nok til at gøre det, mens den stadig er genkendelig som et træ.


Joystick Generals

Gentagelsen af ​​den grundlæggende karakter i baggrunden af ​​overskriften tilføjer et ekstra lag af visuel interesse for, hvad der er en relativt simpel illustration. Farveskemaet, der bruges her, er enkelt, men når det kombineres med grungy baggrunden, ser det fantastisk ut.


Lav film arbejde

Illustrationer ses sjældnere på grunge-stil websteder, sandsynligvis fordi det løber risikoen for at skabe visuel rod. Men den enkle illustration her, med dens dæmpede farveskema og subtile tekstur, fungerer fint i et mere minimalistisk grunge design.


The Solid Studios

Et andet godt eksempel på enkle digitale monstre brugt i et design. Disse fyre er afslappet og sjovt, og får hjemmesiden til at føle sig det samme.


Olive Crush

Headers er et af de mest dumme områder at bruge illustrationer. Gennem kreativ brug af drop skygger ser denne header illustration næsten 3D ud.


Sara Tusar

Et andet godt eksempel på monstre, denne gang i et hoveddesign. De er subtile og ekko farver fra resten af ​​hjemmesiden, men giver et mere personligt præg.


Arbel-Designs

Arbel-Designs hjemmeside bruger en multi-layered illustreret baggrund, der starter i rummet øverst på siden og går dybt under vandet. Denne stil med illustreret baggrund fungerer godt på enkeltsidens websteder.


Minding Monsters

Dette er nogle af de enkleste vektor tegn i dette indlæg. De er dog meget søde, og er fuldt indbygget i webstedets design. Faktisk er de hele punktet på webstedet.


Sites med håndtegnede illustrationer

Håndtegnede illustrationer er mindre almindelige i webdesign, men der er stadig nogle fantastiske eksempler derude. De spænder fra fine tegninger til doodler og alt imellem.

Steve Schoger

Enkle skitser som denne fungerer godt til ethvert websted, men især når de erstatter et typisk designer (eller et professionelt) billede. De er også et godt alternativ til dem, der er kamera-genert! At lade baggrunds tekstur vise igennem for at give en hudfarve er en fin touch.


Kenny Meyers

En illustration af en superhelt om hvad der ellers er et forholdsvis minimalt websted kan hjælpe med at skabe tillid til dine besøgende uden at ty til et "corporate" -fejlingsdesign. Ægte farver fra andre steder på stedet sikrer, at illustrationen passer perfekt sammen.


Andy Ward

Det er kun fornuftigt for en illustratør at inkludere illustrationer på deres websted. Andy Ward bruger et lysbilledshow af sine illustrationer i sin header, men de er indarbejdet på en sådan måde, at de bliver en del af selve designet.



Kilian Muster

En mere formell, fin-kunstlinjetegning som denne giver et nøgle til traditionen; i dette tilfælde: traditionelle typesetting metoder. Det er simpelt, men dristigt nok til virkelig at påvirke.


DNA til Darwin

Et andet godt eksempel på et websted, der bruger formelle linjetegninger til at skabe en følelse af historie. De lagdelte illustrationer gør det endnu mere interessant.


Butterfly

Et mere afslappet håndtegnet websted, komplet med håndtegnede monstre (eller er det en fremmed?). Webstedet bruger en flerlags baggrunds illustration, der starter i rummet og slutter i havet.



xhtmlCafe

En håndtegnet illustration kombineret med akvareller skaber en fantastisk og informativ overskrift på xhtmlCafe-webstedet. De skitserede elementer i maleriet giver det en mere stiliseret følelse end en lige akvarel ville have.



Angreb på nettet

Hvad ville et indlæg på illustreret websites være uden et eksempel på tegneserie-stil illustration? Alt fra linjetykkelsen til den teksturerede farvning minder om din yndlings tegneserie eller grafiske roman.



Janko ved Warp Speed

En simpel illustration i overskriften her er subtil og diskret, men tilføjer en enorm mængde æstetisk appel til webstedets design.



Skrevet udelukkende til WDD af Cameron Chapman .

Hvis du har andre foretrukne illustreret websites, kan du dele dem i kommentarerne!