Иконки и стартовые наборы для материального дизайна

0

Замечательно иметь набор инструментов, который окажется под рукой тогда, когда он нужен. Что если вы собираетесь начать работу над новым проектом, в котором нужно применить язык материального дизайна, введенный Google в прошлом году? Что если у вас только хороший стартовый комплект со всем необходимым, чтобы погрузиться в творческий процесс, не отвлекаясь на рутинные задачи?

Мы поможем вам наладить работу при помощи иконок, шаблонов и инструментов.

Материальный дизайн, визуальный язык

Предназначенный в первую очередь для приложений Google Android на телефонах и планшетах, материальный дизайн рассказал о восхитительных деталях, которые могут создать интерфейс – от тонких переходов и анимаций в красочные интерфейсы с яркой типографикой. Продукты материального дизайна яркие и привлекательные. Неудивительно, что визуальный язык стал частью прекрасного нового мобильного мира в родных приложениях, гибридных приложениях, а также веб-сайтах.

Ultimate-Material-Lollipop-Collection

Материальный дизайн Google, вероятно, не для ценителей черно-белого искусства. (Источник)

Визуальный язык основан на сильных цветовых схемах, ясности и пространстве. Тени играют центральную роль в создании трехмерного чувства на 2-D экранах, и поддерживают последовательность и целостность при использовании анимации в UX. Все же это больше, чем расширенное руководство по стилю. Есть много доступных ресурсов, посвященных материальному дизайну, и вы можете использовать их для вашего проекта прямо сейчас. Материальный дизайн хорошо документирован и разработан до мельчайших деталей.

material-design-rainbow

Радужная цветовая палитра материального дизайна. (Источник)

material-design-principles

Материальный дизайн любит детали. Не всем это понравится, но это что-то выдающееся в своем роде и заслуживает уважения. (Источник)

Тем не менее, всякий раз, когда мы говорим об эстетике и взаимодействии, мы должны упомянуть и производительность. Даже производительные анимации могут стать слабым местом, когда каждый элемент 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.

roboto-typo

6 вариантов шрифта Roboto (не курсив).

Цвета материального дизайна

Когда дело касается цвета, Google также предоставляет подробные руководящие принципы. Цвета четко определены, и мы подготовили небольшую цветовую палитру для Photoshop и Illustrator (ZIP), которую вы можете сразу же использовать. Вы также можете использовать очень удобный генератор материальной палитры, который поможет вам создавать свои собственные цветовые схемы.

palette-preview

Предварительный просмотр пользовательской цветовой палитры. (Источник)

Хотя Google предложил несколько действующих ограничений при проектировании приложений для Android, у вас есть достаточно пространства для творчества, для игры с эстетикой своего интерфейса.

color-palette

Диапазон цветов между красным и янтарным. (Источник)

ThemeColors

Типичный образец цвета в Android. (Источник)

Иконки материального дизайна

Иконографика сложна, просто потому, что она может быть неоднозначной. Но в материальном дизайне, визуальная сторона пользовательского опыта является решающей, и настоятельно рекомендуется широко использовать иконки. На самом деле, Google создал полный набор иконок материального дизайна с открытым исходным кодом. Вы также можете скачать все иконки по отдельности в MaterialUp, и даже интегрировать их в вашу тему WordPress.

material-icons

Набор иконок из MaterialUp.

Иконографика является важным фактором, но зачастую она не может существовать в одиночку: для более сильного визуального воздействия, ей нужна поддержка фотографий или иллюстраций. Кроме того, Google также призывает использовать (и смешивать) иллюстрации и фотографии для повышения UX – с подсказывающими, конкретными и соответствующими изображениями, и, возможно, с интерактивным наложением, чтобы скрывать их, когда они не нужны.

material-design-magery-principles

Пример, демонстрирующий слияние фотографии и информации. (Источник)

Физическая сторона материального дизайна

В отличие от плоского дизайна, материальный дизайн широко использует тень. Эта тень должна выглядеть как лист бумаги, лежащий на яркой поверхности. Он подражает 3-D для цифрового объекта. Материальный дизайн произошел от материального мира. Вероятно, наиболее известным примером является иконка Gmail, которая использует световые эффекты, помогающие  изобразить обычный конверт.

material-design-prototype1

Как иконка Gmail была получена из обычного конверта. (Источник)

