Színvilág a webdesignban

Írta: | 2010. március 17. | kategóriák: CSS, Design, Photoshop, Web

Ez egy rendhagyó leírás! Nem szoktam hosszú leírásokat írni vagy ha igen, akkor azokat több bejegyzésre bontva teszem közzé. Ennek több oka is van, például jobb hatékonyabb több, rövidebb, leírás, mint egy hosszú, amit sokan megunnak és nem olvasnak végig. Ezért meg is kérlek, ha nem olvasod végig, el se kezd! Igen, ezt nyugodtan provokálásnak tekintheted!

Most, hogy biztos vagy a dolgodban, elmondom miről is szól ez a leírás. Nagyon-nagyon régen várnak sokan, hogy megírom ezt a bejegyzést. Összeszedtem az időmorzsáim és a gondolataimat, az összegyűjtött segédeszközöket és megpróbálok körüljárni, hogy milyen szín, mit jelent, mire kell figyelni a színek kiválasztásánál és a többi, és a többi …

A színek szimbolikája

A színeket nem színskálás sorrendben veszem, hogy ne legyen semmi befolyásolható a természetes egymásutánságban. Nem rangsorolom őket, mert nincs amit! Egyformán jók, a megfelelő helyzethez! Az ibolyával kezdünk. Sokak szerint az ibolya a nőiesség színe, mások arra esküsznek, hogy az elit színe. Bárkinek is van igaza, a lilás szín egy nagyon jó választás lehet sötét weboldal hátterének! Egy olyan szín, ami élessége, élénksége ellenére nem terheli nagyon a szemet. Egy fehér szöveggel kombinálva elképesztően elegáns weboldalakat készíthetünk. Nagyon talál az égies, karcsú betűtípusokkal! Kiválóan jól mutat egy narancsos citromsárga vagy egy élénkzöld/tűrkiz fejléc!

A piros különféle árnyalatai, a vörösek és rózsaszínek, mind-mind energiadús színek. Nem véletlen használják már nagyon rég figyelemfelkeltésre: legyen az reklám, legyen az veszély vagy bármi egyéb, ha a figyelem megragadására van szükség: a piros jó választás! Nagyon jól mutat fehérrel társítva, de a fekete-fehér-piros kombináció is remek választás, ha egy energikus minimalista weboldalról van szó! Figyelni kell viszont, hogy a túl sok vörös nagyon meg tudja erőltetni a szemet, így csak ott használjuk, ahol kell!

A citromsárga egy másik energikus szín! Az energikus talán nem talál egy színre sem, hanem inkább a fényhatással társítható. Minden szín lehet energiát sugalló, ha az megfelelő élességgel és telítettséggel bír a környezetéhez képest! Boldogságot sejtet, felhívja a figyelmet, a jóságra emlékeztet. Hosszú a lista, hogy mi fűződik a sárga színhez. A webdesignban mindeképpen figyelemfelkeltésre érdemes használni! Nem ajánlatos egy egész oldalt citromsárgára alapozni, arra ott van a narancssárga.

A narancs szín üdeséget, boldogságot nyújt, de ugyan akkor nagyon jó választás egy weboldal alapszínéhez vagy annak dekoratív részének. Zölddel kombinálva a legtöbb embernek a frissesség jut eszébe, a trópusi gyümölcsök finomsága, lédússága és a vele járó örömök! Nagyon ajánlott a használata! Nagyon jó tulajdonsága a fiatalosság és az, hogy rengeteg változata van, ami úgyszint jó választás lehet! Ellentétben a legtöbb más színnel, a világosabb árnyalatai sem idegesítőek a szem számára, pl. mint a nagyon világos citromsárga. Ez a tulajdonság a fényerő hiányában is megmarad! Remek választás a sötét narancssárga fejléc fehér vagy akár sötét háttérrel kombinálva! Az első esetben kiemelkedik a világos háttéren a sötét rész, de ugyanakkor vidám kombinációt nyújt a szemnek is. A második esetben világoságot lop a sötét háttér elé, de mégsem megeröltető a szemnek, mert nem égetően világos!

A másik véglet a hideg kék szín. Nyomban az ég vagy a végtelen óceánok jutnak eszünkbe, a biztonság és a tisztaság. Gondoljunk csak arra, hogy mennyi biztosítási cég weboldala vagy védjegye a kék valamelyik árnyalata? Nem véletlen választás! Továbbá precizitást, pontosságot, korlátokat (jó értelemben) és tudást is magában hordoz. Talán ezért jut eszébe a Sci-Fi és tudomány kapcsán sok embernek a kék! Nagyon jól lehet használni a fehérrel kombinálva, illetve a sárga/naracssárga színek és árnyalatok is jól mutatnak vele!

