Тенденции веб-дизайна 2017: Год Материального Дизайна Lite

1. Что такое Material Design Lite?
2. Основы физики
3. Смешивать и сочетать компоненты
4. Цветовые палитры материалов
5. Заключение

Несомненно, прикосновения Материального Дизайна - обязательная эстетика года.

Схема разработки Google на базе Android, возможно, начиналась как интерфейс мобильного устройства, но ее популярность и использование возросли, независимо от устройства или платформы.

Это естественное продолжение самой большой тенденции в дизайне за последние несколько лет: плоский дизайн. Тем не менее, материал делает что-то плоское, чего никогда не мог, он добавляет только украшения, чтобы повысить удобство использования. Вместо того, чтобы отбрасывать все в сторону визуальной привлекательности, в основе Material Design лежит удобство использования.

Что такое Material Design Lite?

Кредит фотографии: Android

Material Design Lite, или MDL, является следующим этапом Material Design. Он берет идеи и оптимизирует их для всех устройств. MDL был разработан для включения руководств, компонентов и общей структуры с шаблонами и инструментами, которые помогают почти каждому дизайнеру создать сайт MDL с минимальными предварительными знаниями.

MDL, по сути, делает концепцию доступной для всех быстро и легко.

Хотя MDL может быть вариантом «классического» Material Design, это ни в коем случае не меньшая версия. Большинство сайтов, разработанных с использованием MDL, являются надежными, простыми в использовании и визуально приятными.

Идея MDL восходит к Миссия Материального Дизайна в целом: «Разработайте единую базовую систему, которая позволит унифицировать взаимодействие между платформами и размерами устройств. Мобильные заповеди являются основополагающими, но сенсорный ввод, голос, мышь и клавиатура - это методы ввода первого класса ».

Если этого было недостаточно, каждая часть MDL является открытым исходным кодом. Правила, шаблоны, лучшие практики и фрагменты кода доступны на Сайт MDL или GitHub.

Основы физики

Кредит фотографии: Rumchata

Основы эстетики этого стиля исходят из физики. Дизайнер должен стремиться создать нечто, что выглядит и функционирует так, как это было бы (или могло бы) в физическом мире.

Эта простая концепция - то, что поддерживает врожденное удобство использования Материала. Рассмотрим все инструменты дизайна, основанные на этой идее - наложение, карты, движение, цвет.

Кредит фотографии: MDF

Кредит фотографии: Serio Verify

Чтобы понять, как создать эти элементы так, чтобы они выглядели по-настоящему Материально, давайте вспомним физика класс, на мгновение.

• Рекомендуются различные размеры x и y, но все элементы должны иметь одинаковую толщину.

• Тени должны естественно падать на ось z, по-видимому, от естественного источника света.

• Контент может отображаться на любой плоскости, в любом цвете или форме.

• Компоненты материала прочные и не имеют прозрачных пленок.

• Каждое пространство ограничено одним компонентом; они не могут пересекаться. Наслоение допустимо только для фонов и фотоэлементов, а не для отдельных компонентов.

• Компоненты могут сжиматься и расширяться, но не сгибаться и не ломаться. Они имеют плавность в своих движениях.

• Компоненты могут быть разделены или объединены.

• Движение может происходить по любой оси и должно диктоваться взаимодействием с пользователем.

Смешивать и сочетать компоненты

Кредит фотографии: WRK.

Кредит фотографии: Разработчики Google

MDL упакован удобными для пользователя инструментами, которые помогут начать процесс проектирования. Хотя визуальный дизайн - это, прежде всего, то, что вы видите, то, что отличает Material Design Lite, лежит в основе.

MDL не основан на JavaScript; он предназначен для работы на всех устройствах, более ранних версий в старых браузерах и обеспечивает кроссплатформенный доступ. Вам не обязательно знать, как это работает, но вы должны помнить одну важную вещь: MDL будет работать практически везде. И это по замыслу.

Самый простой способ начать с MDL - это выбрать шаблон , Каждый шаблон (есть шесть на выбор) поставляется со всем необходимым для дизайна, включая компоненты и цветовые палитры. Но прелесть MDL в том, что вы можете настроить столько, сколько захотите. Шаблоны являются лишь отправной точкой.

В дополнение к шаблонам, MDL имеет обширную библиотеку компонентов, которая позволяет вам смешивать и сочетать части, чтобы создать что-то уникальное ваше. (Вы можете получить только фрагменты кода только для тех компонентов, которые вам нравятся, чтобы облегчить ваш сайт.)

Хотя эти части являются более легкой и простой в управлении версией материала, все основные элементы одинаковы, включая гарнитуры шрифтов (Roboto), стили и элементы слоев и цветовые палитры. Почти любой элемент может быть добавлен в дизайн или удален. Вы можете даже включить элементы MDL в сайт, который не является полностью Материальным, если вы хотите экспериментировать.

Цветовые палитры материалов

Одним из наиболее визуальных аспектов MDL являются связанные цветовые палитры. Материальные проекты часто бывают яркими и смелыми по цвету. Оттенки глубоко насыщены, а цветовые сочетания могут быть немного неожиданными.

Кредит фотографии: Получить MDL Custom CSS Theme Builder

Цвет материала часто основан на палитре, которая состоит из основного цвета и одного акцента. (Вы хотите выбрать мудро.)

Кредит фотографии: Dropbox Business

Dropbox Business - это классический пример веб-сайта, который на раннем этапе принимает концепции дизайна, но сохраняет идентичность бренда. К счастью, их фирменный синий цвет идеально подходит для материала. Здесь сайт использует единую цветовую палитру с черным и белым для общения. (Это довольно часто встречается в MDL, поскольку бренды работают, чтобы сохранить идентичность при использовании стиля.)

Кредит фотографии: Pumperl Gsund

Сайт Pumperl gsund использует противоположный подход и идет в двух ярких цветах. Еще раз обратите внимание, как используется цвет на минимальном фоне, с черным и белым для всего остального.

Кредит фотографии: Fila

В то время как проекты MDL могут показывать большие, смелые цвета (например, Fila, выше), это может быть сложно осуществить с изяществом. Вам нужен только правильный контент, чтобы он работал хорошо. В этом случае у Fila была идеальная комбинация элементов, чтобы идти в ногу с цветом благодаря красочной линии спортивной одежды.

Заключение

Material Design Lite - это более удобная и гибкая версия Material Design, которую вы можете полностью или частично реализовать практически для любого дизайна веб-сайта. Он предлагает общую функциональность, фокусируется на удобстве использования и дизайне, известном четкими линиями и организацией.

Для получения дополнительной информации по пользовательскому интерфейсу при анализе 61 примера загрузите бесплатную электронную книгу Тенденции веб-дизайна 2017 ,

Похожие

Комментарии