Матеріальний дизайн: 5 сайтів для натхнення

Матеріальний дизайн: 5 сайтів для натхнення

Категория: Дизайн

22 / 12 / 2016

5554 просмотров

21 4.1904761904762 5

Матеріальний дизайн був створений Google для уніфікації інтерфейсів сервісів і додатків компанії. Втілення подібної концепції допомогло корпорації уявити себе як постачальника даних і єдину цифрову середу, а не просто пошуковик з розколоту сервісами.

Розробники Google підкреслюють інноваційність матеріального дизайну:

««Ми поставили собі за мету створити візуальну мову для користувачів, який об'єднає класичні принципи гарного дизайну з можливостями науки і технологій»».

Метафора матеріального дизайну - це проекція паперу в тривимірному просторі. Її рух використовується для демонстрації функціоналу та навігації сайту або програми. Новий дизайн Google адаптований під різні види пристроїв і операційні системи.

Матеріальний дизайн

Скевоморфізм проти площині

Багато років для розробки інтерфейсу сайтів або мобільних додатків дизайнери орієнтувалися на реальні об'єкти. Це явище отримало назву скевоморфізм. Воно повністю відповідало вимогам ергономіки. Користувачеві було простіше бачити зрозумілі об'єкти на екранах техніки. Навіть термінологія базувалася на принципах реалістичності: робочий стіл, документи, папки, файли, блокнот, ножиці і панель управління. Дизайн іконок поступово почав прагне до тривимірності з глибокою перспективою і добре відпрацьованої світлотінню.

Iконки для додатків

З 2010 року починається набирати популярність плоский дизайн. Він розроблявся як альтернатива скевоморфізм. Прообразом нового дизайну став мінімалізм, швейцарський типографічний стиль і баухаус в архітектурі. Дизайнери почали прибирати обсяг, тіні і перспективу з інтерфейсу сайтів і додатків. Елементи ставали пласкими і одноколірними.

Плоский дизайн

Це значно підняло продуктивність техніки і апаратури, витрата енергії зменшився. З 2014 року плоский дизайн став новим стандартом для оформлення дизайну сайтів та мобільних додатків.

skeuomorphism-vs-flatdesign

Плоский дизайн, незважаючи на лаконічність і адаптивність, створює труднощі для багатьох користувачів, які не звикли до подібного інтерфейсу. Вони витрачають час на пошук необхідної функції або програми через зникнення кнопок у фоновому режимі.

Багато розробники і користувачі сперечаються, який дизайн інтерфейсу краще? Ви можете вибрати свою сторону в цій боротьбі:

Скевоморфізм плоский дизайн

Знайдено компроміс - це матеріальний дизайн

Матеріальний дизайн Google втілює багато елементів плоского дизайну - мінімалізм, геометрію, модулі і яскраві кольори. У той же час він близький до скевоморфізм завдяки використанню тривимірного простору і тіней.

Такий дизайн зручний для користувачів, адже він стоїть на рубежі двох концепцій. Матеріальний дизайн використовує лаконічність (зберігає високу продуктивність техніки) і анімацію (оживляє інтерфейс сайту або програми і допомагає користувачеві розуміти навігацію).

3 кити матеріального дизайну

Тактильні поверхні

Інтерфейс матеріального дизайну складається з декількох шарів «паперу». Шари розташовані на різній висоті і відкидають тіні один на одного, створюючи об'ємний простір. Це допомагає користувачеві краще взаємодіяти з інтерфейсом.

Поліграфічний дизайн

Продовжуючи концепцію «цифровий паперу», в матеріальному дизайні використовується традиційна поліграфія. Створюється контраст між кегель шрифту заголовка і тексту. Здається структура контенту за допомогою основних і акцентних кольорів. Більш яскраві кольори використовуються в елементах управління: плаваючою кнопці, індикаторах і смужках. Створити своє власної колірне рішення можна тут.

Осмислена анімація

Анімація потрібна для демонстрації роботи інтерфейсу, користувач повинен знати, що система прийняла і обробляє його дію. Це важливе правило ергономіки. Наприклад, за допомогою анімації списки і події розкриваються в окремі листи з докладною інформацією.

принципы-материального-дизайна

Сайти для натхнення

№ 1. Google Design

Це найкраща демонстрація матеріального дизайну в дії. На сайті можна прочитати статті та огляди новинок в світі дизайну, оцінити переможців Material Design Awards. Розробники сайту люб'язно надали купу корисних лінків на інструкції, уроки і гіди по створенню матеріального дизайну. Сайт дає можливість завантажити колірні палітри, стікери, шрифти, іконки.

google-design

№ 2. Material Design Blog

Розкриває основи теорії побудови інтерфейсу в матеріальному дизайні. Зручна навігація дозволяє швидко знайти необхідну інформацію. Надано посилання на скачування елементів: іконок, тематичних фонів, кольорової палітри.

material-design

№ 3. Uplabs

На цьому сайті найзручніша навігація і побудова категорій. Проекти сортуються не тільки по операційним системам і сферою застосування, але і по стилю шрифту. Користувачі активно публікують тут свої роботи. Система чату дозволяє автору швидко відповідати на питання і критику.

up-material-design

№ 4. Behance

Один з найпопулярніших дизайнерських сайтів. Надає зручну сортування матеріалу. На запит про матеріальне дизайні викидає величезну добірку матеріалу, але в ній досить багато проектів не по темі. Є можливість оцінити роботу, підписатися на оновлення від автора і взаємодіяти з іншими користувачами. Подібні сервіси пропонує також Dribbble.

Behance

№ 5. Pinterest

Фотохостинг пропонує добірку матеріалів з матеріального дизайну. Ілюстрації в хорошій якості тут знайти досить важко. Лінки під зображеннями пропонують перейти на веб-сторінки, про які вже йшлося вище. Pinterest підходить для швидкого перегляду максимальної кількості зображень про матеріальне дизайні.

pinterest-material-design

Студія KOLORO - це інноваційні рішення для реалізації проектів. Крокуйте в ногу з часом разом з нами. Почніть спілкування з менеджерами прямо зараз. Контакти:

Контактная информация:

hi@koloro.ua

+38 (044) 223 51 20

Подготовил:

Екатерина Барановска

Копирайтер

21 голосов

Понравилась статья?
Оставьте свой голос :-)
comments powered by HyperComments

Похожие материалы

Бесплатная консультация. Звоните

сделать запрос
up-btn

Розкажіть нам про ваш проект

Отримайте консультацію вже зараз!

Спасибо за ваше сообщение!

КОНТАКТЫ

сподобались наші статті?

наші новини сподобаються також !