Flat design, czyli aktualny trend w projektowaniu - X-Coding IT Studio

Flat design, czyli aktualny trend w projektowaniu

6.05.2015 / / Marketing

Flat design, czyli „projektowanie płaskie”, to stosunkowo nowy i popularny trend w projektowaniu stron internetowych. Ideą tego nurtu jest skupienie się na treści, upraszczając stronę wizualną. Od strony graficznej królują duże, jednolite przestrzenie. Elementy 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, należy włożyć wiele wysiłkuw optymalizację stron.

Strony zaprojektowane płasko nie mają tego problemu. Zawierają one dużo mniej grafiki, tworzonej 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 na stronach stosuje się dużą ilość bieli lub 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. 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 krojów pisma, ich stylu, rozmiaru i efektu jest istotnym elementem flat designu. Jako, że elementy graficzne na stronie są uproszczone, to ich odpowiedni dobór jest bardzo istotny – bezpośrednio od niego zależy czytelność tekstu.

Aby za pomocą typografii odpowiednio ukazać hierarchię treści, należy zwrócić uwagę na te ważniejsze, silnie je kontrastować. To znaczy np., że najbardziej istotna część 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 krojów 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. Ich dużą zaletą jest to, że już kilka chwil wystarczy, by dowiedzieć się, o czym jest dana infografika. Czytelnik może łatwo znaleźć najbardziej interesujące go informacje, zinterpretować je i wyciągnąć własne wnioski.

Oprócz zwiększenia czytelności, zwiększa się także skuteczność 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. 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 na 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.

Flat vs. realism