Flat design, czyli aktualny trend w projektowaniu

Flat design, czyli „projektowanie płaskie”, to stosunkowo nowy i popularny trend w projektowaniu stron internetowych. Ideą tego nurtu projektowania jest skupienie się na treści, upraszczając stronę wizualną. Od strony graficznej królują tutaj duże, jednolite przestrzenie. Elementy graficzne pozbawione są modyfikacji dekoracyjnych, takich jak cienie czy mocne gradienty, nadając stronie wrażenie zupełnie płaskiej.

Kwintesencją tego stylu jest Windows 8. Było to jedno z pierwszych zastosowań projektowania płaskiego, widać je w postaci minimalistycznego menu kafelkowego. Nie ma tu zbędnych dekoracji, są proste kafle symbolizujące programy, wraz z nazwą programu i ew. z jego logo.

Flat design w Windows Phone

Projektowanie płaskie jest przeciwieństwem innego trendu – skeumorfizmu. Skeumorfizm polega na odtworzeniu wyglądu oryginalnego przedmiotu, aby użytkownikom łatwiej było zrozumieć, do czego służy. Dlatego też kalkulatory na telefonach kształtem i rozkładem klawiszy przypominają prawdziwe urządzenia, notatniki wyglądają jak kartki z zeszytu, a programy do czytania książek prezentują kolekcje na „drewnianych półkach”.

Dlaczego flat design?

Flat design pojawił się w projektowaniu stron www wraz z potrzebą prezentowania treści na urządzeniach mobilnych. Okazało się, że strony z dużą ilością grafiki, animacji czy  nagle pojawiających się elementów nie są dobrze odbierane przez użytkowników telefonów komórkowych. Zważywszy na niewielkie rozmiary ekranów oraz ograniczenia transferu danych, który nie wszędzie jest wystarczająco szybki, trzeba wiele wysiłku włożyć w optymalizację stron.

Strony zaprojektowane płasko nie mają tego problemu. Posiadają one dużo mniej grafiki, tworzoną głównie za pomocą CSS, więc znacznie szybciej ładują się na urządzeniach mobilnych. Z powodu mniejszej ilości dekoracji zwiększa się też czytelność stron. Mniej elementów rozprasza uwagę, a także łatwiej znaleźć elementy interakcji, jak łącza do innych stron czy przyciski akcji.

Aby dokładniej przedstawić ideę projektowania płaskiego poniżej opiszę najważniejsze jego elementy.

Przykład flat design

Kolorystyka

O tym, jak ważna jest odpowiednia kolorystyka we flat designie świadczy ilość stron w stylu http://flatuicolors.com/ . Pomagają one dobrać odpowiednie wartości kolorów do własnej strony. Ważne, by kolory były „lekkie” i jednolite. To zawartość jest najważniejsza, informacje muszą być czytelne a strony przejrzysta, więc kolory nie mogą odwracać od nich uwagi. Dlatego też na stronach stosuje się dużą ilość bieli albo innych, jasnych i spokojnych kolorów. Do zwrócenia uwagi na ważne elementy strony stosuje się natomiast kontrasty kolorystyczne.

Flat design - kolorystyka

Elementy graficzne

Chociaż na stronach stworzonych w stylu flat jest mniej zdjęć i obrazków, to jednak nie unika się elementów graficznych. Są to najczęściej proste piktogramy, czyli czysto symboliczne kształty. Jak wspomniałem we wstępie, w elementach graficznych takich jak proste obrazki czy ikony, unika się gradientowych przejść tonalnych, cieni, rozmyć, zaokrągleń rogów w przyciskach, efektów lustra i tym podobnych efektów. Tak, żeby wszystko sprawiało wrażenie płaskiego.

W niektórych przypadkach, np. jako tło, dodaje się jedno duże zdjęcie. Jest to pewne odstępstwo od zasad, ale umiejętnie zastosowane, wraz z odpowiednio kontrastującą typografią i kolorystyką takie rozwiązania prezentują się bardzo dobrze.

Flat design - elementy graficzne

Typografia

Typografia rozumiana jako zastosowanie odpowiednich czcionek, ich stylu, rozmiaru i efektu jest istotnym elementem flat designu. Jako, że elementy graficzne na stronie są uproszczone, to odpowiedni dobór czcionek jest bardzo istotny, tym bardziej że bezpośrednio od niego zależy czytelność tekstu.

Aby za pomocą typografii odpowiednio ukazać hierarchię treści, zwrócić uwagę na te ważniejsze, należy je silnie kontrastować. To znaczy np., że część najważniejsza tekstu może być silnie pogrubiona, podczas gdy reszta cienka, tytuł strony bardzo duży, a podtytuł mały, można również zamiennie korzystać z czcionek szeryfowych i bezszeryfowych, a także z różnych kolorów. Na stronach płaskich to właśnie odpowiednia typografia urozmaica tekst, sprawiając że czytanie go nie jest monotonne, a całość wygląda ciekawie.

Flat design - typografia

Infografiki

Ciekawym kierunkiem rozwoju flat designu jest zastosowanie infografik. Są to graficzne prezentacje informacji, najczęściej zawierające konkretne dane. Jest to ciekawa forma, a także bardziej czytelna niż artykuły pisane ciągłym tekstem. Ich dużą zaletą jest to, że kilka chwil wystarczy by dowiedzieć się, o czym jest dana infografika, czytelnik również może łatwo znaleźć informacje najbardziej go interesujące, zinterpretować je i wyciągnąć własne wnioski na ich temat.

Poza zwiększeniem czytelności zwiększa się także skuteczność takiego przekazu – tekst w Internecie na ogół czyta się długo, powierzchownie go analizując. Widząc konkretne informacje łatwiej jest skupić na nich swoją uwagę i dowiedzieć się wszystkiego, czego się chce.

Flat design - infografiki

Podsumowanie

Flat design spowodował przesunięcie wysiłków w tworzeniu strony z ogólnego wyglądu, formy przekazu, na jego treść, a także na funkcjonalność stron. Stosując ten styl zwiększa się czytelność stron, dlatego prezentowany komunikaty stają się niezwykle ważne. Prostota wykonania, minimalizm, dużo przestrzeni, to wszystko sprawia że strony wydają się lekkie, przejrzyste, a wszystko co się na nich znajduje jest z jakiegoś punktu widzenia istotne.

Stosuje się tu również odejścia od utartych schematów, nawet tak standardowy element jak menu można stworzyć w zupełnie odmienny sposób, jak w Windowsie 8 albo obrazku poniżej.

Należy jednak pamiętać, że flat design nie jest idealnym rozwiązaniem dla wszystkich stron. Jako płaskie, dobrze wyglądają np. strony firmowe, aplikacji czy produktu, trudniej natomiast elegancko zaprojektować duży e-sklep.

Na koniec jeszcze przedstawiam ciekawą stronę, prezentującą „walkę” flat designu z realizmem: http://www.flatvsrealism.com/

Flat vs. realism

FacebookTwitterGoogle+LinkedIn