Illustrera webben: Dekonstruera trenden
Illustrationer tar över webben. Designers skapar webbplatser med allt från helskärmsillustrationer till handritade divots som används i hela projektet. Det är en trend som sannolikt fortsätter att växa eftersom illustrationer gör att designen känns anpassad (även om den inte är).
Så här får du ut det mesta i din design.
Webbplats illustration 101
Illustrationer är ett mångsidigt och roligt sätt att skapa en anpassad webbdesign. Från handritade bilder, till element, till bokstäver, allt om en helt illustrerad eller skisserad bild, ser och känns som en av ett slag. Det är en av anledningarna till att den är så populär.
Men det finns många andra orsaker som hänger på grafikutvecklingen:
- Illustrationer gör att användarna kan bilda sig i den scen du ställer in eftersom det inte fokuserar på faktiska andra människor.
- Det finns ett element av whimsy som bara kan åstadkommas med en ritning.
- Illustrationer kan mäta verklighet och fantasi för en design som är extraordinär.
- Anpassning är lätt när du ritar konstelementen.
- Illustrationer är ofta ganska färgglada och kan hjälpa dig att dra nytta av den stora, ljusa färgtrenden.
- Tekniken är användbar även om du inte är en illustratör tack vare designpaket eller förpackningar som är fulla av illustrerade delar som kan användas under ett projekt.
- Illustrationer kan ta på sig många olika humör eller stilar, från skisser till utarbetande ritningar till datorgenererad grafik.
Hero-stil illustrationer
Eftersom hjältehuvud är stora är det här ett av de enklaste ställena att se illustrationtendensen. Den används också för ett stort antal webbplatser från portföljer till detaljhandeln för appförhandsvisningar.
Vad som är trevligt med en illustrerad hjältebild är att det finns tillräckligt med utrymme för ett ganska komplicerat konstverk. Små detaljer, skuggning och färg och interaktioner har alla utrymmen att andas, vilket gör det enklare för användarna att utforska varje element.
Det finns några knep till allt detta komplex som illustrerar:
- Konstverket måste vara bra. Användare kommer inte att spendera tid när man tittar på en illustration som de inte får eller är bara en slarvig röra. Så ta tid och ta hand om det.
- Medan illustrationen kan ha djup av komplexitet, bör det övergripande meddelandet vara enkelt. Vet vad bilden ska säga och se till att elementen bidrar till meddelandet.
- Arbeta med en professionell. Bara för att du kan rita hjärtan på en servett betyder inte att du är redo att rita en fullskalig webbplatsillustration. Denna process tar tid och planerar att verkligen fungera. (Och det kan vara dyrt, så se till att det här är rätt estetik innan du dyker in.)
Lägg till enkel animering
Medan en statisk ritning kan ha mycket inverkan på egen hand, lever webben med rörelse dessa dagar. Koppla en illustration med subtila animeringar eller bläddraffekter för att uppmuntra användare att klicka runt.
Små subtila rörelser, till exempel den spinnande texten på webbplatsen för Hugo , hjälper till att dra in ögat i designen. Små animeringar kan också hjälpa användarna att förstå vilka åtgärder som ska utföras när de besöker en webbplats. Detta kan särskilt gälla för illustrationer som innehåller många element eller har en övergripande "upptagen" design.
Dessa små överraskningar kan uppmuntra besökare att ligga och titta runt också. Höft animeringar är en särskilt trevlig bonus för användare som kan tjäna både som ett roligt element och navigationsverktyg.
Illustrerade ikoner eller UI-element
Om en all-out illustrerad webbdesign är inte din sak, överväga några illustrerade ikoner eller användargränssnitt. Detta är ett enkelt sätt att lätta in i trenden. (Och det finns gott om ikon och UI-kit där ute som har illustrerade stilar för att hjälpa dig att komma igång.)
Illustrerade element kan ge en touch av whimsy till en webbplats som annars annars kan känna sig för formell. Något att försöka är en illustrerad konturikon. Denna stil är lätt att släppa i nästan vilken design som helst, fungerar bra med bilder och färgscheman och ger ett konsekvent visuellt tema från sida till sida.
Om du vill gå ett steg bortom ikoner, tänk på överdrivna användargränssnitt. Iqor , använder illustrerade knappar i större storlekar för att styra användarna och göra webbplatsen lite roligare. Den illustrerade stilen strömmar från sida till sida med stora element med samma tre färger. Resultatet är roligt och konsekvent och bara lite oväntat från kundvårdsverksamheten.
Handtecknad bokstäver
En annan stor trend i webbdesign är anpassad typografi. Kombinera begreppen illustration och bokstäver för en handritad logotyp, huvudtextblock eller typografiskt konstelement. Denna textbaserade visuella kan ha stor inverkan (speciellt när den är överdimensionerad eller används som huvudelement i designen).
Tricket här är måttlig. Med den handtecknade bokstäverna, vill du hålla fast vid ett enda text- eller textelement för denna effekt. Flera användningar av ett anpassat textblock kan vara överväldigande för användare och kan påverka läsbarheten. Det är viktigt att se till att orden fortfarande är ganska tydliga och att användarna inte har problem med att förstå meddelandet.
Både Dag för de döda och Stå upp till cancer , gör ett bra jobb med handbokstäver för ett enkelt meddelande. Day of the Dead använder andra illustrationer, lätt sans serif typografi och foton för att hjälpa användare att dra igenom resten av webbplatsen. Slutresultatet är roligt och lätt att följa. Stå upp till cancer använder mer av en akvarellstil som är all illustrationbaserad, men bygger på mer vanliga typsnitt för läsbarhet. Båda är bra alternativ för att arbeta med anpassad bokstäver.
Slutsats
Medan man bryter sig in i en värld av illustration för webbdesign kan projekt verkar lite skrämmande först, det är något som många designers kan göra. Från att dra hand för att ha datorhjälp eller arbeta med ett kit är alternativen ganska obegränsade.
Det är något att tänka på när det gäller de projekt som kräver att man gör något lite annorlunda. Och det är trendigt nog att du kanske blir frågad om att skapa något i den här stilen. Så det här är en bra tid att fräscha upp dina skissförmåga och tänka på hur en illustrerad webbdesignram kunde fungera för dig.