Miten saada Professional Look With Color
Mikä tekee suunnittelun näytöstä koordinoidun, suunnitellun ja ammattimaisen? Vastaus on: "väri" .
Kaikkien projektien ei tarvitse olla vaaleita yrityksen sinisiä ammattimaisia. Suunnitteluväri tarkoittaa kehyksen luomista, joka kuvaa, mitä värejä käytetään ja miten niitä käytetään.
Väri on liukaleva muotoiluelementti. "Hyvä" väri on niin tiukasti sidoksissa vaikeisiin asioihin, kuten henkilökohtaiseen makuun ja intuitioon, sekä teknisiin näkökohtiin, kuten kontrastin ja monitorin kalibrointiin.
Väri on kuitenkin elintärkeää sisällölle . Jos pidät verkkosivuilla tarpeeksi tärkeä aika viilentää aikaa, lukijat todennäköisesti pitävät sitä tarpeellisena viettää aikaa lukemiseen. Hyvät värit valitsevat sen.
Tässä artikkelissa tarkastelemme joitain tekniikoita, joiden avulla saat kauniita värillisiä paletteja web-malleillesi.
Paras tapa tehdä sivustosta näyttää suunnittelematon on valita värit satunnaisesti.
Jopa silloin, kun kävijät huokaavat verkkosivuston kotisivun ensimmäistä kertaa, värit vaikuttavat asenteisiinsa sisältöön . Onko tämä sivusto jännittävä? Rauhoittavaa? Rohkea? Mitäänsanomaton? Poliittinen? Muodollinen?
Väri vaikuttaa siihen, miten ihmiset tulkitsevat, mitä he näkevät yhtä paljon kuin typografia.
Oikeiden värien löytäminen ei ole helppoa, mutta prosessi voi olla systemaattinen.
Hyvä suunnittelu strategia sisältää värimaailman (eli valikoiman värejä, jotka valitaan mielialan tai viestin välittämiseksi) ja tämän järjestelyn järjestelyyn.
Oletetaan, että sinua on pyydetty suunnittelemaan ammattimainen verkkosivusto. (Ja tämä voi hyvin muuttua juomapeliksi: ota kuva aina, kun asiakas käyttää sanaa "ammattimainen", "puhdas" tai "moderni". Kaksi kuvaa "Pidän tästä muusta verkkosivustosta."
Värimalli riippuu sivuston erityisestä luonteesta. Esimerkiksi molemmilla pankeilla ja kukkakaupoilla voi olla ammattimaisia verkkosivustoja.
Mutta ihmiset saattavat olla vähemmän halukkaita ostamaan kukkia verkkosivustolta, joka on yrityksen sininen ja valtameri harmaa. Ja kuvitella, että Bank of America -Web-sivusto on lila ja keltavihreä.
"Ammatti" -muotoilussa kerrotaan vierailijoille, että he ovat löytäneet verkkosivuston, joka ottaa aiheen vakavasti, vaikka kyseinen aihe on kevyt. Riippumatta sävyistä ja arvoista, "ammattilainen" tarkoittaa yhteensovitettua, suunniteltua ja harkittua .
Siirry harmaasävyyn
Paras tapa työskennellä väreillä on aloittaa ilman mitään.
Värien poistaminen mallista paljastaa perustavanlaatuiset ongelmat, joita on käsiteltävä ennen huolestumista siitä, mikä värikartan värisävy toimii parhaiten. Jos malli ei tunnu oikealta mustana ja valkoisena, on aika tehdä muutoksia.
Onko jokaisella sivulla selkeä tarkoitus? Suunnitteleko oppaan sisällön sisällön läpi? Sisältö on pakottava, inspiroiva tai informatiivinen? Ovatko otsikot selkeitä? Onko linkit kontrasti toisen tekstin kanssa? Väri parantaa näitä vaikutuksia, mutta ulkoasun, tyypin ja organisaation ongelmia ei voida ratkaista pelkällä värillä .
Tee uudelleensuunnittelu ensin imemään väri. Yksinkertainen ylimääräisen eturauhasen pesu on todella osoitus siitä, missä verkkosivusto on. (Oikeastaan sinun pitäisi todella aloittaa uudelleensuunnittelu uudelleen arvioimalla tavoitteita ja sisältöä, mutta se on toinen tarina.)
Joskus värien poistaminen on itsessään ratkaisu .
Olen työskennellyt yhdessä web design-yrityksen kanssa suunnittelemaan omia verkkosivustoja. Omistajat olivat henkilökohtaisia hankkeesta ja halusivat saada sen oikein. Mutta jos luulet, että suunnittelu itsellesi on vaikeaa, yritä tehdä se valiokunnassa. Loppujen lopuksi me kolme meitä katselimme yhdeksännen huipunäytön kuvakaappausta muutaman juoman päälle.
Yhtäkkiä särsin Photoshop-kerrokset ja osui Desaturate-sarjaan, joka käänsi vilkkaan kupari-navy-mallin harmaan sävyiksi. Kaikille yllätykselle se toimi.
Viikon loppuun mennessä meillä oli "lämmin" harmaa muotoilu punaisilla aksentilla. Tiesimme, että meillä oli voittaja, kun aiemmat asiakkaat onnittivat heitä uudesta ulkoasusta ja saapuivat tulevilta asiakkailta.
Analysoi värimaailman Photoshopin "squint" -testillä :
- Ota verkkosivustolta vähintään kolme sivua. Avaa ne Photoshopissa.
- Kopioi taustakerros jokaisessa kuvakaappauksessa ( taso → päällekkäinen taso tai komento + J Macissa tai Control + J Windowsissa).
- Käytä noin 10 pikselin Gaussin hämärtymistä uuteen kerrokseen.
- Siirry kohtaan Kuva → Säädöt → Posterize . Käytä 8-12 tasoa tai siirry Suodata → Pixellate → Mosaiikki . Käytä 15 - 30 pikseliä.
Tämä osoittaa, mitkä värit ovat todella hallitsevia. Vähemmän hallitseva väri, sitä voimakkaammin järjestelmä on painettu kävijän mielessä.
Kun sivuston ulkoasu ja organisaatio toimivat värittöminä, on aika valita paletti. Mutta mikä? Ja kuinka paljon käyttää?
Kohdista värisävyt
Värillä on kolme ominaisuutta: värisävy, kylläisyys ja arvo (joskus kutsutaan kevytksi).
Kyllästys on, kuinka monipuolinen sävy on: neonivärit ovat hyvin kylläisiä, kun taas pastellit ovat vähemmän kylläisiä.
Arvo tarkoittaa, kuinka kirkas (eli kuinka lähellä musta tai valkoinen) väri on.
Hue viittaa siihen, mikä sateenkaaren osa kuuluu, kuten punainen tai vihreä; se on ominaisuus, että ihmiset matkustavat.
Mikään ei tappaa värimaailmaa, kuten hämäräkuvia. Suunnittelussa voi olla sata sävyä yhtä värisävyä, pastellista neoniin, ja silti näyttää suunnitellulta. Mutta jos sävyt sekoitetaan väärällä tavalla, järjestelmä hajoaa.
Yksi tapa välttää värisävyt on erottamalla ne kolmannella värillä. Musta, harmaa tai valkoinen puskuri on turvallisin, koska harmaasävy on värisävyn neutraali: voit sommittele minkä tahansa osan mustalla, valkoisella ja harmaalla.
Toinen ratkaisu on käyttää sävyjä eri mittasuhteissa . Jos värimallilla on esimerkiksi violetti ja ruskea, niin mallissa voi olla useita ruskeita sävyjä muutama kirkkaan violetti kohokohta.
Toinen vaihtoehto on muuttaa arvoja. Puhdas sininen ja kirkkaan syaani tekevät niin yhdistelmästä, mutta tummansininen (laivastonsininen) ja vaalea syaani (taivaansininen) riittävän kontrastin asettamaan toisilleen. Punainen ja violetti voivat olla riittävän erilaisia, jotta ne eivät ristiriidassa, mutta tarpeeksi lähellä, ettei ne näytä tahalliselta. Vaaleanpunainen (vaaleanpunainen) ja tumma violetti tuovat eron.
Valitettavasti huonon värin yhdistäminen ei ole sama kuin hyvän valinta. Värimalli ei onnistu, kun olet tyytyväinen, mutta kun yleisösi tuntuu mukavalta.
Löydä suuret järjestelmät
Mistä suuret värimallit tulevat? Satoja värejä ja tuhansia yhdistelmiä, miten päättää?
Pienien staattisten verkkosivustojen suunnittelijat tekevät väriä sisällöstä . Tämä tarkoittaa yleensä valokuvia.
Kahdeksan sivun web-sivuston suunnittelu, jonka äskettäin rakensin, oli täynnä indigo-taivaan kaltaisen monimutkaisen metallirunko. Photoshopin pipetointityökalun asettaminen 5 × 5 keskiarvoon otin näytteen taivaan pimeimmistä ja kevyimmistä osista ja annoin sivupalkin, linkit, otsikot ja alatunnisteen ne harvat sävyt.
Kun asiakas kysyi, kuinka voimme suunnitella verkkosivun niin hyvin - ja niin nopeasti - vastauksemme oli: "Näin me teemme." Mutta väri oli jo olemassa. Minun piti vain etsiä sitä.
Kun valokuvasi toimii nopeilla verkkosivuilla, suurempien ja dynaamisempien verkkosivustojen suunnittelijoiden pitäisi etsiä inspiraatiota yleisöiltä .
Erinomainen indikaattori siitä, mitkä värit kiinnostavat yleisöäsi, ovat heidän päivittäiset vaatteet. Selvitä, mitä kävijät käyttävät, ja tiedät, mitä värejä ne mukavat. Jos verkkosivustollasi on esimerkiksi liigan urheilu, selvitä, mitä ihmiset käyttävät pelejä, eikä heidän päivätyöhönsä.
Jos sinulla on onni saada valokuvia kohdeyleisöstäsi, katsele niitä en masse; haluat keskiarvon joukosta. Mutta jos valokuvia ei ole saatavilla, käy ostoksilla.
Vaatetussuunnittelijat, jotka kykenevät pysymään liiketoiminnassa, ovat erinomaisia väriominaisuuksia jokaiseen mielialaan ja elämäntapaan. Sen ei tarvitse olla 5. Avenuen haute couture. Googlen haun "leirimyymälät", "vauvanvaatteet", "hiihto- ja uimapuku" ja "rento elävä" paljastavat monia hyviä väriyhdistelmiä.
Ihmiset käyttävät vaatteita heidän makunsa mukaan. Jos käytät värejä, joita he pitävät, he tuntevat mukavampia verkkosivustoillasi.
Käytä tekstuureita
Värien, kylläisyyden tai arvon pienet vaihtelut tekevät tekstuureista .
Monokromaattiset tekstuurit (eli tekstuurit, joissa on vain yksi värisävy) ja kuviot tarjoavat hienovaraisen ulottuvuuden useimmille verkkosivustoille ilman ristiriitoja.
Yksinkertaisia tekstuureita, erityisesti, on helppo rakentaa:
- Ota kuva sisäseinästä tai jotain paljaasta mutta tuntuu karkealta.
- Avaa se Photoshopissa.
- Kopioi taustakerros ja kutsu se "tekstuuri 1."
- Täytä taustakerros väreillä värimallilla.
- Aseta "texture 1" -kerroksen sekoitustilaksi "" Soft Light "ja sen peittävyys 30%: iin.
- Kokeile sitä sivustossasi. Jos se ei näytä oikealta, voit pelata kerroksen peittävyydellä.
Kerroksen nimi on tarkoituksellinen. Voit pelata useamman kuin yhden valokuvan kanssa, mutta älä anna kerrosten nimeä, kuten "seinärakenne" tai "paperirakenne". Haluat keskittyä verkkosivustoosi, ei mistä se on peräisin.
Hyvän järjestelmän luominen
Hyvä värimalli on tiettyjä ominaisuuksia. Ajattele sitä kehyksenä tai ohjeellisena ohjeena suunnittelun säilyttämiseksi. Järjestelmän pitäisi:
- Luettelo kahdesta viiteen värisävystä, jotka toimivat hyvin yhdessä,
- Kuvaile, kuinka pitkälle muotoilu voi vaihdella näistä sävyistä,
- Tunnista jokaisen värisävyn sävyt,
- Työskentele hyvin mustaa ja valkoista vastaan.
Tässä on esimerkki:
Suunnittelija alkoi valita enimmäkseen lämpimiä sävyjä, jotka tuntuivat oikealta. Ei ollut logiikkaa, vain "syksyn" epämääräinen tavoite ja hänen intuitio.
Photoshopissa kaksi kerrosta tarjosi mustavalkoisia sävyjä. Jokainen kerroksen sekoitustila asetettiin "Soft Light". Puhtaus musta oli liian tumma oikein värin kannalta, joten mustakerroksen opasiteetti säädettiin.
Yhdistämällä värit luotiin uusi kerros, joka täytettiin puhtaalla punaisella. Sen sekoitustilaksi asetettiin "Color" ja sen läpinäkymättömyys leikattiin noin 40 prosenttiin. (Huomaa: kerrosten järjestys on erittäin tärkeä, värit muuttuvat, jos "sävykerros" asetetaan mustan ja valkoisen kerroksen alapuolelle.)
Tämä antoi suunnittelijalle 15 väriä. Hän poimi neljä, joilla oli erilaisia sävyjä ja sävyjä. Tässä värit asetetaan valkoiseksi.
Muunnelmat ovat tärkeitä, joten suunnittelija kokeili. Mitä värejä näyttäisi mustalta vastaan? Mitä tapahtuu, jos varjostetaan heitä hieman?
Entä jos me muutettaisiin kokonaan? Kuvan käyttäminen → Säädöt → Värisävy / Värikylläisyys "värisävyllä" luo selkeästi syksyn tuntemuksen, mutta värit ovat edelleen yhteensopivia. Ehkä palasia voidaan käyttää pääsiäisenä.
Lopputuloksena on värimaailma: viite, joka tarjoaa erilaisia (mutta ei liian erilaisia) sävyjä ja erilaisia sävyjä, jotka toimivat hyvin yhdessä. Lataa mallitiedosto.
Käytä puitteita
Tulevatko huomisen grafiikat, valokuvat ja kuvakkeet toimimaan nykyisen värimallin kanssa? Millaisia kuvia sivusto tarvitsee kuuden päivän, kuuden viikon tai kuuden kuukauden aikana? On vaikea sanoa, mutta sisältö on osa värimallia .
Voit ratkaista tämän ongelman joko tekemällä kuviasi värimallin mukaan tai tekemällä väriteeman seuraamalla kuvia.
Valokuvasovelluksen tekeminen jopa kuviesi avulla on erinomainen tapa saada aikaan yhtenäinen ulkoasu kaikilla sivuilla .
Helpoin ratkaisu on löytää kuvia, jotka sopivat järjestelmään. Muista, että värimaailma mahdollistaa kimmoisan huoneen: niin kauan kuin kuvan tärkeimmät sävyt sopivat, kuvan pitäisi toimia. Monien valokuvavideoiden avulla voit etsiä värin mukaan (merkitys sävy: yleensä primääriset, kuten punaiset, vihreät ja siniset).
Jos kuva ei sovi värimalliin, anna sille sävy:
- Avaa kuva Photoshopissa.
- Luo uusi kerros. Aseta sen sekoitustilaksi "Väri".
- Täytä tämä kerros yhdellä väripuhelimesi väreistä, mieluiten kuvasta.
- Aseta värikerroksen peittävyys 50%: iin.
- Pelaa selkeyttä, kunnes saat hyvän tasapainon kuvan alkuperäisen värin ja sivustosi väripaletin välillä.
- Tämä tekniikka toimii valokuvissa, kuvissa ja kuvakkeissa - mitä tahansa pikselipohjaista. (Jos et omista kuvaa, muista saada lupa ennen sen muuttamista. Saatat olla parantamaan sen ulkoasua verkkosivustollasi, mutta silti olette vapauksia jonkun toisen taiteen kanssa.)
Katso Professional
Ei värejä näyttää "ammattimaisilta" itsestään. Sinun on kuitenkin noudatettava prosessia koordinoidun ja suunnitellun tuntemuksen saavuttamiseksi.
Riippumatta siitä, mistä verkkosivustosta on kyse, yleisö tietää, että se ottaa itsensä vakavasti.
vinkkejä
- Kun luulet, että sinulla on hyvä värimalli, kokeile sitä vähintään yhden viikon ajan. Värin arviointi edellyttää intuitiota, joka rakentuu ajan myötä. Anna itsellesi aikaa täysin omaksua järjestelmän persoonallisuus.
- Kun luulet, että sinulla on hyvä värimaailma, älä anna sen ohittaa. Vierailijasi maku, kuten sinun, muuttuu ajan myötä. Muistuta tarkistaa värit neljän kuukauden kuluttua. Kysy sitten, ovatko he vielä sopivia? Jos ei, niin mikä on muuttunut? Mitkä tekijät vaikuttavat oikaisuusi?
- Käytä loistavia värejä säästeliäästi. Jotain iristavaa täplä herättää vieraita siellä, mutta jos he näkevät sen kaikkialla, he vaeltavat epämuodollisesti.
- Jotkut ihmiset ajattelevat, että värimallit ovat kapeat. Anna hieman liikkumavaraa antamaan mallistasi syvyys.
- Vältä puhtaita esivaaleja, kuten punaista, vihreää, sinistä ja keltaista. Anna heille sinisilmäisyys: punainen, mutta hieman violetti, sininen vihreällä, "lämmin" keltaisella oranssilla sävyllä.
- Varmista, että värit toimivat haalistuneina. Jos valitset punaista, muista, että vaaleanpunainen voi olla naisellinen ja tummanpunainen voi näyttää ruosteelta tai vereltä. Keltainen kulkee haalistuneesta auringonvalosta tummanruskeaksi. Tummansininen on salaperäinen, ja vaaleansininen on rauhallinen tai sähköinen, jos satutat sen.
- Mac-käyttäjät, aseta näyttö. Siirry kohtaan "Järjestelmäasetukset" ja napsauta "Universal Access". Aseta näyttösi "Käytä harmaasävyjä". Tämä on kätevää myös silloin, kun olet elokuvamallin tuulella.
- Riippumatta siitä, kuinka aktiivinen haluat verkkosivustosi tuntemaan, käytä neutraalia taustaa. Musta, valkoinen ja harmaa toimivat hyvin melkein jokaisella värillä.
- Jos haluat pienen tekstin (esimerkiksi 14 pistettä tai vähemmän) vastaamaan suureen värikenttiin, kirjoita teksti muutama sävy tummemmaksi kuin normaali. Tämä kompensoi merkkivalojen sisällä olevat valot.
- Käytä enemmän sävyjä vähemmän sävyjä.
- Mikä "näyttää hyvältä" on intuitiivinen. Mutta intuitio on taistelu oman egon, yleisön nerokkuuden ja projektin rahoittavien henkilöiden välillä.
- Käytä hitaita taustoja, jotta sisältöä voidaan erottaa:
Kirjoitettu yksinomaan WDD: lle Ben Gremillion . Hän on freelance-web-suunnittelija, joka on oppinut, että määräajan joustamattomuus on kääntäen verrannollinen viimeisen minuutin pyytämien ominaisuuksien määrään.
Miten luodaan onnistuneita värimalleja? Mitä toimii ja mikä ei toimi sinulle?