Het gebruik van illustratie in webdesign
Illustratie is een ongelooflijk veelzijdige tool die veel verschillende toepassingen in het ontwerp kan vinden. En als het gaat om webdesign kunnen we een zeer grote verscheidenheid aan implementaties vinden.
Vandaag wil ik ingaan op enkele belangrijke manieren waarop deze tool is ingezet, zodat we nieuwe ideeën kunnen uittekenen om de ontwerpen die we produceren te inspireren en uit te dagen.
Laten we ergens beginnen waar ik het zelden doe, met een basisdefinitie: Geïllustreerd: 1) Om duidelijk te maken; 2) Om duidelijk te maken door te geven of door te dienen als een voorbeeld of instantie; 3) Om te voorzien van visuele functies die bedoeld zijn om uit te leggen of in te richten .
Het lijkt erop dat in de echte wereld van webdesign, illustratie de neiging heeft om beide functies tegelijkertijd uit te voeren. Het verfraait terwijl het verduidelijkt. En als het slechts een van deze doet, moet u zich misschien afvragen waarom. Misschien door illustratie aan het werk te zetten, is het vervullen van beide rollen de manier om het ontwerpelement echt te gebruiken voor alles wat het waard is.
Dit wil natuurlijk niet zeggen dat een ontwerp niet succesvol kan zijn als het alleen het een of het ander hanteert; zeker kan het. Maar om het meeste uit ons werk te halen, vind ik dat het uitdagen van ons denken altijd nuttig is. Zoals gewoonlijk, gaan we in een aantal groepen voorbeelden duiken om te zien wat er met dit visuele apparaat kan worden gedaan. Overweeg onderweg of elke benadering duidelijkheid of decoratie oplevert, of beide.
Thematische illustratie
De eerste benadering tot illustratie die ik hier wil behandelen, is het gebruik van deze stijl om een algemene thematische aanpak te produceren. In deze situatie worden illustraties ingezet om een algemeen thema op te stellen. Beklimmen we bergen, bezoeken we een ruimtestation of verkennen we het kantoor van een bedrijf?
Hoewel deze benadering ons niet naar een locatie hoeft te brengen, gebeurt dit vaak. In andere situaties stelt de stijl eenvoudig een algemeen motief vast dat de site volgt.
De reden dat we hierin geïnteresseerd zijn, is dat het wordt gebruikt om het totale ontwerp op een radicale manier te sturen. De illustratie is niet een klein ondersteunend element. In plaats daarvan is het het meest prominente ontwerpelement en bestuurt het de volledige lay-out.
Breng mijn baas naar de Noordkaap
In dit voorbeeld kon de aanpak niet duidelijker zijn. Het ontwerp van de site weerspiegelt duidelijk zijn meest elementaire doel. De illustratie biedt een visuele verwijzing naar wat het individu zal doen. En wat betreft het definiëren van de illustratie, biedt het kunstwerk decoratie en schoonheid aan de pagina.
In dit geval stelt het thema het doel van de site vast en helpt het de gebruiker bij de aankoop van het concept.
Launch Kit
Een thematische aanpak hoeft op geen enkele manier zo bot te zijn. Soms kan het een meer natuurlijk onderdeel zijn van een meer typisch gestructureerde site. In dit geval is de site enigszins uniek in zijn lay-out en dwingt het thema niet tot een over-the-top interface op basis van raketschepen.
In plaats daarvan is het thema zodanig in het ontwerp verweven dat het zijn decoratieve accenten communiceert zonder de inhoud te verstoren. Hier dient de illustratie om te versieren, maar niet zo duidelijk. Dit is helemaal niet verrassend en bewijst natuurlijk dat er geen formule is om te volgen.
Atelier Anonyme Design
In andere situaties zoals deze is de thematische illustratie letterlijk de site. Het is geen ondersteunend element, maar wordt eerder volledig het ontwerp zelf.
Hier speelt het gebruik van illustratie duidelijk een decoratieve rol. Maar ik zou willen beweren dat het ook een grote mate van duidelijkheid voor de bezoeker biedt. Dit is een website voor een ontwerpbureau. Het ontwerp en de aard van deze site communiceren veel aan zijn bezoekers. Als zodanig ben ik er zeker van dat het als een enorm filter voor hun klanten fungeert. Je wordt erdoor aangetrokken en houdt van hun speelse en creatieve aanpak, of je wordt er helemaal mee uitgeschakeld. Dus tot op dit punt denk ik dat het heel veel duidelijkheid biedt over het bureau en hun mentaliteit.
Allure grafisch ontwerp
Op deze site speelt het gebruik van illustratie ook een duidelijke thematische benadering. Hoewel de site enkele standaard lay-outformules volgt, is het hele ontwerp verpakt in een thematische lay-out. Deze elementen drijven niet alleen het ontwerp van de site, maar ze fuseren ook met het hoofdlogo en de gebruikte kopie op de site. Het thema is meeslepend en drijft het hele bericht dat de site presenteert.
Aanvullende thematische voorbeelden
Hier zijn enkele extra sites die gebruik maken van thematische illustraties om een omgeving of thema voor een site te bepalen.
Chipmunk
Drift Boys
Iutopi
Chandu4u
mascottes
Hoe zou ik het idee van het gebruik van illustraties kunnen bespreken zonder een van de meest voor de hand liggende: mascottes te bekijken? Met dit visuele element hebben de ontwerpers de neiging om de site, het product of het doel personifiëren met een personage. Niet alleen varieert de implementatie van een dergelijk element, maar ook de kracht en redenering erachter.
inkFinder
In dit ontwerp speelt de geïllustreerde mascotte een vrij duidelijke rol. Duidelijk in dat het de naam van het product weergalmt. Het geeft niet alleen enig leven voor het ontwerp, maar het geeft er ook een gezicht aan. Op deze manier heeft het publiek iets meer unieks om in de hersenen weg te vijlen. Hopelijk helpt de mascotte om een meer gedenkwaardige en unieke ervaring te maken die het product zal helpen om op te vallen.
Misschien is dat het meest krachtige doel achter een mascotte, om iets te helpen opvallen. Het mooie van een geïllustreerde mascotte als deze is dat deze volledig uniek en specifiek voor dit product kan zijn. Ervan uitgaande dat het op maat gemaakt was voor dit ontwerp, zou het de enige plaats moeten zijn waar deze exacte illustratie bestaat.
The Evnt
Ironisch genoeg vinden we hier nog een geïllustreerde octopusachtige mascotte (wat is een driepotige zeewezens?). In dit geval is de mascotte duidelijk een veel grotere stap weg van de werkelijkheid: een robotachtig schepsel met drie poten met een brein in een bubbel.
Hoewel het misschien een vreemde keuze is, biedt het wel een mooi onderscheidend element voor het evenement. Deze unieke mascotte geeft een cool visueel element om verbinding te maken met het evenement. Het krijgt een geheel eigen leven en verbindt mensen echt met iets concreets. Ik veronderstel dat dit precies het doel van een mascotte is.
Het ontwerp van deze site is prachtig, maar bedenk hoe saai het zou zijn zonder deze gekke mascotte op zijn plaats te hebben. Het produceren van een dergelijk element is niet eenvoudig, maar het is uiterst effectief in deze situatie.
Big Eye Creative
Voor een voorbeeld van een niet-octopus-gebaseerde mascotte, kijk eens naar de Big Eye Creative plaats. Hier speelt de mascotte niet zoveel van een overheersende rol in het ontwerp. Het voegt echter veel persoonlijkheid toe. Het is duidelijk dat de andere illustraties en de algehele stijl van de site zorgen voor een minder formele presentatie. Maar de mascotte in het logo is overal op de site aanwezig. Dit zorgt ervoor dat hun luchtige stijl het ontwerp doordringt.
Aanvullende mascotte-illustraties
Hier zijn een paar extra voorbeelden van mascottes aan het werk in design. Inclusief nog een octopus; het lijkt erop dat dit een populaire is om te gebruiken.
Pioneer Records Management
Argyle Octopus
coucou
Konsebt
Geïllustreerde decoratie
Het volgende type gebruik dat ik zou willen overwegen, is wat ik verwijs naar als thematische decoratie. Dit is wanneer de illustratie op een decoratieve manier wordt gebruikt die niet echt een specifieke fysieke referentie oplevert. De illustratie bevat bijvoorbeeld meestal afbeeldingen van mensen, dieren, objecten of plaatsen. Maar in dit geval geeft de illustratie niet zozeer iets echts weer, maar geeft het eenvoudigweg decoratie om het ontwerp op een manier te verfraaien die alleen door een illustratie kan worden gemaakt. Zoals altijd, laten we dit verduidelijken door enkele voorbeelden.
1000 WP-thema's
Bekijk voor ons eerste voorbeeld de 1000 WP-thema's website. Op deze site biedt het gebruik van illustratie een onderliggend kader en stijl voor de site. Maar het doet dit in wat het meest puur decoratief is. De algehele stijl voelt als een illustratie, en toch heeft hij niet de typische humanistische elementen.
Nu wil ik mezelf volledig tegenspreken. Ik denk dat de stijl overwegend decoratief is. Maar ik kan echt zien hoe we kunnen beweren dat het een niveau van opheldering biedt voor de site. De stijl die het ontwerp gebruikt, maakt verbinding met een bepaald publiek. Het zegt iets over de stijl van de site en de thema's die ze kunnen produceren. Op zoveel manieren toont de kwaliteit van de geïllustreerde lay-out de kwaliteit van het werk dat u via deze site zou verwachten te zien. Op die manier is de verduidelijking misschien subtieler en minder in je gezicht, maar toch aanwezig.
Coca-Cola geschiedenis
Op deze website vinden we een ander ontwerp aangedreven door illustratie. Er zijn hier enkele geïllustreerde elementen die echte dingen demonstreren, maar de meeste van de thematische benadering is vastgesteld met pure decoratie. Niet alleen demonstreert dit voorbeeld de aanpak, maar het laat ook zien dat bijna geen techniek op puristische wijze wordt gebruikt. De realiteit is dat je deze elementen waarschijnlijk op verschillende manieren zult samenvoegen.
Metaphiziks
In dit laatste voorbeeld voor decoratieve illustratie vindt u enkele uitstekende achtergrondelementen. Sommige daarvan zijn tastbaarder dan andere, maar over het algemeen hebben ze meer te maken met stilistische ondersteuning dan met iets anders. Het is opmerkelijk hoe mooi dergelijke eenvoudige lijntekeningen kunnen zijn in combinatie met mooie tekst, goed gekozen kleuren en eenvoudige pictogrammen. Het eindresultaat is hier fantastisch en opmerkelijk mooi.
Meer ontwerpen met geïllustreerde decoratie
Hier zijn enkele aanvullende voorbeelden om dit type illustratie in ontwerp af te ronden.
Moo's Cupcakes
Tech Jobs
Pixel Stadium
Aangepaste tassen HQ
Geïllustreerde tekst
Hand-gerenderde tekst is zeker geen nieuw concept en is iets dat ik heb behandeld vele malen eerder . Ik heb een dergelijke benadering echter nooit overwogen met een illustratieperspectief.
Handweergave-tekst is een populaire variant van geïllustreerde tekst en een geweldige oplossing voor veel creatieven. Ten eerste is het een geweldige manier om al die praktische kunstacademie aan het werk te zetten. Ten tweede is het een geweldige manier om iets unieks te produceren. Immers, als je een beetje tekst retourneert, is deze 100% uniek. Zelfs als je over een bestaand lettertype schetst, zal het toch een aparte creatie worden.
Rangus
Dit is een perfect voorbeeld van een geïllustreerd type. De stijl is buitengewoon prachtig, volledig uniek en zeer uitnodigend. Maar daar stopt het niet. Het handgegeven type toont feitelijk de individuele talenten. Het laat zien dat hij met zijn handen illustraties maakt en het sluit perfect aan bij zijn animatievaardigheden. Ik ben vooral dol op het feit dat het allemaal gebaseerd is op een schoolbordthema omdat het het thema en de elementen echt perfect met elkaar verbindt. Naar mijn mening laat deze site zien hoe een verenigende illustratie kan zijn met het doel en de boodschap van de site.
Joey Lomanto
In dit geval is de geïllustreerde tekst veel subtieler. In plaats van de hele richting van het ontwerp te rijden, speelt het gewoon lekker mee. Bij de eerste keer nemen merkt u zelfs de handmatige stijl van de grote homepagentekst niet eens op. Toegegeven, de tekst kan eigenlijk een lettertype zijn, maar het is op zo'n manier gebruikt dat het perfect aansluit op de stijl van de site. Hoe dan ook, de stijl is mooi verenigd en illustratie speelt vele rollen in het totale ontwerp.
Ga leven
Geïllustreerde tekst hoeft echter niet met de hand te worden weergegeven. Zoals u in dit voorbeeld kunt zien, is de tekst op verschillende manieren gestileerd, waardoor de tekst zelf in stukjes van de algehele illustratie wordt omgezet. Het mooie van deze benadering is dat het de tekst verenigt met de andere illustraties. Hiermee wordt een minder uniform gevoel voorkomen, waarbij u eenvoudig illustraties hebt op standaard webgebaseerde tekst. Dat laatste kan werken, maar in dit geval is de impact van geïllustreerde tekst duidelijk.
Extra voorbeelden van geïllustreerde tekst
De volgende voorbeelden passen los in deze categorie. Ik zeg losjes, omdat het soms moeilijk te zeggen is, omdat het soms een subtiel ding is. In sommige van deze gevallen voelt de tekst alleen als een kunstwerk, dus heb ik het in deze verzameling geplaatst.
Contrast Rebellion
Fakta
La Web Shop
Informatieve illustraties
Door de definitie zelf van illustratie, is een van de doelen om te verduidelijken en uit te leggen. Dus het is alleen maar passend dat we enkele voorbeelden vinden waarbij de illustraties dit doen met buitengewone duidelijkheid.
boekachtig
Laten we beginnen met de boekachtig plaats. In deze ongewone lay-out zien we dat de illustraties heel duidelijk de verschillende punten van de introductiepagina-indeling symboliseren. Elk blok heeft een visueel element dat het niet alleen mooier maakt, maar wat nog belangrijker is, het uitlegt. Zo veel zelfs dat ik als lezer bijna niet eens de kopie hoef te lezen. De illustraties van de apparaten linksonder laten dit vooral zien.
Conferize
Op een veel minder prominente manier is de illustratie in dit ontwerp even informatief. De eenvoudige illustratie demonstreert in zijn eentje het onderwerp van de site. Het zal je misschien niet overslaan met zijn boodschap, maar het echoot prachtig het doel van de site.
Activeren
De illustratie in dit ontwerp communiceert niet alleen informatie over de gebeurtenis die het vertegenwoordigt, maar weerspiegelt ook het doel van de gebeurtenis. Deze specifieke gebeurtenis draait om het loskoppelen van technologie. Het is een kans voor mensen die worden overspoeld met technologie om te ontsnappen.
De illustratie hier laat ons zien wat de aanwezigen zullen doen, dus het is informatief. En door zijn aard breekt de illustratie met technologie en wortelt zichzelf in een puur organisch gevoel, een fundamenteel geweldige manier om het doel van de site te communiceren.
Meer informatieve illustraties
Deze extra sites tonen ook het idee van illustraties die ons informeren. Sommige zijn kleine en eenvoudige pictogrammen, terwijl andere immersieve elementen zijn die de inhoud volledig definiëren en weergeven.
Vitality City
Uklizenodoma.cz
Qubiq
Een technologisch tegengif
Met het laatste voorbeeld (The Activeren site) hebben we ingegaan op datgene waar ik het volgende over wil nadenken, het gebruik van illustratie om te breken met het technologisch gerichte gevoel van dingen. Soms is het nodig om af te stappen van de technologische onderbouwing van het web en een zeer organisch gevoel te tonen. Illustratie is een van de krachtigste hulpmiddelen om zo'n idee te bereiken.
Verzendingsapp
Deze eenvoudige, snel komende pagina is niets bijzonders. En duidelijk hoe het zijn schoonheid verwezenlijkt, is radicaal eenvoudig. Een enkele illustratie in zijn eentje leidt ons af van het feit dat dit een webpagina is. Het voelt meer als een kunstwerk dat toevallig een klein interactief element heeft, zeker een geweldige manier om een enorme impact op gebruikers te hebben en een gedenkwaardig beeld te creëren.
Muziekpark
Hoewel deze site geen gebruik maakt van een even radicale benadering, is de illustratie nog steeds groot en prominent in de lay-out. Hier blaast de geanimeerde beelden de pagina tot leven. Combineer dit met een creatieve en ongebruikelijke lay-out en het voelt volledig los van de technologie die het aandrijft. Misschien speelt ook het feit dat het er niet uitziet als een normale site een grote rol. Bedenk ook dat de illustratie in dit geval echt helpt ons te informeren over het thema van de site.
Egopop
In nog een andere atypische lay-out zien we dat de illustratie is ingezet. Hier vertelt de illustratie ons niet alleen over het individu dat de site vertegenwoordigt, maar breken ze ons ook uit van de normale webdenkstijl die een bezoeker zou kunnen hebben. Nogmaals, het voelt meer als een interactief kunstwerk dan als een website. Als dit je doel en behoefte is, dan is dit een geweldige benadering om te overwegen.
Zaarly
In vergelijking met de vorige voorbeelden, de Zaarly site staat in schril contrast. Hoewel het ontwerp wordt bepaald door één enkele illustratie, en deze illustratie dient om een toon in te stellen voor de site, is de onderliggende functie veel complexer dan deze andere voorbeelden.
Deze site is een applicatie die bedoeld is om te gebruiken. En de illustratie helpt een bepaald aantal verwachtingen vast te stellen. Het geeft een luchtig, humanistisch gevoel dat duidelijk heel organisch en natuurlijk aanvoelt. Stel je dit voor in tegenstelling tot semi-minimalistische apps zonder persoonlijkheid. Het ontwerp geeft de site een gevoel van benaderbaarheid en verschuift onze verwachtingen.
Conclusie
Het gebruik van illustratie in ontwerp is een eeuwenoude praktijk en de toepassing ervan op het web is duidelijk. Zoals bij elk ontwerpelement geniet ik van het proces van heroverweging van het doel en gebruik. Door een dergelijke inspanning merk ik onvermijdelijk dat ik een beter inzicht krijg in hoe het werkt, hoe het kan worden gebruikt voor een beoogd doel en, uiteindelijk, een aantal frisse en inspirerende ideeën.
Hoe gebruik je illustratie in webdesign? Deel hieronder je eigen ervaringen ...