Användningen av illustration i webbdesign
Illustrationen är ett otroligt mångsidigt verktyg som kan hitta många olika användningsområden i design. Och när det gäller webbdesign kan vi hitta ett extremt brett utbud av implementeringar.
Idag vill jag gräva på några viktiga sätt att detta verktyg har blivit på plats så att vi kan dra nya idéer för att inspirera och utmana de mönster vi producerar.
Låt oss börja någonstans jag gör sällan med en grundläggande definition: Illustrerad: 1) För att klargöra ; 2) Att klargöra genom att ge eller genom att tjäna som exempel eller exempel; 3) Att tillhandahålla visuella funktioner avsedda att förklara eller dekorera .
Det verkar som om i den verkliga världen av webbdesign tenderar illustration att utföra båda funktionerna på en gång. Det förskönar sig när det klargörs. Och om det bara gör en av dessa kanske du behöver fråga dig varför. Kanske genom att lägga till illustration på jobbet som uppfyller båda rollerna är sättet att verkligen utnyttja designelementet för alla är det värt.
Detta är naturligtvis inte att säga att en design inte kan lyckas om den bara hanterar den ena eller den andra. säkert det kan. Men för att få ut det mesta ut av vårt arbete tycker jag att utmanande vårt tänkande alltid är till hjälp. Som vanligt låt oss gräva i några grupperingar av prover för att se vad som kan göras med den här visuella enheten. Längs vägen, överväga om varje tillvägagångssätt ger klarhet eller dekoration, eller båda.
Tematisk illustration
Den första tillvägagångssättet till illustration som jag vill täcka här är användningen av denna stil för att skapa en övergripande tematisk inriktning. I det här läget görs illustrationer till arbete för att skapa ett övergripande tema. Klättrar vi på berg, besöker en rymdstation eller utforskar ett företags kontor?
Även om detta tillvägagångssätt inte behöver ta oss till en plats, gör det ganska ofta. I andra situationer skapar stilen helt enkelt ett övergripande motiv som webbplatsen följer.
Anledningen till att vi är intresserade av det här är dock att den används för att driva den övergripande designen på ett radikalt sätt. Illustrationen är inte något litet stödjande element. I stället är det det mest framträdande designelementet och kontrollerar hela layouten.
Hämta min chef till North Cape
I detta prov kunde inte tillvägagångssättet vara tydligare. Utformningen av webbplatsen återspeglar tydligt sitt mest grundläggande syfte. Illustrationen ger en visuell hänvisning till vad individen ska göra. Och när det gäller att definiera illustrationen, ger konstverket dekoration och skönhet till sidan.
I det här fallet fastställs temat bestämt webbplatsens syfte och hjälper användaren att köpa in på konceptet.
Startpaketet
Ett tematiskt tillvägagångssätt behöver inte vara så trubbigt på ett sätt. Ibland kan det vara en mer naturlig del av en mer typiskt strukturerad webbplats. I det här fallet är webbplatsen något unik i sin layout, och temat tvingar inte något överstegsgränssnitt baserat på raketfartyg.
Istället väves temat i designen så att det kommunicerar sina dekorativa detaljer utan att störa innehållet. Här tjänar illustrationen att dekorera, men inte förtydliga så mycket. Det här är inte överraskande alls och visar naturligtvis att det inte finns någon formel att följa.
Atelier Anonyme Design
I andra situationer som den här är den tematiska bilden bokstavligen webbplatsen. Det är inte ett bärande element, utan blir helt helt enkelt själva utformningen.
Här spelar användningen av illustration en tydlig inredningsroll. Men jag skulle argumentera för att det också ger en stor klarhet åt besökaren. Detta är en webbplats för en designbyrå. Designen och naturen på denna sida kommunicerar mycket med besökarna. Som sådan är jag säker på att den fungerar som ett massivt filter till sin kundbas. Du kommer antingen att dras in och älska deras lekfulla och kreativa tillvägagångssätt, eller du kommer att bli helt avstängd av den. Så här tror jag att det ger en hel del tydlighet om byrån och deras mentalitet.
Allure Graphic Design
På denna sida spelar användningen av illustration också ett tydligt tematiskt tillvägagångssätt. Trots att webbplatsen följer några vanliga layoutformler, är hela designen insvept i en tematisk layout. Dessa element drivs inte bara utformningen av webbplatsen, men de slår samman med huvudlogotypen och kopian som används på webbplatsen. Temat är nedsänkt och driver hela meddelandet som webbplatsen presenterar.
Ytterligare tematiska prover
Här är några ytterligare webbplatser som använder tematiska illustrationer för att skapa en miljö eller ett tema för en webbplats.
Chipmunk
Drift Boys
Iutopi
Chandu4u
Mascots
Hur skulle jag kunna täcka idén om att använda illustrationer utan att granska en av de mest uppenbara: maskoterna? Med detta visuella element tenderar designarna att personifiera webbplatsen, dess produkt eller syftet med en karaktär. Inte bara påverkar genomförandet av ett sådant element, men makt och resonemang bakom det gör det också bra.
inkFinder
I denna design spelar den illustrerade maskoten en ganska tydlig roll. Tydlig genom att det echos namnet på produkten. Det ger inte bara något liv för designen, men det ger ett ansikte mot det. På så sätt har publiken något lite mer unikt att lämna i sin hjärna. Förhoppningsvis hjälper maskoten att göra en mer minnesvärd och unik upplevelse som hjälper produkten att sticka ut från det hörda.
Kanske är det det mest kraftfulla syftet bakom en maskot, för att hjälpa någonting stå ut. Det fantastiska med en illustrerad maskot så här är att den kan vara helt unik och specifik för den här produkten. Förutsatt att det var skräddarsydd för denna design, borde det vara det enda stället den här exakta illustrationen existerar.
Evnt
Ironiskt nog finner vi här en annan illustrerad bläckfiskliknande maskot (vad är en trebens havslevelse?). I det här fallet är maskoten uppenbarligen ett mycket större steg bort från verkligheten: en roboten trebenig varelse med en hjärna i en bubbla.
Medan det kan vara ett udda val, ger det ett vackert utmärkande element för evenemanget. Denna unika maskot ger ett coolt visuellt element för att ansluta till evenemanget. Det tar livet av sig själv och förbinder verkligen människor med något konkreta. Jag antar att det här är precis som en maskot.
Den här webbplatsens design är vacker, men överväga hur tråkig det skulle vara utan den här galna maskoten på plats. Att producera ett sådant element är inte lätt, men det är extremt effektivt i denna situation.
Big Eye Creative
För ett exempel på en icke-bläckfiskbaserad maskot ta en titt på Big Eye Creative webbplats. Här spelar maskot inte lika mycket av en övervägande roll i designen. Det lägger emellertid mycket personlighet till det. Självklart gör de andra illustrationerna och övergripande stilen på webbplatsen en mindre formell presentation. Men maskoten i logotypen är närvarande på hela webbplatsen. Detta säkerställer att deras ljusartade stil genomtränger designen.
Ytterligare maskotillustrationer
Här är några extra prov av maskotar på jobbet i design. Inklusive ännu en bläckfisk en; det verkar som det är en populär att använda.
Pioneer Records Management
Argyle Octopus
Coucou
Konsebt
Illustrerad dekoration
Nästa typ av användning som jag skulle vilja överväga är vad jag hänvisar till som tematisk dekoration. Det här är när illustrationen sätts på ett dekorativt sätt som inte ger en specifik fysisk referens. Till exempel innehåller illustrationen oftast bilder av människor, djur, föremål eller platser. Men i så fall representerar illustrationen inte så mycket någonting riktigt, utan det ger bara dekoration för att försköna designen på ett sätt som bara kan illustrera. Som alltid, låt oss klargöra detta genom några prover.
1000 WP teman
För vårt första exempel, överväga 1000 WP teman hemsida. På denna sida ger användningen av illustration en underliggande ram och stil för webbplatsen. Men det gör det i det som är mest rent dekorativt. Den övergripande stilen känns som en illustration, och ändå har den inte de typiska humanistiska elementen.
Nu vill jag helt motsäga mig själv. Jag tycker att stilen är övervägande dekorativ. Men jag kan faktiskt se hur vi kan argumentera för att det ger en grad av förtydligande för webbplatsen. Den stil som designen använder förbinder sig med en viss publik. Det står något om stilen på webbplatsen och de teman som de kan producera. På så många sätt visar kvaliteten på den illustrerade layouten kvaliteten på arbetet du kan förvänta dig att se igenom den här webbplatsen. På så sätt är förtydligandet kanske mer subtilt och mindre i ditt ansikte, men ändå närvarande.
Coca-Cola History
På den här webbplatsen hittar vi en annan design som drivs av illustrationen. Det finns några illustrerade element här som visar verkliga saker, men det mesta av tematiska tillvägagångssättet är etablerat med ren dekoration. Inte bara visar det här exemplet, men det visar också att nästan ingen teknik används på ett puristiskt sätt. Verkligheten är att du sannolikt kommer att sammanfoga dessa element på olika sätt.
Metaphiziks
I det här sista exemplet för dekorativ illustration hittar du några utmärkta bakgrundsdelar. Några av dessa är mer konkreta än andra, men totalt sett handlar det mer om stilistiska stödelement än vad som helst annat. Det är anmärkningsvärt hur vackert sådana enkla linjeteckningar kan vara i kombination med vacker text, välvalda färger och enkla ikoner. Slutresultatet här är fantastiskt och anmärkningsvärt vackert.
Fler mönster med illustrerad dekoration
Här är några ytterligare prover för att runda ut denna typ av illustration i design.
Moo Cupcakes
Tech Jobs
Pixel Stadium
Anpassade väskor HQ
Illustrerad text
Handgjord text är absolut inte ett nytt koncept, och är något jag har täckt många gånger tidigare . Jag har emellertid aldrig ansett ett sådant synsätt med ett illustrationperspektiv.
Hand renderingstext är en populär variation av illustrerad text, och en bra lösning för många kreativa. För ett är det ett bra sätt att lägga allt på den praktiska konstskolan till jobbet. För det andra är det ett bra sätt att producera något unikt. När allt kommer omkring, om du ger en del text blir det 100% unikt. Även om du skissar över ett existerande typsnitt blir det fortfarande en distinkt skapelse.
Rangus
Detta är ett perfekt exempel på illustrerad typ. Stilen är extremt vacker, helt unik och mycket inbjudande. Men det slutar inte där. Den handgjorda typen visar faktiskt individerna talanger. Det visar att han skapar konstverk med sina händer och det knyter perfekt till hans animationsförmåga. Jag älskar särskilt det faktum att det hela är baserat på ett tavlan tema eftersom det verkligen knyter temat och element tillsammans perfekt. Enligt min uppfattning demonstrerar den här webbplatsen hur förenande illustration kan vara med webbplatsens syfte och meddelande.
Joey Lomanto
I det här fallet är den illustrerade texten mycket mer subtil. I stället för att köra hela designens riktning spelar det helt enkelt bra ut. Faktum är att du först inte ens märker den handgjorda stilen på den stora hemsidan texten. Beviljas, texten kan faktiskt vara ett teckensnitt, men det har använts på ett sådant sätt att det smälter perfekt med stilen på webbplatsen. Oavsett, stilen är vackert förenad och illustrationen spelar många roller i den övergripande designen.
Gå och lev
Illustrerad text behöver dock inte lämnas i handen. Som du hittar i det här exemplet är texten utformad på olika sätt som gör själva texten till bitar av den övergripande illustrationen. Skönheten i detta tillvägagångssätt är att det förenar texten med de andra illustrationerna. Detta undviker en mindre enhetlig känsla där du helt enkelt har illustrationer över standard webbaserad text. Det senare kan fungera, men i detta fall är effekterna av illustrerad text tydlig.
Ytterligare exempel på illustrerad text
Följande exempel passar löst i denna kategori. Jag säger löst eftersom det är svårt att säga ibland, eftersom det ibland är en subtil sak. I några av dessa fall känns texten bara som ett konstverk, så jag har lagt den i denna samling.
Kontrastuppror
Fakta
La Web Shop
Informativa illustrationer
I själva definitionen av illustrationen är ett av syftena att klargöra och förklara. Så det är bara passande att vi hittar några exempel där illustrationerna gör det med extraordinär klarhet.
Bokälskande
Låt oss börja med Bokälskande webbplats. I den ovanliga layouten finner vi att illustrationerna tydligt symboliserar de olika punkterna i hemsidans layout. Varje block har ett visuellt element som inte bara förskönar det, men viktigare, förklarar det. Så mycket så att jag som läsare nästan inte ens behöver läsa kopian. Apparatens konstverk längst ner till vänster visar särskilt detta.
Conferize
På ett mycket mindre framträdande sätt visar illustrationen i denna design lika informativ. Den enkla illustrationen visar enbart handledets ämne. Det kan inte slå dig över huvudet med sitt budskap, men det echoes webbplatsens syfte vackert.
Aktivera
Illustrationen i denna design kommunicerar inte bara information om händelsen den representerar, men också ekos själva händelsens syfte. Denna speciella händelse handlar om att koppla bort från teknik. Det är en chans för människor att översvämma med tekniken för att undkomma sina kopplingar.
Illustrationen här visar oss vilka deltagare som ska göra, så det är informativt. Och med sin natur bryter illustrationen med teknik och rötter sig i en rent organisk känsla, ett grundläggande bra sätt att kommunicera platsens syfte.
Mer informativa illustrationer
Dessa extra webbplatser visar också idén om illustrationer som informerar oss. Vissa är små och grundläggande ikoner, medan andra är immersiva element som helt definierar och representerar innehållet.
Vitality City
Uklizenodoma.cz
Qubiq
En teknologisk motgift
Med det sista exemplet (The Aktivera site) vi gick in i vad jag vill överväga nästa, användningen av illustrationen att bryta med den tekniskt orienterade känslan av saker. Ibland är det nödvändigt att koppla bort från webens tekniska underlag och visa en mycket organisk känsla. Illustrationen är ett av de mest kraftfulla verktygen för att uppnå en sådan idé.
Leverans App
Denna rakt framåt snart sida är inget annat än extraordinärt. Och klart hur det uppnår sin skönhet är radikalt enkelt. En enda stor illustration avviker oss enbart från det faktum att detta är en webbsida. Det känns mer som ett konstverk som råkar ha ett litet interaktivt element, säkert ett bra sätt att göra en stor inverkan på användarna och skapa en minnesvärd bild.
Muziekpark
Medan den här webbplatsen inte utnyttjar helt lika radikalt ett tillvägagångssätt, är illustrationen fortfarande stor och framträdande i layouten. Här adderar den animerade bildspråk livet in i sidan. Kombinera detta med en kreativ och ovanlig layout och det känns helt lös från den teknik som driver den. Kanske är det faktum att det inte ser ut som en vanlig webbplats en stark roll i detta också. Tänk också att illustrationen i det här fallet verkligen hjälper till att informera oss om temat för webbplatsen.
Egopop
I ännu en atypisk layout finner vi att illustrationen har blivit på plats. Här berättar inte bara arten om den person som webbplatsen representerar, men de bryter oss också bort från det normala nätet som en besökare kan ha. Återigen känns det mer som ett interaktivt konstverk än en webbplats. Om detta är ditt mål och behov, är det här ett bra sätt att överväga.
Zaarly
Jämfört med tidigare exempel, Zaarly plats står i stark kontrast. Även om designen styrs av en enda stor illustration, och den här illustrationen tjänar till att ställa in en ton för webbplatsen är den underliggande funktionen väldigt komplexare än dessa andra prover.
Den här webbplatsen är en applikation som är avsedd att användas. Och illustrationen hjälper till att skapa en viss uppsättning förväntningar. Det ger en ljushjärtad humanistisk känsla som tydligen är mycket organisk och naturlig känsla. Föreställ dig detta i motsats till semi-minimalistiska appar med ingen personlighet alls. Designen ger platsen en känsla av tillförlitlighet och förändrar våra förväntningar.
Slutsats
Användningen av illustrationer i design är en gammal övning, och dess tillämpning på webben är tydlig. Precis som med något designelement tycker jag om att ompröva dess syfte och användning. Genom en sådan ansträngning finner jag oundvikligen att jag får en bättre underskattning av hur det fungerar, sätt att utnyttja det för ett avsiktligt syfte och i sista hand några fräscha och inspirerande idéer.
Hur använder du illustration i webbdesign? Vänligen dela dina egna erfarenheter nedan ....