Blog

2016-08-08 16:40

Material design

Gapper agencja - ecommerce, platformy ecommerce, sklepy internetowe

Ogłoszony w 2014 roku oficjalnym stylem google Material design cieszy się dużą popularnością. Nic dziwnego, gdyż ten graficzny styl cechuje prostota, czytelność i funkcjonalność, którą ceni sobie każdy użytkownik.

W 2014 roku, podczas premiery Google Now został zaprezentowany styl graficzny Material design, który został ogłoszony oficjalnym stylem aplikacji mobilnych google (gmail, google drive, google docs). Jego trzy podstawowe cechy:

  • prostota,
  • czytelność,
  • funkcjonalność

spowodowały wzrost zainteresowania stylem, który stał się inspiracją dla twórców własnych projektów stron internetowych i aplikacji mobilnych.

MATERIAL DESIGN – CECHY

Trójwymiarowa płaszczyzna dla elementów strony

Material design wyróżnia 3 podstawowe głębokości do wyróżniania elementów. Ich hierarchia zaznaczana jest przy użyciu cieni.


źródło: www.material.google.com

Kolorystyka

Material design sugeruje stosowanie 2 podstawowych kolorów: kolor podstawowy oraz kolor dodatkowy.

Kolor podstawowy to baza dla kolejnych jego odcieni, które zaleca się genereowć w przedziale 50-900 (od 50 do 400 odcienie jaśniejsze, 600-900 odcienie ciemniejsze).

Kolor dodatkowy należy wybierać tak, by wyróżniał się on na tle koloru podstawowego. Kolor ten jest zarezerwowany dla akcentowania elementów mających się wyróżniać (przyciski CTA, linki). Powinien być jaśniejszy i bardziej nasycony (co zachęca do interakcji).

Nie ma złych kolorów. Liczy się to, jak z nich korzystasz.

Wiele cennych wskazówek w filmiku:

Font

Podstawowy font dla tekstu, jaki proponuje material design to Roboto.

Jego zalecana wielkość: 12, 14, 16, 20, 34. Przy zmianie tych wielkości proponowane jest zmniejszenie światła między znakami, kiedy font jest większy lub zwiększenie światła, kiedy font jest mniejszy od wymienionego wyzej.

Kolorystyka fontu – kolor bazowy: czarny, ze stosowaniem rozjaśniania przy użyciu przezroczystości, która nadaje estetyki i upraszacza style, w tekście głównym do 87%, w tekście dodatkowym do 54%, w tekście nieaktywnym i przypisach do 38%.

Jeśli tekst stosowany jest na ciemnym tle, wówczas kolor fontu powinien być biały (rozjaśnianie go do 100% w tekście głównym, 70% w tekście dodatkowym, 50% w tekście nieaktywnym).

Każdego dnia robimy zwykłe rzeczy niezwykle dobrze,
bo jak coś robić, to robić to najlepiej.

Skontaktuj się z nami

11 + 5 =