Material Design
Веб-дизайн 0 Комментариев ,

Material Design – полезные ресурсы, инструменты и примеры кода

Material Design (дальше “MD”) довольно глубоко пустил корни, медленно но верно воздействуя не только на мобильную но и на веб-сферу. Его цель проста – сделать интерфейс более интуитивно понятным, последовательным и удобным для пользователей.

Тем не менее, его реализация требует точного и тонкого подхода. Визуальный язык, который пытается создать Google, — это не только средство массовой информации, это философия. Здесь каждая деталь дизайна должна соответствовать принципам.

В этой статье рассмотрим несколько ресурсов, инструментов и примеров, помогающих дизайнерам лучше ориентироваться в MD.

MD кнопка с анимацией (codepad.co/snippet/JakCGrKh)

Material Design

Код для создания анимированной кнопки.

Resizer (https://goo.gl/VYpS0W)

Material Design

Онлайн-инструмент для проверки отображения сайта для мобильной версии. Интерактивный просмотр демонстрирует отображение проекта на разных девайсах.

Materialize (materializecss.com)

Material Design

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

Material Palette (materialpalette.com)

Material Design

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

Material Design Blog (materialdesignblog.com)

Material Design

Онлайн-журнал о новом языке дизайна Google. Он собирает полезные ресурсы, инструменты, плагины, статьи, примеры кода для дизайнеров в сфере MD.

Random Material Generator (https://goo.gl/ikvYLS)

Material Design

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

Material UI (materialui.co)

Material Design

Портал, специализирующийся на двух главных вещах: Flat-стиле и MD. Здесь вы найдете обширную цветовую палитру и массу аккуратно подобранных иконок для интерфейсов.

Material Icon Generator (https://goo.gl/2JIjED)

Material Design

Этот инструмент позволяет создавать отличные иконки с четкой тенью и цветовым фоном. Есть возможность выбрать символ из коллекции или загрузить файл в формате SVG.

SVG Ripples (https://goo.gl/pWJfnL)

Material Design

Руководство по созданию эффекта ряби на кнопках.

Заключение.

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



Подпишитесь на обновления блога!

Будьте всегда в курсе новостей

Добавить комментарий