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: ,

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

  1. procek pisze:

    „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 ;)

  2. Leszek Sewastianowicz pisze:

    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.

  3. estera pisze:

    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.