En samling av flotte illustrerte nettsteder
Illustrert tillegg til nettsteder kan til og med gi det enkleste temaet et ekstra nivå av visuell interesse og kompleksitet.
Illustrasjoner varierer mye fra ett nettsted til det neste. Noen ser håndtegnet (enten de er eller ikke) mens andre åpenbart er digitalt gjengitte.
Nedenfor er mer enn tretti store nettsteddesigner som har illustrasjoner.
Mest vanlige er illustrasjoner i overskrifter og bakgrunner, ofte av stedsmascots eller tegn.
Men illustrasjoner brukes også på andre måter. Hvis du har et favoritt illustrert nettsted som ikke er nevnt her, vennligst gi oss beskjed i kommentarene.
Nettsteder med digitale illustrasjoner
Disse nettstedene har illustrasjoner som åpenbart er digitale. Glatte linjer og lyse farger er kjennetegn ved denne stilen, men ikke alt som er omtalt nedenfor stemmer overens med disse standardene.
F5
F5-nettstedet bruker en lunefull digital illustrasjon for sin bakgrunn. De lyse farger og tegneserieaktige tegn er typiske for digitale illustrasjoner. Det som ikke er synlig her er at illustrasjonen fortsetter nedover siden, og avslører forskjellige lag.
Wireframe Plus
Wireframe Plus bruker en monokromatisk bakgrunns Illustrasjon for deres nettsted. Det er subtilt, men legger virkelig til litt ekstra visuell oomph og gjør at nettstedet skiller seg ut selv om fargevalg og typografi er ganske standard.
Tom Bradshaw Design
Tom Bradshaw Design bruker illustrert stil typografi over hele nettstedet, samt en tegneserie karakter maskot, som vises på hver side av siden (det er en side side).
mediocore
Glatte digitale illustrasjoner som denne er ikke sett veldig ofte, og skiller seg ut fra andre nettsteder. Dette skiller seg ut enda mer siden den er plassert mot en svart bakgrunn og bruker de eneste sterke farger på siden.
htmlMafia
Illustrasjonene her er en blanding av digitale og håndtegnede stiler, selv om de brukte gradienterne satte dem mer fast i den digitale kategorien. Dette er et godt eksempel på hvordan illustrasjoner lever opp et nettsted og gir et mer dramatisk inntrykk.
CreativeSwitch
Roboten illustrert her er faktisk animert på nettstedet selv, om enn subtilt. Ytterligere illustrasjoner brukes over hele nettstedet.
690 Design
Binde illustrasjoner i kopien av et nettsted er en fantastisk strategi. Her diskuterer tagline-teksten harmoni, og en orkesterleder brukes til illustrasjonen.
Kipu
Enkle, vektorstilte illustrasjoner gjør en veldig dristig innvirkning. Ved å bruke en mer dempet fargepalett for dem, som ovenfor, blir de mer sømløst blandet inn i resten av nettstedet.
Siringa 1
Disse tegnene er et annet eksempel på digitale illustrasjoner som har en håndtegnet følelse til dem. I kombinasjon med fargeskjemaet gir disse illustrasjonene nettsiden en avslappet og vennlig følelse.
PixelBaecker
Det skjer mye i denne vektorstil illustrasjonen, fra gutta som arbeider i hullet under jorden til fuglen oppe i treet. Stilistisk er det en ganske typisk vektorillustrasjon, selv om utførelsen er fantastisk.
Pieoneers
Bruke illustrasjoner til å snakke om fordeler eller gi opp annen informasjon, uten at det blir en info-grafikk, er en god strategi. Det er en morsom og interessant måte å formidle informasjon som er mer sannsynlig å engasjere dine besøkende. I tillegg er kombinasjonen av en kake og en flygende tallerken her enestående!
Jacob Lee
Pingvinen som er illustrert her, ser nesten ut håndtegnet, men det er bare litt forpolert og glatt. Den sterke hvite fargen (eller mangelen derav) skiller seg virkelig ut mot fargerik bakgrunn.
Treehouse redigering
Den illustrerte bakgrunnen endres her fra side til side, og har subtile animasjoner. Men det er et vakkert stykke kunstverk, verdt et annet utseende.
Kode Crunchers
De vanligste digitale illustrasjonene er enkle tegn eller monstre som denne. Og som maskot fungerer det perfekt med navnet på nettstedet.
Forrst
Illustrert bakgrunn som denne blir stadig mer vanlige. Den komplette integrasjonen mellom innholdet og bakgrunnen er det som virkelig gjør at dette skiller seg ut.
Coo / Coo Core
Flere abstrakte illustrasjoner som dette gir et nettsted en mer moderne følelse. Denne er bare abstrakt nok til å gjøre det, mens den fortsatt er gjenkjennelig som et tre.
Joystick Generals
Repetisjonen av grunnleggende karakter i bakgrunnen av toppteksten legger til et ekstra lag av visuell interesse for det som er en relativt enkel illustrasjon. Fargeskjemaet som brukes her er enkelt, men når det kombineres med grungy bakgrunnen, ser det fantastisk ut.
Lag filmarbeid
Illustrasjoner settes sjeldnere på grunge-stil-steder, sannsynligvis fordi det utgjør risikoen for å skape visuell rot. Men den enkle illustrasjonen her, med sin dempet fargeskjema og subtile tekstur, fungerer bra i en mer minimalistisk grunge design.
The Solid Studios
Et annet godt eksempel på enkle digitale monstre som brukes i et design. Disse karene er uformelle og morsomme, og gjør nettstedet ditt det samme.
Olive Crush
Headers er et av de mest idiotsikre områdene for å bruke illustrasjoner. Gjennom kreativ bruk av dropshadows, ser denne toppteksten nesten 3D ut.
Sara Tusar
Et annet godt eksempel på monstre, denne gangen i en toppdesign. De er subtile, ekko farger fra resten av nettsiden, men gir deg et mer personlig preg.
Arbel-Designs
Arbel-Designs nettsted bruker en flertallet illustrert bakgrunn, som starter i rommet øverst på siden, og utvikler dypt undervann. Denne stilen med illustrert bakgrunn fungerer bra på enkeltsidensider.
Minding Monsters
Dette er noen av de enkleste vektorkarakterene i dette innlegget. De er veldig søte, skjønt, og er fullt integrert i nettstedets design. Faktisk er de hele punktet på nettstedet.
Nettsteder med håndtegnede illustrasjoner
Håndtegnede illustrasjoner er mindre vanlige i webdesign, men det er fortsatt noen fantastiske eksempler der ute. De spenner fra fine kunst tegninger til doodles, og alt i mellom.
Steve Schoger
Enkle skisser som dette fungerer bra for et hvilket som helst nettsted, men spesielt når de erstatter et typisk designer (eller et profesjonelt) bilde. De er også et flott alternativ for de som er kamera-sjenerte! Å la bakgrunns tekstur vise gjennom for å gi en hud-tone er en fin touch.
Kenny Meyers
En illustrasjon av en superhelte på hva som ellers er et forholdsvis minimalt nettsted, kan bidra til å tilintetgjøre tilliten til de besøkende uten å benytte seg av en "corporate" -feeling nettsteddesign. Ekko farger fra andre steder på nettstedet, sørg for at illustrasjonen smelter sammen sømløst.
Andy Ward
Det er bare fornuftig for en illustratør å inkludere illustrasjoner på deres nettsted. Andy Ward bruker en lysbildefremvisning av sine illustrasjoner i sin header, men de er innarbeidet på en slik måte at de blir en del av selve designet.
Kilian Muster
En mer formell, fin-stil linje tegning som denne gir en nikk til tradisjon; i dette tilfellet: tradisjonelle typeretteringsmetoder. Det er enkelt, men dristig nok til virkelig å påvirke.
DNA til Darwin
Et annet godt eksempel på et nettsted som bruker formelle linjetegninger for å skape en følelse av historie. De lagdelte illustrasjonene gjør det enda mer interessant.
Sløyfe
Et mer tilfeldig håndtegnet nettsted, komplett med håndtegnede monstre (eller er det en fremmed?). Nettstedet bruker en flerlags bakgrunnsillustrasjon, som starter i rommet og ender opp i sjøen.
xhtmlCafe
En håndtegnet illustrasjon kombinert med akvareller skaper en fantastisk og informativ header på xhtmlCafe-siden. De skisserte elementene i maleriet gir det en mer stilisert følelse enn en rett akvarell ville ha.
Attack of the Web
Hva ville et innlegg på illustrerte nettsteder være uten et eksempel på tegneserie-stil illustrasjon? Alt fra linjetykkelsen til den teksturerte fargen minner om din favoritt tegneserie eller grafisk roman.
Janko på Warp Speed
En enkel illustrasjon i overskriften her er subtil og diskret, men legger til en stor mengde estetisk appell til nettstedets design.
Skrevet utelukkende for WDD av Cameron Chapman .
Hvis du har andre favoritt illustrert nettsteder, vennligst del dem i kommentarene!