2009-09-30 12:47:07

Jaki kolor przyniesie popularność Twojej stronie?

Generalnie twórcy internetowi dzielą się na dwie grupy. Na wspaniałych profesjonalnych programistów, którzy potrafią na stronie zrobić cuda. Tylko że te cuda wcale tak cudownie nie wyglądają. Źle dobrane kroje pisma, kolory, nie pasujące do niczego elementy graficzne. I z drugiej strony graficy, webdesignerzy wymyślające niesamowite obrazy, od których ciężko oderwać oczy. Osoby skupiające w jednym ciele umiejętności obu stron, należą do rzadkości.

„Sekrety programistów” czytają głównie, tu duża niespodzianka , programiści – często początkujący, albo dopiero przyszli. Wielu z Was, podobnie zresztą jak i ja, nie zawsze potrafi dobrać odpowiedni zestaw kolorów na stronę. Liczenie na własny zmysł estetyczny lub szczęśliwy przypadek bywa zwykle zawodne i potrzebna jest pomoc z zewnątrz. Na szczęście tę pomoc można znaleźć w Internecie w postaci narzędzi komponujących palety kolorów. Wybór tych narzędzi jest dość duży, ale nie wszystkie do końca spełniają swoją rolę. Ja przedstawię dwa z nich, które najlepiej sprawdziły się w mojej pracy min. przy tworzeniu strony serwan.pl, ale też stron, które powstają w tej chwili.

Pierwszego narzędzia używam do wstępnego wyboru głównych kolorów. Jest to Color Scheme Designer. Głównym elementem tego narzędzia jest koło kolorów. Można je kliknąć w dowolnym miejscu wybierając kolor podstawowy. Do tego koloru zostaną dobrane inne kolory i utworzona z nich paleta, która znajduje się po prawej stronie koła. Zaznaczenie okienka „Show text” pod paletą kolorów spowoduje wyświetlenie napisu na każdym kolorze palety. Na dobór kolorów można wpływać poprzez ustawienia. Nag kołem kolorów mamy sześć modeli kompozycji.

Mono dobiera paletę na podstawie pojedynczego koloru. Przydatność tej palety jest dosyć ograniczona. Można jej użyć do prostych stron jako dodatku do czarnego tekstu na białym tle.

Complement nie ma nic wspólnego z komplementem. Ten model do wybranego koloru dodaje kolor komplementarny, mocno skontrastowany z wybranym kolorem. Kolorystyka tego modelu jest dość ryzykowna i nie sprawdza się przy każdej tematyce strony, ale oba wybrane kolory mogą być dobrym punktem wyjścia do komponowania palety w drugim narzędziu, które opiszę przy następnej okazji.

Triad do wybranego koloru dobiera dwa inne o równej odległości na kole kolorów od barwy podstawowej. Odległość tę można zmieniać poprzez przesunięcie na kole punktu symbolizującego jeden z dobranych kolorów, lub klikając na „Angle” po prawej stronie nad kołem i ustawiając odpowiedni kąt. Regulacja w tym modelu ograniczona została zakresem od 5 do 90 stopni. Kąt mierzony jest od nieistniejącego w tym modelu koloru komplementarnego. Uzyskana paleta jest ciekawsza niż w poprzednim modelu aczkolwiek nadal dość mocno skontrastowana. Paleta często sprawdza się na różnych stronach o tematyce rozrywkowej, dziecięcej lub młodzieżowej. Raczej należy jej unikać przy stronach biznesowych, finansowych czy informacyjnych. Wyjątkiem może być strona informacyjna czy biznesowa związana z grafiką, sztuką wizualną lub multimediami.

Tetraddo wybranego koloru dobrane są trzy inne w tym jeden kontrastowy pozostałe dwa też są względem siebie skontrastowane. Możemy jednak zmieniać odległości pomiędzy obiema parami kolorów, co może dać dość ciekawy efekt. Otrzymana w ten sposób paleta jest bardziej uniwersalna od poprzedniej. Nadal jednak są obszary, w których użycie takiej palety może wiązać się z ryzykiem nie trafienia do grupy docelowej.

Analogic jest modelem trójkolorowym podobnie jak Triad. Różnica między nimi jest niewielka, ale za to dosyć istotna. Regulacja odległości dodatkowych kolorów odbywa się również w zakresie 5 – 90 stopni, ale w stosunku do koloru podstawowego. Przy wartościach kąta poniżej 50 paleta wynikowa jest wystarczająco stonowana, by użyć jej tam, gdzie model Triad wydawał się być nieodpowiedni. Jest to model używany przeze mnie wraz z modelem następnym najczęściej, aczkolwiek ostateczną paletę komponuję w następnym z opisywanych narzędzi.

Accented analogic do modelu poprzedniego jest dodany kolor kontrastowy do koloru głównego. Uzyskana paleta jest bogatsza przy zachowaniu wszystkich zalet i zastosowań palety poprzedniej.

