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

Posted on by riasevastopol

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

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

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

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

Материальный дизайн Google, возможно, не для ценителей черно-белого мастерства.

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

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

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

Однако, всегда, в то время, когда мы говорим об взаимодействии и эстетике, мы должны упомянуть и производительность. Кроме того производительные анимации смогут стать не сильный местом, в то время, когда любой элемент DOM обязан двигаться, анимировать и переходить из одного состояния в второе. Производительность играется ключевую роль больше, чем когда-либо прежде, и мы должны отыскать баланс между быстрым донесением и гладкими взаимодействиями контента до пользователя.

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

Шрифты материального дизайна

Если вы посмотрите управление типографики материального дизайна, Гугл деятельно продвигает лишь один главный шрифт: Roboto, ссылку на робота Android. При разработке UX, посвященных рынку азиатских, вы кроме этого имеете возможность применять Noto, чьи вертикальные метрики совместимы с Roboto. Оба шрифта, само собой разумеется, дешёвы на Гугл Fonts, источник Roboto дешёв на GitHub, и шрифт был выпущен под лицензией Apache 2.0.

Разумеется, Roboto был шепетильно продуман, дабы соответствовать цели материального дизайна, исходя из этого он универсален и всецело поддерживает кириллицу, латинский, греческий и вьетнамский (расширенные комплекты знаков). Шрифт дешёв в разной жирности, от узкого и легкого, обычного и среднего до жирного и тёмного (100–300–400–500–700–900); то же самое касается вариантов курсива. Семья возможно использована с семействами Roboto Condensed и Roboto Slab.

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

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

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

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

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

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

Обычный пример цвета в Android.

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

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

Вы кроме этого имеете возможность скачать все иконки по отдельности в MaterialUp, а также интегрировать их в вашу тему WordPress.

Комплект иконок из MaterialUp.

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

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

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

Возможно, самый известным примером есть иконка Gmail, которая применяет световые эффекты, помогающие изобразить простой конверт.

Как иконка Gmail была взята из простого конверта.

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

Имеется еще большое количество бесплатных иконок.

Эргономичный комплект иконок для дизайнеров.

Карточки

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

Пример применения карточки.

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

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

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

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

  • Материальный дизайн: примеры анимации
  • Шаблон анимаций материального дизайна в Keynote
  • Коллекция анимаций материального дизайна, с HTML/CSS/JavaScript, на CodePen
  • Материальный дизайн: бесплатный файл проекта After Effects
  • Стартовый комплект Polymer
  • Элементы материального дизайна в Polymer
  • Демо площадка материального дизайна в Polymer
  • Анимации в действии
  • Демо кнопки
  • Демо для волнового результата.

В случае если вам необходимы примеры и дальнейшие уроки, поищите серию видео “Polycasts”, производимых Гугл.

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

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

Прекрасный и чистый шаблон блога. взглянуть на GitHub.

Не считая шаблона блога, Гугл кроме этого выпустил 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.

Гугл S STICKER SHEET MATERIAL DESIGN UI KIT (.SKETCH, .AI, .PSD)

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

Заключение

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

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

Высоких конверсий!

Случайные статьи:

Как нарисовать кнопки в стиле Material Design. [Для новичков]


Подборка похожих статей:

riasevastopol

More Posts