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

  1. Об авторе Свен является соучредителем и бывшим генеральным директором Smashing Magazine. Он пишет на своем Блог Conrest где он фокусируется на блогах, контент-стратегии, написании и публикации ... Подробнее о Свене ... Всегда здорово иметь небольшой набор инструментов с нужными инструментами, которые ждут вас, когда они вам нужны. Что, если вы собираетесь начать работу над новым проектом, в котором должен использоваться язык дизайна материалов, представленный Google в прошлом году? Что если бы у вас был просто хороший стартовый набор со всем необходимым, чтобы погрузиться в творческий процесс, не отвлекаясь на рутинные задачи? Всегда здорово иметь небольшой набор инструментов с нужными инструментами, которые ждут вас, когда они вам нужны. Что, если вы собираетесь начать работу над новым проектом, в котором должен использоваться язык дизайна материалов, представленный Google в прошлом году? Что если бы у вас был просто хороший стартовый набор со всем необходимым, чтобы погрузиться в творческий процесс, не отвлекаясь на рутинные задачи? Мы здесь, чтобы поддержать вас - с небольшим выбором удобных вкусностей, иконок, шаблонов и инструментов, которые помогут вам быстрее начать работу. Дальнейшее чтение на SmashingMag:
  2. Материал Дизайн Шрифты
  3. Материал Дизайн Цвета
  4. Значки дизайна материалов
  5. Физическая сторона материального дизайна
  6. Карты
  7. Анимации в материальном дизайне
  8. HTML / CSS / JavaScript Компоненты
  9. Наборы пользовательского интерфейса для дизайна материалов для бесплатного скачивания
  10. Комплекты материалов для дизайна Okilla (PSD)
  11. Набор для создания эскизов в InVision (.sketch)
  12. Набор пользовательского интерфейса для дизайна стикерного листа Google (.sketch, .ai, .psd)
  13. Куда пойти отсюда
  14. Связанные ресурсы

Об авторе

Свен является соучредителем и бывшим генеральным директором Smashing Magazine. Он пишет на своем Блог Conrest где он фокусируется на блогах, контент-стратегии, написании и публикации ... Подробнее о Свене ...

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

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

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

Дальнейшее чтение на SmashingMag:

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

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

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

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

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

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

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

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

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

Материал Дизайн Шрифты

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

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

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

Материал Дизайн Цвета

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

Вы также можете использовать очень удобный   генератор палитры материалов   который поможет вам создать свои собственные цветовые схемы

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

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

Диапазон цветов от красного до янтарного. Диапазон цветов от красного до янтарного Типичный цветовой рисунок в Android.

Значки дизайна материалов

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

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

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

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

Пример, показывающий, как объединить фотографии и информацию. ( Источник изображения )

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

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

Вероятно, наиболее известным примером является значок Gmail, который использует световые эффекты, чтобы заставить вас думать об обычном конверте

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

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

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

Карты

С материальным дизайном, контент всегда представлен в карты которые используют иерархию, фоновые изображения и контент для «обеспечения контекста и точки входа для более надежной информации и представлений». Действительно, карты работают хорошо, так как они должны представлять нужный объем информации в компактном обзоре, улучшенном и поддерживаемом визуальные элементы. Существует несколько вариантов карточек, в зависимости от содержимого, которое вы хотите заполнить, но обычно вы либо отображаете действие, либо предоставляете информацию в блоке содержимого.

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

Карты - это новый стиль плитки.

В дизайне материалов Google также выступает стартовые экраны , что может показаться хорошим старым заставкой из сладких и кислых времен Flash. Однако контекст может потребовать их: например, в промежуток времени, когда вашему приложению требуется несколько минут для получения данных или предоставления обратной связи. Это также может быть полезно для адаптационный ,

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

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

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

Материальная иллюстрация дизайна Джови Бреттом на Dribbble. Джови на Dribbble.

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

Если вы ищете дополнительные учебники и примеры, поищите «Polycasts» - серию видео, созданных Google.

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

Google только что запустил Материал Дизайн Лайт - обширный набор компонентов, шаблонов и стилей, которые были сильно оптимизированы с точки зрения производительности, скорости и доступности. Компоненты не полагаются на какие-либо JavaScript-фреймворки и возвращаются к базовым возможностям старых браузеров. Среди шаблонов библиотека также имеет шаблон блога - всего 159 КБ, это легкий шаблон, содержащий встроенные шаблоны для подписки на призыв к действию, комментарии, оценки комментариев и многое другое.

Среди шаблонов библиотека также имеет шаблон блога - всего 159 КБ, это легкий шаблон, содержащий встроенные шаблоны для подписки на призыв к действию, комментарии, оценки комментариев и многое другое

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

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

Облегченная тема текущего сайта android.com. Доступно на Github ,

Там намного больше полезные вещи доступны на Материал Дизайн Лайт сайт такие как другие шаблоны страниц и большое разнообразие компоненты (кнопки, карточки, столы и т. д.). Если вам нужна библиотека HTML / CSS для начала, это то место, с которого стоит начать.

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

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

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

Ultralinx Material Design Kit (PSD)

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

Комплекты материалов для дизайна Okilla (PSD)

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

Набор для создания эскизов в InVision (.sketch)

Дизайн для почтового приложения, которое не похоже на клон Gmail. Требуется регистрация на webdesignerdepot.com ,

Набор пользовательского интерфейса для дизайна стикерного листа Google (.sketch, .ai, .psd)

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

Куда пойти отсюда

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

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

Вам понравился этот кусок "Sideblog"? Хотели бы вы видеть больше подобных постов в будущем? Мы будем рады услышать ваши отзывы в комментариях к этому посту.

Связанные ресурсы

Эта статья была написана Свен Леннарц , соучредитель Smashing Magazine. Это было первым опубликовано на немецком языке , а затем расширен и отредактирован Маркусом Сейфертом и Виталием Фридманом.