Brugen af illustration i webdesign
Illustration er et utroligt alsidigt værktøj, der kan finde mange forskellige anvendelser i design. Og når det kommer til webdesign, kan vi finde et ekstremt bredt udvalg af implementeringer.
I dag vil jeg grave på nogle vigtige måder at dette værktøj er sat på arbejde, så vi kan tegne nye ideer til at inspirere og udfordre de designs, vi producerer.
Lad os begynde et sted, jeg sjældent gør, med en grundlæggende definition: Illustreret: 1) For at tydeliggøre ; 2) At tydeliggøre ved at give eller ved at tjene som et eksempel eller eksempel 3) At forsyne med visuelle funktioner beregnet til at forklare eller dekorere .
Det ser ud til, at i den virkelige verden af webdesign har illustrationen tendens til at udføre begge funktioner ad gangen. Det beundrer, mens det tydeliggør. Og hvis det kun gør en af disse, skal du måske spørge dig selv hvorfor. Måske ved at sætte illustration på arbejde, der opfylder begge roller, er det muligt at virkelig udnytte designelementet for alle.
Dette er selvfølgelig ikke at sige, at et design ikke kan lykkes, hvis det kun håndterer den ene eller den anden; helt sikkert det kan. Men for at få mest muligt ud af vores arbejde finder jeg udfordringen, at vores tænkning altid er nyttig. Som sædvanlig lad os grave i nogle grupperinger af prøver for at se, hvad der kan gøres med denne visuelle enhed. På den måde skal du overveje, om hver tilgang giver klarhed eller udsmykning, eller begge dele.
Tematisk illustration
Den første tilgang til illustration, som jeg vil dække her, er brugen af denne stil til at skabe en overordnet tematisk tilgang. I denne situation er illustrationer sat på arbejde for at skabe et overordnet tema. Klatrer vi bjerge, besøger en rumstation eller udforsker virksomhedens kontor?
Mens denne tilgang ikke behøver at tage os til et sted, gør det det ganske ofte. I andre situationer opretter stilen simpelthen et overordnet motiv, som webstedet følger.
Årsagen til, at vi er interesserede i det her er imidlertid, at den bruges til at drive det overordnede design på en radikal måde. Illustrationen er ikke noget lille understøttende element. I stedet er det det mest fremtrædende designelement og styrer hele layoutet.
Få min chef til North Cape
I denne prøve kunne tilgangen ikke være klarere. Designet af webstedet ekko tydeligt dets mest grundlæggende formål. Illustrationen giver en visuel henvisning til, hvad den enkelte vil gøre. Og hvad angår at definere illustrationen, giver illustrationen udsmykning og skønhed til siden.
I dette tilfælde fastlægger temaet stedets formål og hjælper brugeren med at købe ind på konceptet.
Start Kit
En tematisk tilgang må ikke være så stump på en måde. Nogle gange kan det være en mere naturlig del af et mere typisk struktureret websted. I dette tilfælde er webstedet lidt unikt i sit layout, og temaet tvinge ikke noget over-top-grænseflade baseret på raketskibe.
I stedet er temaet vævet ind i designet på en sådan måde, at det kommunikerer sine dekorative detaljer uden at forstyrre indholdet. Her tjener illustrationen til at dekorere, men ikke præcisere så meget. Dette er ikke overraskende overhovedet og viser selvfølgelig, at der ikke er nogen formel at følge.
Atelier Anonyme Design
I andre situationer som denne, er den tematiske illustration bogstaveligt talt stedet. Det er ikke et understøttende element, men bliver helt fuldstændigt selve designet.
Her spiller brugen af illustration klart en udsmykning rolle. Men jeg vil hævde, at det også giver en stor grad af klarhed til den besøgende. Dette er et websted for et design bureau. Designet og arten af dette websted kommunikerer meget til sine besøgende. Som sådan er jeg sikker på, at det tjener som et massivt filter til deres kundebase. Du vil enten blive trukket ind og elsker deres legende og kreative tilgang, eller du bliver helt slukket af det. Så til dette punkt tror jeg det giver en stor klarhed om agenturet og deres mentalitet.
Allure Graphic Design
På dette websted spiller brug af illustration også en klar tematisk tilgang. Selv om hjemmesiden følger nogle standard layout formler, er hele designet indpakket i et tematisk layout. Disse elementer kører ikke kun webstedets design, men de fusionerer med hovedlogoet og den kopi, der bruges på hjemmesiden. Temaet er fordybende og driver hele meddelelsen, som webstedet præsenterer.
Yderligere tematiske prøver
Her er nogle ekstra websteder, der benytter tematiske illustrationer til at etablere et miljø eller tema for et websted.
Chipmunk
Drift Boys
Iutopi
Chandu4u
mascots
Hvordan kunne jeg muligvis dække ideen om at bruge illustrationer uden at gennemgå en af de mest oplagte mascots? Med dette visuelle element har designerne en tendens til at personificere webstedet, dets produkt eller formålet med et tegn. Implementeringen af et sådant element varierer ikke kun, men også kraften og begrundelsen bag det gør det også.
inkFinder
I dette design spiller den illustrerede maskot en ret klar rolle. Klare, at det ekko navnet på produktet. Det giver ikke kun noget liv til designet, men det sætter et ansigt til det. På den måde har publikum noget mere unikt at filme væk i deres hjerne. Forhåbentlig hjælper maskoten med at gøre en mere mindeværdig og unik oplevelse, der vil hjælpe produktet til at skille sig ud fra det hørte.
Måske er det mest magtfulde formål bag en maskot, for at hjælpe med at skille sig ud. Det store ved en illustreret maskot som dette er, at den kan være helt unik og specifik for dette produkt. Forudsat at det var skræddersyet til dette design, skulle det være det eneste sted, denne eksakte illustration eksisterer.
Evnt
Ironisk nok finder vi her en anden illustreret blæksprutte-lignende maskot (hvad er en trebenet havdyr?). I dette tilfælde er maskot naturligvis et meget større skridt væk fra virkeligheden: en robot trebenet væsen med en hjerne i en boble.
Selv om det kan være et ulige valg, giver det et smukt kendetegn for arrangementet. Denne unikke maskot giver et køligt visuelt element for at forbinde arrangementet. Det tager livet af sig selv og forbinder folk virkelig med noget konkret. Jeg antager, at dette er netop formålet med en maskot.
Dette websteds design er smukt, men overvej hvor kedeligt det ville være uden denne skøre maskot på plads. At producere et sådant element er ikke let, men det er ekstremt effektivt i denne situation.
Big Eye Creative
For et eksempel på en non-octopus-baserede maskot tage et kig på Big Eye Creative websted. Her spiller maskot ikke så meget af en fremtrædende rolle i designet. Det tilføjer dog en masse personlighed til det. Naturligvis gør de andre illustrationer og overordnede stil på webstedet en mindre formel præsentation. Men maskot i logoet er til stede på hele stedet. Dette sikrer deres lyshårede stil gennemsyrer designet.
Yderligere maskotillustrationer
Her er et par ekstra prøver af maskotter på arbejde i design. Inklusive endnu en blæksprutte det ser ud som det er en populær at bruge.
Pioneer Records Management
Argyle Octopus
Coucou
Konsebt
Illustreret dekoration
Den næste type brug, jeg gerne vil overveje, er, hvad jeg refererer til som tematisk dekoration. Dette er, når illustrationen er sat på arbejde på en dekorativ måde, der ikke rigtig giver en bestemt fysisk reference. For eksempel indeholder illustrationen oftest billeder af mennesker, dyr, objekter eller steder. Men i dette tilfælde repræsenterer illustrationen ikke så meget noget rigtigt, men det giver simpelthen udsmykning for at forskønne designet på en måde, som kun illustration kan. Lad os som altid godtgøre dette gennem nogle prøver.
1000 WP Temaer
For vores første eksempel, overvej 1000 WP Temaer internet side. På denne side giver brugen af illustration en underliggende ramme og stil til webstedet. Men det gør det i hvad der er mest rent dekorativt. Den overordnede stil føles som en illustration, og alligevel har den ikke de typiske humanistiske elementer.
Nu vil jeg helt modsige mig selv. Jeg synes stilen er overvejende dekorativ. Men jeg kan faktisk se, hvordan vi kunne argumentere for, at det giver et niveau af præcisering for webstedet. Den stil, designet bruger, forbinder med et bestemt publikum. Det siger noget om stilen på webstedet og de temaer, de måtte producere. På så mange måder viser kvaliteten af det illustrerede layout kvaliteten af det arbejde, du kan forvente at se gennem dette websted. På den måde er afklaringen måske mere subtil og mindre i dit ansigt, men alligevel til stede.
Coca-Cola historie
På denne hjemmeside finder vi et andet design drevet af illustration. Der er nogle illustrerede elementer her, der viser virkelige ting, men det meste af den tematiske tilgang er etableret med ren dekoration. Ikke alene viser dette eksempel tilgangen, men det viser også, at næsten ingen teknik anvendes på en puristisk måde. Virkeligheden er, at du sandsynligvis vil fusionere disse elementer på forskellige måder.
Metaphiziks
I dette sidste eksempel til dekorativ illustration finder du nogle gode baggrundselementer. Nogle af disse er mere håndgribelige end andre, men generelt handler de mere om stilistiske støtteelementer end noget andet. Det er bemærkelsesværdigt, hvor smukt sådanne enkle linjetegninger kan være, når de kombineres med smuk tekst, velvalgte farver og enkle ikoner. Slutresultatet her er fantastisk og bemærkelsesværdigt smukt.
Flere designs med illustreret dekoration
Her er nogle ekstra prøver til at runde ud denne type illustration i design.
Moos Cupcakes
Tech Jobs
Pixel Stadium
Brugerdefinerede tasker HQ
Illustreret tekst
Hånd gengivet tekst er bestemt ikke et nyt koncept, og er noget, jeg har dækket mange gange før . Jeg har dog aldrig overvejet en sådan tilgang med et illustrationsperspektiv.
Håndgengivelse er en populær variant af illustreret tekst, og en god løsning til mange reklamer. For det ene er det en fantastisk måde at sætte alt den praktiske kunstskoleuddannelse på arbejde. For det andet er det en fantastisk måde at producere noget unikt på. Når alt kommer til alt, hvis du giver en tekst, bliver den 100% unik. Selvom du skitserer over et eksisterende skrifttype, bliver det stadig en særskilt skabelse.
Rangus
Dette er et perfekt eksempel på illustreret type. Stilen er yderst smuk, helt unik og meget indbydende. Men det stopper ikke der. Den håndlavede type viser faktisk individernes talenter. Det viser at han skaber illustrationer med sine hænder, og det forbinder perfekt til hans animationsfærdigheder. Jeg elsker især det faktum, at det hele er baseret på et tavlen tema, da det virkelig binder temat og elementer sammen perfekt. Efter min opfattelse viser denne side, hvordan sammenhængende illustration kan være med webstedets formål og budskab.
Joey Lomanto
I dette tilfælde er den illustrerede tekst langt mere subtil. I stedet for at køre hele retningen af designet, spiller det simpelthen sammen pænt. Faktisk kan du ved første gang ikke engang mærke den hånd gengivne stil på den store hjemmeside tekst. Tildelt, teksten kan faktisk være en skrifttype, men den er blevet brugt på en sådan måde, at den smelter perfekt sammen med stilen på webstedet. Uanset at stilen er smukt forenet og illustration spiller mange roller i det overordnede design.
Gå live
Illustreret tekst behøver ikke at blive håndgjort dog. Som du vil finde i dette eksempel, er teksten stylet på forskellige måder, som gør teksten til bit af den samlede illustration. Skønheden ved denne tilgang er, at den forener teksten med de andre illustrationer. Dette undgår en mindre forenet følelse, hvor du blot har illustrationer over standard webbaseret tekst. Sidstnævnte kan arbejde, men i dette tilfælde er virkningen af illustreret tekst tydelig.
Yderligere prøver af illustreret tekst
Følgende eksempler passer løst ind i denne kategori. Jeg siger løst fordi det er svært at sige til tider, da det undertiden er en subtil ting. I nogle af disse tilfælde føles teksten kun som et kunstværk, så jeg har lagt det ind i denne samling.
Kontrastoprørelse
Fakta
La Web Shop
Informative illustrationer
Ved selve definitionen af illustration er et af formålene med at klarlægge og forklare. Så det er kun passende, at vi finder nogle eksempler, hvor illustrationerne gør dette med ekstraordinær klarhed.
boglig
Lad os begynde med boglig websted. I dette usædvanlige layout finder vi, at illustrationerne meget tydeligt symboliserer de forskellige punkter i hjemmesiden layout. Hver blok har et visuelt element, der ikke kun forskønner det, men vigtigere forklarer det. Så meget, at jeg som læser næsten ikke engang skal læse kopien. Apparatets illustrationer nederst til venstre viser især dette.
Conferize
På en langt mindre fremtrædende måde viser illustrationen i dette design lige så informativ. Den enkle illustration viser enkeltstedet emnet for webstedet. Det kan ikke slå dig over hovedet med sin besked, men det ekko webstedets formål smukt.
Aktiver
Illustrationen i dette design kommunikerer ikke kun information om den begivenhed, den repræsenterer, men også ekko selve begivenheden af arrangementet. Denne særlige begivenhed drejer sig om at afbryde forbindelsen fra teknologien. Det er en chance for folk, der oversvømmes med teknologi til at undslippe det er koblinger.
Illustrationen her viser os, hvad deltagerne skal gøre, så det er informativt. Og i det hele er naturen, bryder illustrationen med teknologi og rødder sig selv i en rent organisk fornemmelse, en grundlæggende god måde at kommunikere om formålene med.
Flere informative illustrationer
Disse ekstra sites demonstrerer også ideen om illustrationer, der informerer os. Nogle er små og grundlæggende ikoner, mens andre er fordybende elementer, der definerer og repræsenterer indholdet fuldt ud.
Vitality City
Uklizenodoma.cz
Qubiq
En teknologisk modgift
Med det sidste eksempel (The Aktiver site) vi trådte ind i, hvad jeg vil overveje næste, brugen af illustration at bryde med den teknologiorienterede følelse af ting. Nogle gange er det nødvendigt at afbryde forbindelsen mellem webens teknologiske underlag og demonstrere en meget organisk følelse. Illustration er et af de mest kraftfulde værktøjer til at opnå en sådan ide.
Forsendelse App
Denne ligefrem kommende side er intet mindre end ekstraordinært. Og klart, hvordan det opnår dets skønhed er radikalt simpelt. En enkelt stor illustration afleder os ensbetydende med, at dette er en webside. Det føles mere som et kunstværk, der har et lille interaktivt element, bestemt en fantastisk måde at gøre en stor indflydelse på for brugere og skabe et mindeværdigt billede.
Muziekpark
Selvom dette websted ikke benytter sig af lige så radikal en tilgang, er illustrationen stadig stor og fremtrædende i layoutet. Her indånder det animerede billedliv livet i siden. Kombiner dette med et kreativt og usædvanligt layout, og det føles helt løsrevet fra den teknologi, der driver det. Måske er den kendsgerning, at det ikke ligner et normalt sted, også en stærk rolle i dette. Overvej også, at illustrationen i dette tilfælde virkelig hjælper med at informere os om temaet på webstedet.
Egopop
I endnu et atypisk layout finder vi, at illustrationen er sat på arbejde. Her fortæller kunstværket ikke kun os om den person, som webstedet repræsenterer, men de bryder os også ud af det normale webindhold, en besøgende måtte have. Igen føles det mere som et interaktivt kunstværk end et websted. Hvis dette er dit mål og behov, så er dette en god tilgang til at overveje.
Zaarly
Sammenlignet med de foregående eksempler, er Zaarly site står i skarp kontrast. Selv om designet er styret af en enkelt stor illustration, og denne illustration tjener til at indstille en tone til webstedet, er den underliggende funktion langt mere kompleks end disse andre prøver.
Dette websted er et program, der er beregnet til at blive brugt. Og illustrationen hjælper med at etablere et vist sæt forventninger. Det giver en lyshjerte, humanistisk følelse, der klart er meget økologisk og naturlig følelse. Forestil dig dette i modsætning til semi-minimalistiske apps uden nogen personlighed overhovedet. Designet giver stedet en følelse af tilnærmelighed og skifter vores forventninger.
Konklusion
Brugen af illustration i design er en gammel praksis, og dens anvendelse på nettet er tydelig. Som med ethvert designelement nyder jeg processen med at genoverveje dens formål og brug. Gennem en sådan indsats finder jeg uundgåeligt, at jeg får en bedre undervurdering af, hvordan det virker, måder at udnytte det til et bestemt formål og i sidste ende nogle friske og inspirerende ideer.
Hvordan bruger du illustration i webdesign? Del venligst dine egne oplevelser nedenfor ....