Gradient...

...czyli nie wszystko złoto co przechodzi z żółtego w niebieski.

Do napisania tego blaga zainspirował mnie niedawno przeczytany artykuł. Z racji, iż nie każdy buszuje ostro po sieci a ciekawe rzeczy można tam znaleźć, pozwolę sobie pozbierać zawartość artykułu razem z moimi uwagami w jedną spójną całość.

Do sedna:

"Przechadzając się" po polskich stronach internetowych można zauważyć kilka prostych trendów. Wielokrotnie swoim znajomym wmawiałem aby zastanowili się dwukrotnie zanim walną menu po lewej stronie i wielki nagłówek w ich nowym dziele. A na widok kolejnych klonów stworzonych z połączenia WP i Onetu mam drgawki. Jednak czytając wspomniany artykuł doszła do tej listy jeszcze jedna rzecz.

Gradient.

Dobry gradient nie jest zły. Mógłbym rzucać setkami świetnych przykładów delikatnych jak i mocnych gradientów na stronach. Rzadko kiedy kończącymi się na .pl ale i takie się zdarzają ;)

Nie mniej ostatnio tendencja do nadużywania gradientów we wszystkim wzmogła się i niestety nie spada. A pojawienie się możliwości robienia cudnych przejść w CSS3 nie pomaga w tak krytycznej sytuacji.

No ok, trochę przesadzam. Gradienty nie są złe i pod żadnym pozorem nie chce nikogo zniechęcić do stosowania przejść między kolorami, chciałbym jedynie abyście dwa razy zastanowili się zanim bezmyślnie rzucicie: "a tu damy jakiś gradient i będzie ładnie wyglądało" albo „nie mamy czym to oddzielić?, pierdzielniemy gradient i będzie luz”.

Bo czym on jest - ten tu opisywany wilk wśród owiec - to nic tylko graficzny dodatek, rzadko kiedy (a właściwe praktycznie nigdy) nie niosący informacji. A skoro nie niesie informacji to na 99,999% można się go pozbyć.

Aha, strona inspirująca to: http://buildinternet.com/2010/04/designing-without-gradients/ - tak wiem, artykuł ma już z gazylion lat, ale pisanie blagów zajmuje mi sporo czasu ;p

Jak już wspomniałem, gradient nie niesie żadnej informacji – nie potrafi też oddzielać – wbrew przekonaniu jakoby można było przejściem kolorów zaznaczyć jakąś sekcje. Powód jest błahy: w gradientach nie ma granic, duh! (chyba, że go utniemy, ale wtedy tworzymy właśnie linię – o czym jeszcze będzie)

Skąd wziął się ten trend u nas ( i w ogóle)? Okazuje się, że nie jest to trudne pytanie. Blisko 95% polskich i gdzieś koło tylu samo zagranicznych webdesignerów to samozwańcy. Nie to żebym ich nie lubił. Sam takim jestem. Wszystkiego nauczyłem się sam, czytając, studiując, kodując, dizajnując… fak, a żem słowo wymyślił ;p

Z tych osób mało kto zna podstawowe zasady dobrego designu graficznego (nie mówiąc już o UI czy UX), przeważnie papugują już istniejące pomysły nie zastanawiając się nad tym dlaczego zostały wykorzystane w taki a nie inny sposób. Przyczyniła się też do tego moda na Web2.0 gdzie przyciski wydają się wypukłe a bez gradientu strona pretensjonalnie blednie. Czasem tak jest. Nie mniej jak już pisałem, nie jest to lekarstwo na wszystkie choroby świata.

#fanfary#

UWAGA! UWAGA! Lekarstwo na wszystkie choroby świata

...jest jednak znane – jest nim LINIA!

#fanfary#

Linia to podstawa webdesignu, o czym możecie się przekonać praktycznie wszędzie. Wystarczy wejść na pierwszy lepszy większy serwis by przekonać się, iż tak naprawdę wszystko oddzielane jest prostymi liniami. Czasem nawet jeśli jej nie widać, to bywa (np. gdy tekst jest równany do jednej strony, powstaje po tej stronie linia).

Zgodnie z założeniem dobrego designu stron WWW, projekt strony zamieniony na proste czarne kreski na białym tle, powinien się obronić w 100%. Wszystko powinno być czytelne i klarowne. Jeśli tak nie jest - znaczy, że ktoś gdzieś popełnił ewidentny błąd.

Drugą niezwykle istotnym elementem, który często jest zapominany i zastępowany, właśnie przez gradienty, to ewidentna hierarchia. Jeśli coś jest ważniejsze, jest większe. Dlatego nagłówek nowych informacji powinien być większy niż link do komentarzy – mimo, iż ładniej będzie na odwrót. Oczywiście można eksperymentalnie zmieniać to, ale i tak obracamy się wtedy w kwestii pewnej zmienionej na potrzeby konkretnej strony hierarchii.

Ostatnim elementem, który pomijany jest na rzecz przejść kolorystycznych to silna typografia. Dobrze dobrany, czytelny (lub ekstrawagancki, acz pasujący) font, będzie tysiąc razy bardziej efektowny niż znajdujący się w tle gradient – nie ważne jak ładny. Większość gradiento-znawców zapomina się i używa domyślnych czcionek systemowych, co ma swoje plusy, ale w dobie CSS3, HTML5 i madafaking Google Font API jest przestarzałe. (Pomijam, że już IE6 całkiem dobrze wgrywa obce fonty).

TL;DR;GMWIW

Na koniec oczywiście najważniejszy kawałek wpisu – drodzy twórcy stron internetowych, używajcie dalej gradientów. Tak, do was młodych startujących, też mówię. Używajcie, serio! Ale tylko jako formę upiększającą wasz design. A osobiście proponuje, używać tylko subtelnych, prawie niewidocznych przejść. Gdyż one robią zawsze najlepsze efekty.

Howgh.

[font=11 ]A na deser.

Jeśli chodzi o szybki i dobry przykład EVIL GRADIENTS, proponuje odwiedzić http://www.opowiadania.pl/ po redesignu. Pierwszym co się rzuca w oczy to, iż niewiadomo gdzie zaczyna się główne menu, gdyż górną krawędzią jest blednący gradient. Drugim ewidentnym błędem jest wykorzystanie gradientu do stworzenia hierarchii, co widać w elemencie będącym sponsorowanym (nagłówek ma różowy gradient) podczas gdy opis pod spodem blednie. Niby są linie, ale bardzo źle wykorzystane – a tam gdzie powinny być, to ich nie ma. Pominę złą gospodarkę pustą przestrzenią, bo to już detale.

[font=11 ]A na drugi deser:

Według MS Twoja stara jest do bani - http://twojanowa.pl/