Skomponowane w ten sposób palety możemy dodatkowo wyregulować. Pod kołem kolorów znajdują się dodatkowe zakładki. Kliknięcie w „Adjust Scheme” przeniesie nas do narzędzia regulacji jaskrawości, nasycenia, kontrastu i jasności palety. Na zakładce „Color List” mamy próbki wszystkich kolorów z palety wraz z ich kodami szesnastkowymi gotowymi do użycia na stronie www.

Pod paletą kolorów znajdują się zakładki „Light page example” i „Dark page example” Kliknięcie ich powoduje wyświetlenie przykładowej strony używającej danej palety w wersji jasnej lub ciemnej.

W menu górnym Color Scheme Designer mamy możliwość cofania ostatnio wprowadzonych zmian, przywracania cofniętych zmian, wylosowania dowolnej palety, zasymulowania jak daną paletę widzą ludzie z różnymi zaburzeniami postrzegania barw i eksportu palety w różnych formatach.

Mam nadzieję, że opisane narzędzie pomoże Wam w wyborze odpowiednich kolorów na swoją stronę. Wybór kolorów jest ogromny, nie zawsze jednak zupełnie dowolny, często pojawia się potrzeba dobrania palety do loga lub innego elementu graficznego. Dobrze jest wtedy ten kolor z loga ustawić jako kolor główny i do niego dobierać paletę. Poszczególnym barwom nadaje się też różne znaczenie psychologiczne np. kolor niebieski oznacza autorytet, zielony – naturę, żółty – komunikację, a czerwony – namiętność. O tym też warto pamiętać, ale bez przywiązywania nadmiernej wagi. Żółty tekst na białym tle będzie raczej mało komunikatywny.

Zachęcam do korzystania z opisanego narzędzia i dzielenia się swoimi uwagami i spostrzeżeniami poniżej.

Tagi: kolor, web design

Ten wpis został opublikowany środa, 30 Wrzesień 2009 o 12:47 i jest zaszufladkowany do kategorii Sekrety Webmasterów. Możesz śledzić wszystkie odpowiedzi do tego wpisu poprzezkanał RSS 2.0. Możesz dodać odpowiedź lub trackback ze swojej strony.

3 odpowiedzi do “Jaki kolor przyniesie popularność Twojej stronie?”

procek pisze:

2009-09-30 o 14:36

„oszczególnym barwom nadaje się też różne znaczenie psychologiczne np. kolor niebieski oznacza autorytet, zielony – naturę, żółty – komunikację, a czerwony – namiętność.”

Bzdura kopiowana i powtarzana ciągle w sieci. Owszem barwy mają znaczenie i nie zrobimy słonecznej strony dla zakładu pogrzebowego, ale wskazywanie – żółty oznacza coś tam nie ma najmniejszego sensu. Wszystko zależy od ogólnej wizji strony, a nie tylko koloru… Ważniejszy jest kontrast
Leszek Sewastianowicz pisze:

2009-09-30 o 20:54

Nie wiem czy bzdura. U mnie działa . Oczywiście nie można traktować kolorów jak cudownych zaklęć, ale czasem okazują się przysłowiowym „języczkiem u wagi”. Tutaj chciałem tylko zasygnalizować, że coś takiego istnieje. Zainteresowanych odsyłam do księgarni, bo w Internecie rzeczywiście więcej jest bzdur na ten temat niż merytorycznie wartościowych informacji.

Dzięki procek za przypomnienie o kontraście. Tak kontrast jest bardzo ważny i to nie tylko przy tekście (najlepiej czarne litery na białym tle), ale i przy całej grafice. Palety kolorów przed zastosowaniem dobrze jest sprawdzić w różnych warunkach oświetleniowych. Bywa, że kolory przy sztucznym świetle wyglądają świetnie i mocno się od siebie odróżniają, a przy świetle dziennym w mocno nasłonecznionym pomieszczeniu zlewają się i są nijakie.
estera pisze:

2009-10-01 o 02:14

ZAWSZE OD CIEBIE DOSTAJE FAJNE TIPSY, ALE DZISIAJ NICZEGO TAKIEGO SIE NIE SPODZIEWALAM. JAK WIDAC NIE JESTEM ZAWODOWCEM, ALE NA PEWNO SPRAWDZE TO MAGOCZNE KOLO W PRZYPADKU MOJEJ STRONY INTERNETOWEJ I JUZ WYCZYTALAM O BLEDZIE JAKI ZROBILAM.
A JA TAK NAPRAWDE TO WOLE PRAKTYKE OD CZYTANIA KSIAZEK, W KSIAZKACH NIE MA BEZCENNEGO DOSWIADCZENIA, NO I JAK WRESZCIE WROCE DO POLSKI TO ZARAZ DO CIEBIE IDE NA SZKOLENIA.NA RAZIE WIELKIE, WIELKIE DZIEKI.

Dodaj odpowiedź

Musisz się zalogować aby dodać komentarz.