Maria Grilo

Juli 22, 2021

Min läsning

Bra illustration spelar roll

Illustration är förmodligen en av de äldsta formerna av kommunikation. Konceptuellt sett är det före alfabet och text, och det ersattes aldrig. Istället blev det ett komplement till komplexiteten och längden på skriven text, vilket till och med hjälpte människor att lära sig läsa, samtidigt som det gav visuella ledtrådar och sammanhang. I olika tillstånd av kognition kommer illustrationen att tjäna olika syften, eftersom det är ett så rikt kommunikationsmedel.

Enligt Merriam-Webster-ordboken är det ”att klargöra genom att ge eller genom att tjäna som exempel eller instans”,”att tillhandahålla visuella funktioner avsedda att förklara eller dekorera”och”för att visa tydligt”. Kyrkan, till exempel, gjorde detta i många århundraden genom teckningar i böcker, målningar, skulptur och till och med arkitektur.

Att illustrera är att klargöra.

En illuminerad manuskriptsida med en stor, utsmyckad begynnelsebokstav ”B” som ramar in en sittande, krönt figur som spelar harpa och håller en öppen bok. Bakgrunden och kanterna är fyllda med intrikata medeltida flätverksmönster och latinsk skrift i svart bläck med röda inslag.

Människor fortsatte att illustrera inom flera typer av media, men mestadels tryck. Sedan dök nya medier, som film, upp och animering kom med. Så småningom nådde vi den punkt där vi är nu och illustrationen har successivt kommit tillbaka som en framträdande form av kommunikation. Det är inte bara tryck längre, inte bara tidskrifter eller utvalda typer av böcker. Det är webbplatser, det är branding, det är UI-design.

Med det sagt, kan du designa din produkt genom att bara använda typografi, navigeringselement, färger och stockfoton? Du kan definitivt, men Det är därför jag tycker att du ska gå den extra milen.

blå pil till vänster
Imaginary Cloud-logotyp

Fånga allas uppmärksamhet med illustration

Först och främst, Illustrationen är en uppmärksamhetsfångare. Och det finns flera anledningar till varför du vill ha denna uppmärksamhetsfångare. Det kan vara så att du bara introducerar din produkt för första gången till ditt mål via en målsida till exempel. Eller det kan vara så att du inom en informativ sidlayout måste rikta användarens syn någonstans specifikt.

En färgstark, texturerad vektorillustration på ett webbplatsgränssnitt. På en rosa bakgrund ligger en person med VR-glasögon i en gul stol och interagerar med ett futuristiskt gränssnitt. En annan person står bredvid och tittar på en svävande digital graf. En drönare bär en kaffemugg ovanför dem, och den stora vita texten lyder "Drone Delivery" och "Prioritise", tillsammans med en fransk platshållartext och en "Read More"-länk.
Två exempel på moderna hero-sektioner för webbsidor som visas sida vid sida. Den vänstra designen har en ren, minimalistisk layout med en fet rubrik som lyder ”Divide payments to anyone”, ett fält för e-postanmälan och en färgstark, geometrisk illustration av en hand som håller i en smartphone. Den högra designen visar en organisk, vågig layout i mörkblått, krämvitt och vitt, med rubriken ”Fruit juice is good for your health.”, abstrakta mönster och en gul ”Get in touch”-knapp.

Bilder kommer ofta att väljas som ett uppmärksamhetsfokus framför text, så det finns flera sätt du kan använda detta till din fördel, vilket leder oss till nästa punkt: Illustrationen är informativ.

blå pil till vänster
Imaginary Cloud-logotyp

Gör en poäng

En bra illustration kommer att komplettera din kopia. Det kommer att vara ett stöd för de punkter du försöker ta fram, samtidigt som du förbättrar den information som är mest relevant. Det kommer också att göra användaren mer benägen att läsa din text eftersom de vill ha en förklaring till vad illustrationen har föreslagit men inte uttryckligen berättat.

