Maak eenvoudige illustraties voor het web

Sep 11, 2025

Procedures

Ik ging zitten, speelde wat muziek, dimde de lichten en opende mijn laptop. Ik had veel te doen. In een poging om inspiratie op te roepen, begon ik met tekenen doodle kunst Lijnen van de ene hoek van het scherm naar de andere, toen ik een komeetvorm zag. "Hmm," begon mijn brein langzaam, "wat als ik ze verbind en wat planeten toevoeg?"

Een paar uur later had ik mijn meest populaire Dribble-illustratie. Ik herinner me nog steeds nauwelijks hoe het gebeurde, maar na sommigen graven ik door mijn hersenen, ontdekte ik mijn innerlijke algoritme voor het creëren van een illustratie - niet alleen deze, maar elke andere die ik heb gedaan. Het is grappig, ik verwachtte dat het complexer is. Ach ja…

Illustratiestijl

Voordat ik op een illustratie begin, zorg ik ervoor dat ik het doel en de context begrijp waar het gaat wonen. Is dat in-app of website of wallpaper? Zal er tekst op zijn, en wordt het gevestigd in een drukke omgeving? Moet het een actie symboliseren, of is het gewoon om een bepaalde sfeer af te geven?

Als de illustratie een duidelijk idee is, of om een bepaald object of actie te symboliseren, dan kies ik voor een eenvoudige uitvoering waar alle aandacht gericht is op het belangrijke deel. Als ik echter specifiek ga voor een 'Silent' achtergrondillustratie, kies ik een patroonachtige benadering, of zorg ervoor dat er geen duidelijke aandacht-grijpende elementen zijn om de mogelijkheid van mensen te minimaliseren . Voor in-app-illustraties probeer ik de dingen te houden, om te voorkomen dat de aandacht ontspoort van de functionaliteit.

Esthetische regels

Mijn hersenen vinden het leuk om al deze rare regels te creëren. Ze zijn als belachelijke uitdagingen die ik niet kan laten passeren: wat als ik een mens alleen tekenen met behulp van cirkels? Wat als ik een zonsondergang illustreer met slechts één kleur?

Geometrische regels, logische progressies, symmetrie. Er is iets heel aantrekkelijk bij het hebben van strikte wiskundige regels toegepast op kunst. Het voelt als reverse-engineering magie; Het stript het mystieke element in de kunst weg, dus het is bijna als het onthullen van de wetenschap erachter.

Complexe illustratie; Eenvoudig kleurenpalet

A city illustration with a complex level of detail, which has been combined with a simple, analogous colour palette — Een stadsillustratie met een complex niveau van detail, dat is gecombineerd met een eenvoudig, analoog kleurenpalet (Beeldkrediet: Nina Geometrieva)

Terwijl het blijkt, is mijn brein vrij lui als het gaat om het kiezen van kleur, dus het heeft twee algemene soorten kleurenpaletten die het kiest uit: één voor complexe illustraties; een andere voor eenvoudige.

Complexe illustraties hebben een hoog granulariteitsniveau, met veel vormen / objecten en veel detail. Deze zijn meestal van nature patroonachtig en hebben geen duidelijk brandpunt. Mijn brein heeft besloten dat dit soort illustraties goed werken met monochromatische of analoge kleurenpaletten. Of, in bredere termen - minder kleuren en minder kleurcontrast.

Dit komt allemaal neer op visuele balans; Als de vormen gek zijn, moeten de kleuren flauw zijn. Eén uitzondering is in een geval waarin ik de nadruk wil geven aan een bepaald object dat anders niet zou opvallen. Dit kan worden bereikt door een sterk contrasterende kleur te gebruiken, terwijl al het andere monochromatisch en tamme wordt gehouden. De perfecte visuele balans is ergens tussen de overstimulatie (luide kleuren, complexe vormen, veel detail, alles schreeuwt naar je gezicht) en understimulatie (het slechte type minimale, saai, niets nieuws of interessant aan de gang).

Monochromatische paletten

Analogous or monochrome palettes work effectively when there is a visual progression or repetition of elements — Analoge of monochrome paletten werken effectief wanneer er een visuele progressie of herhaling van elementen is (Beeldkrediet: Nina Geometrieva)

Een monochromatisch kleurenpalet bestaat uit de tinten of tinten van één kleur. Tinten gebeuren wanneer een kleur progressief wordt gemengd met wit; tinten gebeuren wanneer het geleidelijk wordt gemengd met zwart. Een kwestie die ik altijd met monochromatische paletten had, is dat tinten en tinten geleidelijk levendigheid verliezen, vanwege de aard van het mengen van een kleur met wit of zwart, die beide nul procentverzadiging hebben.

Om deze geleidelijke doullingen te voorkomen, gebruik ik een simpele cheat: evenals het toevoegen van wit of zwart, verander ik geleidelijk de tint een beetje. Dit is in wezen een subtiel analoog palet in plaats van een monochromatisch palet. Bijvoorbeeld, als ik rode monochromatische tinten wil maken, zou ik de tint naar Orange verschuiven. Als ik rode monochromatische tinten wil maken, zou ik de tint naar Magenta verschuiven terwijl het donkerder is. Als ik lichtere tinten van blauw wil krijgen, verschuift ik naar cyaan; Voor donkere tinten blauw verschuift ik in de andere richting, naar paars.

