Bruken av illustrasjon i webdesign
Illustrasjonen er et utrolig allsidig verktøy som kan finne mange forskjellige bruksområder i design. Og når det gjelder webdesign, kan vi finne et ekstremt bredt utvalg av implementeringer.
I dag vil jeg grave på noen viktige måter at dette verktøyet har blitt satt på jobb slik at vi kan tegne nye ideer for å inspirere og utfordre designene vi produserer.
La oss begynne et sted jeg sjelden gjør, med en grunnleggende definisjon: Illustrert: 1) For å tydeliggjøre ; 2) Forklarer ved å gi eller ved å tjene som eksempel eller eksempel; 3) Å forsyne med visuelle funksjoner som er ment å forklare eller dekorere .
Det ser ut til at i den virkelige verden av webdesign, har illustrasjonen en tendens til å utføre begge funksjonene på en gang. Det beautifies mens det klargjør. Og hvis det bare gjør en av disse, må du kanskje spørre deg selv hvorfor. Kanskje ved å sette illustrasjon på jobb som oppfyller begge roller, er måten å virkelig utnytte designelementet for alt det er verdt.
Dette er selvfølgelig ikke å si at et design ikke kan lykkes hvis det bare håndterer den ene eller den andre; sikkert det kan. Men for å få mest mulig ut av vårt arbeid finner jeg at utfordring vår tenkning alltid er nyttig. Som vanlig, la oss grave inn i noen grupperinger av prøver for å se hva som kan gjøres med denne visuelle enheten. På veien må du vurdere om hver tilnærming gir klarhet eller dekorasjon, eller begge deler.
Tematisk illustrasjon
Den første tilnærmingen til illustrasjon som jeg vil dekke her er bruken av denne stilen for å lage en samlet tematisk tilnærming. I denne situasjonen blir illustrasjoner satt på jobb for å etablere et overordnet tema. Klatrer vi fjell, besøker en romstasjon eller utforsker selskapets kontor?
Selv om denne tilnærmingen ikke trenger å ta oss til et sted, gjør det ganske ofte. I andre situasjoner etablerer stilen ganske enkelt et overordnet motiv som nettstedet følger.
Grunnen til at vi er interessert i det her, er at det blir brukt til å drive den overordnede designen på en radikal måte. Illustrasjonen er ikke noe lite støtteelement. I stedet er det det mest fremtredende designelementet og kontrollerer hele oppsettet.
Få sjefen min til North Cape
I denne prøven kunne tilgangen ikke være klarere. Utformingen av nettstedet tydeliggjør dens mest grunnleggende formål. Illustrasjonen gir en visuell referanse til hva personen vil gjøre. Og når det gjelder å definere illustrasjonen, gir kunstverket dekorasjon og skjønnhet til siden.
I dette tilfellet fastlegger temaet nettstedets formål og hjelper brukeren å kjøpe inn på konseptet.
Startpakke
En tematisk tilnærming trenger ikke å være så stum på en måte. Noen ganger kan det være en mer naturlig del av et mer typisk strukturert nettsted. I dette tilfellet er nettstedet litt unikt i utformingen, og temaet tvinge ikke noe over-topp-grensesnitt basert på rakettskip.
I stedet blir temaet vevd inn i designet slik at det kommuniserer sine dekorative detaljer uten å forstyrre innholdet. Her tjener illustrasjonen til å dekorere, men ikke avklare så mye. Dette er ikke overraskende i det hele tatt og viser selvfølgelig at det ikke er noen formel å følge.
Atelier Anonyme Design
I andre situasjoner som denne, er den tematiske illustrasjonen bokstavelig talt stedet. Det er ikke et støttende element, men blir ganske helt selve selve designet.
Her spiller bruken av illustrasjon en skikkelig rolle. Men jeg vil hevde at det også gir stor grad av klarhet til den besøkende. Dette er et nettsted for et designbyrå. Utformingen og naturen til dette nettstedet kommuniserer mye med sine besøkende. Som sådan er jeg sikker på at den tjener som et massivt filter til deres klientbase. Du vil enten bli trukket inn og elsker sin lekne og kreative tilnærming, eller du vil bli helt slått av av den. Så til dette punktet tror jeg det gir stor klarhet om byrået og deres mentalitet.
Allure grafisk design
På dette nettstedet spiller bruk av illustrasjon også en klar tematisk tilnærming. Selv om nettstedet følger noen standard layout formler, er hele designen pakket inn i et tematisk layout. Disse elementene driver ikke bare utformingen av nettstedet, men de fusjonerer med hovedlogoen og kopien som brukes på nettstedet. Temaet er nedsenkende og driver hele meldingen nettstedet presenterer.
Ytterligere tematiske prøver
Her er noen ekstra nettsteder som benytter tematiske illustrasjoner for å etablere et miljø eller tema for et nettsted.
Chipmunk
Drift Boys
Iutopi
Chandu4u
Maskoter
Hvordan kan jeg muligens dekke ideen om å bruke illustrasjoner uten å se på en av de mest åpenbare: maskotene? Med dette visuelle elementet har designerne en tendens til å personifisere nettstedet, dets produkt eller formålet med et tegn. Ikke bare gjennomføres implementeringen av et slikt element, men kraften og tankegangen bak det gjør det også bra.
inkFinder
I dette designet spiller den illustrerte maskoten en ganske klar rolle. Klar på at den ekko navnet på produktet. Det gir ikke bare noe liv for designet, men det gir et ansikt til det. På denne måten har publikum noe litt mer unikt å filme bort i hjernen. Forhåpentligvis hjelper maskoten til å gjøre en mer minneverdig og unik opplevelse som vil hjelpe produktet til å skille seg ut fra det hørte.
Kanskje det er den mektigste hensikten bak en maskot, for å hjelpe noe skille seg ut. Det flotte med en illustrert maskot som dette er at den kan være helt unik og spesifikk for dette produktet. Forutsatt at det ble skreddersydd for dette designet, bør det være det eneste stedet som denne eksakte illustrasjonen eksisterer.
The Evnt
Ironisk nok finner vi her en annen illustrert blekksprutlignende maskot (hva er en trebenshavdyr?). I dette tilfellet er maskot åpenbart et mye større skritt unna virkeligheten: en robot trebenet skapning med en hjerne i en boble.
Selv om det kan være et merkelig valg, gir det et vakkert skilleelement for arrangementet. Denne unike maskot gir et kult visuelt element for å koble til arrangementet. Det tar på seg livet helt og virkelig forbinder folk med noe konkret. Jeg antar at dette er akkurat hensikten med en maskot.
Designet på dette nettstedet er vakkert, men vurder hvor kjedelig det ville være uten denne galne maskoten på plass. Å produsere et slikt element er ikke lett, men det er ekstremt effektivt i denne situasjonen.
Big Eye Creative
For et eksempel på en ikke-blekksprutbasert maskot, ta en titt på Big Eye Creative nettstedet. Her spiller maskot ikke så mye av en overordnet rolle i designet. Det legger imidlertid mye personlighet til det. Åpenbart gir de andre illustrasjonene og overordnet stil på nettstedet en mindre formell presentasjon. Men maskot i logoen er tilstede på hele nettstedet. Dette sikrer at deres lette hjerte stil gjennomsyrer designet.
Ytterligere maskotillustrasjoner
Her er noen ekstra prøver av maskoter på jobb i design. Inkludert enda en blekksprut en; det virker som det er populært å bruke.
Pioneer Records Management
Argyle blekksprut
Coucou
Konsebt
Illustrert dekorasjon
Den neste typen bruk jeg vil vurdere er hva jeg refererer til som tematisk dekorasjon. Dette er når illustrasjonen blir satt på en dekorativ måte som ikke gir en bestemt fysisk referanse. For eksempel inneholder bildet oftest bilder av mennesker, dyr, objekter eller steder. Men i dette tilfellet illustrerer illustrasjonen ikke så mye noe som helst, men det gir ganske enkelt dekorasjon for å forskjønne designet på en måte som bare illustrasjons kan. Som alltid, la oss klargjøre dette gjennom noen eksempler.
1000 WP Temaer
For vårt første eksempel, vurder på 1000 WP Temaer nettside. På denne siden gir bruk av illustrasjon et underliggende rammeverk og stil for nettstedet. Men det gjør det i det som er mest rent dekorativt. Den generelle stilen føles som en illustrasjon, og likevel har den ikke de typiske humanistiske elementene.
Nå vil jeg helt motsette meg selv. Jeg synes stilen er overveiende dekorativ. Men jeg kan faktisk se hvordan vi kunne argumentere for at det gir et nivå av avklaring for nettstedet. Stilen designen bruker, forbinder med et bestemt publikum. Det sier noe om stilen til nettstedet, og temaene de kan produsere. På så mange måter viser kvaliteten på illustrasjonen kvaliteten på arbeidet du kan forvente å se gjennom dette nettstedet. På den måten er forklaringen kanskje mer subtil og mindre i ansiktet, men likevel tilstede.
Coca-Cola historie
På denne nettsiden finner vi en annen design drevet av illustrasjon. Det er noen illustrerte elementer her som viser virkelige ting, men det meste av tematiske tilnærmingen er etablert med ren dekorasjon. Ikke bare viser dette eksemplet tilnærmingen, men det viser også at nesten ingen teknikk blir brukt på en puristisk måte. Virkeligheten er at du vil sannsynligvis fusjonere disse elementene jeg på ulike måter.
Metaphiziks
I dette siste eksemplet for dekorativ illustrasjon finner du noen gode bakgrunnselementer. Noen av disse er mer håndgripelige enn andre, men generelt handler de mer om stilistiske støtteelementer enn noe annet. Det er bemerkelsesverdig hvor vakker slike enkle linjetegninger kan være når kombinert med vakker tekst, velvalgte farger og enkle ikoner. Sluttresultatet her er fantastisk og bemerkelsesverdig vakkert.
Flere design med illustrert dekorasjon
Her er noen ekstra prøver for å runde ut denne typen illustrasjon i design.
Moo er Cupcakes
Tech Jobs
Pixel Stadium
Egendefinerte Vesker HQ
Illustrert tekst
Hånd gjengitt tekst er absolutt ikke et nytt konsept, og er noe jeg har dekket mange ganger før . Imidlertid har jeg aldri vurdert en slik tilnærming med et illustrasjonsperspektiv.
Håndteksttekst er en populær variant av illustrert tekst, og en flott løsning for mange reklamer. For en, det er en fin måte å sette alt det praktiske kunstskoleopplæringen på jobb. For det andre er det en fin måte å produsere noe unikt på. Tross alt, hvis du gir en tekst, blir den 100% unik. Selv om du skisserer over et eksisterende skrifttype, vil det fortsatt bli en tydelig skape.
Rangus
Dette er et perfekt eksempel på illustrert type. Stilen er ekstremt nydelig, helt unik og veldig innbydende. Men det stopper ikke der. Håndlaget type viser faktisk individernes talenter. Det viser at han skaper kunstverk med hendene og det knytter perfekt til hans animasjonsferdigheter. Jeg elsker spesielt det faktum at det hele er basert på et tavla tema som det virkelig binder temaet og elementene sammen perfekt. Etter min mening viser dette nettstedet hvordan samlende illustrasjon kan være med formålet og meldingen til nettstedet.
Joey Lomanto
I dette tilfellet er den illustrerte teksten langt mer subtil. I stedet for å kjøre hele retningen av designen, spiller det bare pent sammen. Faktisk, på første gang tar du kanskje ikke en gang merke hånden gjengitt stil av den store hjemmesiden teksten. Gitt, teksten kan faktisk være en skrifttype, men den har blitt brukt på en slik måte at den smelter perfekt sammen med stilen til nettstedet. Uansett er stilen vakkert forent og illustrasjonen spiller mange roller i den overordnede designen.
Gå Live
Illustrert tekst trenger ikke å bli håndgjort selv om. Som du vil finne i dette eksemplet, er teksten stylet på ulike måter som gjør teksten til biter av den samlede illustrasjonen. Skjønnheten i denne tilnærmingen er at den forener teksten med de andre illustrasjonene. Dette unngår en mindre enhetlig følelse der du bare har illustrasjoner over standard web-basert tekst. Sistnevnte kan fungere, men i dette tilfellet er virkningen av illustrert tekst tydelig.
Ytterligere prøver av illustrert tekst
Følgende eksempler passer løst inn i denne kategorien. Jeg sier løst fordi det er vanskelig å si til tider som det noen ganger er en subtil ting. I noen av disse tilfellene føles teksten bare som et kunstverk, så jeg har lagt den inn i denne samlingen.
Kontrastopprør
Fakta
La Web Shop
Informative illustrasjoner
Ved selve definisjonen av illustrasjonen er et av formålene med å avklare og forklare. Så det er bare passende at vi finner noen eksempler der illustrasjonene gjør dette med ekstraordinær klarhet.
akademisk
La oss begynne med akademisk nettstedet. I denne uvanlige utformingen finner vi at illustrasjonene veldig tydelig symboliserer de ulike punktene i hjemmesiden layout. Hver blokk har et visuelt element som ikke bare forskjønner det, men enda viktigere, forklarer det. Så mye at jeg som en leser nesten ikke en gang trenger å lese kopien. Enhetenes kunstverk nederst til venstre viser spesielt dette.
Conferize
På en langt mindre fremtredende måte viser illustrasjonen i dette designet like informativ. Den enkle illustrasjonen viser enkelt temaet på nettstedet. Det kan ikke slå deg over hodet med sin melding, men det ekko nettstedets formål vakkert.
Aktiver
Illustrasjonen i dette designet kommuniserer ikke bare informasjon om hendelsen den representerer, men ekko også selve formålet med arrangementet. Denne spesielle hendelsen dreier seg om å koble fra teknologien. Det er en sjanse for folk som er overfylt med teknologi for å unnslippe det er clutcher.
Illustrasjonen her viser oss hvilke deltakere som skal gjøre, så det er informativt. Og av det er naturen, bryter illustrasjonen med teknologi og røtter seg selv i en ren organisk følelse, en fundamentalt flott måte å kommunisere områdets formål.
Mer informative illustrasjoner
Disse ekstra nettstedene viser også ideen om illustrasjoner som informerer oss. Noen er små og grunnleggende ikoner, mens andre er nedslående elementer som helt definerer og representerer innholdet.
Vitality City
Uklizenodoma.cz
Qubiq
En teknologisk motgift
Med det siste eksemplet (The Aktiver nettsted) vi gikk inn i hva jeg vil vurdere neste, bruk av illustrasjon for å bryte med teknologien orienterte følelsen av ting. Noen ganger er det nødvendig å koble fra nettets teknologiske underlag og demonstrere en meget organisk følelse. Illustrasjon er et av de kraftigste verktøyene for å utføre en slik ide.
Forsendelse App
Denne grei kommer snart siden er intet mindre enn ekstraordinært. Og klart hvordan det oppnår sin skjønnhet er radikalt enkelt. En enkelt stor illustrasjon distraherer oss ensbetydende med at dette er en nettside. Det føles mer som et kunstverk som skjer med et lite interaktivt element, absolutt en fin måte å gi stor innvirkning på brukere og etablere et minneverdig bilde.
Muziekpark
Selv om dette nettstedet ikke bruker ganske så radikalt en tilnærming, er illustrasjonen fortsatt stor og fremtredende i oppsettet. Her puster den animerte bildene livet inn i siden. Kombiner dette med et kreativt og uvanlig layout, og det føles helt løsrevet fra teknologien som driver den. Kanskje det faktum at det ikke ser ut som et vanlig nettsted, spiller også en sterk rolle i dette. Vurder også at illustrasjonen i dette tilfellet virkelig hjelper å informere oss om temaet på nettstedet.
Egopop
I en annen atypisk utforming finner vi at illustrasjonen er satt på jobb. Her forteller arten ikke bare om den personen som nettstedet representerer, men de bryter oss også ut av det normale nettoppsettet en besøkende måtte ha. Igjen føles det mer som et interaktivt kunstverk enn et nettsted. Hvis dette er ditt mål og behov, så er dette en god tilnærming til å vurdere.
Zaarly
Sammenlignet med de tidligere eksemplene, Zaarly stedet står i sterk kontrast. Selv om designet er styrt av en enkelt stor illustrasjon, og denne illustrasjonen tjener til å sette en tone for nettstedet, er den underliggende funksjonen langt mer kompleks enn disse andre prøvene.
Dette nettstedet er et program som skal brukes. Og illustrasjonen bidrar til å etablere et bestemt sett av forventninger. Det gir en lyshjerte, humanistisk følelse som er tydelig veldig organisk og naturlig følelse. Tenk deg dette i motsetning til semi-minimalistiske apps uten personlighet i det hele tatt. Designet gir stedet en følelse av tilnærming og skifter våre forventninger.
Konklusjon
Bruken av illustrasjon i design er en gammel praksis, og søknaden på nettet er tydelig. Som med ethvert designelement liker jeg prosessen med å revurdere dens formål og bruk. Gjennom en slik innsats finner jeg uunngåelig at jeg får en bedre underskudd av hvordan det fungerer, måter å utnytte det til et beregnet formål, og til slutt noen friske og inspirerende ideer.
Hvordan bruker du illustrasjon i webdesign? Vennligst del dine egne erfaringer under ....