Szary w webdesignie – przegląd dobrych layoutów

Po rocznej przerwie w prowadzeniu bloga postanowiłam powrócić do tej aktywności z nowym artykułem. Bohaterem dzisiejszego wpisu będzie kolor szary i jego zastosowanie w webdesignie.
W ostatnich latach szary zyskał dużą popularność. Wiąże się to zarówno z powrotem minimalizum w webdesignie (po okresie zachłyśnięcia mocnymi zestawieniami kolorów i bogatymi layoutami), jak również z samą neutralną naturą szarości – koloru neutralnego, wyrafinowanego i dobrze komponującego się w wielu różnych zestawieniach.

Barwa szara ma różne odcienie i jasność. Istnieje neutralna szarość, ale z kilkuprocentową domieszką żołci nabiera ciepłego zabarwienia. Podobnie dodatek niebieskiego powoduje, że staje się barwą zimną.
Pierwsze skojarzenia, jakie wywołuje kolor szary to przede wszystkim neutralność, ład, harmonia, ponadczasowość, ale również nuda, monotonia, starość, depresja.
Szary to obok zieleni i brązu jeden z tzw. kolorów Ziemi. Psychologowie koloru uważają, że to kolor, po który sięgamy jak chcemy się „schować” przed problemami lub innymi ludźmi, a intensywne stosowanie szarego wskazuje zazwyczaj na brak pewności siebie i może działać depresyjnie.

Psychologowie zajmujący się oddziaływaniem kolorów na człowieka stwierdzili również, że szary wpływa korzystnie na pracę mózgu, wzmaga kreatywność. Kojarzy się z profesjonalizmem i nowoczesnością i elegancją. Bardzo często stosowany jest więc przez korporacje, kancelarie prawnicze, firmy z branży high-tech.
Szarość w zestawieniach z innymi barwami zyskuje zupełnie inny charakter, ponieważ znakomicie służy za tło. Wielu designerów zastępuje więc biel jasnym odcieniem szarości, a czerń ciemnym kolorem grafitowym. Taki zabieg pozwala osiągnąć bardziej subtelny, wyrafinowany efekt niż stosowanie czystej bieli i czerni. Bardzo często odcienie szarości stosowane są więc jako tło, a także w typografii. Szare gradienty stosowane są też bardzo często w przyciskach.

Szary bardzo łatwo łączy się z innymi kolorami. Jasny szary w połączeniu z pastelowymi odcieniami zieleni, niebieskiego, lawendowego daje delikatny efekt, idealnie sprawdzający się w layoutach przeznaczonych dla kobiet. Połączenie grafitowej szarości z czernią i intensywną barwą czerwieni lub pomarańczu jest za to bardzo intensywnym, energetycznym zestawieniem stosowanym w przeznaczonych dla mężczyzn (przykładem mogą być strony sportowych samochodów). Zestawienie szarego z mocnym odcieniem różu nadaje stronie charakteru retro. Często też stosuje się minimalistyczne rozwiązania, w których różne odcienie szarości łączy się jedynie z bielą. Zestawienie to jest bardzo nowoczesne, bezpieczne i neutralne, chociaż trzeba uważać, aby strona nie stała się jednocześnie nudna. Dlatego takie monochromatyczne zestawienia najczęściej stosuje się w layoutach mających z definicji być eleganckim tłem dla zdjęć (port folia designerów lub fotografów, strony-reklamówki produktów, itp.). Jak widać kolor ten -choć często niedoceniany- daje naprawdę duże możliwości.

1. Port folio, ilustracja: http://2009.legworkstudio.com/

2. Szare tło skontrastowane z ilustracją 3D http://egopop.net/

3. http://www.htc.com/pl/...

4. ...i http://www.apple.com/ - strony producentów telefonów/tabletów. Szare, neutralne tło pozwala na dobre wyeksponowanie zdjęć produktów:

5. http://blakeallendesign.com/ - użycie jasnej szarości zamiast bieli i grafitowego tła w zastępstwie czerni sprawia, że ten prosty layout jest bardziej interesujący i wyrafinowany:

6. Nietypowa strona firmy browarniczej - http://westbrookbrewing.com/. Efekt osiągnięto łącząc proste rysunki, typografia sprawiająca wrażenie odręcznego pisma i bardzo oszczędne stosowanie koloru.

7. http://www.queness.com/ - strona z wykorzystaniem jQuery (przykład takiego pluginu pod tym linkiem: http://www.queness.com/post/8287/8-magical-dynamic-and-fluid-layout-and-how-to-make-it).

8. Podobne rozwiązanie jak wyżej zastosowano na tej stronie: http://www.mksdarchitects.com/, z tą różnicą, że kolor tła jest zdecydowanie ciemniejszy. Generalnie tego typu rozwiązania są ostatnio bardzo często stosowane w przypadku prezentacji port folio – pozwala na maksymalne wykorzystanie przestrzeni na stronie i ładnie dostosowywuje się do różnych rozdzielczości ekranu.

9. Strona w duchu ostatnio modnego minimalizmu. W tego typu stylistyce szary sprawdza się zawsze bardzo dobrze (http://www.ericpaulsnowden.com/blog/).

Często w takich minimalistycznych stronach również zdjęcia zostają wyszarzane, a jedynie po najechaniu pokazują się w pełnym kolorze. Taki zabieg pozwala odbiorcy skupić się na wybranym obrazku oraz pozwala na utrzymanie eleganckiego i spójnego wyglądu strony.

Kolejne przykłady będą stronami pochodzącymi z Polski. Coraz częściej powstają tu ciekawe strony, a w popularnych galeriach CSS często się ich nie pokazuje, albo ciężko je odnaleźć.

10. Polski design – strona Nowego Teatru, często stosowane połączenie szarości z detalami w żywych, nasyconych barwach (http://www.nowyteatr.org/).

11. Kolejny ciekawy projekt z Polski. W tle bogata grafika skontrastowana z mocnym zestawieniem nasyconego pomarańczowego i zielonego (http://www.infinitygroup.pl/) .

Motyw grafiki połaczonej z żywym zestawieniem kolorów wykorzystano również na tej stronie: http://hugsformonsters.com/.

12. Strona prezentująca najlepsze prace dyplomowe warszawskiej ASP: http://comingout.asp.waw.pl/

13. Dobrze sprawdzające połączenie jasnej szarości z żółtym (http://www.miejskalornetka.pl/).

Podobna kolorystyka została zastosowana również na tej stronie: http://www.madebywater.com/.

14. Strona o modzie dla kobiet – szare tło stanowi dobre tło dla zdjęć (http://modnapolka.pl/). Pastelowe detale nadają stronei kobiecy i delikatny wygląd.

15. Portal z wydarzeniami miejskimi – połączenie szarości z gruntową teksturą (http://www.miastownia.pl/).

16. Strona producenta ubrań (http://bigstar.pl/):

17. Bardzo ciemy grafit w tle w połączeniu z mocną typografią i intensywną zielenią na stronie Teatru Wielkiego w Warszawie (http://www.teatrwielki.pl/)

18. Portal Stowarzyszenia Twórców Grafiki Użytkowej – szarość przełamana czerwienią