Dit resulteert in een palet dat nog steeds enigszins monochromatisch aanvoelt, maar is veel levendiger en heeft beslist een schop. Sinds ik dit ontdekte, heb ik nog nooit een echt monochromatisch palet gemaakt.

Eenvoudige illustratie; Complex kleurenpalet

Illustraties met lagere complexiteit hebben meestal een duidelijk brandpunt en objecthiërarchie. De vormen zijn meestal duidelijker, dus de kleurkeuzes kunnen wilder zijn. Ik denk op hoogwaardige kleuren van welke aard dan ook - complementaire, triadic, tetradic - zolang het een opvallend, stimulerend palet is.

Er is een heel universum tussen wat ik heb beschreven als complexe en eenvoudige illustraties. Maar mijn hersenen zijn niet overdreven betrokken bij al dat spectrum - het zou liever elke illustratie als complex of eenvoudig labelen.

Color Paletten met hoge contrast zijn niet zo eenvoudig als het kiezen van de tegenovergestelde kleuren op een kleurenwiel. Het kleurenwiel is een geweldig startpunt, maar het is zeker het einde van het proces. Bijvoorbeeld bij het kiezen van een goede oranje en blauwe combinatie, let ik op een paar dingen: waargenomen luminantie en hoe accentkleuren werken met standaardkleuren.

Waargenomen luminantie

Als beide kleuren dezelfde waargenomen luminantie hebben, vindt de hersenen het moeilijk om de grens tussen hen te onderscheiden - dus kijkend naar het beeld voelt zich ongemakkelijk. Tenzij de kleuren elkaar nooit moeten aanraken, is het de moeite waard om ervoor te zorgen dat ze niet dezelfde ervaringen hebben.

Oh, en voor het geval je nieuwsgierig bent, kijk ik het woord 'waargenomen', kijk op het Effect van Helmholtz-Kohlrausch, dat toont aan dat kleuren met dezelfde luminantie kunnen worden waargenomen om verschillende waarden te hebben. Omdat oranje een hoger ervaren luminantie heeft dan blauw, is het bijvoorbeeld gemakkelijk om de ongelijkheid tussen de twee kleuren verder te vergroten door een lichtere oranje en een donkerder blauw te gebruiken.

Accent versus standaardkleuren

An illustration for the Zopim homepage. Blue shades are dominant, with orange providing the accents — Een illustratie voor de WOPIM-startpagina. Blauwe tinten zijn dominant, met oranje die de accenten aanbieden (Beeldkrediet: Nina Geometrieva)

Als het gebruik van elke kleur enorm anders is, pas ik de kleurwaarden dienovereenkomstig aan. Dapper zijn met accentkleuren en het spelen veilig met standaardkleuren is mijn go-to-aanpak.

In het oranje-blauwe voorbeeld hierboven, zou ik blauw gebruiken als een kalmerende kleur voor het vullen van grotere gebieden, voor achtergronden en grote elementen, en wat wilde oranje voor knoppen, pictogrammen en andere kleine elementen. In de context van illustratie heb ik blauwe tinten als basis, en opnieuw, oranje als het accent - misschien door middel van de nadruk op een interessant detail of een belangrijk element.

Visual Balance Check

Welke illustratie je ook eindigt door de bovenstaande gidsen te volgen, zorg ervoor dat je een stapje terug neemt en controleer of alles logisch is. Er zijn zoveel uitzonderingen op regels in de illustratie, dat het onmogelijk zou zijn om alle combinaties van een verbazingwekkende illustratie te vermelden. Probeer altijd dingen uit die interessant lijken, en wanneer iets je verrast, zorg er dan voor dat je het begrijpt, zodat je je intuïtie kunt blijven verbeteren.

Dit artikel verscheen oorspronkelijk in netto tijdschrift uitgave 286; koop het hier

Gerelateerde artikelen

7 Web Design Dos en Don'ts
6 van de beste freelance-portefeuilles van 2016
De 6 beste Photoshop-hulpmiddelen voor webontwerpers

Maak eenvoudige illustraties voor het web

Illustratiestijl

Esthetische regels

Complexe illustratie; Eenvoudig kleurenpalet

Monochromatische paletten

Eenvoudige illustratie; Complex kleurenpalet

Waargenomen luminantie

Accent versus standaardkleuren

Visual Balance Check

Procedures - Meest populaire artikelen

Stijl een site met Sass

Gebruik de pentool en texturen om diepte in Photoshop

Hoe een blogsite te bouwen met Gatsby

Hoe een AR-app te bouwen

5 manieren om de SEO van uw website te vergroten

Cache in op de prestatiebooster van de BBC

Hoe de ranglijsten van Google met uw inhoud te beïnvloeden

Maak stijlframes in Photoshop

Categorieën