Logo - WEBLOG - Website Style - Tworzenie stron www

Material design

1. Już w 2016 roku mówiło się o stylu graficznym, który zyskuje coraz większą popularność na stronach internetowych.

W ciągu dwóch lat material design wszedł przebojem w witryny jak i aplikacje mobilne, nadając lekkości i znacznie ułatwiając nawigację.

2. Co się kryje pod tajemniczym terminem material design?

Styl stworzyli graficy z Google’a, który w założeniu miał być łatwy do stosowania, czytelny i prosty, który umiejętnie łączy zasady dobrego projektowania z innowacyjnością. Nurt został zaprezentowany podczas aplikacji Google Now, po czym, został wdrożony w innych produktach marki Google – Gmail, Google Drive czy Google Docs.

 

Obecnie, material design… jest dokładnie tym, czym miał być w założeniach! 🙂
To globalny, wypracowany styl, który swoją prostotą i użytecznością zdobywa coraz większe uznanie i jest szeroko stosowany we wszelkich internetowych formach graficznych.
Jak na rozsądnie zaprojektowane novum przystało, cały nurt doczekał się dedykowanej witryny, na której dowiedzieć się możemy wszelkich szczegółów i zasad stosowania material design, nie tylko w oparciu o aplikacje, ale także o strony internetowe – www.material.io

 

3. Czym charakteryzuje się material design?

Kolor.

 

Ważna cechą tego stylu są kolory, które powinny być żywe oraz wyróżniające się. Google daje nam do dyspozycji palety dobrze dobranych kolorów, z których powinniśmy wybrać jeden podstawowy oraz drugi dodatkowy dobrze odznaczający się na tle tego pierwszego, aby wyszczególnić ważniejsze elementy w aplikacji.
Podstawowe kolory w palecie oznaczone są liczbą 500, i to one powinny posłużyć jako kolory bazowe, od których następnie możemy tworzyć elementy w różnych odcieniach tego koloru. Dzięki takiemu podejściu aplikacja staje się żywsza, ważne elementy dobrze się odznaczają na tle innych, ale wciąż pozostają z nimi w harmonii.

Drugi kolor, używany jako dodatkowy powinien zdecydowanie wyróżniać się na tle koloru dominującego i być wykorzystywany do wyróżniania ważnych elementów projektu (buttony Call to Action, linki, przyciski etc)

 

Cienie

 

Czyli ułożenie w przestrzeni. Dodając cienie dajemy wrażenie ułożenia elementów w przestrzeni i hierarchię poszczególnych elementów czy sekcji witryny. Elementy które wydają się znajdować wyżej od innych, są odbierane jako ważniejsze do podjęcia akcji.

 

Infografika

 

Proste i intuicyjne. Koniecznie! Unikamy szczegółowych “barokowych” ikon, które obfitują w różnych grubości linie i krzywizny. Takie zastrzeżenie jest podyktowane mobilnością – bardzo dokładne ikony, po pierwsze przestają być ikonami, a stają się grafikami, a po drugie, przy małych rozdzielczościach stają się niewidoczne.

Czytaj również