2.1 A színek pszichológiája
Akár hatástalanít egy ketyegő időzített bombát, akár egy elegáns megjelenésű weblapot próbál létrehozni, ha rossz színeket választ, elveszik. Nos, az ügyfél webhelyének rossz színválasztása nem végzetes, de lerövidítheti növekvő webtervezői karrierjét. A színek kiválasztása nem könnyű. Figyelembe kell vennie az esztétikai szempontokat, de a vállalati identitást vagy az egyszerű használatát is. És hogy még nehezebb legyen a helyzet, a képernyők több mint 16 millió színt jeleníthetnek meg. Ezzel végtelen sok szörnyű színkombináció vár, amelyek csak a használatra várnak. Szerencsére nem kell lomha színmintakönyvnek lennie ahhoz, hogy jó színkombinációkat találjon. Rengeteg tudás áll rendelkezésre, a kényes (ahogy én hívom őket) pszichológiai irányelvektől kezdve a kipróbált színelméletekig, amelyek segíthetnek a jó színválasztásban. szín
Színsémák 57 2.6.1 Monokróm színrendszer Amikor korábban a színek értékeiről beszéltünk, a halványítást és a sötétítést is megvizsgáltuk. A monokróm színvilág egyetlen alapszínt és tetszőleges számú árnyalatot tartalmaz. Itt a 2.14. Ábrán a majom monokróm színvilágban látható, a lila szín alapján. 2.14. Ábra: Fekete-fehér majom Példák monokróm színvilágra A Shaun Inman által készített internetes alkalmazás, a Mint bevezető oldala, amely a weboldal-elérési statisztikák nyomon követésére használható, hasznos és elegáns is. 3 Mind a weboldal, mind maga az alkalmazás egységes, főleg monokróm színvilágot használ, több zöld árnyalattal, amint az a 2.15. Ábrán látható. 2.15. Ábra: A pénzverde weboldala, zöld színű monokróm Ha a márkaépítés és az azonosítás színnel kezdődik, akkor a monokróm színvilág mindig kézenfekvő lehetőség. A Blue Flavor tanácsadó és tervező cég emberei felvették ezt az ötletet. 4 Nézze meg a 2.16. Ábrát. A logónak megfelelő színek keresése helyett 3 http://www.haveamint.com/ 4 http://www.blueflavor.com
58 illeszkedik a színhez, a kék színt felvették a védjegyükbe, egységes és egyszerű színvilágot adva nekik. A 2.16. Ábra A Blue Flavor kék színvilág, amely megfelel a Felesleges Banter védjegynek, Dan Rubin tervező saját honlapja. 5 Amikor utoljára áttervezte a dizájnt (vagy "újraindította", ahogy szereti mondani), Dan létrehozott egy, az Orangina nevű tervezési témát, amelyben a narancssárga szín nagyon nagylelkűen felhasználásra került. Csakúgy, mint a monokróm színösszeállítások előző két példája, ez a kialakítás is figyelemfelkeltő. Ezt a 2.17. Ábrán láthatja. Annyira megszoktuk a sokszínű mintákat az interneten, hogy a csak egy színű dizájn valóban azonnal magával ragad, különösen, ha ez a szín élénk narancssárga. 2.17. Ábra: A Felesleges Banter webhely narancssárga tervezési téma 5 http://www.superfluousbanter.org/
60 színes Hoity-Toity cirkuszi majom 2.19. Ábra. Egy majom analóg színvilágban. Példák analóg színvilágra. Már említettem, hogy a narancs nagyon jó étel reklámozásához, és hogy a gesztenye vagy a bordó jól passzol hozzá. A Regine Patisserie 7 weboldala kihasználja e két szín pszichológiai vonatkozásait. Ez a weboldal maga finom édességnek tűnik, és aromát és meleget sugároz, amint ezt a 2.20. Ábra bizonyosan láthatja. Ha a színek nem serkentik azonnal az étvágyat, akkor a fényképek igen. 2.20. Ábra Regine s Cukrászda mmm A Blinksale 8 weboldala, amelyet a 2.21. Nagyszerű példa arra is, hogy egy kreatív analóg színvilág milyen hatást gyakorolhat egy üzleti weboldalra. Megszünteti az üzleti weboldalak kinézetének előzetes elképzeléseit, és mindet hűvös színtengerbe dobja, a kék-zöldtől a sárgáig. 7 http://www.regines.net.au 8 http://www.blinksale.com
Színsémák 61 2.21. Ábra Blinksale egy jó üzleti weboldal Bár Michael Angeles urlgreyhot 9 webhelyének színei a weboldal minden területén változnak, a honlap domináns színvilága ugyanaz. Ezt az oldalt a 2.22. Ábrán láthatja. 2.22. Ábra Az urlgreyhot analóg és a föld színű kezdőlap MEGJEGYZÉS A színvilág megváltoztatása Számos webhely különböző színvilágokat használ a különböző tartalmi területekhez. Ez a megközelítés hangsúlyozhatja a tartalmat és karaktert adhat számára, de az identitás problémáihoz is vezethet. Ha ugyanazon a webhelyen különböző színvilágokat használ, különös gondot fordítson arra, hogy a félreértések elkerülése érdekében a logó, a menü és a webhely általános elrendezése összhangban legyen. 9 http://urlgreyhot.com/
62 2.6.3 szín Kiegészítő színrendszer A kiegészítő színösszeállítások, mint például a 2.23. Ábra, olyan színeket tartalmaznak, amelyek egymással szemben vannak a színkeréken, például piros és zöld, sárga és lila, vagy narancssárga és kék. Ezeket a színeket egymást kiegészítőnek vagy kiegészítő színeknek nevezik. 2.23. Ábra: Egy furcsa kiegészítő majom Példák a kiegészítő színvilágokra A Floridai Egyetem 10 színei, ahol a feleségem tanult, remek kiindulópontot jelentenek egy kiegészítő színvilághoz. Néhány embert elriaszthat a komplementer színvilág ezen éles ellentéte, amint az a 2.24. Ábrán látható. De ha ezek a színek azt a vállalatot vagy szervezetet képviselik, amelynek tervezel, akkor mindig igazad van. A webhely újratervezését végző csapat jó munkát végzett, ötvözve ezt a szokatlan színválasztást egy gyönyörű elrendezéssel és a szabványoknak megfelelő HTML-kóddal. 2.24. Ábra A Floridai Egyetem honlapja 10 http://www.ufl.edu/
Színsémák 63 A hitinkubátorok 11 egy olyan szervezet, amely az oktatási tartalom létrehozását, tesztelését és optimalizálását tűzte ki maga elé a keresztény hit megerősítése érdekében. A 2.25. Ábrán látható emblémája lila színű, amelyet az egész weboldal használ, és ellensúlyozza a semleges sárga szín. 2.25. Ábra: A hitinkubátorok kezdőlapja Ha Rob Goodlatte a neve, hogyan tévedhet el egy kávébarna és földszínes színpaletta? Rob tervező és hallgató a Duke University-n, és úgy tűnik, mélyen megérti a grafikai tervezés alapelveit. A zöld szín kiválasztása az oldalsávhoz és a 12. weboldal egyéb akcentusaihoz, amelyek a 2.26. Ábrán láthatóak, nem egyértelműek, de egy egyszerű analóg témát kifinomult kiegészítő palettával rendelkező dizájnná alakítanak. Ábra. Kávébarna és zöld árnyalatok Rob Goodlatte weboldalán 11 http://www.faithink.com/ 12 http://www.robgoodlatte.com/