Yksi tärkeimmistä tekijöistä luotaessa ainutlaatuista ja tunnistettavaa designia on väri. Oikea värimaailman valinta voi määrittää verkkosivuston onnistumisen tai epäonnistumisen. Kun vierailija katsoo ensimmäistä kertaa verkkosivua, valitsemasi värit lähettävät hänelle pikaviestin kyseisestä sivusta. Onneksi on monia työkaluja, joiden avulla voit valita oikean värimaailman. Tässä on viisi parasta.
1. Viileämpi
Adoben Kuler on pitkään tunnustettu ammattimaisen web-suunnittelijan parhaaksi avustajaksi. Toisin kuin kilpailijat, täällä on suuri yhteisö, ja voit jakaa luotuja paletteja tai ottaa muiden ihmisten värimalleja ja muokata niitä tarpeidesi mukaan. Kommunikoidaksesi yhteisössä sinun on rekisteröidyttävä ja hankittava Adobe ID. Kulerin värit ovat edustettuina useissa muodoissa, mukaan lukien RGB, CMYK, LAB ja HSV.
Inspiraatio voi syntyä odottamattomimman tilaisuuden vaikutuksesta. Saatat esimerkiksi törmätä kauniiseen valokuvaan, jossa on houkutteleva värimaailma. Tämä väripalettigeneraattori luotiin vain tällaisten valokuvien käsittelyyn. Lataa tiedostoja JPG- tai PNG-muodossa ja saat yksityiskohtaisen avainvärien asettelun. Riippumatta siitä, mitä reaktiota yrität herättää vierailijoissasi, väripalettigeneraattori voi auttaa luomaan ainutlaatuisen ilmeen mille tahansa verkkosivustolle.
Yksittäiset värit eivät koskaan roikku tyhjiössä, ja jokainen sävy vaikuttaa ympäristöönsä. Contrast-A-työkalu käyttää erittäin teknistä lähestymistapaa paletin konfigurointiin, ja se tarjoaa yksityiskohtaista tietoa Luminance Ratiosta sekä kirkkauden ja värien eroista. Tämä on täydellinen työkalu, jos haluat luoda minimalistisen verkkosivuston, jossa on muutamia toisiaan täydentäviä värejä.
Tämän suositun Firefox-laajennuksen avulla voit määrittää yksittäisten värien merkityksen suoraan selaimessa ja mitata niiden välistä eroa. Yksittäisten värien valitsemiseen esivalituista sarjoista on olemassa "värimalliselain". Helppokäyttöinen ja erittäin monipuolinen ColorZilla-laajennus on kuin Sveitsin armeijan selainlaajennusten veitsi web-suunnittelijoille ja taiteilijoille.
Toisin kuin useimmat muut "väripyörän" väriteeman generaattorit, Colorotate näyttää paletin 3D-kartiossa. Kulerin tapaan käyttäjät voivat tallentaa ja muokata väriteemojaan sekä tarkastella muiden suunnittelijoiden tekemiä paletteja. Työkalu on integroitu suosittuihin suunnitteluohjelmiin Adobe Fireworks ja Photoshop.
Mitä tulee tehokkaaseen web-suunnitteluun, puhumme intuitiivisista käyttöliittymistä ja asetteluista, mutta värimaailmalla on yhtä paljon, ellei enemmänkin merkitystä. Tässä lueteltujen työkalujen pitäisi ohjata sinut oikeaan suuntaan valitaksesi upea väripaletti verkkosivustollesi ensimmäisellä kerralla. Verkosta löytyy muitakin hyödyllisiä työkaluja, mutta näistä voit aloittaa löytääksesi täydellisen arsenaalin, joka sopii henkilökohtaiseen tyyliisi. Onnea ja menestystä suunnitteluun!
Väripaletin valinta on aina vaikea tehtävä, oli kyseessä sitten nettisivujen tai mobiilisovelluksen suunnittelu. Älä valitse värejä huolimattomasti, koska hyvin valittu paletti määrittää tyylin koko sivustolle.
Joka kerta kun uutta web-suunnittelua kehitetään, kuluu paljon aikaa eri väriyhdistelmien valintaan. Vaihtoehtoiset väripalettityökalut voivat säästää aikaasi tulevaisuudessa.
Väripaletin valitsemiseen on olemassa suuri määrä sovelluksia, mutta tässä luettelossa valitsimme työkalut, jotka poikkeavat hieman tavallisista ohjelmista.
Sivusto, jolla on itsestään selvä nimi, jonne kerätään tietoa väristä ja esitetään yksityiskohtaisesti. Se on enemmän kuin kehittäjätyökalu, jossa on lisäyksiä ja vähennyksiä, liukuvärien luominen on käytettävissä tarkalla värikoodilla kaikissa mahdollisissa väriavaruuksissa. Tämä lähestymistapa on kätevä niille, joilla on vapaa-aikaa, sekä selittämätön rakkaus laskelmiin.
Ystävällinen ja lämmin "lamppu"palvelu, joka miellyttää sinua tapaamisen ensimmäisestä minuutista lähtien. Sivuston logiikka on, että valitset ”yhden värin”, ja palvelu tarjoaa siihen sopivia ratkaisuja: gradientin, valikoiman tummimpia ja vaaleimpia sävyjä, valitun värin hieman vaimeita tai kirkkaita sävyjä.
Toisin kuin aikaisemmissa palveluissa, tämä sivusto esittelee valmiita, valikoituja paletteja, jotka osoittavat, miten värit ovat vuorovaikutuksessa toistensa kanssa liitteenä olevissa valokuvissa. Meren aaltoja tai kukkia katsellessa hämmästyt, kuinka rikas luonto on luovassa impulssissaan ja kuinka heikko tietomme väristä on. Kaiken kaikkiaan tämä on arvokas resurssi niille, jotka vasta alkavat ymmärtää väriyhdistelmiä ja jotka rakastavat kauniita kuvia.
Kuten kirjoittaja kuvailee resurssiaan: "Tein 0to255-verkkosivuston työni yksinkertaistamiseksi." Verkkosuunnittelijat ja samankaltaiset ihmiset työskentelevät kukkien parissa joka päivä. Oikeaa valittaessa he tarvitsevat sen eri sävyjä, ja tämän palvelun avulla voit helposti säästää aikaa ilman, että sinun tarvitsee rasittaa itseäsi heksadesimaalikoodin muokkauksella.
Ratkaisu niille, jotka haluavat löytää värejä kuvista. Lataa vain kuva ja palvelu näyttää päävärien paletin heksadesimaalikoodilla.
Kuka saattaisi tarvita sovelluksen väriratkaisujen valintaan tabletille? Luultavasti niille, jotka eivät vain työskentele värien kanssa, vaan elävät sen kanssa, tai ihmisille, joilla on kyky synestesiaan. Sivusto tarjoaa samanlaisia, mutta hieman rajoitettuja käyttöliittymätoimintoja, jotka on suunniteltu tabletille. Valitettavasti sivustolla on joitain puutteita, esimerkiksi 3D-spektri, joka on sivuston ominaisuus, osoittautuu hankalaksi käyttää.
Amerikkalaisissa TV-sarjoissa he sanovat usein lauseen "Vain jos olisit viimeinen mies maan päällä", meidän tapauksessamme "jos sinulla ei ole grafiikkaeditoria käsillä". Kuiva, yleensä ei kiinnosta. Siinä ei ilmeisesti ole charmia tai halua olla vuorovaikutuksessa, tuotetta ei ole kehitetty pitkään aikaan.
Tätä sivustoa on vaikea kutsua yksinkertaiseksi, koska tekijät ovat sisällyttäneet kaiken mitä voi tarvita värien kanssa työskennellessä. Siinä on kaikki: laaja valikoima kokoelmia, kanavia, trendejä, erilaisia työkaluja kuvioiden luomiseen, värien etsimiseen kuvan mukaan. Yleensä kaikki, mitä sydämesi haluaa.
Yhteenveto:
Huolimatta värien valintapalveluista, Adobe Kuleria voidaan toimittajien mielestä kutsua parhaaksi, päätellen mahdollisuudesta valita väriyhdistelmiä.
Yksi tämän värisekoittimen tärkeimmistä eduista on kyky tallentaa valintasi, tarkastella valittuja värejä koko näytöllä sekä jakaa löytöjäsi ja katsoa muita. Ja niille, jotka eivät enää halua käyttää tätä palvelua hetkeäkään, on Photoshopin laajennus, jonka avulla voit käyttää ohjelmaa poistumatta editorista.
Digiaikaisen suunnittelijan ei tietenkään tarvitse rajoittua maaleista, musteista tai muista pigmenteistä saataviin väreihin, vaikka myös kuvataideteosten värin suhtautumisesta on paljon opittavaa. Ihmissilmä pystyy erottamaan miljoonia eri sävyjä, mutta joskus jopa kahden värin yhdistäminen voi olla haastavaa.
Hämmästyttävät väriominaisuudet
Tämä johtuu siitä, että suunnittelun sävyjen valinta on erittäin subjektiivinen ja vaatii tiettyä tietoa. Mitä suunnittelijoiden pitäisi tehdä, jos he haluavat koota kauniin väripaletin, joka voi tehdä asiakkaan onnelliseksi? Halusitpa tai et, parhaat väriyhdistelmät menevät muutakin kuin vain henkilökohtaisia mieltymyksiä, sillä niillä on hämmästyttävä kyky vaikuttaa mielialaan, tunteisiin ja havaintoihin, saada kulttuurinen ja henkilökohtainen merkitys ja herättää huomiota – sekä tietoisesti että alitajuisesti.
Suunnittelijoiden ja markkinoijien haasteena on tasapainottaa sävyjen monimutkaisia toimintoja houkuttelevan ja vaikuttavan väriyhdistelmien paletin luomiseksi. Tällöin väriteorian perusymmärrys on hyödyllinen. Se voi auttaa sinua ymmärtämään, mitkä sävyt toimivat hyvin yhdessä (tai eivät) ja minkä vaikutuksen tietyn mallin eri yhdistelmät luovat.
värimaailma
Koulussa lapset opiskelevat tätä aihetta taidetunneilla, joten sen riisuttu muoto on varmasti kaikille tuttu: punainen, keltainen ja sininen perussävyt. Perinteinen väriympyrä koostuu 12 sävystä ja sitä käyttävät usein taiteilijat. Tämä on yksinkertainen visuaalinen tapa ymmärtää värisuhteita.
Väripyörän päätehtävä on värien yhdistäminen. Perus- tai perussävyjä (keltainen, sininen ja punainen) sekoittamalla muodostuu toissijaisia sävyjä: vihreä, violetti ja oranssi. Yhdistämällä ne pääsävyyn voit saada ympyrän kolmannen tason - tertiääriset värit. Näitä ovat puna-oranssi, vihreä-sininen, sinivioletti ja violetti-punainen. Ensisijaiset ja toissijaiset sävyt ovat osa näkyvää spektriä tai sateenkaaren värejä. Niiden järjestys on helppo muistaa muistolauseella "Jokainen metsästäjä haluaa tietää, missä fasaani istuu": punainen, oranssi, keltainen, vihreä, vaaleansininen, sininen ja violetti.
Tämä tapa ymmärtää väriä tunnetaan vähentävänä mallina, jossa sekoitetaan pigmenttejä, kuten maaleja tai musteita, ja sitä käytetään sekä perinteisessä väripyörässä että painolaitteissa käytettävässä CMYK-järjestelmässä. Se eroaa additiivisesta mallista, jossa sekoitetaan eri taajuisia valoja (esimerkiksi tietokoneella tai TV-ruudulla), joka koostuu eri joukosta punaista, vihreää, sinistä (RGB).
Graafiset editorit käyttävät eri versiota väripyörästä. Mikä tahansa sävy voidaan valita sen heksadesimaalikoodilla.
Terminologia
Ennen palettien kokoamista sinun on hallittava terminologia, joka auttaa sinua ymmärtämään erityyppisiä sävyjä:
- sävy on synonyymi värille ja viittaa perinteisesti yhteen 12 väristä;
- kirkkaus: värisävyn etäisyys mustasta;
- vaaleus: sävyn läheisyys valkoiselle;
- kylläisyys - värin intensiteetti tai puhtaus (mitä lähempänä sävy lähestyy harmaata, sitä vähemmän kylläinen se on).
Parhaat väriyhdistelmät
Väripyörästä löytyy useita klassisia paletteja, joita taiteilijat ovat käyttäneet vuosisatojen ajan. Useimmissa suunnittelupäätöksissä yksi hallitseva väri tulee tunnistaa näistä kaavoista - sen käytön määrän tai sen valinnan perusteella muista sävyistä - yksi tai useampi aksentti:
1. Yksivärinen malli: samanväristen sävyjen eri kirkkauden, vaaleuden tai kylläisyyden käyttö vaaleasta tummaan. Esimerkki onnistuneesta yksiväriyhdistelmästä on punainen ja musta ja valkoinen. Tämä malli tarjoaa ohuen ja konservatiivisen muotoilun. Sininen ja valkoinen on klassinen yhdistelmä kiinalaista posliinia 800-luvulta. ja ranskalaiset tekstiilit 1700-luvulta.
2. Samanlaiset, jotka sijaitsevat vierekkäin väriympyrässä. Se on universaali ja helppokäyttöinen projekteja kehitettäessä. Esimerkki olisi purppuran ja sinivioletin yhdistelmä.
3. Täydentävä malli: käyttää sävyjä, jotka sijaitsevat väripyörän vastakkaisissa päissä. Esimerkiksi sininen ja oranssi, punainen ja vihreä. Täydentävillä väreillä on korkea intensiteetti ja kontrasti, mutta niitä on vaikea levittää harmonisesti ja tasapainoisesti puhtaassa muodossaan, koska ne voivat helposti törmätä malliin.
4. Jaettu täydentävä malli: mikä tahansa sävy väriympyrässä sekä kaksi väriä, jotka reunustavat sen komplementtia. Esimerkiksi keltainen, vihreä ja punainen-violetti. Tässä mallissa on myös vahva visuaalinen kontrasti, vaikkakin heikompi kuin edellinen. Tarjoaa parhaat väriyhdistelmät suunnittelun aloittelijoille, koska sitä on vaikea sotkea.
5. Triadinen malli: mitkä tahansa kolme sävyä tasaisesti jakautuneena väriympyrässä. Tarjoaa melko kirkkaita yhdistelmiä, vaikka sävyt olisivat vaaleita ja epätyydyttyneitä. Onnistuneen käytön kannalta on välttämätöntä saavuttaa täydellinen tasapaino - yhden värin tulee tulla hallitsevaksi ja kahden muun tulisi olla aksentteja.
6. Tetrad tai kaksoiskomplementaarinen: koostuu kahdesta toisiaan täydentävästä parista. Tämä malli on erittäin houkutteleva, mutta sitä on vaikeampi käyttää kuin yksi pari täydentäviä värejä, koska useampia sävyjä on vaikeampi tasapainottaa. Kun käytät tätä mallia, valitse yksi väri hallitsevaksi väriksi ja säädä joidenkin tai kaikkien sävyjen värikylläisyys, kirkkaus ja vaaleus siten, että ne tarjoavat parhaat väriyhdistelmät suunnittelun eri osissa.
Inspiraatiota
Väripyöräyhdistelmien lisäksi luonto tarjoaa monia valmiita ratkaisuja harmoniseen värimaailmaan.
Värien yhdistämisvaihtoehtoja ovat niiden lämpötila (kuuma tai viileä), kylläisyys (kirkkaat värit näyttävät usein nuorekkaalta, kun taas vaaleat näyttävät vintagelta), tunnelma (kirkas ja iloinen, tumma ja vakava), teema (sijainti, kausi, loma) ja muut. ominaisuuksia.
Toinen loistava tekniikka värien löytämiseen on etsiä inspiraatiota erilaisista historiallisista ajanjaksoista ja taiteellisista liikkeistä: impressionistien lämpimät, vaaleat värit; kirkkaita, odottamattomia post-impressionistien yhdistelmiä; pehmeät, maanläheiset jugendvärit; kirkkaita, rohkeita poptaiteen sävyjä.
Värien psykologia
Väri ympäröi meitä. Ymmärrämmepä sen tai emme, sillä on suuri rooli jokapäiväisessä elämässämme. Oletko nähnyt oranssia tai keltaista liikennemerkkiä tiellä tänään? Hän herätti huomion syystä. Värillä on hämmästyttävä yhteys tunnelmiimme ja tunteisiimme.
Mutta kaikki eivät koe värejä samalla tavalla. Se merkitys ja symboliikka, jonka yhdistämme eri sävyihin, riippuu suuresti niiden kulttuuristen ja sosiaalisten ryhmien vaikutuksista, joihin kuulumme. Tässä on joitain yleisiä merkityksiä, jotka liittyvät pääväreihin länsimaisessa kulttuurissa.
Punainen
Tämä väri välittää monia erilaisia ajatuksia kontekstista riippuen. Tulen kanssa se voi symboloida lämpöä tai vaaraa. Koska punainen on veren väri, sitä pidetään energisenä, elävänä sävynä, ja siksi se liittyy sydämen asioihin ja joskus väkivaltaan.
Vaihtoehtoiset merkitykset: Joissakin itämaisissa kulttuureissa punainen symboloi onnea ja vaurautta ja on morsiamien hääpäivänä käyttämä väri. Kaikkialla maailmassa punainen liittyy erilaisiin poliittisiin liikkeisiin ja symboloi vallankumousta.
Brändäyksessä: tarkoittaa usein voimaa, luottamusta ja voimaa ja on erittäin näkyvä.
Oranssi
Myös tulen väri, oranssi yhdistää punaisen lämmön keltaisen iloisuuteen ja symboloi aktiivisuutta, energiaa ja optimismia. Liittyy myös satoon tai syksyyn.
Vaihtoehtoiset merkitykset: Intiassa sahramia, jonka sävy on kellertävä oranssiin, pidetään pyhänä. Japanissa väri symboloi rakkautta.
Brändäyksessä: edustaa usein nuoruutta ja luovuutta. Kulta, joka on myös oranssin tai keltaisen sävy, symboloi ylellisyyttä ja korkeaa laatua.
Keltainen
Auringon värinä se symboloi usein kevään onnellisuutta, iloisuutta, ystävällisyyttä ja raikkautta. Lisäksi tietyissä yhteyksissä se voi välittää varoitussignaalin tai varoittaa varovaisuudesta. Jotkut muunnelmat (etenkin desaturoidut ja vihertävät) näyttävät sairaalta tai epämiellyttäviltä, mikä ei ole yllättävää, sillä historiallisesti keltainen liittyy joskus sairauteen ja karanteeniin.
Vaihtoehtoiset merkitykset: Joissakin Itä- ja Aasian kulttuureissa keltainen liittyy korkeaan syntymään tai asemaan. Joissakin osissa Afrikkaa ja Latinalaista Amerikkaa tämä sävy on perinteinen surun väri.
Brändäyksessä: Selkeä tai kirkkaan keltainen sävy herättää huomiota, mutta voi olla huolestuttavaa tai jopa vaikea nähdä (kuten valkoinen teksti kirkkaan keltaisella taustalla tai päinvastoin), jos sitä käytetään huolimattomasti.
Vihreä
Se on luonnon, kasvillisuuden ja kasvun väri. Se symboloi usein terveyttä, tuoreutta tai luonnollisia ominaisuuksia. Tummanvihreä voi edustaa vaurautta ja vakautta.
Vaihtoehtoiset merkitykset: Islamilaisissa kulttuureissa vihreä on pyhä väri. Se yhdistetään myös Irlantiin, Pyhän Patrickin päivään ja onnenneliapilaan.
Brändäyksessä: Tuotemerkit tai tuotteet, joita markkinoidaan "vihreinä" (luonnollisia, terveellisiä, ympäristöystävällisiä, luomutuotteita jne.), käyttävät usein luonnollisia värejä, kuten vihreää ja ruskeaa.
Sininen
Meren ja taivaan väri symboloi usein rauhaa ja puhtautta. Toisin kuin energisemmät ja lämpimät sävyt, sininen koetaan rauhoittavana. Joissakin tapauksissa se voi edustaa surua tai masennusta.
Vaihtoehtoiset merkitykset: Lähi-idän kulttuureissa sininen suojaa perinteisesti pahalta. Koska se liittyy taivaaseen, väri symboloi monissa kulttuureissa kuolemattomuutta ja henkisyyttä.
Brändäyksessä: Sinistä käytetään laajalti ja se on yksi monipuolisimmista väreistä. Se symboloi yleensä luotettavuutta, turvallisuutta ja vakautta. Sävy on erityisen suosittu yritysympäristöissä, koska sen katsotaan sisältävän vakavia, konservatiivisia ja ammattimaisia ominaisuuksia.
Violetti
Perinteisesti liitetty aateluun, suuruuteen tai kunniaan. Siten sillä on hengellisiä, mystisiä tai uskonnollisia konnotaatioita.
Vaihtoehtoiset merkitykset: Monissa kulttuureissa ympäri maailmaa violetin yhdistelmä symboloi jaloutta tai vaurautta, mutta Thaimaassa ja osissa Etelä-Amerikasta se liittyy suruun.
Brändäyksessä: violetin tummat sävyt ovat usein ylellisyyden symboli, kun taas vaaleammat ja kirkkaammat sävyt ovat suosittuja naisten ja lasten keskuudessa.
Musta
Kuten punaisella, tällä värillä on monia (joskus ristiriitaisia) merkityksiä. Se voi edustaa voimaa, ylellisyyttä, hienostuneisuutta ja eksklusiivisuutta. Toisaalta musta symboloi kuolemaa, pahaa tai mysteeriä. Vaatteissa se on muodollisuuden tai surun ja surun symboli (kuten surua käytetään perinteisesti hautajaisissa).
Vaihtoehtoiset merkitykset: Joissakin Aasian ja Latinalaisen Amerikan maissa mustaa pidetään maskuliinisena värinä. Egyptissä se tarkoittaa uudestisyntymistä. Monissa kulttuureissa väri yhdistetään taikuuteen, taikauskoon tai huonoon onneen sekä selittämättömään tai tuntemattomaan.
Brändäyksessä: Mustaa käytetään niin laajasti, että siitä on tullut melkein neutraali, vaikka se voi symboloida yllä olevaa kontekstista riippuen. Monet mallit ovat yksinkertaisesti mustavalkoisia (joko tarkoituksella tai yksinkertaisesti väritulostuksen säästämiseksi).
Valkoinen
Valon ja lumen värinä valkoinen symboloi usein puhtautta, viattomuutta, hyvyyttä tai täydellisyyttä (perinteisesti morsiamet käyttävät sitä), mutta myös ankaruutta tai hedelmättömyyttä.
Vaihtoehtoiset merkitykset: Kiinassa valkoinen on surun väri. Monissa kulttuureissa se merkitsee rauhaa - valkoinen lippu on yleinen aselevon tai antautumisen symboli.
Brändäyksessä: valkoinen viestii usein yksinkertaisuudesta, puhtaudesta tai nykyaikaisuudesta. Minimalistista estetiikkaa etsivät suunnittelijat käyttävät usein paljon valkoista.
Väri suunnittelussa
Väriyhdistelmän valitseminen on enemmän kuin kahden tai kolmen sävyn valitsemista ja niiden jakamista tasaisissa suhteissa koko suunnittelussa. Niiden tehokkaalla käytöllä on paljon tekemistä tasapainon kanssa, ja mitä enemmän sävyjä käytät, sitä vaikeampaa on saavuttaa.
Helpoin tapa toteuttaa tämä konsepti on jakaa valitut värit hallitseviin ja korostusväreihin. Hallitseva sävy on suunnittelun näkyvin ja käytetyin sävy, kun taas yksi tai useampi aksentti täydentää ja tasapainottaa sitä. Kun kiinnität huomiota värien vuorovaikutukseen - kontrastin olemassaolo tai puuttuminen, miltä vierekkäiset sävyt näyttävät, millaisen tunnelman värien ja sävyjen yhdistelmä luo jne. - auttaa sinua valitsemaan tarkasti ihanteellisen paletin suunnittelutarkoituksiin.
Yleisesti hyväksytty sääntö peruskolmiväripaletin käyttämiselle on sääntö 60-30-10. Tätä lähestymistapaa käytetään usein sisustussuunnittelussa, mutta sitä voidaan käyttää tehokkaasti myös web- tai printtisuunnittelussa. Riittää, kun omistat 60 % hallitsevalle värille ja annat loput 30 % ja 10 % kahdelle korostukselle. Hyvä esimerkki tämän säännön selittämiseksi on miesten puku: takki ja housut muodostavat 60 % vaatteen väristä, paita 30 % ja solmio loput 10 %. Kaikki yhdessä muodostavat tasapainoisen, tyylikkään ulkonäön.
Toinen tapa pitää palettisi yksinkertaisena ja tasapainoisena on käyttää kirkkautta ja vaaleutta (tai vaaleampia ja tummempia versioita valitsemastasi sävystä). Tällä tavalla voit laajentaa värivalikoimaasi ilman, että muotoilu ylikuormitetaan.
ja brändäystä
Brändin tunnistaminen riippuu suuresti väristä. Ajattele vain Coca-Colaa, Facebookia tai Starbucksia, niin on helppo muistaa sävyt, joihin nämä brändit liittyvät.
Winnipegin yliopistossa tehdyssä tutkimuksessa havaittiin, että ihmisten ensiarviot tuotteista perustuvat suurelta osin väriin (60-90 % arvioinnista). Tämä tarkoittaa, että muotoilun sävy ei ole vain taiteellinen valinta, vaan myös kriittinen liiketoimintapäätös, joka vaikuttaa kaikkeen siitä, miten kuluttajat näkevät brändin tuotteiden myyntiin.
Logon värimaailmaa valittaessa ei kuitenkaan tarvitse noudattaa perinteitä, symboliikkaa tai stereotypioita. Tässä ei ole varmuutta tai nopeita sääntöjä. Tärkeämpää on, miten sävyä käytetään suunnittelussa ja se harmonisoituu brändin markkinakontekstin ja luonteen kanssa.
RGB vs CMYK
Kun työskentelet painetun projektin parissa, tietokoneen näyttö ei voi näyttää värejä sellaisina kuin ne näyttävät paperilla. Se, mitä näet, ei ole sitä, mitä saat, koska digitaaliset näytöt ja tulostimet käyttävät kahta eri järjestelmää: RGB ja CMYK. Ensimmäinen viittaa pieniin punaisen, vihreän ja sinisen valon pisteisiin, jotka yhdessä muodostavat näkyviä värejä näytöllä; toinen tarkoittaa syaanin, magentan, keltaisen ja mustan sävyjä väritulosteiden luomiseen. Koska RGB käyttää laajempaa spektriä kuin CMYK, jotkut suunnittelijat luovat aluksi RGB-tulostuskuvion säilyttääkseen enemmän värivaihtoehtoja ja muuntaakseen valmiin kuvion CMYK-muotoon ennen tulostusta.
Tästä syystä he tarvitsevat työkalun, joka varmistaa värien yhtenäisyyden molemmissa järjestelmissä - esimerkiksi suunniteltaessa logoa verkkosivustolle ja tulostettaessa se käyntikortille. Yksi tällainen järjestelmä on Pantone Matching System (PMS). Täällä voidaan sovittaa sävyjä verkon ja tulosteen välillä (ja erityyppisillä painetuilla pinnoilla) yhtenäisen ulkoasun varmistamiseksi.
Väri: ymmärrä, tutki ja rakasta sitä!
Suunnittelijat ovat erikoistuneet väriteorian, psykologian tai neurotieteen tutkimukseen – monimutkaisiin aiheisiin, jotka sijaitsevat taiteen ja tieteen risteyksessä. Mutta se on osa sitä, mikä tekee tästä ammatista niin mielenkiintoisen ja tehokkaan työkalun markkinoilla. Vaikka tämä opas hahmottelee vain perusasiat, sen toivotaan auttavan tekemään tietoisempia ja tehokkaampia värivalintoja henkilökohtaisiin tai ammatillisiin projekteihin.
Värit ovat valtavassa roolissa web-suunnittelussa. Verkkosivuston väriteeman valitsemiseksi oikein on olemassa erikoispalveluita. Olen varma, että jokaisella web-suunnittelijalla on ainakin yksi näistä kirjanmerkeissään.
Joskus istut ja mietit, minkä sinisen sävyä valitseisi sivuston pääväriseksi, hieman vaaleampi tai hieman vaaleampi, tai ehkä tummempi... Ja siihen pitää vielä valita lisää. Voit tietysti tehdä tämän silmällä, mutta on parempi käyttää jotakin erikoispalveluista.
En puhu väriteoriasta (tämä on liikaa tietoa), vaan julkaisen täällä vain ne palvelut, jotka minulla on kirjanmerkeissäni ja joita käytän.
Olen ollut ystävä tämän soittimen kanssa monta vuotta. Kätevin työkalu värien valintaan (mielestäni). Siinä on monia lisäominaisuuksia. Voit esimerkiksi nähdä esimerkin vaaleasta ja tummasta sivusta valituilla väreillä.
On mahdollista arvioida, kuinka värisokeat ja muut näkövammaiset ihmiset näkevät värimaailmasi. Voit valita verkkoturvallisia värejä.
Adobe Kuler on toinen web-työkalu, jota käytän melko usein. Värimaailmavalikoima on lähes sama kuin edellisellä sivustolla, mutta en siksi pidä siitä. Sen lisäksi, että voit luoda itse väriteemoja, voit tarkastella ja käyttää muiden luomia malleja.
Voit tehdä tämän napsauttamalla painiketta vasemman yläkulman valikossa "Katso". Ja erilaisten väriyhdistelmien galleria avautuu edessäsi.
Tämä työkalu on hieman samanlainen kuin Colorscheme, mutta siinä on vähemmän toimintoja, mutta voit nähdä, miltä värilohkot näyttävät.
Käytän tuskin tätä sivustoa, mutta koska minulla on se kirjanmerkeissäni, päätin myös lisätä sen.
Seuraavat kaksi sivustoa luovat paletin valitsemastasi kuvasta. Se on taikuutta :)
Valitset minkä tahansa kuvan, jonka väreistä pidät, palvelu analysoi sen ja antaa sinulle väripaletin. Ainoa ero näiden kahden sivuston välillä on se, miten ne tarjoavat kuvan.
Tämä sivusto tarvitsee ladata kuva tietokoneeltasi.
Erittäin kätevä työkalu värien valintaan. Perustuu "tykkää - ei pidä" -periaatteeseen.
Kuten nimestä voi päätellä, täällä voit valita värit nyt muodikkaaseen litteään muotoiluun. Sivusto on mielenkiintoinen, koska kun olet valinnut paletin, voit ladata sen Corelille ja Photoshopille.
Toinen muotitrendi on materiaalisuunnittelu. Tämä sivusto auttaa sinua valitsemaan väriyhdistelmiä käyttöliittymään (käyttöliittymään). Lisäksi sivustolla on suuri joukko kuvakkeita.
Väri on yksi tärkeimmistä elementeistä suunnittelijan työssä. Mutta konseptina sen hallitseminen voi olla melko vaikeaa: useiden palettiyhdistelmien vuoksi on usein vaikea päättää, miten web-sivujen ja sovellusten käyttöliittymä parhaiten suunnitellaan. Olemme aiemmin julkaisseet arvosteluja valituista työkaluista ja . Ja tänään haluamme laajentaa aihetta lähettämällä blogiin käännöksen Nick Babichin artikkelista Essential Color Tools for UX Designers.
Muistiinpano sisältää luettelon parhaista verkkosivujen värinvalintapalveluista ja UX-suunnittelusta, mikä auttaa sinua säästämään paljon aikaa. Näiden projektien kautta opit:
- mistä saada inspiraatiota;
- kuinka luoda oma paletti;
- kuinka tehdä suunnittelusta värinäkövammaisten ihmisten ulottuville.
1. Inspiraation etsiminen
Luonnon värit
Piirrä ympärilläsi olevasta maailmasta. Sinun tarvitsee vain katsoa ympärillesi. Muodikkaat vaatteet, kirjojen kannet, sisustussuunnittelu... ympärilläsi on niin paljon uskomattomia asioita. Mutta parhaat väriyhdistelmät ovat luonnon värit. Ikuista kaunis hetki ja yritä luoda oma valintasi tietyn kuvan perusteella.
Parhaat väriyhdistelmät löytyvät luonnosta. Voit saada värimaailman mistä tahansa valokuvasta
Behance
Tästä suositusta palvelusta löydät mielenkiintoisia teoksia alansa todellisten ammattilaisten parhaisiin verkkosalkkuihin. Tämä sivusto on myös loistava inspiraation lähde. Jos haluat nähdä uusia arvokkaita esimerkkejä projekteista, valitse vain haluamasi väri.
Dribbble värit
Dribbble on yksi parhaista, joista on hyötyä käyttöliittymää luotaessa. Jos haluat visuaalisesti ymmärtää, kuinka muut ovat käyttäneet tiettyä väriä, siirry osoitteeseen dribbble.com/colors ja anna haluamasi arvo.
Kun valitset sivuston väriä, voit asettaa sen vähimmäisprosenttiosuuden - kokeile esimerkiksi 30 % sinistä.
Yritä määrittää tietyn värin vähimmäisprosenttiosuus Dribbblessä
Suunnittelun inspiraatiota
Designspiration on hyödyllinen työkalu ensisijaisesti niille, joilla on jo ideoita väriyhdistelmistä ja jotka haluavat nähdä esimerkkejä sellaisista yhdistelmistä. Valitse 1-5 vaihtoehtoa ja löydät kuvat, jotka vastaavat määritettyjä parametreja.
Designspirationista löydät erilaisia esimerkkejä väriyhdistelmistä
Tineye Multicolr
Tineye Multicolr -värinsovituspalvelun avulla voit määrittää kuvan halutun gamman ja jopa asettaa kunkin niistä prosentteina (suhteen). Sivusto on integroitu Flickr-sivuston 20 miljoonan Creative Commons -kuvan tietokantaan. Tämä on ehdottomasti yksi nopeimmista tavoista löytää täydellinen paletti.
Colorzilla
ColorZilla on laajennus asennettavaksi Chrome- ja Mozilla Firefox -selaimiin. Se sisältää työkaluja, kuten pipetin, palettien selaamisen, luomisen ja paljon muuta.
ColorZilla-laajennus saatavilla Chromessa ja Firefoxissa
Shutterstock Spectrum
Yksi parhaista tavoista kuvitella, miltä värimaailma näyttää, on katsoa vastaavia kuvia. Useimmat ratkaisut, jotka tarjoavat värivaihtoehtoja verkkosivustojen suunnitteluun, sisältävät tämän ominaisuuden, mutta Shutterstock Spectrumissa on uskomattoman käyttäjäystävällinen käyttöliittymä ja esikatselu, joista voi olla todella hyötyä.
Lisäksi et tarvitse tilausta, koska kuvan alustava arvio riittää (vaikka siinä on "vesileima").
W3Schools
Äskettäin blogissa arvosteltiin valikoimaa W3Schoolsista. Siellä on kerätty paljon tietoa aiheesta, alkaen niiden nimistä/sävykoodeista, palettien yhdistämisen teoriasta ja päättyen eri formaattien kuvaukseen: HEX, RGB, CMYK, HWB jne. Löydät myös yksinkertaisia generaattorit, muuntimet ja vastaavat "minipalvelut". Kaiken kaikkiaan mielenkiintoista katsottavaa.
2. Luo väripaletti
Materiaalisuunnittelun värityökalu
Materiaalisuunnittelun värityökalun avulla voit luoda, jakaa värimalleja ja tarkastella karkeaa käyttöliittymää valinnoillesi. Yksi sen hyödyllisistä toiminnoista on mitata minkä tahansa väriyhdistelmän saavutettavuustaso.
jäähdyttimet
Coolors on sivusto monivärisen paletin luomiseen. Kiinnitä vain tietty väri ja paina välilyöntiä. Työkalu on myös hyvä, koska saat useamman kuin yhden tuloksen, mutta voit luoda useita vaihtoehtoja muuttamalla vain alkutietoja.
Värimaailma kohdassa Coolors valokuvan perusteella
Adobe Color CC
Värien täsmäytyspalvelu Adobe Color CC (entinen Kuler) on nyt melko suosittu. Se on vapaasti saatavilla Internetissä, mutta siitä on myös desector-versio. Tällä verkkosovelluksella voit luoda oman paletin väripyörän avulla:
Tai voit saada tietyn tuloksen valmiista kuvasta:
Sivuston värien valinta kuvan perusteella
Täällä on satoja valmiita yhdistelmiä, etsi ne Katso-osiosta:
Jos käytät työpöytäversiota, voit viedä luomasi värijärjestelmän InDesigniin, Photoshopiin ja Illustratoriin yhdellä napsautuksella.
Paletton
Sitä verrataan usein edelliseen Adobe Color CC:hen, koska mallit ovat hyvin samankaltaisia. Ainoa ero on, että Palettonissa et rajoitu viiteen parametriin, vaan voit kokeilla lisäliitäntäääniä.
Lisäksi voit katsoa. Yhdessä muiden kanssa sovelluksen avulla voit työskennellä missä tahansa, yksinkertaisesti käyttämällä älypuhelinta. Suoran väripalettien luomisen/viennin tehtävien lisäksi voit valita kuvista tiettyjä värejä tai käyttää perusasetuksia.
3. Paletin avaaminen
Nykyään värinäköhäiriöt ovat paljon yleisempiä kuin uskommekaan. Noin 285 miljoonalla ihmisellä maailmassa on näköongelmia. Sinun tulee aina tarkistaa, onko valitsemasi vaihtoehto tällaisten käyttäjien saatavilla.
WebAIM värikontrastitarkistus
Jotkut sävyt sopivat hyvin toisiinsa, kun taas toiset - päinvastoin. Valtava määrä projekteja epäonnistuu A/A-testissä, ja se on tosiasia. On erittäin tärkeää tarkistaa käyttöliittymän visuaalinen suunnittelu ja sävyjen kontrasti, varsinkin jos sivulla on paljon tekstiä. Käytä näihin tarkoituksiin valitessasi verkkosivuston värejä.
WebAIM Color Contrast Checker on verkkopohjainen työkalu, joka tarkistaa värikoodit heksadesimaaliarvoina.
jäähdyttimet
Olemme jo maininneet tämän palvelun edellä. Muun muassa Coolors auttaa sinua myös tarkistamaan keksimäsi palettisi värisokeuden varalta.
Värisokeuden tyyppi kaaviossa
Valitse Normaalitilan sijasta näköongelman tyyppi, jota haluat simuloida. Tämän seurauksena ymmärrät tarkalleen, kuinka henkilö, joka ei pysty erottamaan tiettyjä värejä, näkee suunnittelusi.
Näin protanomaaliasta kärsivä henkilö näkee paletin
NoCoffee Vision Simulator Chromelle
Käyttämällä NoCoffee Vision Simulator -verkkosivustoa voit nähdä, kuinka värisokeat tai heikkonäköiset ihmiset näkevät tietyt verkkosivut. Jos esimerkiksi määrität "Achromatopsia"-parametrin "Color Deficiency" -osiossa, näet verkkosivun harmaana.
Tältä CNN-projekti näyttää deuteranopiasta kärsivälle henkilölle.
Johtopäätös
Kaikki artikkelissa mainitut verkkosivujen värien sovitus- ja UX-suunnittelupalvelut auttavat sinua varmasti löytämään mielenkiintoisen ja tehokkaan paletin. Mutta muista: paras tapa oppia luomaan upeita paletteja on harjoitella ja kokeilla paljon.