Замечательно иметь набор инструментов, который окажется под рукой тогда, когда он нужен. Что если вы собираетесь начать работу над новым проектом, в котором нужно применить язык материального дизайна, введенный Google в прошлом году? Что если у вас только хороший стартовый комплект со всем необходимым, чтобы погрузиться в творческий процесс, не отвлекаясь на рутинные задачи?
Мы поможем вам наладить работу при помощи иконок, шаблонов и инструментов.
Материальный дизайн, визуальный язык
Предназначенный в первую очередь для приложений Google Android на телефонах и планшетах, материальный дизайн рассказал о восхитительных деталях, которые могут создать интерфейс – от тонких переходов и анимаций в красочные интерфейсы с яркой типографикой. Продукты материального дизайна яркие и привлекательные. Неудивительно, что визуальный язык стал частью прекрасного нового мобильного мира в родных приложениях, гибридных приложениях, а также веб-сайтах.
Материальный дизайн Google, вероятно, не для ценителей черно-белого искусства.
Визуальный язык основан на сильных цветовых схемах, ясности и пространстве. Тени играют центральную роль в создании трехмерного чувства на 2-D экранах, и поддерживают последовательность и целостность при использовании анимации в UX. Все же это больше, чем расширенное руководство по стилю. Есть много доступных ресурсов, посвященных материальному дизайну, и вы можете использовать их для вашего проекта прямо сейчас. Материальный дизайн хорошо документирован и разработан до мельчайших деталей.
Материальный дизайн любит детали. Не всем это понравится, но это что-то выдающееся в своем роде и заслуживает уважения.
Тем не менее, всякий раз, когда мы говорим об эстетике и взаимодействии, мы должны упомянуть и производительность. Даже производительные анимации могут стать слабым местом, когда каждый элемент DOM должен двигаться, анимировать и переходить из одного состояния в другое. Производительность играет важную роль больше, чем когда-либо прежде, и мы должны найти баланс между гладкими взаимодействиями и быстрым донесением контента до пользователя.
Больше веса не означает больше времени ожидания, поэтому мы можем рассматривать анимации как прогрессивное улучшение, признавая, что это не будет соответствовать культуре материального дизайна для всех. Вот когда отзывчивая анимация может стать важной (не путайте с анимацией в адаптивном дизайне, которая может быть также восхитительной).
Шрифты материального дизайна
Если вы посмотрите руководство типографики материального дизайна, Google активно продвигает только один основной шрифт: Roboto, ссылку на робота Android. При разработке UX, посвященных азиатскому рынку, вы также можете использовать Noto, чьи вертикальные метрики совместимы с Roboto. Оба шрифта, конечно, доступны на Google Fonts, источник Roboto доступен на GitHub, и шрифт был выпущен под лицензией Apache 2.0.
Очевидно, Roboto был тщательно продуман, чтобы соответствовать цели материального дизайна, поэтому он универсален и полностью поддерживает кириллицу, латинский, греческий и вьетнамский (расширенные наборы символов). Шрифт доступен в различной жирности, от тонкого и легкого, нормального и среднего до жирного и черного (100–300–400–500–700–900); то же самое касается вариантов курсива. Семья может быть использована с семействами Roboto Condensed и Roboto Slab.
6 вариантов шрифта Roboto (не курсив).
Цвета материального дизайна
Когда дело касается цвета, Google также предоставляет подробные руководящие принципы. Цвета четко определены, и мы подготовили небольшую цветовую палитру для Photoshop и Illustrator (ZIP), которую вы можете сразу же использовать. Вы также можете использовать очень удобный генератор материальной палитры, который поможет вам создавать свои собственные цветовые схемы.
Предварительный просмотр пользовательской цветовой палитры.
Хотя Google предложил несколько действующих ограничений при проектировании приложений для Android, у вас есть достаточно пространства для творчества, для игры с эстетикой своего интерфейса.
Диапазон цветов между красным и янтарным.
Типичный образец цвета в Android.
Иконки материального дизайна.
Иконографика сложна, просто потому, что она может быть неоднозначной. Но в материальном дизайне, визуальная сторона пользовательского опыта является решающей, и настоятельно рекомендуется широко использовать иконки. На самом деле, Google создал полный набор иконок материального дизайна с открытым исходным кодом. Вы также можете скачать все иконки по отдельности в MaterialUp, и даже интегрировать их в вашу тему WordPress.
Набор иконок из MaterialUp.
Иконографика является важным фактором, но зачастую она не может существовать в одиночку: для более сильного визуального воздействия, ей нужна поддержка фотографий или иллюстраций. Кроме того, Google также призывает использовать (и смешивать) иллюстрации и фотографии для повышения UX – с подсказывающими, конкретными и соответствующими изображениями, и, возможно, с интерактивным наложением, чтобы скрывать их, когда они не нужны.
Физическая сторона материального дизайна
В отличие от плоского дизайна, материальный дизайн широко использует тень. Эта тень должна выглядеть как лист бумаги, лежащий на яркой поверхности. Он подражает 3-D для цифрового объекта. Материальный дизайн произошел от материального мира. Вероятно, наиболее известным примером является иконка Gmail, которая использует световые эффекты, помогающие изобразить обычный конверт.
Как иконка Gmail была получена из обычного конверта.
Помимо официального набора иконок Google, дизайнеры разработали собственные иконки и адаптировали визуальный язык для своих нужд. Это, возможно, не совсем соответствует оригинальной идее материального дизайна, но это не значит, что они не имеют права на существование. Например, Мухаммад Ясир из Дубаи выпустил бесплатный материальный набор иконок PSD. Есть еще много бесплатных иконок.
Удобный набор иконок для дизайнеров.
Карточки
В материальном дизайне контент всегда представлен в виде карточек, в которых есть иерархия, фоновые изображения и контент для того, чтобы “предоставить контекст и отправную точку в более надежную информацию”. Действительно, карточки предназначены предоставлять нужное количество информации в виде сжатого обзора с поддержкой визуальных элементов. Есть несколько вариантов карточек, в зависимости от необходимого контента, но, как правило, вам придется либо отобразить действие или предоставить информацию в блоке контента.
Образец использования карточки.
В материальном дизайне, Google также выступает за launch screen (экран-заставку), который похож на старый добрый splash screen из времен Flash. Однако этот экран нужен для контекста: например, в период ожидания, когда вашему приложению требуется несколько минут, чтобы получить данные или обеспечить обратную связь. Он также может быть полезен для onboarding (знакомство с приложением).
Анимации в материальном дизайне
Анимация в материальном дизайне способствует плавным процессам. Есть много интересных анимаций в материальном дизайне, и зачастую они едва различимы, но они, несомненно, создают ощущение непрерывности.
Ниже приведены несколько примеров и бесплатных образцов:
- Материальный дизайн: примеры анимации
- Шаблон анимаций материального дизайна в Keynote
- Коллекция анимаций материального дизайна, с HTML/CSS/JavaScript, на CodePen
- Материальный дизайн: бесплатный файл проекта After Effects
- Стартовый набор Polymer
- Элементы материального дизайна в Polymer
- Демо площадка материального дизайна в Polymer
- Анимации в действии
- Демо кнопки
- Демо для волнового эффекта.
Если вам нужны дальнейшие уроки и примеры, поищите серию видео “Polycasts”, выпускаемых Google.
Компоненты HTML/CSS/JavaScript
Google только что выпустил Material Design Lite, обширный набор компонентов, шаблонов и стилей, которые были оптимизированы для производительности, скорости и доступности. Компоненты не зависят от фреймворков JavaScript. Среди шаблонов, в библиотеке есть шаблон “blog” – всего в 159Кб, это легкий шаблон, содержащий встроенные шаблоны для подписки призыва к действию, комментариев, рейтингов комментариев и т.д.
Красивый и чистый шаблон блога. Посмотрите на GitHub.
Кроме шаблона блога, Google также выпустил lite версию текущего сайта Android.com. Его основной вес без веб-шрифтов – 27KB и содержит поле поиска, навигацию и карусель.
Легкая страница текущего сайта Android.com. Доступно на Github.
Есть гораздо больше полезного материала, доступного на сайте Material Design Lite, как шаблоны других страниц и большое разнообразие компонентов (кнопки, карточки, таблицы и т.д.). Если вам нужна библиотека HTML/CSS, здесь можно начать.
Комплект материального UI на material-ui.com.
Есть и другие наборы, предоставленные другими членами сообщества, в том числе комплект материального UI для React.js (да, React.js), материальный Angular.js, материальный Bootstrap, материальный Ionic и LumX. Просто имейте в виду, что во многих случаях вам, возможно, вообще не потребуется фреймворк.
Комплекты материального UI для бесплатного скачивания
DESIGNTORY UI KIT (PSD)
Комплект материального UI для быстрого и легкого создания веб-дизайн проектов.
ULTRALINX MATERIAL DESIGN KIT (PSD)
Бесплатный комплект материального UI, доступный на theultralinx.com.
OKILLA MATERIAL DESIGN KITS (PSD)
Помимо комплекта материального UI, есть много других полезных ресурсов, доступных на okilla.com.
INVISION’S SKETCH UI KIT (.SKETCH)
Дизайн для электронного приложения, непохожего на Gmail. Необходима регистрация на webdesignerdepot.com.
GOOGLE’S STICKER SHEET MATERIAL DESIGN UI KIT (.SKETCH, .AI, .PSD)
Файл-исходник включает в себя элементы, которые составляют макеты, как светлые и темные символы, элементы управления, карточки, выпадающие меню, поля поиска, разделители, боковая навигация, диалоги, плавающие кнопки и другие компоненты.
Заключение
Тенденции не важны, важны методы. Независимо от того, какой дизайн вы выбираете для вашего проекта, имейте в виду, что это все связано с устройством, с созданием особого, запоминающегося, восхитительного опыта для пользователей. Мы можем, конечно, достичь этого без материального дизайна, но мы также можем извлечь выгоду из некоторых качеств и закономерностей его богатого визуального языка.
Так или иначе, у вас должно быть несколько инструментов, чтобы ваш проект был во всеоружии, и вы не теряли времени, а сосредоточили внимание на разработке таких сайтов, которые полюбятся вашими пользователями.
Высоких конверсий!
