Niski kontrast i małe fonty nie są z założenia złe!
21 maja 2006
Wypowiedzi padające z ust przypadkowych komentatorów projektów wizualnych, będących jednocześnie pseudospecjalistami od wszystkiego, można sprowadzić do parunastu schematów. Jednym z nich jest problem kontrastu i akcentu położonego na fragmenty designu. Tacy ludzie posiadają przygotowane szablonowe wypowiedzi i rzucają nimi jak asami z rękawa. Że tekst za mały i za szary, że kontrast jest zbyt niski, że kolor nie odpowiada i przez co jakaś rzecz nie jest dobrze widoczna. W większości przypadków nie mają kompletnie racji, co mam zamiar udowodnić. Ale to za chwilkę.
Odniosę się jeszcze do świata poza designem interaktywnym. Zastanówmy się dlaczego nikt nie krzywi się, że producent pasty do zębów umieścił na opakowaniu jej skład ściśniętą i malutką czcionką? Dlaczego nie pieklimy się, że w programie telewizyjnym tekst nie jest szeryfowy, bo podobno szeryfy się lepiej czyta w druku? Czemu nie dzwonimy do redakcji gazety, że za bardzo pomniejszyła i rozstrzeliła napis „Reklama”? Bo umiemy zdać sobie sprawę co jest ważne, co jest użyteczne - żyjemy dość długo. Natomiast w Internecie i nowoczesnych mediach bardzo łatwo i szybko popaść w schematy. Przyswoić sobie pewną manierę i według niej oceniać wszystko wokół.
Całe szczęście tak się składa, że wśród designerów znajdują się autorytety. I można się odwołać do ich doświadczenia podczas projektowania własnej pracy. Dobrą opinią cieszą się też ci projektanci, którzy umieją skupić uwagę i zaciekawić widza dobrym designem. Oto przykłady miejsc designu gdzie pomyślnie użyto niskiego kontrastu albo małych czcionek:
Dave Shea jest autorem Mezzoblue i patronem CSS Zen Garden. Na jego blogu widać dobrze zaakcentowane czerwone tytuły postów no i oczywiście ich treść. Nie widać natomiast prawie w ogóle znaczka informującego kiedy post został wysłany. Kontrast jest minimalny. Czemu, och czemu? Bo nie jest to najważniejsza informacja … a dam sobie rękę uciąć, że jak popatrzeć / poszukać daty to się ją znajdzie. Nie wszystko na raz, po prostu.
Autor strony Avalonstar zaprezentował 1 maja dwudziestą drugą odsłonę szaty graficznej. Avalonstar należy do 9rules, Bryan pisze ciekawie i jak można wywnioskować z paczek prac, które zamieścił na blogu jest doświadczonym designerem.
W najnowszym projekcie pokazał całkowicie odmienny styl bloga, tworząc bardziej stronę domową niż zwyczajny dziennik z postami. Lista z kategoriami jest wyeksponowana na stronie głównej - widać obrazki, opis działu oraz ostatni post. Mamy także informację o tym kiedy kategoria została zaktualizowana. Jaki kontrast tego napisu? Niski. Dlatego, że ta informacja nie jest tak ważna jak pozostałe wymienione przeze mnie elementy. Gdy popatrzeć na napis, jesteśmy w stanie go przeczytać. Podczas oglądania bloga pierwszy raz dodatkowa informacja nie wchodzi w drogę i nie przeszkadza skupić się na ważnych elementach.
Mój osobisty guru - Andy Rutledge. Nagłówek Previously in DesignView, podobnie jak reszta tego typu napisów jest dość jasna jak na tło na którym się znajduje. Dzięki temu zabiegowi czytelnik na początku spogląda na biały boks poniżej z wyraźnymi nagłówkami postów, dopiero potem jeśli chce wiedzieć co to, omiata wzrokiem górę. Nie na odwrót, zwłaszcza że szukamy tam wiedzy - a tą nie odzwierciedla najlepiej chwytliwy nagłówek a sama treść - tutaj uporządkowana i dobrze widoczna.
Johnatan Snook jest kolejnym profesjonalistą, który umie korzystać z kontrastu. Na powyższym obrazku widać dokładnie co jest ważne w kolumnie Quick Links - treść miniwpisów. Nie data oraz permalink i komentarze. Jeśli jesteś zainteresowany, zobaczysz co masz zobaczyć, a - powtarzam - nie rozpraszasz się za dużą ilością elementów po pierwszej wizycie.
Cameron Moll - następny światowej sławy designer. Łatwo zauważyć jak wyeksponował lewą kolumnę swojego bloga, przyszarzając prawą. Kontast zmalał solidnie, ale nie jest to ważne, jeśli zechcemy skupić się na prawej części. Blog ma to do siebie, że ważne są wpisy, cała reszta jest tylko dodatkiem.
Dalej mamy jego portfolio, żeby nie wyszło że tylko chodzi mi o blogi. Pomarańczowy na ciemnoczerwonym tle. Po co, skoro można było dać biały, czy nie? Nie, jasne kolory tekstu są zarezerwowane dla tytułów oraz podstawowych danych na temat wykonanej pracy. Aby je zaakcentować. Kiedy wszystko jest ledwie widoczne na pierwszy rzut oka, elementy z wysokim kontrastem się wybijają.
W ostatnio odnowionym blogu Critical Webdesign daty postów w archiwum są ledwo widoczne, ponieważ - jak już pisałem wyżej - data wysłania postu nie jest tak ważna jak jego tytuł. Dodatkowo wytworzono wizualne wcięcie, które uwypukliło nagłówki tych dwóch boksów z linkami.
If..Else Log - weblog Phu Ly, należący do 9rules. Z lewej strony mamy tak zwane meta informacje o wpisie - bardzo małą czcionką i z wyszarzonymi kawałkami tekstu. Podobnie jest na dole. Wszelkie rekordy bije stopka, z kontrastem tak niskim że prawie nic nie widać. Czemu tak zrobiono? Bo po co ktoś ma być rozpraszany? Po co ma być zapraszany… „hej, chodź obejrzyj mnie… zostałem napisany w XHTML i serwer wypuścił mnie w osiem dziesiątych sekundy”? Nie ma powodu do tego. Nie ma powodu rozpraszać czytelnika dwoma kolumnami tekstu o tej samej ciężkości - dlatego prawa strona Shorts jest wyszarzona i zmniejszona.
Więcej? Proszę, nawet starsze strony używają zmian kontrastu i wielkości czcionki:
Więc zamiast wytykać wszędzie błędy kontrastu i przyczepiać się do byle czego zastanówmy się co designer chciał osiągnąć. Poużywajmy strony - nota bene potestujmy jego umiejętności - jak nas będzie po niej prowadził, czy dotrzemy do ważnych elementów, a czy te mniej są w odpowiednim miejscu i czy położone zostało odpowiednie natężenie. Niski kontrast i małe czcionki nie są z założenia złe!
Źle jest, gdy ktoś nadużywa przyszarzenia i rozjaśnienia. Gdy okazuje się, że główny powód dla którego jesteśmy na stronie (posty na blogu, zdjęcia na serwisie a'la Flickr, panel surowców w grze MMORPG, etc) jest pozbawiony wyraźnego kontrastu. Jak katarynka powiem jeszcze raz - nie ma nic złego w ukryciu części strony za pomocą kolorów i zmniejszonego kontrastu. Zamiast bić pianę bo ktoś zrobił coś ładnego i z dobrą kompozycją zapytajmy się lepiej czy tutaj dobrze zaprojektowano linki:
Wpadamy w kolejny schemat, tak jak było jeszcze jakiś czas temu z tabelkami wszekiej maści. Ludzie używali divów do tworzenia siatek; chwilę potem chwalili się że im się strona waliduje dzięki document.write, następnie otwierali kod i na każdy style="" kręcili głowami, że to przeczy dostępności (sic!). To jest głupota, przecież. Czytajmy rozsądnie i jeśli chodzi o design - używajmy, oglądajmy zanim ocenimy. Zróbmy to co zwykle się z serwisem robi - zamiast wpadać w sidła rzekomej dostępności i wszędobylskiej użyteczności (każdy teraz jest specjalistą od użyteczności).
Designer ma do wykonania większą pracę niż napisanie paru znaczników czarną Verdaną. Liczy się wszystko, co już przytoczyłem kiedyś:
Projekt graficzny ma to do siebie że nie operujesz tylko na liczbach - ale i na odczuciach, efektach, stylistyce, przekazie, uwypuklaniu i chowaniu fragmentów designu. Kierujesz widza tu, tam, pomijasz pewne fragmenty w spojrzeniu ogólnym, lecz dajesz je na tyle wyraźne aby przy szukaniu informacji w wiadomym miejscu je znaleźć. Nie wszystko przez to jest czarnym tekstem, nie wszystko ma podkreślenia i jest zgodne z paragrafem 7 specyfikacji 45.
Boję się czasów, kiedy wrzeszczące pokolenia trolli zarówno digga jak i usenetu będzie krytykowało design, bo została w nim użyta czcionka Trebuchet MS; bo poboczne metainfo zostały złożone szarym i małym tekstem na białym tle. Bo coś było niebieskie (a przecież niebieski nie jest już cool). I tak samo boję się technicznych zelotów wytykających zbyteczną gradientowatość gradientu. Wpadamy w sidła szablonowego myślenia, znowu.
Zanim skrytykujesz za coś niezgodnego z założonym odgórnie zdaniem - zastanów się przez moment! Zastanów się też co napisałem w tym poście i z kolei nie przesadź, bo ktoś teraz przychylił się do twojego zdania! Jestem zdenerwowany, bo za chwilkę, już za momencik, profesjonaliści bez doświadczenia i podstawowej wiedzy o designie (nabytej przez studia albo w terenie, to nie ważne) będą dyktować jak ma wyglądać dobry graficznie (wizualnie) projekt. Tekst i grafika nie służą tylko werbalnemu przekazowi informacji, ważna jest ich aranżacja czy chcemy tego czy nie. Co więcej - jeśli tekstu jest dużo to najpierw szuka się punktu zaczepienia, a nie załatwią tego cztery kolumny jednolitego tekstu!
Powtórzę za tymi wielkimi bądź znanymi nazwiskami na górze - niski kontrast mniej ważnych elementów nie przekreśla dostępności / użyteczności strony, tylko ją zwiększa. Zamiast stwierdzać „to za jasne” zapytaj się „czy fakt, że to jest jasne przeszkadza mi w zwyczajnym odbiorze strony”. Mówimy o Internecie mediów i przekazu wizualnego. O erze wizualizacji i kompozycji. O czasach, gdy nie mamy czasu przeglądać strony od deski do deski tylko skupiamy się na ważnych miejscach. Designerzy muszą umieć temu sprostać - jakkolwiek by o nich źle nie myśleli wszelcy niewolnicy sloganów, frazesów, technologii i specyfikacji.
Ktos 10
21 maja 2006, 11:32
Draakhan 11
21 maja 2006, 11:54
mcv 15
21 maja 2006, 12:46
Michał Moroz 22
21 maja 2006, 13:42
jam łasica 33
21 maja 2006, 16:08