Projektowanie graficzne a szczególnie projektowanie na potrzeby stron internetowych jest jedną z tych dyscyplin, którą ciężko zamknąć w zbiór sztywnych reguł… i chyba dobrze. To powoduje, że ciągle odkrywamy coś nowego, zmieniają się trendy i traktujemy to trochę jak sztukę. Sprawę komplikuje też postęp technologiczny, który ciągle oferuje nam coś nowego lub pozbywa się idei, które nie przetrwały próby czasu. Tutaj jako przykład można wymienić technologię Flash.
Z drugiej strony są pewne zasady, których można nauczyć się na zajęciach z projektowania graficznego, oraz… matematyki. Istnieją w końcu także pewne niepisane konwenanse, lub jak kto woli trendy, których stosowanie bardziej przybliży nas do stworzenia czegoś nowoczesnego o wysokiej jakości.
Wszystko wokół nas może być opisane i zrozumiane dzięki liczbom.
Sentencja z filmu PI reż. Darren Aronofsky
O ile pisania szablonów i programowania dla potrzeb WWW uczono mnie już w technikum a konkretniej na uczelni wyższej, o tyle projektowania graficznego stron WWW uczyłem się (i ciągle się uczę) sam. Edukując się w wyjątkowo ścisłych dyscyplinach wypracowałem umiejętność nauki poprzez modelowanie gotowych projektów. Można to porównać do nauki konstruowania poprzez rozbieranie gotowych konstrukcji i poznaniu tego jak one właściwie działają. Dosłowne rozkręcanie i dekonstruowanie na czynniki pierwsze gotowych kompozycji to moja mała obsesja, którą praktykuję niemal automatycznie gdy przeglądam coś co z jakiegoś powodu mnie zainteresuje.
Funkcja designu stron internetowych
W przeciwieństwie do sztuki, która ma dostarczać wrażeń estetycznych oraz publikacji w czasopismach które są komunikatem/informacją – Web Design to coś zupełnie innego. Projekt strony ma przede wszystkim służyć użytkownikowi. Asystować w podejmowaniu decyzji (np. gdzie kliknąć z czym zapoznać się najpierw) i dosłownie wejść z nim w komunikację. Oczywiście, że projekt strony ma swoim wizerunkiem chronić interesy firmy publikującej stronę a następnie pomóc w merytorycznym przekazie lub ewentualnie być wezwaniem do działania. Na końcu, dobrze gdyby wygląd strony faktycznie trochę zachwycił jak takie nowoczesne dzieło sztuki lub chociaż delikatnie puścił oko do osób, które zwracają uwagę na szczegóły.
Dlaczego estetyka projektu strony jest ważna?
Niektórzy mówią coś w stylu „ja tam nie zwracam uwagi na design strony, wchodzę na stronę, znajduję interesującą mnie informację lub robię co trzeba i zmykam”.
Proszę wtedy aby na design spojrzeć jak na charakter pisma (tak przy okazji – mój też jest okropny). Czy estetyka czyjegoś pisma też jest obojętna dla czytającego? Można się postawić i cały czas twierdzić że tylko treść ma znaczenie. Według mnie design jest wręcz nośnikiem informacji, ma zatem wpływ na jakość jej odbioru a w ekstremalnych przypadkach może go dopełnić lub zniekształcić.
O kwestiach wpływu na decyzje i postrzeganiu estetyki obiektów na poziomie podświadomym nawet nie wspominam bo artykuł rozrośnie się do monstrualnych rozmiarów a druga sprawa to fakt, że nawet nie mam kompetencji do tego typu „jazdy” zahaczającej o nauki psychologiczne. W każdym razie każda spostrzegawcza osoba chyba się zgodzi, że rola designu w komunikacji i formy w jakiej ona następuje jest niebagatelna. Zatem co wpływa na tę jakość?
Typografia
Najtrudniejszą i najbardziej wymagającą od projektanta częścią Web Designu jest sam tekst czyli to co zwykle niesie najwięcej informacji. Ilość decyzji jaką trzeba podjąć jest przeogromna. Należy określić typ fontu, konkretny krój, styl, wysokość linii, kerning, marginesy i przy tym wszystkim oczywiście kolor. Całość musi grać a czasem jeszcze dochodzą uwagi klienta „Panie Pawle ten tytuł zrobimy delikatnie wększy” – co oczywiście ma wpływ na cały projekt i skalę trzeba lekko zmodyfikować – ale jak człowiek chce to wszystko się da 🙂
Typografia na stronach internetowych oraz wszędzie tam gdzie tekst jest wyświetlany na ekranie, szalenie różni się od zasad projektowania na potrzeby druku. To dlatego osoby, które zwykle projektują na potrzeby druku nie są w stanie zaproponować dobrego fontu dla strony internetowej lub mają lekko wypaczone nawyki. Do tego dochodzi jeszcze Responsive Web Design, który wymaga aby cała kompozycja i proporcje były skalowalne.
O ciekawych fontach, które do woli można stosować na stronach internetowych popełniłem osobny artykuł: Najlepsze fonty (czcionki) na stronę www. Mam nadzieję, że każdy znajdzie tam coś dla siebie.
Trendy
Trendy powodują, że coś się nam zaczyna podobać bardziej a to co kiedyś nam się bardzo podobało tak jakby straciło świeżość. To jakie mamy trendy w web designie jest podyktowane zmianami kulturowymi i postępem technologicznym. O trendach pisałem w artykule: Trendy – projektowanie stron. Strony, które 6 lat temu wygrywały branżowe nagrody dziś nie zrobią na nikim wrażenia. Idealnym przykładem może być realizacja mojej pierwszej strony internetowej hostingu, która doczekała już trzeciej wersji. Za każdym razem byłem zadowolony z efektów.
Czytaj więcej o odnawianiu stron internetowych.
Kompozycja i proporcje
Odpowiednia proporcja sprawia, że mamy wrażenia porządku a to naturalnie przyciąga wzrok i budzi pozytywne skojarzenia. Proporcje to nic innego jak relacja rozmiarów. Możemy mówić o proporcjach wysokości do szerokości jakiegoś elementu a także a proporcji dwóch odrębnych elementów, które występują w projekcie blisko siebie.
Jedną z najlepszych sztuczek jaką można zastosować to naśladowanie natury.
Oczywiście sam na to nie wpadłem, to znano już w starożytności. Jeżeli mówimy o proporcjach i naturze to pierwszym skojarzeniem oczytanych będzie złoty podział czy jak kto woli złota proporcja.
Zagadnienie jest fascynujące i mógłbym godzinami czytać i słuchać o kolejnych przykładach ze świata matematyki i przyrody ale – być może zabrzmi to jak herezja – według mnie wartość złotej proporcji jest nieco przeceniona. Uważam że symetria, relacja 1:3, podział 3:5 oraz oczywista proporcja 1:1 jest równie przydatna w graficie użytkowej a jednak tym proporcjom nie poświęca się całych książek i artykułów popularnonaukowych 🙂
Web Design i numerologia
Jeżeli ktokolwiek ma do czynienia z tworzeniem stron responsywnych na pewno jedną z jego ulubionych liczb jest 12. Ta też wyjątkowo często pojawia się w naturze ponieważ jej matematyczne właściwości są dosyć interesujące. Jest to wartość stosunkowo mała a dzieli się bez reszty przez 1, 2, 3, 4, 6 no i 12. To spowodowało, że stanowi podstawę do wszelkich systemów siatek na stronach internetowych oraz w drukarstwie.
Powyższy przykład strony internetowej jest poprawnie skomponowany wydawałoby się że jest elegancki i przemyślany. tak naprawdę użyto bardzo prostej sztuczki polegającej na konsekwentnym trzymaniu się siatki i marginesów pomiędzy kolumnami.
Prześwietliliśmy ten projekt i widać to jak na tacy. Popularność i uniwersalność takiej techniki projektowania zawdzięczamy tzw. szkole szwajcarskiej (tak, można tym pojęciem zaimponować na randce). Więcej informacji w źródłach na końcu artykułu.
Rytm i podobieństwo
Poprzedni punkt trochę do tego nawiązuje. Rytm polega na powtarzaniu wzorców które już są na stronie. Jednak jest nieco bardziej abstrakcyjny i trudno go dostrzec lub wpisać w siatkę tak jak zrobiliśmy to z kolumnami powyżej. Jednak w jakiś sposób czuć go. Tutaj za przykład dam zrzut wybranych realizacji z jednej ze stron mojej oferty.
Tak posortowałem zdjęcia realizacji w karuzeli aby te naprzemiennie pojawiały się z dominującym kolorem jasnym i ciemnym. Efekt rytmu: raz, dwa, raz, dwa…
Barwy i kolorystyka
Z jakiegoś powodu karty książek są od zawsze białe. Oczywiste jest, że dobór barw także powinien być podporządkowany pewnym zasadom użyteczności. Barwy rzucają się w oczy i często to im poświęca się uwagę w różnego rodzaju podsumowaniach trendów czy to w web designie czy to w innej dyscyplinie np. modzie. Barwy należy stosować ostrożnie, jest spory odsetek osób z chorobami widzenia polegającymi na nieodróżnianiu barw. Ciekawostką jest, że barwy to wrażenie subiektywne.
W tym starszym artykule pisałem o tym jak dobierać barwy na stronę www. A tutaj jeden z najpopularniejszych wpisów z całego mojego bloga: nazwy kolorów po polsku.
Kiedy mówimy o barwach w kontekście grafiki komputerowej nie sposób pominąć problematyki przestrzeni barw. Barwy na ekranie świecą, każdy kolor to kombinacja RGB czyli czerwonego, zielonego i niebieskiego. Barwy które dostrzegamy w naturze to odbite światło od podłoża, które wszystkie barwy za wyjątkiem tych które widzimy zostały w tym świetle pochłonięte. To powoduje, że pewnych kolorów nie da się wyświetlić na ekranie np. neonowego zielonego (który sprawia wrażenie że świeci) a innych, które uzyskaliśmy na ekranie nie da się wydrukować. Tutaj jeżeli ktoś interesuje się fotografią i poligrafią doskonale wie, że co każdy wyprodukowany ekran, skaner i drukarka inaczej zarządza kolorami, na szczęście z pomocą przychodzą wtedy profile ICC. Po co o tym w ogóle piszę? Dobierajmy kolory „przyszłościowo”, jeżeli rebranding zaczynamy od strony internetowej pewnie powstaną jeszcze drukowane materiały reklamowe. Warto mieć na uwadze te niuanse.
Zainspiruj się!
Jeżeli już się na kimś wzorować to tylko na najlepszych światowych markach, w działalności której design odgrywa istotną rolę. Sprawdź moją coroczną listę najlepszych pod względem designu i funkcjonalności stron firmowych oraz specjalnej selekcji sklepów internetowych.
Podsumowanie
Jak widać istnieje wiele niewidocznych na pierwszy rzut oka zasad projektowania dzięki którym gotowe produkty można uznać za estetyczne. Poznanie tych jak to nazwałem „sekretów” pozwoli bez wrodzonego talentu tworzyć może nie wyjątkowe ale z pewnością poprawne kompozycje. W dobrym projektowaniu nie ma miejsca na metodę prób i błędów. Żadne książki i kursy nie zastąpią codziennej praktyki, rozwiązywania problemów klientów i dostrzegania piękna istniejących projektów dosłownie w każdej chwili i w każdej sytuacji. Zapraszam do współpracy.
Źródła:
Kadavy D. Design For Hackers, wyd. Willey 2011
Odpowiedz lub skomentuj