En illustration av ett webbplatsgränssnitt för en lärplattform online med namnet 'universitet'. Sidan har en rutnätslayout som visar olika kurskort, inklusive 'Content Marketing' på en turkos bakgrund med en datorillustration, 'Marketing Software' på en rosa bakgrund med en kundvagn, 'Sales Software' med kreditkortsgrafik och 'HubSpot Design' med en sköldgrafik. Varje kort innehåller en kort beskrivning och en 'Buy for $15'-knapp.

Förutom detta kommer illustrationen att lyckas kommunicera saker som knappast är omfattande genom kopiering, till exempel känslor och stämningar. Alla tröttnar på kopian som försöker vädja till dina känslor samtidigt som du informerar dig om vad de gör, genom en lista med vaga adjektiv följt av slagord och uppmaningar till handling.

Säg inte (bara) det, visa det. Visa dessa känslor och stämningar genom bilder, former och färger.

Tre introduktionsskärmar för en fitnessapp mot en rosa och lila abstrakt bakgrund. Varje gult och vitt kort visar en platt vektorillustration av en kvinna i rosa topp och lila leggings som utför en utomhusaktivitet. Det första kortet visar henne gå med en golden retriever-hund, med rubriken "A new start. Everyday.". Det andra kortet visar henne springa, med rubriken "Activity tracker.". Det tredje kortet visar henne cykla på en röd cykel, med rubriken "Keep moving.". Varje kort innehåller en kort beskrivande text och en "NEXT"-knapp längst ner till höger.
blå pil till vänster
Imaginary Cloud-logotyp

Spela allt tillsammans

Låt din typografi och färger verkligen lysa genom bilder som bär tittaren till en annan plats, ett annat tankesätt, ett lyckligt utrymme där deras problem löses av din produkt.

En illustration på en landningssida för "FRIEND.finder". Till vänster står det med mörkblå text: "Share your smile with the world and find friends", ovanför en mindre text och en "Get started"-knapp. Till höger cyklar en man med blont hår på en ljusblå cykel och ser tillbaka på en kvinna med mörkt hår som går med en liten svart hund i koppel. Bakgrunden är vit med minimalistiska, färgglada abstrakta former och gröna växter.

Din Times New Roman kommer inte bara att vara ett enkelt serif-teckensnitt längre, det kommer att vara en del av något större som kan bära allvaret och tillförlitligheten hos en tidningsserif, samtidigt som du förmedlar alla idéer och identitet för din produkt.

En jämförelse sida vid sida av två webbsidesdesigners med framträdande typografi och illustrationer. Till vänster visar ett Adobe-blogginlägg med titeln "Introducing Spectrum: How Adobe Is Building a Design System at Scale" en ren serif-text ovanför en minimalistisk vektorillustration av blå och grå figurer som bygger digitala gränssnitt. Till höger visar Everwills startsida texten "Attorney-Crafted Wills & Trusts from the Comfort of Your Home" i ett mörkt serif-teckensnitt, mot en varm, texturerad illustration av en samlad familj över flera generationer.

Färger kommer att få ytterligare vikt och mening, och kommer inte att vara bara abstrakta och vaga längre. De kommer att tjäna ett syfte i ett scenario där användaren är nöjd.

blå pil till vänster
Imaginary Cloud-logotyp

Berätta en historia

Bra illustrationsarbete kommer att vägleda din tittare genom en berättelse, tankeprocess eller till och med handledning till exempel, samtidigt som sidan andas för att inte översvämma din användare med information.

Dessa illustrationer kan också representera själva produkten. Om du känner att en tryckskärm av din produkt kan innehålla för mycket information för en målsida, till exempel, var inte rädd för att visa en minimalistisk representation som förmedlar vad produkten gör. Det kommer säkert att undvika att överväldiga din användare.

En platt vektorillustration av tre personer som samarbetar för att bygga eller anpassa ett webbplatsgränssnitt. En person står på en stege och använder en roller på ett stort webbläsarfönster som visar kodrader, en annan står på ett enormt dokument med en roller, och en tredje lägger till en bock i en sidomeny. Scenen använder en livfull färgpalett i blått, lila, rosa och orange med stiliserade träd och berg i bakgrunden.

