Het web illustreren: de trend deconstrueren
Illustraties nemen het web over. Ontwerpers maken websites met van illustraties op volledig scherm tot handgetekende divots die in projecten worden gebruikt. Het is een trend die waarschijnlijk blijft groeien omdat illustraties een ontwerp op maat laten lijken (zelfs als dat niet het geval is).
Hier leest u hoe u het beste kunt gebruiken in uw ontwerp.
Website illustratie 101
Illustraties zijn een veelzijdige en leuke manier om een aangepast websiteontwerp te maken. Van handgetekende afbeeldingen, tot elementen, tot belettering, alles over een volledig geïllustreerd of geschetst beeld, ziet er uit en voelt als uniek. Dat is een van de redenen waarom het zo populair is.
Maar er zijn nog veel andere redenen waarom ontwerpers op de illustratietrend springen:
- Met illustraties kunnen gebruikers zichzelf inbeelden in de scène die u aan het instellen bent, omdat het zich niet op echte mensen richt.
- Er is een element van eigenzinnigheid dat alleen met een tekening kan worden bereikt.
- Illustraties kunnen de werkelijkheid en de verbeeldingskracht in een buitengewoon ontwerp brengen.
- Maatwerk is eenvoudig wanneer u de kunstelementen tekent.
- Illustraties zijn vaak vrij kleurrijk en kunnen u helpen profiteren van de grote, heldere kleurentrend.
- De techniek is bruikbaar, zelfs als u geen illustrator bent dankzij ontwerpsets of pakketten die vol geïllustreerde onderdelen zijn die in een project kunnen worden gebruikt.
- Illustraties kunnen veel verschillende stemmingen of stijlen aannemen, van schetsen tot uitgebreide tekeningen tot computergegenereerde afbeeldingen.
Illustraties in hero-stijl
Omdat hero headers groot zijn, is dit een van de gemakkelijkste plaatsen om de illustratietrend te zien. Het wordt ook gebruikt voor een groot aantal sites, van portfolios tot retail voor app-voorbeeldpagina's.
Het mooie aan een geïllustreerd heldbeeld is dat er ruimte is voor een behoorlijk ingewikkeld kunstwerk. Kleine details, schaduwen en kleuren en interacties hebben allemaal ruimte om te ademen, waardoor het voor gebruikers eenvoudiger is om elk element te verkennen.
Er zijn een paar trucs om al dit complex te illustreren:
- Het kunstwerk moet goed zijn. Gebruikers gaan geen tijd besteden aan het kijken naar een illustratie die ze niet krijgen of is gewoon een slordige puinhoop. Dus neem de tijd en zorg ermee.
- Hoewel de illustratie een dieptecomplexiteit kan hebben, moet het algemene bericht eenvoudig zijn. Weet wat de afbeelding hoort te zeggen en zorg ervoor dat de elementen bijdragen aan de boodschap.
- Werk met een professional. Alleen al omdat je harten op een servet kunt tekenen, wil nog niet zeggen dat je klaar bent om een volledige website-illustratie te tekenen. Dit proces kost tijd en de planning om echt te werken. (En het kan duur zijn, dus zorg ervoor dat dit de juiste esthetiek is voordat je erin gaat duiken.)
Voeg eenvoudige animatie toe
Hoewel een statische tekening veel impact op zichzelf kan hebben, leeft het web tegenwoordig vol beweging. Koppel een illustratie met subtiele animaties of scroll-effecten om gebruikers aan te moedigen om te klikken.
Kleine subtiele bewegingen, zoals de draaiende tekst op de website voor De Hugo , helpt het oog in het ontwerp te trekken. Kleine animaties kunnen gebruikers ook helpen te begrijpen welke acties moeten worden uitgevoerd tijdens het bezoeken van een site. Dit kan vooral het geval zijn bij illustraties die veel elementen bevatten of een algeheel 'druk' ontwerp hebben.
Deze kleine verrassingen kunnen bezoekers van de site aanmoedigen om rond te hangen en rond te kijken. Bewegende animaties zijn een bijzonder leuke bonus voor gebruikers die zowel als een leuk element en een navigatietool kunnen dienen.
Geïllustreerde pictogrammen of UI-elementen
Als een volledig geïllustreerd website-ontwerp niet uw ding is, overweeg dan een paar geïllustreerde pictogrammen of elementen van de gebruikersinterface. Dit is een eenvoudige manier om de trend te verlichten. (En er zijn genoeg pictogram- en gebruikersinterfaces die geïllustreerde stijlen bevatten om u op weg te helpen.)
Geïllustreerde elementen kunnen een vleugje eigenzinnigheid toevoegen aan een site die anders te formeel zou aanvoelen. Iets om te proberen is een geïllustreerd overzichtspictogram. Deze stijl valt gemakkelijk in bijna elk ontwerp, werkt geweldig met afbeeldingen en elk kleurenschema en biedt een consistent visueel thema van pagina tot pagina.
Als u een stap verder wilt gaan dan pictogrammen, overweegt u te grote gebruikersinterface-elementen. iQor , gebruikt geïllustreerde knoppen in grotere formaten om gebruikers te begeleiden en de site een beetje leuker te maken. De geïllustreerde stijl vloeit van pagina naar pagina met grote elementen met dezelfde drie kleurtonen. Het resultaat is leuk en consistent en een beetje onverwachts in de klantenservice.
Handgetekende letters
Een andere grote trend in website-ontwerp is aangepaste typografie. Combineer de concepten van illustratie en belettering voor een handgetekend logo, hoofdtekstblok of typografisch kunstelement. Dit op tekst gebaseerde visuele effect kan een grote impact hebben (vooral wanneer het te groot is of wordt gebruikt als het belangrijkste kunstelement in het ontwerp).
De truc hier is matiging. Met de met de hand getekende beletteringstijl wilt u voor dit effect bij een enkel blok tekst- of tekstelement blijven. Meervoudig gebruik van een aangepast tekstblok kan overweldigend zijn voor gebruikers en kan de leesbaarheid beïnvloeden. Het is belangrijk om ervoor te zorgen dat woorden nog steeds vrij duidelijk zijn en dat gebruikers het bericht niet goed kunnen begrijpen.
Beide Dag van de Doden en Kom op tegen kanker , doe geweldig werk met handschrift voor een eenvoudige boodschap. Day of the Dead gebruikt andere illustraties, eenvoudige schreefloze typografie en foto's om gebruikers door de rest van de site te halen. Het eindresultaat is leuk en gemakkelijk te volgen. Kankerbestrijding maakt gebruik van een meer aquarel-stijl die allemaal gebaseerd is op illustraties, maar vertrouwt op meer standaardlettertypen voor leesbaarheid. Beide zijn goede opties voor het werken met op maat gemaakte belettering.
Conclusie
Hoewel het in eerste instantie een beetje intimiderend lijkt om in de wereld van illustratie in te breken voor website-ontwerpprojecten, is het iets dat veel ontwerpers kunnen doen. Van tekenen met de hand tot het hebben van computerondersteuning of het werken met een kit, de opties zijn vrij onbeperkt.
Het is iets om over na te denken als het gaat om projecten waarbij je iets anders moet doen. En het is trendy genoeg dat je misschien gevraagd wordt om iets in deze stijl te maken. Dit is dus een goed moment om je schetsvaardigheden op te frissen en na te denken over manieren waarop een geïllustreerd ontwerpkader voor websites voor jou zou kunnen werken.