Klar att ta en designrisk? Prova att blanda bilder och illustrationer i samma designprojekt. Ett handritat element kan lägga whimsy och intresse för en design som inkluderar fotografering. Omvänt kan ett foto göra en mer ljushjärtad illustrerad design verkar mer verklig eller viktig.
Denna teknik kan vara lite svår att föreställa sig tills du ser några exempel på hur det kan fungera vackert. Idag tittar vi på den här trenden och ger tips och exempel för att hjälpa dig att utveckla kreativa sätt att ta fram en egen design.
1. Använd Illustrations som UI-accenter
Du kan inkludera illustrerade element i designen hela tiden och tycker inte ens riktigt om det. Många användargränssnitt är ofta illustrerade på något sätt. De är inte nödvändigtvis i den handritade stilen men har en mindre taktil och mer? Webknapp? se.
Kick det upp ett hak om du vill prova en handdragen effekt. Eller överväg att använda en skiss som ett accent-märke.
WittyCookie, ovan, använder en blandning av illustrationer och en hjälteformad video för att få användarna i designen. Hemsidan (inte visad) har en illustration. Vad är snällt är det här här. Handdragna element? Hänga? från videon. Resultatet gör att webbplatsen känns mindre som en försäljningsnivå för att arbeta med byrån och mer som att du skulle ha kul tillsammans.
Konceptet är intressant och inte överväldigande. Och den bästa delen? Det är ett roligt sätt att skapa visuellt intresse när du inte har en bra katalog med bilder eller video att arbeta med.
2. Illustrera först
Om en illustration är din första instinkt när det gäller ett projekt, rita först den här konturen. Skissa ut de illustrerade delarna och se var designen går innan du lägger till bild eller videoelement.
Det är den väg som tagits av den fåtalade konferensen, ovan. De komplicerade illustrationerna i hela designen är imponerande och inkluderar en detaljnivå som någon formgivare kan uppskatta. Strax under hjälten är bilden en loop-video med scener från konferensen. Vad det här lilla, men verkliga elementet visar, visar att det här är en levande händelse. Koppla det med den fantastiska bilden och du vill bara registrera dig för att se vad det handlar om. Konferensens atmosfär ser roligt och höft ut tack vare illustrationsvideo.
Det finns en annan rutt när man tänker på att börja med en illustration också. Rita en fantastisk bakgrundsbild för designen. Det här är ett roligt sätt att få exakt vad du vill ha i en bakgrund utan att skämma bort premade bilder.
En glad Camper ovanför gör detta på ett intressant sätt med en blandning av illustrerade bakgrundspaneler, vanliga vita bakgrunder och till och med svartvita fotobakgrunder. Förändringarna i bakgrunden signalerar effektivt en innehållsändring och ny information för användare som utforskar detta barns läger.
3. Använd illustrationer som typografi
När du inte har mycket bra bilder att arbeta med, mixa i illustrationer på samma sätt som du kan spela med typografi. Även om konceptet låter udda, tänk på det i en minut: En snygg illustration kan lägga tonvikt på en video eller ett foto. Det kan markera vad du vill att användarna ska veta.
Achrival ovan gör detta på ett intressant sätt. Den illustrerade dansen? A fungerar som agenturets logotyp och uppmärksammar den korta videoslingan. Utan det kan du bara passera bilderna utan att stoppa. Men det är bara tillräckligt för att dra dig in på mycket samma sätt som en kraftfull rubrik skulle.
4. Tänk på illustrerade animationer
Oavsett om illustrationer är hand- eller datordragen, ger de en bra möjlighet att införliva enkel animering. Från navigationsverktyg till roliga divots som engagerar användare kan en animerad illustration vara informativ, oväntad och rolig.
Vill inte gå överbord med animeringar. Håll dem enkla och målmedvetna. Varje animation ska ha ett mål för användaren - en länk, en riktlinje eller en överraskning som håller dem intresserade.
Du kanske inte förväntar dig denna behandling från en finansiell planeringsgrupp, men Taylor Made, ovan, använder en mix av illustrerad animering och fotografering vackert. De illustrerade delarna av bilderna som gjorts med finansiell planering verkar vara lite mindre skrämmande och hjälper användarna att styra genom klickvägar.
Illustrationerna fyller också i färg där webbplatsen inte klarar av andra bilder och slutresultatet är en sammanhängande design som är rolig, engagerande och lätt att använda.
5. Berätta en historia
När det gäller att blanda verkliga och illustrerade bilder, berättar de bästa kombinationerna en historia. Den visuella matchningen stämmer överens med innehållet och känns som en del av varumärkets identitet.
Att använda denna teknik kan fungera för engångsapplikationer, men integreras ofta med en mer komplett varumärkesstrategi. Titta på Cone Flower Creamery, ovan. Logotypen illustreras. Webbdesignen använder en mest illustrerad historia för att ställa in rätt humör och uppmuntra användare att fortsätta lära sig om varumärket. Och precis när du vill se mer, finns det en bild att fylla i ämnena. Designen är otroligt enkel och fokuserar på historien själv, inte de tekniker som används för att skapa den.
På andra sidan av spektret är Kuoz, en portföljplats, med en blandning av bilder och illustrationer. På samma sätt hjälper blandningen en berättelse om vem och vad Kuoz är när man visar projekt. Titta noggrant på grupperna för inblick i varför denna design fungerar utan att känna sig överväldigande eller rörig. Bilder och illustrationer är kopplade till liknande färgscheman så att varje placering känns avsiktlig och harmonisk.
Det är verkligen nyckeln till att blanda bilder och illustrationer: De måste se avsiktligt. De måste visas i harmoni. De borde aldrig se ut som en massa element som fastnat på en sida.
Slutsats
Är du modig nog att ta på sig denna design trend? Medan tekniken kan se fantastisk ut, är den skrämmande och kan vara svår att sälja till en klient.
Ta med några exempel på arbete som använder effekterna bra för att hjälpa andra att visa vad du kan göra. Skissa några av illustrationerna i förväg för att hjälpa till att vidareutveckla konceptet. Och kom ihåg att berätta en historia som engagerar användaren!