A zöld a Föld színe, a természet színe, az erdők-mezők színe. Kellemes harmóniaérzést kelt és pihenteti a szemet! Érdemes természetbarát oldalakon használni. Jól mutat háttér színnek is! Szép kombinációt érhetsz el zöld háttérszínnel és azon világosbarnás, bejzs, színben úszó középső, tartalmi, rész. Ezen a részen a szöveg lehet sötét barna vagy fekete. A halványbarna és sötétes zöld kombináció a mohás fák érzését keltik, vagy a réten leterített posztóterítőét. Sokan az egészséggel is összefüggésbe hozzák, jogosan.

A két örökérvényű szín, ami valójában a szín teljes hiánya szélsőséges megvilágításban, a fehér és a fekete. A fehér a tisztaság, a fény, a ártatlanság színe. Egyszerű, letisztult, pozitív minimalista szín. Az másik extrém eset a fekete, a luxus, erő és gonoszság jelképe. A két szín annyiból remek választás minden esetben, hogy éppen a színhiány miatt, bármivel találnak! Akár a fehéren fekete oldalak is remek, minimalista, weboldalakat eredményezhetnek. Vess egy pillantást pl. a New York Times weboldalára.

S akkor mi van?

Mit számítanak a színek. Van egy lila hátterű sárga szövegű oldalam, élénkpiros fejlécekkel és ez mind élénkzöld szövegárnyékkal. Mégis ott van Pistike, meg a két haverja, minden héten megnézik egyszer! Nos, igen. Viszont, ha olyan weboldalt akasz, amit látogatnak, amivel sikereket érhetsz el akkor figyelni kell rá, hogy megfelelő színekkel kínáld az olvasóid szemét. A jó színben tálalás már fél siker lehet egy webáruház életében!

Egy jó vállalat vagy akár blog sikerében is jelentős fontossággal bír a színek kiválasztás és az azokhoz való ragaszkodás. Ezt hívják márkakép építésnek is. A legnagyobb fejfájást talán az okozza, hogy miként tudjuk kiválasztani a nekünk megfelelő színeket. Könnyebb, mint gondolnád! Válaszold meg magadnak a következő három kérdést és már jó úton jársz!

Melyik színt talál hozzád? Nem lehet egy színnel leírni egy komplex vállalkozást, legyen az bármiféle is. Próbáld meg kiválasztani azt a színt, ami megmarad a látogatókban, ami beég az agyukba, ha a weboldalad logójával együtt meglátják!

Melyik ez az egy szín? Nem kell feltétlen egy színre gondolni. Nézz szét, nyitsd ki a szemed és figyelj! Ebay, Google és még sokan mások, nem ragaszkodnak egy színhez! Akár egy színkombinációt is válaszhatsz!

Mi talál a mondanivalómmal? Kényes kérdés. Gondolj arra, hogy ki a célközönség. Példáúl, ha az ázsiai piacra kívánsz betörni, akkor ne a fehér színt válaszd, ez ugyanis a gyász színe az ottani kultúrákban.

Végezetül három olyan eszköz (tudom, hogy számtalan van, ezek tetszenek a legjobban), ami nagy segítség lehet:

http://www.cymbolism.com/

http://kuler.adobe.com/

http://labs.ideeinc.com/multicolr/

Köszönöm, hogy végigolvastad. Remélem sokat segítettem vele! Amennyiben így gondolod, oszd meg másokkal is Twitteren, Facebookon vagy akár a saját blogodról is visszalinkelhetsz, hogy segíts az olvasóidnak hozzajutni a hasznos információkhoz!

Ne-ne, Én köszönöm!



Értékeld a bejegyzést!

Loading ... Loading ...

A bejegyzésre érkező kommenteket elérheted RSS 2.0 formájában vagy emailben is:

A bejegyzéshez tartozó trackback cím, illetve a permalink.

A megjegyzéseket kérlek, tedd fel érthető és illendő módon, ne fikázz le másokat, mert nem tudnak valamit, amit te már igen. A kommentár lehetőleg függjön a bejegyzéshez :)

kötelező
kötelező, titok marad
ha nincs, maradjon üres



Színenként egy “példa” weboldal / kép azért nem ártott volna, de ettől függetlenül szép leírás =)

Deino 2010. március 17. - 21:50

Jó kis bejegyzés, azonban szívesen vettem volna pár oldalpéldát is.

Bálint 2010. március 17. - 21:52

Ha te tudnád, hogy még mi minden tervben volt 😛 Pl. színskálálra példa, bevált színkombinációkról írni, márka elemzés, weboldal képek, stb. Hamarosan mindenre idő kerül, megpróbálom kihozni a kevésből a legtöbbet!

Avatar Tupacko
2010. március 17.
21:52

ez nagyon jó lett 🙂 nem feltétlen kell itt kép, mert ha az ember csak beírja a gugliba hogy “webdesign template”, vagy hasonlókat, kidob képként is 1 000 000-t 😀 nekem hasznos volt. 🙂

