Share
Ik herinner me nog levendig een van mijn vroegste kunstlessen toen ik als klein, enthousiast kind een reeks felgekleurde verven kreeg aangeboden. Ik herinner me het genoegen om primaire kleuren voor het eerst in secundaire kleuren te zien mixen, en ik redeneerde dat als twee kleuren een mooie nieuwe kleur zouden kunnen maken, allemaal de kleuren samen moeten iets nóg beter maken! Het was volkomen teleurstellend om te beseffen dat hoe ik het ook deed, als ik alle kleuren tot mijn beschikking had, ik onvermijdelijk eindigde met een kacky kleur die alleen "BLECH" genoemd kan worden.
Jaren later, als een beginnende webdesigner, ervoer ik weer iets van hetzelfde proces. Terwijl ik aan het leren was, raakte ik in de onvermijdelijke valstrik van het gebruik van te veel kleuren, of ze op de verkeerde manier te combineren, om uiteindelijk iets "BLECH" te krijgen.
Ik ging aan de slag om te leren hoe ik kleurenschema's voor het web kon maken, en ik vond veel fascinerende informatie over kleurentheorie. Ik las over tinten, tinten, schakeringen, tonen, verzadiging en helderheid, evenals analoge, monochromatische, triade, complementaire en samengestelde kleurenschema's.
Het basis RGB kleurenpaletMaar zonder een praktisch kader om die informatie in te voegen, merkte ik dat ik er in het begin niet veel beter aan deed om een goed gekleurd website-ontwerp te maken. In feite was het pas nadat ik begon met het maken van solide kleurenschema's door pure vallen en opstaan dat alle kleurentheorie die ik had gelezen zin begon te krijgen.
Tijdens dit proces heb ik een aantal "veiligheidsrichtlijnen" opgepikt voor kleurenschema's voor websites die ik in het begin had gewild. Wanneer u voor het eerst aan de slag gaat, is de volledige kleurentheorie niet noodzakelijk wat u van tevoren nodig hebt. Vaak moet je de bal laten rollen met iets minder theoretisch, en een beetje meer "verf op nummer".
In deze tutorial deel ik zes duidelijke, "kan niet verkeerd" richtlijnen die je kunt volgen om een basiskennis te krijgen over het werken met kleur in webdesign. Dit zijn geen regels, omdat je veel kleurenschema's in je carrière zult maken die in een compleet andere richting gaan. In plaats daarvan zijn ze een startpunt, een veiligheidsgids voor het overleven van uw eerste uitstapjes in de webontwerpwereld zonder ooit "BLECH" tegen te komen.
Een van de meest fundamentele principes bij webdesign is dat het niet uitmaakt hoeveel tijd je besteedt aan het maken van een glorieus ontwerp, de ultieme rol ervan is om de tweede viool te spelen voor de echte ster van de show; de inhoud. Uw kleurenschema zou de site nooit "harder" moeten maken dan de inhoud die het presenteert. Uw ontwerp moet op de achtergrond zijn en de inhoud van de site naar de voorgrond duwen.
Subtiel kleurenschema maakt het mogelijk dat afbeeldingen het focuspunt vormen
Luid kleurenschema leidt af van beelden. Lach niet, dit gebeurt echt op het wilde web.Een heel gebruikelijk proces in webdesign is om het ontwerp zelf in relatieve isolatie te creëren, vaak in software zoals Photoshop of Sketch. Als u geen voorbeeldinhoud heeft, kan het gemakkelijk zijn om een ontwerp te krijgen dat er op zichzelf fantastisch uitziet, en dat een klant misschien leuk vindt in mockup-vorm, maar in de praktijk te afleidend is voor sitebezoekers. In feite is het webontwerpproces zo nauw verbonden met de inhoud dat veel hoogwaardige webontwerpen bijna leeg lijken zonder inhoud.
Het is een goed idee om te beginnen met het maken van een voorbeeld van het type inhoud dat u op de site wilt laten verschijnen, hetzij in ontwerpsoftware of rechtstreeks in code, en er vervolgens omheen te ontwerpen. Dit is vooral het geval als er foto's of afbeeldingen van een bepaalde stijl bij betrokken zijn, zodat u er zeker van kunt zijn dat uw ontwerp harmonieus met hen meebeweegt. Stel je voor dat de inhoud van de site een uniek individu is voor wie je een perfect passend pak moet maken.
Er is een oneindig aantal kleurencombinaties die u kunt kiezen voor uw hoofdachtergrond en tekstbasis. Mijn aanbeveling is echter om te beginnen met het beheersen van de gemakkelijkste en dat is wit en / of lichtgrijs op de achtergrond samen met donkergrijze tekst.
Als je kijkt naar een selectie van populaire websites, sjablonen of thema's, is er een goede gok dat een meerderheid van hen precies dezelfde basis van donkergrijze tekst op wit of lichtgrijs zal hebben, en dat is niet voor niets. Met deze combinatie bent u vrijwel gegarandeerd leesbaarheid voor bezoekers en kunt u de op tekst en afbeeldingen gebaseerde inhoud op de voorgrond plaatsen.
Stel met een aantal voorbeeldinhoud een eenvoudige grijswaardenlay-out op, bijvoorbeeld:
Over het algemeen moet je het gebruik van gitzwart voor tekst vermijden, omdat donkergrijs een beetje makkelijker te lezen is. Een comfortabel bereik is overal vandaan # 333333 naar # 666666.
Voor je achtergrondkleuren, volledig wit #FFFFFF is de veiligste gok voor achtergronden direct achter een hoofdtekst. Voor andere achtergrondelementen kun je overal naartoe gaan #FFFFFF naar beneden #CCCCCC.
Nogmaals, dit zijn geen regels voor kleuren voor jou moet gebruik, alleen richtlijnen waarvan u weet dat u hiermee veilig kunt beginnen.
De meest voorkomende plaatsenschema's gaan fout als je verschillende kleuren in de war brengt. Hoe meer kleuren u gebruikt, des te lastiger het wordt om ze allemaal onder controle te houden. Dus om te beginnen, voeg gewoon een extra kleur toe bovenop je basis in grijstinten, die gebruikt zal worden om dingen als links, enkele koppen, menu's, knoppen enzovoort te markeren. Je markeringskleur kan blauw, groen, rood of wat je maar wilt zijn.
Kies uw markeerkleur door eerst een kader over uw basis te leggen, zodat u kunt peilen hoe uw kleur eruitziet in verhouding tot alle elementen. Open vervolgens uw kleurenkiezer en klik in het midden van de rechterbovenhoek van de kleurenkaart.
Verplaats de schuifbalk omhoog en omlaag en kies een kleur waarvan u denkt dat deze goed werkt voor uw ontwerp.
Op dit punt werk je nu met drie basiskleuren; je achtergrond, tekst en een hoogtepunt. Je kunt en zou meer dan één highlight-kleur in de toekomst moeten gebruiken, maar denk er nu over als jongleren. Je werkt al met drie jongleerpinnen, dus voel je comfortabel met alleen deze drie en voeg meer toe aan de rotatie als je zelfverzekerd bent.
Je hebt net geleerd hoe je een "tint"In een notendop is een tint een basiskleur. Wanneer u de schuifbalk omhoog en omlaag beweegt, ziet u de"H"de waarde in uw kleurenkiezer verandert.
"H" staat voor tint en als u eenmaal uw markeringskleur hebt gekozen, is het nummer in dat vak zijn tint.
Als je ergens twijfels hebt over welke markeerkleur je wilt gebruiken, kies dan blauw. Ernstig. Blauw is vaak de meest flexibele kleur om mee te werken en past op het hoogste aantal sitetypen. Kleuren zoals paars en geel kunnen erg prettig zijn, maar kunnen ook snel opzichtig worden als ze verkeerd worden gebruikt.
Aan de andere kant kun je bijna alles doen met blauw als highlight-kleur en je kunt niet teveel fout doen. Als je niet zeker weet waar je moet beginnen met leren of welke kleur je in een project moet gebruiken, val dan gewoon terug op blauw. Het specifieke blauw dat je kiest, kan overal zijn van een marineblauw (tint 235) tot een aqua (tint 190) en je bevindt je in een vrij veilig gebied.
Voor mijn voorbeeldlay-out heb ik een tint gekozen van 205. Wanneer je je hoogtepuntkleur hebt bereikt, ga je gang en voeg je deze toe aan je ontwerp, waar je ook denkt dat het nodig is. Als u de markeringskleur op knoppen of een gebied met tekst erboven gebruikt, wijzigt u ook de tekstkleur. In dit geval heb ik tekst over gemarkeerde gebieden gewijzigd in wit.
Zodra je je highlight-kleur hebt gekozen, verlaat je de schuifregelaar (tint) -balk vanaf dat punt. Je hebt extra kleuren nodig voor je ontwerp, maar het gaat allemaal om variaties op die ene markeerkleur die je al hebt gekozen om dingen eenvoudig te houden.
Als u kleurvariaties wilt maken, sleept u rond in het kaartgebied van de kleurenkiezer.
Gebruik dit soort kleurvariaties voor zaken als:
De rechterbovenhoek van de kleurenkaart is het land met hoge octaankleuren. Kleuren in de rechterbovenhoek zijn vergelijkbaar met Formule 1-racewagens; ze kunnen verbazingwekkend presteren en zijn zeer aantrekkelijk, maar over het algemeen kost het veel ervaring om ze goed te gebruiken. Zonder die ervaring kunnen ze ongelukken veroorzaken, dus het is het beste om je tanden te knippen op kleuren die meer afgezwakt zijn.
Daarom heb ik je in het derde deel van deze tutorial gevraagd om op de kleurenkaart in het midden van de rechterbovenhoek te klikken voordat je je highlight-kleur selecteert, om er zeker van te zijn dat je bent begonnen met een relatief ingetogen kleur.
Om te illustreren, kijk wat er gebeurt als ik de kleur van ons ontwerp tot nu toe alleen maar verander, zonder de kleurenkaart aan te raken.
Het ziet er nog steeds best goed uit, toch? Maar als ik de kleurenkaart naar de rechterbovenhoek sleep, is het opeens niet zo leuk.
Ouch my eyes !! Als u ervoor wilt zorgen dat u het netvlies van uw bezoekers niet verschroeit, volgt u een algemene richtlijn om dingen te verfraaien door uit de rechterbovenhoek van de kleurenkaart te blijven.
In de laatste twee secties heb je geleerd om een paar verschillende aspecten van de kleurentheorie toe te passen. Je hebt geleerd om mee te werken:
Wanneer u door het kaartgebied van het gebied van de kleurenkiezer sleept, ziet u de "S" - en "B" -waarden veranderen, die staan voor "Verzadiging"en"Helderheid"Je ziet ook dat het tintnummer hetzelfde blijft. Je maakt dus kleurvariaties door de verzadiging en helderheid van je originele tint aan te passen..
Verzadiging is hoe levendig je kleur wordt uitgedrukt. Denk bijvoorbeeld aan "Mijn shirt was doordrenkt met gemorste rode wijn". Op een typische kleurkiezer wordt verzadiging bepaald door hoeveel wit wordt gemengd met uw basistint. Hoe minder wit, des te verzadigd.
Wanneer u naar rechts sleept op de kleurenkaart, vermindert u de hoeveelheid wit en verhoogt u dus de verzadiging, zodat de waarde "S" hoger wordt. Wanneer u naar links naar die witte hoek sleept, verlaagt u de verzadiging, zodat de waarde "S" daalt.
Verzadiging op een standaard kleurenkiezer kaartDeze vermenging van wit met je originele tint wordt ook wel een "tint"De term komt van verfmenging, waarbij een witte verf wordt gemengd met een gekleurde verf.
Helderheid is hoeveel zwart er in je kleur is gemengd. Hoe minder zwart, hoe meer helderheid.
Wanneer u omhoog sleept op de kaart, vermindert u de hoeveelheid zwart, verhoogt u de helderheid en stijgt de waarde "B" op de kleurkiezer. Wanneer u naar beneden sleept, verhoogt u de zwartwaarde en de waarde "B" gaat omhoog.
Zwart mengen met je originele tint wordt ook wel een "schaduwDit komt ook door verfmenging, waarbij een zwarte verf wordt gemengd met een gekleurde verf.
Wanneer u grijs in uw kleur mengt, wordt dit een "toonAls u de rechterbovenhoek verlaat zoals hierboven, verlaagt u zowel de verzadiging als de helderheid, die zowel wit als zwart (grijs) toevoegt, en dus een toon creëert. Dus in principe kunnen zowel uw verzadiging als helderheid minder zijn dan 100%, dat is een toon.
Nogmaals, deze term komt uit verfmenging, waarbij een grijze verf wordt gemaakt en vervolgens gemengd met een gekleurde verf. Dit is ook waar de zin in "toon dingen naar beneden"komt uit. Koel he?
EEN "monochromatisch"kleurenschema is waar je een basishelm mee maakt en uitbreidt tinten, tinten en tinten. Je hebt net geleerd wat al deze termen betekenen in een praktische omgeving. Dus door een hooglichtkleur te selecteren en er variaties op te maken, hebt u feitelijk een monochroom kleurenschema gemaakt.
Blijf je monochrome kleurenschema's oefenen op een basis in grijstinten totdat je echt zelfvertrouwen hebt. Probeer ze te maken met verschillende tinten als uw markeringskleur, experimenteer om te zien hoe het de instellingen voor verzadiging en helderheid verandert die u kunt gebruiken.
Als je je op je gemak voelt, ga je verder met het toevoegen van een extra markeerkleur. Ik raad aan om oranje en blauw te proberen tijdens je eerste optreden, omdat dit de makkelijkste manier is om mee te werken. Probeer dan groen en blauw, wat in mijn ervaring de op één na makkelijkst is. Beide combo's zijn vaak een hit bij klanten en klanten.
Het allerbeste wat u kunt doen om uw begrip van kleurenschema's voor het web aan te zwengelen, is uzelf een Color Sampler-browserextensie zoals Colorzilla eigen te maken en deze te gebruiken om te onderzoeken hoe ervaren ontwerpers het doen. Terwijl u op internet rondkijkt, kunt u bij het bekijken van een kleurenschema dat goed oogt de kleurnampler uitproberen en de kleuren bekijken die op de pagina worden gebruikt. Bekijk voor elke kleurtoon die je neemt, wat verzadigings- en helderheidsniveaus het beste werken. Let ook op welke kleuren in combinatie met anderen werken.
Als u twijfelt, kunt u altijd terugvallen op uw "veiligheid eerst" -richtlijnen en bent u vanaf hier veilig voor de "BLECH".
Accentsconagua