Flat Design vs. Material Design: Jakie są różnice?

Dwa podobne style projektowania, jeden oparty na drugim. Jeden jest z rodzaju „popularny na topie” drugi – niektórzy tak spekulują – na prostej drodze do zapomnienia. Jeden z nich opiera się na spontanicznym, elastycznym i przystosowawczym trendzie w projektowaniu, drugi natomiast posiada niezmienny zestaw wytycznych. Zostałeś zaznajomiony z popularnym konfliktem między flat design (projektowaniem płaskim), a material design (projektowaniem zaproponowanym przez Google). Jakie są różnice między nimi naprawdę? Czy właściwie można powiedzieć, że jeden jest lepszy od drugiego? Lepszy do konkretnych zastosowań? W rzeczywistości niektórzy ludzie zastanawiają się, jak duże są najważniejsze różnice między nimi? Zacznijmy od podstaw: pewną ilość skeumorfizmu można odnaleźć w każdym ze stylów.

Skeumorfizm

Skeumorfizm, w kontekście projektowania, jest to odtworzenie, które ma na celu naśladować świat fizyczny. Zazwyczaj ma to formę przeróżnych narzędzi internetowych, które mają wyglądać jak ich odpowiedniki we faktycznym, rzeczywistym świecie. Coś jak syntezator programowy, który ma przypominać keybord. Przez większość czasu istnienia pojęcia projektowanie interface’u i samej sieci skeumorfizm zdominował sposób postrzegania projektowania. Problem tkwi w tym, że często tego typu projektowanie nie jest oparte na użyteczności albo inaczej w jakim stopniu te wszystkie pokrętła i przyciski mogą być obsługiwane przez myszkę lub ekran dotykowy. To wszystko w łatwy sposób pokazuje jak imitacja naturalnego stanu rzeczy jest
niedoskonała w przypadku webdesign.

Ostatecznie, projektanci doszli do wniosku, że potrzebne jest coś jeszcze, coś, co odsunęłoby by na bok wszystkie te retro elementy dekoracyjne i zastąpiło je z czymś, co mogłoby wysunąć użyteczność na pierwsze miejsce, przyspieszyć czasu ładowania strony i pozwolić skupić się użytkownikom na treści bardziej efektywnie. Zatem usunęli wszelkie ślady skeumorfizmu z interfejsów i stworzyli płaskie projektowanie (flat design).

Flat design

Projektowanie płaskie jest pod wieloma względami projektowaniem sprowadzonym do podstaw. Usuwa wszelkie stylistyczne problemy, które dawałyby złudzenie trójwymiarowości, jak np. cienie, gradienty i tekstury. Flat design koncentruje się wyłącznie na wzajemnym oddziaływaniu ikon, typografii i koloru.
To jeden z pierwszych spójnych stylów specjalnie stworzonych dla mediów cyfrowych – taki, który wykorzystuje zalety unikalnych opcji jakie dał Internet i stawia na pierwszym miejscu potrzeby użytkowników stwarzając proste przyciski, które łatwo i szybko można odnaleźć, proste schematy kolorów, które pomagają w szybkiej identyfikacji elementów, a także minimalistyczne ikony. Wygląd jest drugorzędnym elementem w idei płaskiego projektowania. Jej głównym celem jest surowa funkcjonalność. Prostota ikonografii sprawia, że użytkownicy są intuicyjnie przeprowadzani przez stronę bazując wyłącznie na kolorach i schematach. Ponadto, czas ładowania strony przyspiesza, a strona zaprojektowania w tym stylu zawsze wygląda dobrze, zarówno na wysokiej jak ina niskiej rozdzielczości. Wszystko to poprawia user experience. Życie staje się łatwiejsze nie tylko dla projektantów, ale też dla zwykłych użytkowników.

Plusy

• Działa niezawodnie na przeróżnych rozdzielczościach ekranu i dostosowuje się do nich, zamiast starać się przypominać swoją pierwotną wersję.
• Usprawnia projektowania, pozwala się pozbyć niepotrzebnych elementów graficznych i animowanych, zmniejszając tym samym czas ładowania strony.
• Brak skeumorficznych elementów zmniejsza czas jaki potrzebują czytelnicy by przejrzeć zawartość strony.
• Usuwa wszelkie dylematy odnośnie niepotrzebnych wyborów w projektowaniu, jak również umożliwia szybsze projektowanie.
• Minimalistyczne strony zaprojektowane w stylu flat design są nieskończenie elastyczne i wyjątkowo łatwe do responsywnego zaprojektowania oraz wykonania.

Minusy

• Projektowanie płaskie niesie za sobą pewne ograniczenia. Ogranicza wybór do prostych kolorów, kształtów i ikon.
• W projektowaniu tego typu stron łatwo popaść w bezpłciowość i stworzyć niczym nie wyróżniającą się, zwykłą stronę.
• Niektóre strony lub aplikacje, wymagają złożony wizualnie wskazówek do przeprowadzenia użytkowników przez proces. Problem ten jest jednym z większych w projektowaniu płaskim. Główny zarzut to brak cieni lub innych elementów, które nadawały by przyciskom wygląd przycisków.
• Obecnie trudno odróżnić przycisk od zwykłej statycznej grafiki wektorowej.
• Popularność stron może sprawić, że trudno będzie stworzyć oryginalnie wyglądającą płaską witrynę lub aplikację.

Material Design

Krytycy uważają, że sprawy w projektowaniu płaskim zaszły za daleko: za zbyt radykalne uznaje się usunięcie wszelkich skeumorficznych elementów, nawet tych użytecznych. Wprowadzili wtedy material design. Pożyczyli koncepcje opierającą się na warstwach z niezliczonych edytorów obrazów i oddzielili je cieniami, skosami i animacjami. Koncepcja ta sięga do naszej naturalnej zdolności skorelowania głębokości z nadanym priorytetem. Material design, dla nielicznych niewtajemniczonych, jest to zestaw standardów zaprojektowanych i opracowanych przez Google i przestawionych w tym dokumencie. Posiada liczne uniklane i ciekawe funkcje, ale chyba najbardziej charakterystyczną jest jego wykorzystanie osi Z. Zasadniczo, to dodaje trochę skeuomorfizmu z powrotem do płaskiej konstrukcji, tworząc wrażenie kilku dwuwymiarowych płaszczyzn pływających po sobie na wyznaczonej przestrzeni.Wyobraź sobie kartkę papieru, ale taką, który może rozszerzać się i kurczyć do woli, zmieniać się, złączać i dzielić. Teraz połóż kilka takich samych kartek jedna na drugiej (mogą też lewitować), i narysuj element strony na każdej z nich. To pojęcie material design w pigułce. Cała ta specyfikacja spisana w dokumencie nie jest twardo ustalonym zbiorem reguł. Trzeba ja bardziej traktować jako framework dla fizyki strony i szablon dla przyszłych projektantów. Ten rodzaj projektowania został również dostosowany dla ekranów o różnych wielkościach, a nawet o różnych kształtach, takich jak np. zegarek Android Wear. Google promuje material design wśród innych deweloperów aplikacji.
Jest to obecnie standard dla aplikacji na Androida, a przykład z Wear nawiązuje tylko do tego. Czy tego rodzaj projektowanie nie powinno być także wykorzystywane na iOS jest obecnie źródłem trwającej debaty. Niektórzy twierdzą, że to konieczne, aby zachować wygląd Google, inni natomiast twierdzą, że kłóci się to z całą resztą systemu operacyjnego.

Plusy

• Trójwymiarowy układ sprawia, że programom łatwiej ze sobą współpracować, np. cienie są wykorzystywane do wskazania układu warstw.
• W przeciwieństwie do płaskiego projektowania, podejście w material design stawia na bardzo szczegółowe i konkretne zbiory wytycznych, nie pozostawia miejsca na domysły.
• Jeśli planujesz rozwijać stronę dla wielu platform, jak zwykła strona internetowa i aplikacja na Androida, material design zapewni jednolite doświadczenie dla użytkowników na wszystkich urządzeniach i wspomagać będzie łatwość obsługi, a przy tym subtelnie wspomoże Twoją markę.
• Jeśli jesteś zainteresowany posiadaniem animacji, material design jest rozwiązaniem, ponieważ jest wyposażony w narzędzia wspomagające tworzenie animacji.

Minusy

• Podoba Wam się to lub nie, ale material design jest nierozerwalnie związany z Google. Jeżeli chcesz odciąć się od tego i stworzyć niepowtarzalną identyfikację dla witryny lub aplikacji, może się to okazać o wiele trudniejsze używając wytycznych od Googla.
• Nie wszystkie systemy będą wstanie udźwignąć optymalną dla poprawnego działania liczbę klatek na sekundę. Trudno także powiedzieć co, jeśli cokolwiek takiego istnieje, możesz zrobić żeby poprawić użyteczność.
• Animecje wykorzystuję baterie użytkowników o wiele szybciej.
• Zmuszanie deweloperów do przestrzegania wytycznych może zdławić indywidualną kreatywność i spowolnić rozwój nowych animacji i innych elementów dekoracyjnych.

Wnioski

Material design wcale tak bardzo się nie różni od płaskiego projektowania. Oba rodzaje opierają się na minimalistycznej i czystej estetyce. Można w zasadzie pomyśleć, że interfacey projektowane w material design to zbiór płaskich interface’ów. Animacje z material design są szeroko doceniane, alegdy zredukować ich znaczenie i wykorzystać podstawową ich funkcjonalność, sprawią, że strona stanie się bardziej przyjazna dla użytkownika. W gruncie rzeczy, nikt nie zabroni połączyć tych dwóch estetyk. Można użyć material design by dodać trochę trójwymiarowości stronie (pop elemnt), która zaprojektowana w płaskiej stylistyce pozostanie bez zmian.

W mojej opinii, płaskie strony są bardziej praktyczne. Ładują się szybciej niż strony przepełnione animacjami i ze złożonymi grafikami. Jeśli projektujesz witrynę, która ma być prosta, skierowana do szerokiej rzeszy użytkowników, dostosowana do wszystkich urządzeń, lub po prostu kładzie wiele większy nacisk na łatwość obsługi niż na formę, płaska stylistyka może być dla Ciebie. Jeśli nie jesteś zainteresowany posiadaniem żadnych animacji lub złożonych grafik, a przede wszystkim interesuje Cię surowa prostota i funkcjonalność, zdecydowanie sugeruję, zdecydować się na płaskie projektowanie. Jednakże, jeśli chcesz zbudować bardziej fantazyjną stronę z animacjami, zdecyduj się na material design.