Hoe u een professionele uitstraling met kleur krijgt
Hoe ziet een ontwerp er gecoördineerd, gepland en professioneel uit? Het antwoord is: 'kleur' .
Niet elk project heeft neutraal bedrijfsblauw nodig om er professioneel uit te zien. Planningskleur betekent een kader creëren dat beschrijft welke kleuren moeten worden gebruikt en hoe ze moeten worden gebruikt.
Kleur is het meest gladde ontwerpelement. "Goede" kleur is zo nauw verbonden met ongrijpbare zaken als persoonlijke smaak en intuïtie, maar ook met technische overwegingen zoals contrast en monitorkalibratie.
Maar kleur is van vitaal belang voor de inhoud . Als u een website belangrijk genoeg vindt om tijd te besteden aan het verfijnen, zullen lezers het waarschijnlijk belangrijk vinden om tijd te besteden aan lezen. Goede kleurkeuzes maken dat mogelijk.
In dit artikel bespreken we enkele technieken om prachtige kleurenpaletes voor uw webontwerpen te bereiken .
De beste manier om een website ongepland te laten lijken, is door de kleuren willekeurig te kiezen.
Zelfs wanneer bezoekers de startpagina van een website voor de eerste keer doorbladeren, beïnvloeden de kleuren hun houding ten opzichte van de inhoud . Is deze website spannend? Geruststellend? Daring? Bland? Politieke? Formeel?
Kleur heeft invloed op hoe mensen interpreteren wat ze zien, net zo goed als typografie.
Het vinden van de juiste kleuren is niet eenvoudig, maar het proces kan systematisch zijn.
Een goede ontwerpstrategie heeft betrekking op een kleurenschema (dwz een reeks kleuren die is geselecteerd om een stemming of bericht over te brengen) en een indeling van dat schema.
Laten we zeggen dat je gevraagd werd om een professionele website te ontwerpen. (En dit kan heel goed een drinkgame worden: neem elke keer als de klant het woord 'professioneel', 'schoon' of 'modern' gebruikt een foto. Twee foto's voor 'Ik vind deze andere website leuk.' Kopieer het. ').
Het kleurenschema is afhankelijk van de specifieke aard van de website. Zowel banken als bloemisten kunnen bijvoorbeeld professioneel uitziende websites hebben.
Maar mensen kunnen minder geneigd zijn om bloemen te kopen van een website die bedrijfsblauw en oceaangrijs is. En stel je de Bank of America-website voor in lila en geelgroen.
Een "professioneel" ontwerp vertelt bezoekers dat ze een website hebben gevonden die het onderwerp serieus neemt, zelfs als dat onderwerp luchtig is. Wat de tinten en waarden ook zijn, 'professioneel' betekent gecoördineerd, gepland en doordacht .
Ga grijswaarden
De beste manier om met kleur te werken is om met geen enkele te beginnen.
Het verwijderen van kleur uit een ontwerp onthult fundamentele problemen die moeten worden aangepakt voordat u zich zorgen maakt over welke schaduw van chartreuse het beste werkt. Als het ontwerp niet goed voelt in zwart en wit, is het tijd om wijzigingen aan te brengen.
Heeft elke pagina een duidelijk doel? Leidt de ontwerpgids lezers door de inhoud? Is de inhoud boeiend, inspirerend of informatief? Zijn de kopjes duidelijk? Vormen de links een contrast met de andere tekst? Kleur verbetert deze effecten, maar problemen met lay-out, type en organisatie kunnen niet alleen op basis van kleur worden opgelost .
Om een herontwerp te doen, zuigt u eerst de kleur eruit. De simpele handeling van het uitwassen van oververzadigde voorverkiezingen laat echt zien waar een website staat. (Eigenlijk moet je echt een herontwerp starten door je doelen en inhoud opnieuw te evalueren, maar dat is een ander verhaal.)
Soms is het verwijderen van kleur een oplossing op zich .
Ik heb ooit met een webontwerpbureau gewerkt om hun eigen website opnieuw te ontwerpen. De eigenaren waren persoonlijk over het project en wilden het graag goed doen. Maar als je denkt dat ontwerpen voor jezelf moeilijk is, probeer het dan te doen door de commissie. Tegen het einde staarden we met z'n drieën naar een screenshot van de negende trek na sluitingstijd over een paar drankjes.
Abrupt maakte ik de lagen van Photoshop plat en drukte op "Desaturate" en veranderde het levendige koper-en-marineblauw in grijstinten. Tot ieders verbazing werkte het.
Tegen het einde van de week hadden we een "warm" grijs ontwerp met rode accenten. We wisten dat we een winnaar hadden toen vorige klanten hen complimenteerden met de nieuwe look en er meer telefoontjes binnenkwamen van potentiële klanten.
Analyseer uw kleurenschema met de Photoshop-test "squint" :
- Maak schermafbeeldingen van minimaal drie pagina's van uw website. Open ze in Photoshop.
- Dupliceer de achtergrondlaag in elk screenshot ( Laag → Duplicaat Laag , of Command + J op een Mac, of Control + J op Windows).
- Pas een Gaussiaanse vervaging van ongeveer 10 pixels toe op de nieuwe lagen.
- Ga naar Afbeelding → Aanpassingen → Posterize . Gebruik 8 tot 12 niveaus of ga naar Filter → Pixellate → Mozaïek . Gebruik 15 tot 30 pixels.
Dit laat zien welke kleuren echt dominant zijn. Hoe dominanter de kleuren, hoe sterker het schema wordt afgedrukt in de geest van de bezoeker.
Zodra de lay-out en organisatie van de website zonder kleur werken, is het tijd om een palet te kiezen. Maar welke? En hoeveel te gebruiken?
Lijn je kleuren uit
Kleur heeft drie eigenschappen: tint, verzadiging en waarde (soms lichtheid genoemd).
Verzadiging is hoe rijk een tint is: neonkleuren zijn erg verzadigd, terwijl pastelkleuren minder verzadigd zijn.
Waarde geeft aan hoe helder een kleur is (bijvoorbeeld in de buurt van zwart of wit).
Tint verwijst naar naar welk deel van de regenboog een kleur behoort, zoals rood of groen; het is het eigendom waar mensen over struikelen.
Niets doodt een kleurenschema zoals botsende tinten. Een ontwerp kan honderd tinten van één tint hebben, van pastel tot neon, en het ziet er nog steeds uit als gepland. Maar als de tinten verkeerd worden gemengd, valt het schema uit elkaar.
Een manier om botsende tinten te voorkomen, is door ze te scheiden met een derde kleur. Een buffer van zwart, grijs of wit is het veiligst, omdat grijsschaal tintneutraal is: u kunt elk deel van de regenboog coördineren met zwart, wit en grijs.
Een tweede oplossing is om de tinten in verschillende verhoudingen te gebruiken . Als een kleurenschema violet en bruin heeft, kan het ontwerp veel schakeringen van bruin hebben met een paar helder violette accenten.
Een andere optie is om de waarden te variëren. Zuiver blauw en helder cyaan maken een zo-zo combinatie, maar donkerblauw (marine) en licht cyaan (hemelsblauw) contrast genoeg om elkaar af te zetten. Rood en violet kunnen verschillend genoeg zijn om niet te botsen maar dichtbij genoeg om niet opzettelijk te lijken. Lichtrood (roze) en een donker violet brengen onderscheid.
Helaas is het vermijden van een slechte kleurencombinatie niet hetzelfde als het kiezen van een goede. Een kleurenschema is niet succesvol als u tevreden bent, maar als uw publiek zich prettig voelt.
Ontdek geweldige schema's
Waar komen geweldige kleurenschema's vandaan? Met honderden kleuren en duizenden combinaties, hoe beslis je?
Ontwerpers van kleine statische websites moeten kleuren uit de inhoud halen . Dat betekent meestal foto's.
Het ontwerp van een acht pagina's tellende website die ik recent gebouwd heb, werd bekroond met een uitgebreide metalen steiger tegen een indigo-hemel. Door de eyedropper-tool van Photoshop in te stellen op een gemiddelde van 5 × 5, bemonsterde ik de donkerste en lichtste delen van de lucht en gaf ik de zijbalk, links, kopjes en voettekst die paar schakeringen.
Toen de klant vroeg hoe we een website zo goed en zo snel konden ontwerpen, was onze reactie: "Dit is wat we doen." Maar de kleur was er al. Ik moest er gewoon naar zoeken.
Hoewel stockfoto's voor snelle websites werken, moeten ontwerpers van grotere en dynamischere websites inspiratie zoeken bij hun publiek .
Een uitstekende indicatie van welke kleuren aantrekkelijk zijn voor uw publiek, is hun dagelijkse kleding. Ontdek wat uw bezoekers dragen en u weet welke kleuren ze comfortabel maken. Als uw website gaat over, laten we zeggen, topsport, zoek dan uit wat mensen aan games dragen in plaats van hun dagelijkse banen.
Als je het geluk hebt om foto's van je doelgroep te krijgen, bekijk ze dan massaal; je wilt een gemiddelde van de menigte. Maar als foto's niet beschikbaar zijn, ga dan winkelen.
Kledingontwerpers die in bedrijf kunnen blijven, hebben een uitstekende kleurgevoeligheid voor elke stemming en levensstijl. Het hoeft niet 5th Avenue haute couture te zijn. Een Google-zoekopdracht naar 'campingwinkels', 'babykleren', 'ski-en badkleding' en 'informeel leven' onthult veel goede kleurencombinaties.
Mensen dragen kleding volgens hun smaak. Als u kleuren gebruikt die ze leuk vinden, voelen ze zich prettiger op uw website.
Gebruik texturen
Lichte variaties in tint, verzadiging of waarde creëren texturen .
Monochromatische structuren (bijvoorbeeld texturen met slechts één tint) en patronen bieden de meeste websites een subtiele dimensie zonder te botsen.
Vooral eenvoudige textuurachtergronden zijn eenvoudig te bouwen:
- Maak een foto van een binnenmuur, of iets dat kaal is maar ruw aanvoelt.
- Open het in Photoshop.
- Dupliceer de achtergrondlaag en noem deze "textuur 1".
- Vul de achtergrondlaag met kleuren uit je kleurenschema.
- Zet de blend-modus van de "texture 1" -laag op "" Soft Light "en de dekking op 30%.
- Probeer het uit op uw website. Als het er niet goed uitziet, speel dan met de dekking van de laag.
De naam van de laag is opzettelijk. Misschien speel je met meer dan één foto, maar vermijd het om de lagen namen te geven zoals 'muurtextuur' of 'papierstructuur'. Je wilt je concentreren op het effect op je website, niet waar het vandaan komt.
Een goede regeling maken
Een goed kleurenschema heeft bepaalde kenmerken. Zie het als een raamwerk of een reeks richtlijnen om een ontwerp consistent te houden. Het schema zou:
- Lijst twee tot vijf tinten die goed samen werken,
- Beschrijf in hoeverre een ontwerp kan afwijken van die tinten,
- Account voor tinten van elke tint,
- Werk goed tegen zwart en wit.
Hier is een voorbeeld:
De ontwerper begon met het kiezen van voornamelijk warme tinten die goed aanvoelden. Er was geen logica, alleen het vage doel van 'herfst' en haar intuïtie.
In Photoshop zorgden twee lagen voor schaduwen van zwart en wit. De overvloeimodus van elke laag is ingesteld op 'Zacht licht'. Puur zwart was te donker voor de meest rechtse kleur, dus de dekking van de zwarte laag is aangepast.
Om de kleuren te verenigen, werd een nieuwe laag gemaakt en gevuld met puur rood. De mengmodus was ingesteld op "Kleur" en de dekking nam af tot ongeveer 40%. (Opmerking: de volgorde van de lagen is erg belangrijk: kleuren worden gewijzigd als de laag 'tint' onder de zwart-witlagen wordt geplaatst.)
Dit gaf de ontwerper 15 kleuren om uit te kiezen. Ze koos er vier uit met een reeks tonen en tinten. Hier staan de kleuren tegen wit.
Variaties zijn belangrijk, dus de ontwerper heeft geëxperimenteerd. Hoe zouden de kleuren eruitzien tegen zwart? Wat gebeurt er als we ze iets verduisteren?
Wat als we ze helemaal hebben veranderd? Als u Afbeelding → Aanpassingen → Kleurtoon / verzadiging op de laag "tint" gebruikt, krijgt u een duidelijk herfstachtige uitstraling, maar de kleuren worden nog steeds gecoördineerd. Misschien kan dat palet voor Pasen worden gebruikt.
Het eindresultaat is een kleurenschema: een verwijzing die verschillende (maar niet te verschillende) tinten en een reeks tinten biedt die goed samenwerken. Download het voorbeeldbestand.
Gebruik het Framework
Zullen de grafieken, foto's en pictogrammen van morgen werken met het kleurenschema van vandaag? Welke afbeeldingen heeft een website nodig in zes dagen, zes weken of zes maanden? Het is moeilijk te zeggen, maar inhoud is een onderdeel van je kleurenschema .
U kunt dit probleem oplossen door uw afbeeldingen volgens het kleurenschema te laten volgen of door het kleurenschema uw afbeeldingen te laten volgen.
Het handhaven van uw kleurenschema, zelfs met foto's, is een geweldige manier om een uniforme uitstraling op alle pagina's te krijgen .
De eenvoudigste oplossing is om afbeeldingen te vinden die bij uw schema passen. Vergeet niet dat een kleurenschema ruimte biedt voor wiebelen: zolang de grote tinten van een afbeelding passen, zou de afbeelding moeten werken. Op veel fotosites kunt u zoeken op kleur (dit betekent tint: meestal voorverkiezingen zoals rood, groen en blauw).
Als een afbeelding niet in uw kleurenschema past, geeft u het een tint:
- Open de afbeelding in Photoshop.
- Maak een nieuwe laag. Zet de mengmodus op "Kleur".
- Vul die laag met een van de kleuren uit je palet, bij voorkeur degene die het meest overeenkomt met de afbeelding.
- Zet de dekking van de kleurlaag op 50%.
- Speel met de dekking totdat je een goede balans hebt tussen de originele kleur van de afbeelding en het kleurenpalet van je website.
- Deze techniek werkt voor foto's, illustraties en pictogrammen, alles op basis van pixels. (Als je de afbeelding niet bezit, zorg dan dat je toestemming krijgt voordat je deze wijzigt. Je verbetert mogelijk de weergave op je website, maar je neemt nog steeds vrijheden met de kunst van iemand anders.)
Professioneel uitziend
Geen enkel stel kleuren ziet er op zichzelf "professioneel" uit. Integendeel, u moet een proces volgen om een gecoördineerd, gepland gevoel te bereiken.
Waar de website ook over gaat, het publiek zal weten dat het zichzelf serieus neemt.
Tips
- Als je denkt dat je een goed kleurenschema hebt, probeer het dan minstens een week uit. Het evalueren van kleur vereist intuïtie die zich in de loop van de tijd opbouwt. Geef jezelf de tijd om de persoonlijkheid van het schema volledig te absorberen.
- Als je denkt dat je een goed kleurenschema hebt, laat het dan niet muf worden. De smaak van uw bezoekers, zoals die van u, verandert in de loop van de tijd. Maak een notitie om de kleuren na vier maanden te bekijken. Vraag dan, zijn ze nog steeds geschikt? Zo nee, wat is er veranderd? Welke factoren zullen uw aanpassing beïnvloeden?
- Gebruik spaarzame kleuren met schitterende kleuren. Een sprankeling van iets iriserend trekt bezoekers daarheen, maar als ze het overal zien, dwalen ze doelloos rond.
- Sommige mensen denken dat kleuren een klein bereik hebben. Laat wat speelruimte om je ontwerpen extra diepte te geven.
- Vermijd zuivere primaire kleuren zoals rood, groen, blauw en geel. Geef ze een zweem van echt karakter: rood, maar licht violet, blauw met een vleugje groen, "warm" geel met een oranje tint.
- Zorg ervoor dat je kleuren werken als ze vervaagd zijn. Als u rood kiest, moet u er rekening mee houden dat lichtrood vrouwelijk en donkerrood kan zijn als roest of bloed. Geel loopt van vervaagd zonlicht naar donkerbruin. Donkerblauw is mysterieus en lichtblauw is rustig - of elektrisch als u het oververzadigt.
- Mac-gebruikers, stel je scherm in. Ga naar 'Systeemvoorkeuren' en klik op 'Universele toegang'. Stel uw weergave in op 'Gebruik grijsschaal'. Dit is ook handig als u zin hebt in film noir.
- Het maakt niet uit hoe actief u uw website wilt laten voelen, gebruik een neutrale achtergrond. Zwart, wit en grijs werken goed met bijna elke tint.
- Als u wilt dat kleine tekst (zeg 14 punten of minder) overeenkomt met een groot kleurvlak, maakt u de tekst een paar tinten donkerder dan normaal. Hiermee worden de lichttellers binnen de tekens gecompenseerd.
- Gebruik meer tinten minder tinten.
- Wat "er goed uitziet" is intuïtief. Maar intuïtie is een strijd tussen je ego, de kieskeurigheid van je publiek en de autoriteit van de mensen die het project financieren.
- Gebruik gedempte achtergronden om content te laten opvallen:
Exclusief geschreven voor WDD door Ben Gremillion . Hij is een freelance webdesigner die heeft geleerd dat de inflexibiliteit van de deadline op het laatste moment omgekeerd evenredig is met het aantal gewenste functies.
Hoe creëer je succesvolle kleurenschema's? Wat werkt en wat werkt niet voor jou?