Share
Welkom bij de tiende les van onze Web Design for Kids-serie, alles over kleur.
In deze tutorial gaan we in op kleurentheorie, verschillende manieren om kleuren in onze CSS te gebruiken, de betekenis van bepaalde kleuren en bekijken we hoe we de perfecte kleuren voor onze sites kunnen selecteren. We maken enkele tips voor het gebruik van kleur op internet.
Vergeet niet om vragen te stellen in het opmerkingengedeelte onderaan deze pagina!
Kleurentheorie omvat een heleboel dingen, maar de belangrijkste focus is kijken naar hoe kleuren zich in een ontwerp met elkaar gedragen. We noemen een groep kleuren die gekozen is om samen a te gebruiken Kleurenpalet. Een goed ontworpen kleurenpalet heeft kleuren die aanvulling elkaar en hebben goed contrast en trilling. We zullen praten over wat deze woorden in een moment betekenen.
Het kiezen van de juiste kleuren en weten waarom bepaalde kleuren werken en andere niet, kunnen bepalen of ons ontwerp wel of niet werkt. Door een slechte kleurkeuze kan onze site moeilijk te gebruiken zijn, of onze tekst is onleesbaar en de gebruiker verlaat onze website.
Voordat we te ver in onze tutorial stappen, zullen we het hebben over enkele basistintkleuren die we veel zullen noemen. We gebruiken deze voorwaarden om ons te helpen beter te begrijpen wat elke kleur zo uniek maakt.
EEN tint is(min of meer) de kleur van een object. Wanneer we dingen als "rood" of "geel" bedoelen, hebben we het over hun tint.
Kleur verzadiging verwijst naar hoe levendig, of sterk, een kleur is. Een lage verzadiging creëert een kleur die vervaagd lijkt, terwijl een hoge verzadiging produceert en een zeer levendige kleur.
Helderheid verwijst naar de lichtheid of duisternis van een kleur. Dit gaat van zwart (geen helderheid) naar wit (volledige helderheid).
Het kleurenwiel is gebaseerd op rood, geel en blauw en is redelijk bekend bij kunstenaars. Als ontwerpers begrijpen we hoe kleuren worden gemaakt, zodat we een beter idee krijgen van welke kleuren aanvulling elkaar en waarom.
Het linkerwiel op de auto hieronder toont de drie primaire kleuren. Met deze drie kleuren kunnen we alle andere kleuren maken.
Het wiel rechts van de auto hierboven wordt weergegeven secundaire kleuren ook: kleuren die zijn gemaakt door de primaire kleuren te mengen. Blauw en geel worden bijvoorbeeld groen, terwijl blauw en rood paars worden.
Het linker kleurenwiel op de auto hieronder toont nog een laag: tertiaire kleuren. Dit zijn kleuren gemaakt door a te mengen primair en tweede kleur. Blauw mengen met paars bijvoorbeeld, creëert een donker blauwachtig paars.
Er zijn een aantal kleursystemen (manieren om kleuren te beschrijven), maar alleen bepaalde systemen zijn geschikt voor het web.
RGB staat voor "Rood Groen Blauw" en beschrijft hoe we kleuren bekijken op elektronische schermen. Deze drie kleuren kunnen worden gecombineerd om veel andere kleuren te produceren. De drie waarden worden op volgorde weergegeven en elk bereik van 0 tot 255.
lichaam achtergrond: rgb (138,138,226);
De bovenstaande CSS produceert een geeloranje achtergrond op een pagina. Binnen de haakjes ziet u verschillende rode, groene en blauwe waarden.
We hebben alleen een kleur gebruikt hexadecimaal waarde tot nu toe in deze serie, maar we kunnen op veel verschillende manieren een kleur in onze CSS gebruiken.
Bezoek deze site voor een snelle lijst met Hex- en RGB-waarden voor 500 specifieke kleuren.
HSL staat voor "Hue Saturation Lightness" en de waarde bestaat uit drie nummers in die volgorde.
We kunnen hetzelfde geeloranje op het hoofdgedeelte van een pagina aangeven met een HSL-waarde in plaats van de Hex- of RGB-waarden van de kleur:
body achtergrond: hsl (43,100%, 57%);
De eerste waarde hier, 43, vertegenwoordigt een hoek op een kleurencirkel. Dit is wat ons het geeft tint. Rood is 0 of 360 graden, terwijl groen 120 graden is en blauw 240 graden.
De tweede waarde geeft ons een percentage van verzadiging voor de kleur, waarbij 100% volledige verzadiging is.
De uiteindelijke waarde, lichtheid, bepaalt hoe licht of donker de tint is. 100% is wit, 0% is zwart en alles daar tussenin zal een combinatie van beide vormen.
Welke waarde we gebruiken in onze CSS is geheel aan ons, maar HSL-waarden zijn eenvoudiger te raden door een hoekwaarde te selecteren die tegen de klok in van rood (0) beweegt en vervolgens het percentage verzadiging en lichtheid toe te voegen dat we willen.
Er is een beperkt aantal kleuren met namen die we kunnen gebruiken in onze CSS, geen getallen vereist.
lichaam achtergrond: groen;
Een volledige lijst van deze kleurnamen is hier te vinden.
Als we ooit een Hex-waarde hebben en de RGB- of HSL-waarde van die kleur nodig hebben (of omgekeerd!), Zijn er enkele handige tools die dit werk voor ons doen, zoals rgb.to en Colorrrs.
Kleuren hebben veel betekenis. Afhankelijk van het land waarin je woont, kan een bepaalde kleur worden gebruikt om gevaar, liefde, geluk of kwaad te betekenen. Kleuren kunnen gebruikers laten reageren met bepaalde gevoelens, dus een goed begrip hiervan is belangrijk om onze boodschap aan de gebruiker te communiceren.
Bekijk deze grafiek die laat zien hoe verschillende kleuren verschillende dingen betekenen in verschillende culturen.
Laten we kort ingaan op enkele betekenissen achter de drie primaire kleuren: geel, rood en blauw.
Geel trekt meer de aandacht van een gebruiker dan elke andere kleur en doorgaans staat voor geluk en zonneschijn. Aan de andere kant kan geel ook "voorzichtigheid" betekenen, zoals te zien is bij veel verkeersborden.
Het gebruik van geel op het web kan zeer opvallend zijn, dus het is het beste om het niet te veel te gebruiken en zorg ervoor dat we alleen belangrijke informatie benadrukken.
Afhankelijk van het land waarin je woont, kan rood alles betekenen van gevaar, tot woede, tot energie, tot liefde en geluk. Wat het ook mag betekenen, rood wordt altijd gebruikt om een te vertegenwoordigen extreem gevoel of actie.
In webontwerp wordt rood vaak gebruikt voor communicatie over verwijdering of fouten. Het is een gewaagde kleur die de aandacht van de gebruiker trekt, zodat deze goed als accentkleur kan worden gebruikt. Te veel rood op een site kan overweldigend zijn en het kan moeilijk zijn om te vertellen wat vooral belangrijk is.
Blauw staat voor het grootste deel zowel voor kalmte als verdriet en is een zeer populaire kleur op het internet.
Het gevoel dat wordt gecreëerd door het gebruik van blauw in ontwerpen zal sterk afhangen van welke tint en kleur we selecteren. Terwijl een donkerblauwe sterkte en betrouwbaarheid zal communiceren, zal een lichtere blauw meer leuk en vriendelijk zijn.
De meeste sites hebben een reeks kleuren die werken om hiërarchie te geven en de gevoel van een ontwerp. Onze kleurselectie kan net zo belangrijk zijn als alle andere ontwerpbeslissingen die we tot nu toe hebben moeten nemen, dus we moeten goed in de gaten hebben welke kleuren samenwerken, of we een goed contrast hebben bereikt op de hele pagina, en als de kleuren hetzelfde gevoel of dezelfde betekenis hebben als onze inhoud.
Hier is nog een blik op het hoofdkleurenpalet dat in de tutorialserie Tuts + Town wordt gebruikt:
De lichtere kleuren worden gebruikt als achtergrond, terwijl de donkere kleuren worden gebruikt voor tekst of om bepaalde secties te markeren.
Over het algemeen zijn kleuren aanwezig aan de overkant van elkaar op het kleurenwiel worden als een lust voor het oog beschouwd. Dit zijn complementair kleuren: in combinatie produceren ze een grijstint. Het is mogelijk dat kleuren die naast elkaar op het kleurenwiel staan goed samenwerken, maar het kan even duren om verzadiging en helderheid aan te passen om de juiste koppeling te krijgen.
We hebben ook een beetje aangeraakt contrast in de vorige zelfstudie over basisbeginselen van het ontwerp, maar laten we nog een korte blik werpen.
Een juist contrast vermindert de vermoeide ogen en maakt de visuele hiërarchie duidelijk. Het beste voorbeeld van een goed versus slecht contract kan worden gezien door bepaalde combinaties van achtergrond- en tekstkleuren te vergelijken.
De afbeelding hierboven toont een slecht contrast aan de linkerkant met een beter contrast aan de rechterkant. De tekst met slecht contrast is moeilijk te lezen en doet pijn aan onze ogen, waardoor een wazig effect ontstaat.
Er zijn tools die ons voorzien van lijsten met mooie kleurenpaletten om uit te kiezen, wat een echte tijdbesparing kan zijn en als grote inspiratie kan dienen.
Coolors.co is een van de gemakkelijkst te gebruiken kleurselectoren die momenteel beschikbaar zijn.
Het levert ons prachtige kleurenpaletten die we kunnen aanpassen en aanpassen door op de spatiebalk te drukken.
Adobe Color is een ander kleurselectiegereedschap dat uitstekend gebruikmaakt van dat geweldige kleurenwiel waarover we eerder hebben gesproken.
We kunnen wijzigingen aanbrengen in het kleurenwiel, ons palet bepalen en vervolgens verdere aanpassingen aanbrengen aan elke afzonderlijke kleur.
Met Adobe Color kunnen we ook onze favoriete paletten opslaan en door populaire, vooraf geselecteerde paletten bladeren.
Wanneer u kleuren voor het web kiest en deze toepast op elementen op de pagina, is het belangrijk om een paar dingen in gedachten te houden om er zeker van te zijn dat deze kleuren de gebruikerservaring verbeteren..
Contrast is zo belangrijk dat je bij twijfel de veiligste optie kiest; zelfs als het een beetje "saai" lijkt! Enkele van de belangrijkste taken die we als ontwerpers hebben, zijn ervoor zorgen dat dingen functioneel, gebruiksvriendelijk en gemakkelijk leesbaar zijn. Slecht contrast voorkomt dat onze gebruikers onze prachtige inhoud kunnen lezen.
Dus hoewel het goed is om avontuurlijk te zijn met uw kleurkeuzes, mogen deze keuzes nooit afstand nemen van de algemene werking van de site of afleiden van de inhoud..
Selectiehulpmiddelen voor kleurpalet, zoals Coolors, bieden ons vaak vijf kleuren. Met vijf kleuren hebben we een of twee dominante kleuren en een paar minder dominante kleuren voor zaken als knoppen en links.
Met veel meer dan vijf verschillende kleuren lopen onze ontwerpen het risico inconsistent en moeilijk te volgen te zijn; hoewel wit, zwart en grijs hier niet moeten worden geteld.
Het is erg belangrijk om niet af te wijken van kleurgebruik dat door veel mensen wordt geaccepteerd. De meeste mensen zijn bijvoorbeeld groen voor 'toevoegen' en rood betekent 'verwijderen'. Dit omkeren op onze website zou een slechte ontwerpbeslissing zijn omdat het niet is wat verwacht wordt en waarschijnlijk gebruikers zal verwarren.
In deze tutorial hebben we de theorieën en regels van kleur besproken en hoe ze op de juiste manier kunnen worden geselecteerd en gebruikt op internet. Elke kleur heeft zijn eigen boodschap. We moeten ervoor zorgen dat dit bericht overeenkomt met dat van onze inhoud door goed doordachte paletkeuzes.
Vervolgens maken we onze serie af met een paar laatste gedachten en verschillende manieren waarop we ons harde werk online kunnen delen met vrienden en familie.
Ik zie je in de stad!
Accentsconagua