Помимо официального набора иконок Google, дизайнеры разработали собственные иконки и адаптировали визуальный язык для своих нужд. Это, возможно, не совсем соответствует оригинальной идее материального дизайна, но это не значит, что они не имеют права на существование. Например, Мухаммад Ясир из Дубаи выпустил бесплатный материальный набор иконок PSD. Есть еще много бесплатных иконок.

material-icon-set

Удобный набор иконок для дизайнеров. (Источник)

Карточки

В материальном дизайне контент всегда представлен в виде карточек, в которых есть иерархия, фоновые изображения и контент для того, чтобы “предоставить контекст и отправную точку в более надежную информацию”. Действительно, карточки предназначены предоставлять нужное количество информации в виде сжатого обзора с поддержкой визуальных элементов. Есть несколько вариантов карточек, в зависимости от необходимого контента, но, как правило, вам придется либо отобразить действие или предоставить информацию в блоке контента.

cards

Образец использования карточки.

В материальном дизайне, Google также выступает за launch screen (экран-заставку), который похож на старый добрый splash screen из времен Flash. Однако этот экран нужен для контекста: например, в период ожидания, когда вашему приложению требуется несколько минут, чтобы получить данные или обеспечить обратную связь. Он также может быть полезен для onboarding (знакомство с приложением).

Анимации в материальном дизайне

Анимация в материальном дизайне способствует плавным процессам. Есть много интересных анимаций в материальном дизайне, и зачастую они едва различимы, но они, несомненно, создают ощущение непрерывности.

material-design-3-jovie-brett

Иллюстрация материального дизайна Jovie Brett на Dribbble.

Ниже приведены несколько примеров и бесплатных образцов:

Если вам нужны дальнейшие уроки и примеры, поищите серию видео “Polycasts”, выпускаемых Google.

Компоненты HTML/CSS/JavaScript

Google только что выпустил Material Design Lite, обширный набор компонентов, шаблонов и стилей, которые были оптимизированы для производительности, скорости и доступности. Компоненты не зависят от фреймворков JavaScript. Среди шаблонов, в библиотеке есть шаблон “blog” – всего в 159Кб, это легкий шаблон, содержащий встроенные шаблоны для подписки призыва к действию, комментариев, рейтингов комментариев и т.д.

blog

Красивый и чистый шаблон блога. Посмотрите на GitHub.

Кроме шаблона блога, Google также выпустил lite версию текущего сайта Android.com. Его основной вес без веб-шрифтов – 27KB и содержит поле поиска, навигацию и карусель.

android-dot-com

Легкая страница текущего сайта Android.com. Доступно на Github.

Есть гораздо больше полезного материала, доступного на сайте Material Design Lite, как шаблоны других страниц и большое разнообразие компонентов (кнопки, карточки, таблицы и т.д.). Если вам нужна библиотека HTML/CSS, здесь можно начать.

material-ui

Комплект материального UI на material-ui.com.

Есть и другие наборы, предоставленные другими членами сообщества, в том числе комплект материального UI для React.js (да, React.js), материальный Angular.js, материальный Bootstrap, материальный Ionic и LumX. Просто имейте в виду, что во многих случаях вам, возможно, вообще не потребуется фреймворк.

Комплекты материального UI для бесплатного скачивания

DESIGNTORY UI KIT (PSD)

ui-kit-material-design

Комплект материального UI для быстрого и легкого создания веб-дизайн проектов.

ULTRALINX MATERIAL DESIGN KIT (PSD)

ui-kit-ultralinx

Бесплатный комплект материального UI, доступный на theultralinx.com.

OKILLA MATERIAL DESIGN KITS (PSD)

ui-kit-okilla

Помимо комплекта материального UI, есть много других полезных ресурсов, доступных на okilla.com.

INVISION’S SKETCH UI KIT (.SKETCH)

invision-material-design

Дизайн для электронного приложения, непохожего на Gmail. Необходима регистрация на webdesignerdepot.com.

GOOGLE’S STICKER SHEET MATERIAL DESIGN UI KIT (.SKETCH, .AI, .PSD)

stickersheet

Файл-исходник включает в себя элементы, которые составляют макеты, как светлые и темные символы, элементы управления, карточки, выпадающие меню, поля поиска, разделители, боковая навигация, диалоги, плавающие кнопки и другие компоненты.

Заключение

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

Так или иначе, у вас должно быть несколько инструментов, чтобы ваш проект был во всеоружии, и вы не теряли времени, а сосредоточили внимание на разработке таких сайтов, которые полюбятся вашими пользователями.

Поделиться: