Material Design – prostota i użyteczność

Material Design opracowany przez Google ciężko zdefiniować za pomocą jednego pojęcia, bowiem jest on zbiorem pewnych zasad, reguł, jak również materiałów i przykładowych styli budowania nowoczesnych interfejsów użytkownika. Obecnie Material Design przeznaczony jest nie tylko dla aplikacji mobilnych, ale również witryn internetowych. Rozwiązanie na nim oparte cechuje przede wszystkim prostota i użyteczność. Celem dostosowania budowanej aplikacji do Material Design można opierać się na oficjalnej stronie, a także wykorzystać istniejące framework’i, które poniżej krótko przedstawię.

Wstęp do Material Design – oficjalna strona

Na oficjalnej stronie Material Design znaleźć można wstęp do Material Design, informacje na temat styli, układów (tzw. szablonów), wyglądu poszczególnych elementów interfejsu użytkownika (np. przycisków, list rozwijanych), a także przykłady wzorców (np. sposobu potwierdzania jakiejś czynności). Co więcej istnieje możliwość pobrania niektórych zasobów jak palety kolorów czy szablonów. Z pewnością budując aplikację wg Material Design warto zapoznać się z oficjalną stroną Google’a, w której choć nie każde przedstawione zagadnienie poparte jest przykładem dla platformy czy środowiska, w której budujemy aplikację, to w pewien sposób nakreśla jak interfejs użytkownika powinien wyglądać i jakich błędów należy unikać.

Framework MaterializeCSS

MaterializeCSS jest niezwykle rozbudowanym framework’iem, który dostarcza ciekawe, domyślne style dla poszczególnych elementów interfejsu graficznego webowej aplikacji, a także gotowe komponenty takie jak karty, menu, formularze czy przyciski. Dodatkowe funkcjonalności takie jak Parralax czy Modals pozwalają uczynić stronę internetową bardziej nowoczesną i atrakcyjną. Na oficjalnej stronie biblioteki każdy z elementów jest opisany i posiada krótki przykład użycia wraz z kodem źródłowym.

Framework Material Design Lite

Dwoma elementami, które wyróżnia Material Design Lite w stosunku do MaterializeCSS, jest możliwość pobrania i wykorzystania we własnym projekcie gotowych szablonów np. dla bloga czy strony z portfolio, a także możliwość pobrania plików z CSS z paletą kolorów, którą można wybrać spośród kilkunastu (w przeciwieństwie do MaterializeCSS, który pobiera się z 1 paletą kolorów, którą trzeba samodzielnie zmodyfikować).

Podsumowanie

Budując aplikację webową czy mobilną zwracać należy nie tylko na samą funkcjonalność rozwiązania, lecz również na jego prostotę i użyteczność. Aplikacje ze skomplikowanym interfejsem użytkownika, nieczytelnymi elementami jak przyciski czy menu, mimo, iż posiadają ciekawą funkcjonalność, nie będą chętnie używane, dlatego warto przede wszystkim zapoznać się z Material Design, jego zasadami i regułami, nawet jeśli w projekcie nie wykorzystamy żadnego z opisanych frameworków.