Detta är en teknik som effektivt kan användas för steg-för-steg-tutorials och on-boardings, till exempel. Fokusera på den funktion du vill presentera för din användare. Eller på vägen att funktionen kommer att användas i ett verkligt sammanhang - med andra ord att visa användaren interagerar med produkten. Du kan till och med gå så långt som att använda animation.

HTTPS://DRIBBBLE.COM/SHOTS/2851448-NOOKLYN-ONBOARDING

Visst, du kan bara ha en vanlig lastare med en snurrande animation, men vad sägs om att använda den tiden för att förmedla ett meddelande? Det kan vara ett tips om hur man använder vissa funktioner som ”Visste du att...?”, eller bara en underhållande animation som inte kommer att tråka ut livet av din användare. Det kan vara skapandet eller avbrottet av vissa interaktioner inom din produkt, eftersom människor inte tycker om att vänta.

En iPhone som visar gränssnittet för en mobilapp med en tom statusskärm. Skärmen visar en illustration av en kvinna som håller upp en blå sko under en "Quick sale"-knapp. Under illustrationen står texten "Add your first product" och "Tap the + icon to add a product to your inventory."
blå pil till vänster
Imaginary Cloud-logotyp

Sluta bara använda stockfoton

Naturligtvis kommer inget av detta att bli billigt, eftersom bra illustration tar lite tid. Ett alternativ inom en illustrativ lösning skulle vara att använda lagermaterial, men det är där du kommer att missa specificitet och identitet. Dina illustrationer ska vara en spegel av dina principer och estetiska värden.

Ett annat alternativ skulle vara att använda målningar när man använder stockfotografering, med den extra fördelen att du grafiskt kan röra med dem och komma med några intressanta bilder som förstärker vad ditt varumärke handlar om. Det finns gott om bibliotek med fria målningar, från renässansen till modern konst.

Tre paneler med samtida digital konst som blandar klassiska skulpturer med modern grafik. Den vänstra visar ett stenansikte med lila glitch-linjer; den mellersta visar ett mörkt porträtt med ett färgstarkt flytande marmor-overlay; den högra visar en kvinnlig staty uppdelad av horisontella ränder med blommönster.

Man kan säga att detta inte är illustrationsarbete, men jag skulle betrakta denna lösning som en blandning av fotografi med användning av konst för att förmedla idéer och stämningar. Det är möjligt att det inte kommer att vara lika specifikt när det gäller beskrivningen av dina tjänster eller funktioner, men det kan vara ett nytt alternativ.

En skärmdump av en webbläsare på en dator som visar landningssidan för webbplatsen "The Fine Wine Embassy". Bakgrunden består av ett klassiskt, detaljerat stilleben i barockstil som skildrar en överdadig festmåltid med ett rådjur, en hummer på en tallrik, en påfågel, olika frukter som vindruvor och äpplen samt annat vilt. En stor, stiliserad vit serif-typografi i mitten lyder "the fine wine embassy", med språkalternativ för tyska, engelska och serbiska listade därunder.

Ett alternativ till samma gamla stockfoton av bärbara datorer och smartphones ovanpå designey-träbord som i stort sett inget vanligt folk har råd med. Det är inte trovärdigt längre, det är överdrivet.

För att inte säga att illustration är något nytt, men det finns definitivt mycket mer utrymme att utforska olika uttrycksfulla och informativa möjligheter, samtidigt som du förstärker ditt varumärkes identitet.

Hittade den här artikeln användbar? Du kanske gillar dessa också!

blå pil till vänster
Imaginary Cloud-logotyp
blå pil till vänster
Imaginary Cloud-logotyp
blå pil till vänster
Imaginary Cloud-logotyp
blå pil till vänster
Imaginary Cloud-logotyp
blå pil till vänster
Imaginary Cloud-logotyp
Maria Grilo
Maria Grilo

Jag är UI & produktdesigner, illustrationskonstnär och målare. Känd för min kärlek till skräpiga strandhanddukar, musikproduktion, typografi och alla typer av pizza.

Läs fler inlägg av denna författare

People who read this post, also found these interesting:

Dropdown caret icon