emre 2010. március 17. - 23:36

Tényleg jó 🙂 Anno suliba én is írtam valami hasonlót,de olyan SOS-ben kellett, hogy nem lett sajnos ilyen összeszedett, de már tervezek egy 2.0-s verziót 🙂

A márka-jelkép elemzéssel azért óvatosan 🙂 Az se pici falat, szép ellentmondásos dolgokat lehet itt-ott találni,de érdekes dolgokat is 🙂 Pl. hogy a BMW logó miért kék-fehér és miért néz ki úgy 🙂 (legelőször repülőgépeket/alkatrészeket gyártottak,és ugye kék-fehér: ég,felhők… 🙂 legalábbis a “szakik” szerint, bár van benne logika.)

Balou 2010. március 18. - 04:47

Most főleg webes megjelenésről van szó. Ha már van egy termék és annak kell weboldal, akkor nem érdemes új logót készíteni 🙂 A leírás célja, hogy útmutatót nyújtson az elakadt kezdőknek. Egy profi nem szorul arra, hogy bevezető jellegű írásokat olvasson.

Avatar Tupacko
2010. március 18.
07:07

Nagyon tetszik a ez a leírás, és hát igen már régebben is mondtam, hogy lenyűgöző az oldal dizájnja, és valóban magával ragagadott. Éppenúgy, mint a mogorvamormota.hu, ami kiváló példa (amik tényleg elférnének a leírásba, csatlakozom Bálinthoz & Delinohoz) a lila-fehérre (régen meg a barna tónusokra), bár igaz ez a koncepció elsősorban az Ubuntu gárdájától ered.

osiixy 2010. március 18. - 11:52

Csak ismételni tudom magam, nagyon szép leírás, és a kékről szóló kifejezetten tetszik, nem jutott volna eszembe a kék mondjuk egy biztonságtechnikai cég honlapjánál. Most viszont, hogy leírtad… 🙂 A másik dolog amit mondani szeretnék, az az oldal olvasóinak szól: Ennél egy árnyalattal próbáljunk meg intenzívebben szavazni azon a bizonyos versenyen, én nagyon szeretnék még több hasonló leírást látni, amiből biztos több lenne, ha a Webpillango nyerne a szavazáson… [meglenne a harcimorál 🙂 ] Szóval bátorítok mindenkit, hogy azt a fránya napi egy szavazatot intézze el, és így tartsuk meg Tupacko első helyét a listán! Hajrá!

lowert 2010. március 18. - 14:39

Köszönöm szépen a segítőszándékot! Abban biztos vagyok, hogy mostantól nem fogom annyira elhanyagolni az oldalt, mint az elmúlt időben. Kerül amibe kerül, kiszorítom rá az időt!

Avatar Tupacko
2010. március 18.
18:02

Én azt szeretem, amikor RGB kék háttéren jelenik meg egy RGB piros felirat 10pt-os nagyságban Old English vagy bármilyen más cirkalmas fonttal+villog is.

Mellette felbömböl a médialejátszóból valami zajhalmaz, hogy a hangszóróm kikönyököl, és kikapcsolhatatlan, mert el van rejtve.

Há’ mit ne mondjak? Szoktam a fejem fogni… 🙂

BonFire 2010. március 25. - 03:55

A zene nem a szinekhez tartozik, ahhoz kellene egy “Top 10 dolog, amit elkerulj a weboldaladon” … pl. media lejatszo, kattancs, stb 😛

Avatar Tupacko
2010. március 25.
06:52

Mi az a Kattancs? 😀 a kattintási hang, vagy mi?:)

Balou 2010. március 26. - 19:50

A kattancsok azok a beszelo figurak, akik az oldal betoltodeset kovetoen (vagy par masodperc eltolassal) elougranak es magyaraznak mindenfelet … altalaban szineszek, normal video, flash formaban az oldalba agyazva (termeszetesen kek/zold vaszon elott keszitett, transzparens hatteru, felvetel). Ami a lenyeg, NAGYON idegesitoek! 🙂

Avatar Tupacko
2010. március 26.
22:14

A kattancsban egy a jó: hogy “elmondták” a készítést bár erre 3 másodperc alatt rájöttem magamtól is. Egyébként ténlyeg szörnyen idegesítőnek néz ki.

Bence 2010. április 17. - 15:18

Nagyon tetszett a cikked, sok érdekességet találtam benne.

Köszönöm!

Marcipa 2010. május 4. - 11:20

Ajánlani tudnék az olvasó közönségnek egy angol nyelvű “színvilág” generátort. Egyszerűen kilehet választani a nekünk tetsző színt és tippeket kap az ember, hogy milyen színekből épüljön fel az oldal további része. Akit érdekel, itt az url:
colorschemedesigner.com

Kephost 2010. július 22. - 13:31