serkorkin/bigstockphoto.com
Material design został stworzony przez Google, aby jego odbiorcy mogli korzystać ze stylu graficznego, który będzie czytelny i prosty, ale również łatwo dostosowujący się do różnych płaszczyzn. Po raz pierwszy został on zaprezentowany podczas premiery aplikacji Google Now, a potem było włączany w inne aplikacje tej firmy. W 2014 r. mianowano go oficjalnym stylem aplikacji mobilnych Google, czyli m.in. Gmail, Google Docs czy Google Drive. Material design szybko zaczął inspirować innych twórców.
Jakie są jego główne cechy charakterystyczne? Przede wszystkim położenie w trójwymiarze, co oznacza, że znajdują się w niej trzy podstawowe głębokości, które można odpowiednio stosować, by wyróżnić elementy znajdujące się nad innymi. Powstało to na bazie ułożenia odpowiedniej hierarchii w projektowaniu strony/aplikacji i podkreślenie tego za pomocą cienia. Kolejny, istotny wyróżnik to odpowiednie dobranie kolorów, które powinny być dość intensywne, żywe, ale nie jaskrawe czy zbyt rzucające się w oczy. Dodatkowo jest tutaj możliwość personalizacji, czyli doboru ich według własnego uznania.
Następny element to odpowiedni wygląd ikon – baza Google obejmuje ich dużą liczbę, ale można też tworzyć własne z dostępnych możliwości. Można wyróżnić kilka podstawowych zasad, które je łączą. Przede wszystkim – prosta forma, która jest dobrze widoczna zarówno w większej, jak i mniejszej rozdzielczości. Kształty powinny się opierać na podstawowych kształtach geometrycznych. Ikony nie powinny być stylizowane na trójwymiarowe, ponieważ przestają być dobrze widoczne np. na urządzeniach mobilnych. Wszelkie zakończenia linii powinny być proste, a współczynnik zaokrąglenia rogów powinien być stały i wynosić 2dp. Tyle powinny mieć również znaki podziału między wewnętrznymi elementami, światła wewnętrzne i wcięcia.
Jeśli chodzi o typografię material design, to jego podstawowym fontem jest Roboto (alternatywnie – Noto). Podstawowe wielkości w tekście to 12, 14, 16, 20 i 34. Możliwe jest wykorzystanie większych czy mniejszych znaków, ale trzeba pamiętać tym, by było to spójne z resztą. W przypadku dużych fontów należy zmniejszyć rozstrzelenie znaków w wyrazach, a w przypadku mniejszych – odpowiednio zwiększyć.
W material design można znaleźć ilustracje, zdjęcia i grafiki wektorowe, które pasują do konkretnego projektu. Unikać należy zdjęć stockowych i innych uznanych za zbyt oczywiste. Należy pamiętać, że mają być dobrze widoczne również na np. ekranach smartfonów, więc powinna cechować je odpowiednia jakość i rozdzielczość.
Google stworzył material design z myślą o webmasterach, którzy mogą go wykorzystywać podczas projektowania stron internetowych. Oparto go na standardowych technologiach, a więc HTML, CSS i JS. Google zapewnia, że można go wykorzystywać w rozwiązaniach front-end.
Najnowsze komentarze