Material Design – GUI dla projektantów

W grudniu ubiegłego roku, Google udostępnił założenia nowej koncepcji w projektowaniu UI, nazwanej Material Design – zbiór wytycznych przeznaczonych dla projektantów oraz programistów aplikacji mobilnych i webowych. Szczegółowy opis wszystkich elementów koncepcji można znaleźć w dedykowanym serwisie: Material design – Google design guidelines

Czym się wyróżnia?

Material Design został przygotowany z myślą o wszystkich platformach – od desktopów, przez smartfony, po smartwatche. Na każdej z nich zapewnia jednolite user experience, niezależnie od kontekstu użytkownika.

Wizualnie koncepcja opiera się o środowisko zawarte w przestrzeni 3D (efekt ten jest uzyskiwany poprzez operowanie światłem i cieniami), uzupełnionej dynamicznymi animacjami, w myśl jednej z podstawowych zasad MD: motion provides meaning.

Co można znaleźć w specyfikacji?

W specyfikacji można znaleźć wszystkie podstawowe informacje, począwszy od opisu czym jest Material Design, po wytyczne dot. zasad, jakimi należy kierować się przy projektowaniu aplikacji mobilnych i webowych. Specyfikacja podzielona jest na rozdziały odnoszące się do animacji, styli, układu i struktury, komponentów oraz wzorców. Ponadto zawiera również informacje dotyczące usability i dostepności.

Elementem specyfikacji jest podstawowa baza materiałów do pobrania, w której znajdują się: paleta kolorów, wymiary ekranów modeli telefonów korzystających z platformy Android, szablony układu i struktury, fonty, komponenty oraz przykładowe ikony.

Google obiecał sukcesywne aktualizacje specyfikacji, wraz z rozwojem założeń Materiał Design. Jak do tej pory doczekaliśmy się dwóch aktualizacji, w kwietniu oraz maju tego roku.

Jak przyjął się Material Design?

Po sześciu miesiącach od opublikowania specyfikacji widać, że nowy wizualny trend, zapoczątkowany przez Google, spotkał się z szerokim odzewem wśród projektantów z całego świata. Jest wykorzystywany zarówno do projektowania aplikacji mobilnych, jak i ściśle webowych (Google także stopniowo aktualizuje interfejs swoich aplikacji, by dostosować je do założeń nowej koncepcji).

Co ciekawe, choć Material Design został zaprojektowany z myślą o mobilnej platformie należącej do Google (Android), można zauważyć, że koncepcja ta bywa także w mniejszym lub większym stopniu adaptowana przez niektórych projektantów aplikacji iOS.

Material Design w eSKY

Miałem okazję poznać bliżej Material Design, projektując nasze aplikacje mobilne dla platformy Android. Projektowanie nieco utrudniał mi brak gotowych komponentów, które można byłoby wykorzystać w projektach. Przygotowałem więc większość komponentów w pliku PSD, który udostępniam poniżej – może także i Wam się przyda.

Zapraszam do jego pobrania
Plik został przygotowany przy użyciu  Adobe Photoshop Creative Could 2015.

Co zawiera paczka komponentów Material Design?

Przygotowany plik zawiera bazę komponentów z różnymi wariantami, których brakuje w zasobach udostępnianych przez Google, tzn.:

• Text fields
• Buttons
• Sliders
• Lists
• List controls
• Tabs
• Pickers
• Grids
• Chips
• Cards
• Menu
• Tooltip
• Subheaders
• Snackbars

Postaram się w przyszłości uzupełniać listę o dodatkowe komponenty, w miarę rozwoju specyfikacji Material Design, dlatego też zachęcam do regularnego odwiedzania naszego bloga oraz profilu na Facebooku.