Меню
ГлавнаяПрограммы

Все, что вам нужно знать о Material Design. UIDE – бесплатный материал скетч от Mateusz Dembek. Station интерактивный материал дизайн от Nelson Sakwa

Вице-президент по дизайну Google Матиас Дуарте (Matias Duarte) в интервью The Verge рассказывает об основных принципах нового дизайна, который получил название Material. Это совершенно иной подход, обеспечивающий унифицированный набор правил, начиная от вида программного обеспечения и заканчивая функциями. Пока дизайн кажется немного странным, и к нему необходимо привыкнуть.

Команда дизайнеров в Google почувствовала необходимость придумать единый внешний вид и функциональность ПО, которые могли бы применяться во всех продуктах: Android, Chrome OS, web-сервисах. Вместо того, чтобы начать с разработки палитры цветов, они начали с вопроса: «Ч то такое программное обеспечение?»

Материя и форма

Ответ пришел из отдела проектирования, когда Джон Уайли (Jon Wiley), главный конструктор поисковика Google, и его коллега Николай Житкофф (Nicholas Jitcoff) смотрели на дизайн Google Now. Они смотрели на карточный интерфейс и подумали: «А если сдвинуть карточку, то что находится за ней?»

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

Таким образом, началась работа над метафорическим материалом, напоминающим бумагу - плоскую и белую с реалистичными тенями. Это было семя из которого выросла остальная часть дизайна, реализацию которого можно увидеть в Android L. Material Design - это смелые, яркие цвета, минимализм и чувство последовательности.

Уайли и Житкофф говорят, что это эстетическая эволюция всей философии дизайна компании Google. В 2012 и 2013 годах в стенах штаб-квартиры интернет-гиганта закипела работа над Project Kennedy, который бы унифицировал дизайн всего.

Творчество и ограничения

Material Design объединяет все лучшие идеи. Матиас Дуарте воспринимает наш новый стиль в качестве ряда ограничений, которые, по его мнению, упрощают работу дизайнерам приложений, делают её более последовательной. К примеру, жест переворота карточки для того, чтобы увидеть написанное на задней стороне. В обычном мире это невозможно из-за нехватки места. Это как если бы софт представлял собой реальные физические предметы внутри устройств. А на вашем телефоне явно нет места, чтобы перевернуть карточку, поэтому Google ограничивает подобные манипуляции.

Мы сильно зависим от физики, и программное обеспечение часто ведет себя таким образом, что рвет наши представления о мире, как в каком-то научно-фантастическом фильме, нарушающем элементарную логику. Дуарте прямо комментирует новую философию дизайна iOS от Apple.

Мы не мчимся через пространство и время на сверхзвуковых скоростях. Дизайн - это поиск решения в рамках жестких ограничений. Дизайн - это искусство.

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

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

Материализуй

Другая более важная вещь, которую привносит Material Design - унификация. Google работает над алгоритмами для всех продуктов годами, и это стало неотъемлемой частью новой философии дизайна. Вместо того, чтобы пользователь настраивал все сам, Material Design заставляет верить, что на экране они увидят то, что необходимо в нужное время.

Вот почему Android Wear не дает пользователям ничего, кроме взаимодействия с уведомлениями. Алекс Фоборг (Alex Faaborg), дизайнер платформы, говорит:

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

Google просит слишком много доверия к себе и к его «волшебному» бумажному материалу, но Дуарте уверен, что на это есть веские причины.

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

Parc 3.0

За Material Design стоит гораздо больше, чем просто дизайн Android L, Android Wear и всего остального к чему причастна Google. Речь идет об ощущениях при взаимоотношении человека и технологий.

Дуарте говорит, что Xerox PARC проделала блестящую работу, создав принципы работы с привычными для всех окнами и курсором. Это было новаторством, потому что компании удалось создать виртуальную версию реального рабочего стола. Люди понимали то, как компьютер работает и могли комфортно с ним работать. Это касается и того, что сделала Apple с сенсорными экранами.

Теперь Google считает, что ей удалось проделать тоже самое. Уайли говорит, что сегодня у людей имеется множество технологий: сенсорные экраны, жесты, голосовые команды, интеллектуальные алгоритмы. Material Design объединяет все это многообразие в одну интуитивно-понятную вещь. Это поможет без труда пользоваться одним и тем же на Chrome OS, Android или в интернете.

9 принципов

1. Материал - это метафора

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

2. Поверхности интуитивно понятны

Плоскости и грани передают визуальные сигналы, основанные на нашем восприятии реальности. Использование знакомых тактильных атрибутов позволяет обратиться к первичным частям нашего мозга и помогает быстро понять «представляемое».

3. Размерность рождает взаимодействие

Основы света, поверхности и движения являются ключевыми для взаимодействия объектов. Реалистичное освещение делит пространство и акцентирует внимание на движущихся частях.

4. Единый адаптивный дизайн

Единый дизайн для всего. Каждое устройство отражает свой взгляд на те же базовые элементы. Каждый вид адаптирован к размеру и взаимодействию для каждого устройства. Цвета, иконография, иерархия и пространственные отношения остаются неизменными.

5. Шрифты, графика, цвета

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

6. Первичные действия

Действие пользователя и есть суть дизайна. Первичные действия преобразуют весь дизайн. В них акцент делается на основную функциональность и сразу бросаются в глаза пользователя.

7. Пользователи инициируют изменения

Изменения в интерфейсе происходят от действий пользователя. Движение усиливает опыт первичного действия.

8. Анимационная хореография

Все действия происходят в единой среде. Объекты, которые видит пользователь, не нарушают весь остальной опыт использования даже после преобразований и реорганизаций.

9. Движение обеспечивает смысл

Движение имеет смысл и оно необходимо для привлечения внимания. Переходы эффективны.

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

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


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

Популярность тренда объясняется огромным количеством ресурсов и инструментов для дизайнеров, кстати, как платных так и бесплатных. К примеру, сегодня предлагаю полезную подборочку наполненную 30 вдохновляющими бесплатными и платными ресурсами для дизайнеров в стиле материального дизайна. С каждым днем выходят всё новые приложения и проекты в стиле Material Design. Не отставайте. Узнайте полезности, которые помогают дизайнерам каждый день справляться с нелегкими задачами и добиваться успехов. Помогите будущему проекту блеснуть материальным дизайном.

Полезности для дизайнера. Коллекция 30 бесплатных и платных инструментов и ресурсов в стиле материального дизайна.

Фоны:

1. 40+ Бесплатных фонов в стиле материального дизайна

Разве это не прекрасно найти целую коллекцию 40+ бесплатных фонов в стиле материального дизайна в одном месте? Выполнены в высоком расширении, они точно вдохновят на реализацию веб-проекта или другого печатного замысла. Большое количество различных форм и цветов привлечет внимание даже самого требовательного дизайнера.

2. 10 Бесплатных фонов

Не упустите шанс добавить в свою библиотеку инструментов коллекцию 10 высококачественных фонов в стиле материального дизайна. Представлены в двух стилях и пяти цветовых комбинациях, эти фоны имеют 300 Dpi и 10 .jpg файлов , а также разрешение в 5000x3000px . И все это можно получить бесплатно.

3. 30 фонов для проекта в стиле material

Еще одна отличная подборочка высококачественных фонов для проекта в стиле материального дизайна. Выбирайте из 30 различных дизайнов, наполненных дополнительными формами, такими как квадраты, треугольники и круги, и придайте своему проекту хендмэйд оттенок. Доступны бесплатно в .png и .ai форматах.

4. 12 Бесплатных промо фонов в стиле материального дизайна

Хочется чего-то новенького? Пожалуйста. Ознакомьтесь с коллекцией 12 новинок в стиле материального дизайна в высоком разрешении. Отличная новость — коллекцию можно использовать как для персональных так и для коммерческих целей, т.к. продукты лицензированы Creative Common Zero , а значит проверены и готовы к применению. Форма бриллианта в центре фона служит для привлечения внимания к продукту. Доступны для скачивания в .png и .jpg форматах.

5. Набор узорчатых фонов

Не упустите подборочку из ярких и качественных фонов выполненных в плиточном дизайне. Файл содержит в себе файлы .png , photoshop и формат illustrator vector , а это значит, что можно самостоятельно настраивать цветовую гамму согласно требованиям. Используйте бесплатно в любом размере и без потери качества.

6. Бесплатные баннеры

Здесь находится набор из 5 баннеров в стиле материального дизайна с разрешением в 1140x600px . Отлично подходят для акцентирования внимания хедеров, изображений или отдельных секций в любом веб-проекте.

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

7. Бесплатный набор инструментов для мобильного дизайна

Отличная подборка, которая не останется незамеченной для пользователей Photoshop и Sketch. Вниманию представлен набор различных компонентов для материального дизайна, которые смогут придать веб-проекту достаточно активную энергетику. Отличный вариант для создания музыкального приложения или мобильной версии сайта.

8. Edacious UI KIT

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

9. DO — объемный App UI Kit. Бесплатно

Do — это настоящая находка для всех, кто интересуется созданием различного рода приложений в материальном дизайне. Do — это 130 дизайнов, 10 уникальных тем и более 250 UI элементов для создания гибких и Retina ready дизайнов. Здесь точно можно найти простор для экспериментов. Сделайте свой выбор в пользу современного красочного дизайна.

10. Набор бесплатных UI элементов для создания музыкальных приложений

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

Статьи по теме:

11. Набор бесплатных UI элементов в стиле материального дизайна

Для тех, кто все еще сомневается с выбором инструментов и ресурсов в стиле материального дизайна, советую остановить свое внимание на коллекции Material Design UI Kit. С помощью различных .psd элементов, которые кстати легко адаптировать под свои потребности в Photoshop, можно сэкономить время и усилия еще на этапе запуска проекта. Добавьте себе в коллекцию отличный материал для создания быстрых проектов и приложений по принципу материального дизайна.

Иконки

12. Коллекция иконок Google в стиле материального дизайна

Начните поиск подходящих иконок для веб-проекта или приложения с коллекции Google Material Icons. Набор содержит всевозможные варианты иконок для различных приложений как медиа ресурсов воспроизведения, коммуникации, редактирования контента, и т.д. Загрузите zip archive (~57MB) и наслаждайтесь отличным материалом, который нужен под рукой каждому дизайнеру.

13. Коллекция бесплатных иконок

Material Design Icons — это коллекция бесплатных иконок в стиле материального дизайна, которые можно загрузить в нужном формате, размере и цвете в зависимости от требований проекта. Перетаскивайте иконки в Иллюстратор, фотошоп или Visual Studio, смените цвет и ваша иконка готова.

14. Pack: Material Design Icons

Здесь можно скачать такие бесплатные элементы как иконки, тематические фоны или цветовые палитры быстро и удобно. Иконки доступны в .icns, .ico, .png форматах. Различные формы и стили иконок отлично подходят для рутинной работы в процессе создания дизайна.

15. Material Design Icon

Как на счет коллекции 1000 иконок разделенных на 20 категорий в 7 разрешениях? В результате, получается набор из более 7000 файлов, и всё это выходит за даром. Просто выберите свою категорию и необходимое разрешение, и вуаля — иконка готова. Самое время приступить к просмотру вариантов, что скажете?

Фреймворки

16. Materialize — Адаптивный фронтенд фреймворк на основах материального дизайна

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

17. Фреймворк Material Design Lite

Нужен инструмент для облегчения процесса создания сайтов и приложений на основе материального дизайна? Попробуйте Material Design Lite — это универсальный фреймворк, который придерживается принципов материального дизайна, поддерживает мобильные браузеры и помогает создавать адаптивные и минималистичные проекты. Включает в себя различные элементы управления интерфейсом.

18. Фреймворк Material-UI

Имеет опыт работы с React? Material-UI — еще один довольно популярный фреймворк, который состоит из набора компонентов для React. Обширные возможности настройки, поддержка стилей разделенных на отдельные файлы, а также соответствие рекомендациям материального дизайна.

19. Фреймворк LumX

LumX позиционирует себя как фронтэнд фреймворк, основанный одновременно на спецификациях AngularJS и принципах материального дизайна. Дополнительно необходимы jQuery, Velocity и Momentum. Включает в себя большое количество AngularJS компонентов.

20. Фреймворк Material Foundation на основах материального дизайна

Основанный на принципе Zurb Foundation, фреймворк Material Foundation заслуживает внимание как минимум потому, что является бесплатным и самодостаточным. Фреймворк предлагает большое поле возможностей в рамках кастомизации. Включает в себя компоненты React, которые соответствуют принципам материального дизайна.

Смотрите также:

21. MUI — Фреймворк основанный на рекомендациях Google по материальному дизайну

Довольно простой в использовании фреймворк, который существенно облегчит разработку будущих проектов. Обеспечивает поддержку Angular, React и WebComponents. Легковесный фреймворк обладает базовым набором элементов для ускорения процесса разработки небольших проектов.

22. Фреймворк Angular Material — Набор UI элементов

Фреймворк Angular Material — один из самых популярных фреймворков, поддерживаемых Google. Предлагает работу с полноценным материальным дизайном совместно с различными компонентами, иконками и скриптами. Адаптирован к работе на мобильных, в браузерах и настольных приложениях.

23. Bootstrap Material Design — Набор инструментов для материального дизайна на Bootstrap

Как следует из названия, Bootstrap Material Design — это тема для Bootstrap наполненная полезными фишками из Bootstrap вперемешку с элементами из материального дизайна.

Платные материалы

24.

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

25.

UTech — это премиум коллекция, которая состоит из различных экранов, макетов и стилей, и служит отличным решением для создания множества стартапов. В придачу, в комплект входит комплект различных экранов для профиля, новостной ленты или страницы-приветствия. Коллекция подходит для таких ниш как финансы, образование, еда, медиа портал или электронная коммерция.

26. Rainy Season – PSD элементы интерфейса для портфолио дизайнера, художника

Стоит отметить, что коллекция премиум PSD элементов отлично подойдет для создания приложений или виджетов. Почему бы не добавить себе в библиотеку набор высококачественных элементов для будущих проектов?

27.

С помощью премиум коллекции Bootstrap элементов, можно создавать абсолютно адаптивные макеты в виде карточек. В результате, можно выбрать из 5 различных форм, цветовых гамм и привлекательных дизайнов. Все они сочетаются между собой. Кстати, icomoon icon-fonts также добавлены в набор.

28.

Отдельного внимания заслуживает премиум бандл элементов инфографики Tree Bundle. Можно использовать как в презентациях PowerPoint, так и в брошюрах, годовых отчетах, резюме или в целях бизнеса, рекламы, маркетинга, и др. Таким образом, в комплект входит 4 цветовых EPS и AI файла, с возможностью изменить размер внутри zip файла. Работают лучше с Adobe Illustrator CS5 или более новой версией.

29.

Отличная подборка всевозможных элементов инфографики в виде графиков, диаграмм, иконок и других кастомных форм для применения в будущих проектах. Элементы подходят для презентаций, годовых отчетов, рекламы, маркетинга или продвижения товаров с помощью email. Коллекция EPS и AI файлов работает предпочтительно с Adobe Illustrator CS5 или более новой версией.

30.

Для тех, кому все еще продолжает собирать свою библиотеку иконок, предлагаю обратить внимание на Tonicons. Как на счет 2000 иконок премиум качества, разбитых на 6 категорий? Согласен, стоит поинтересоваться. К тому же, можно легко редактировать каждую из них согласно своим требованиям, менять размер и другие необходимые детали.

Подводя итоги

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



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

Material Design вытекает из идеи свободного перемещения в нужном пользователю направлении и базируется на тактильной реальности. Первоначально его разработчики вдохновлялись обычными чернилами и бумагой, но с тех пор он, конечно, далеко ушел от этой фундаментальной особенности, приобретая черты настоящего волшебства. Иными словами, совершенствуя визуально-функциональную часть, специалисты Google объединили принципы хорошего дизайна с инновациями и возможностями новых технологий.

В чем же особенности Material Design? Поверхности и края элементов в данном направлении дизайна сочетают визуальные образы и сигналы, создавая подсказки, помогающие пользователю интуитивно ориентироваться на сайте (как если бы все это происходило в реальном мире).

Кроме того, Material Design использует принципы полиграфического дизайна для эффектной расстановки акцентов (то есть фокусировки внимания на нужном элементе), упрощения навигации в интерфейсе, интуитивной передачи смысла его элементов. Для Material Design характерны насыщенные, ровные цвета, резкие, очерченные края, крупная типографика и немалые отступы между элементами. В совокупности эти элементы не просто складываются в приятную для глаз картинку, а создают новую реальность с концептуальным смыслом и множеством функций, которые дарят пользователю уникальный UX.

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

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

Material Design — это история об интерактивности. Страница отзывается на любое малейшее движение пользователя, при этом каждый переход должен быть плавным, как будто вы плывете в лодке по спокойной реке и знаете, куда и зачем вам поворачивать. Поэтому Material Design — это еще и история об осознанности: помимо того, что каждое действие приятно (и легко) выполнять, пользователь должен ясно и четко понимать, что и зачем он делает и куда его приведет очередное прикосновение. Таким образом, обратная связь должна быть ясной, доступной и легко распознаваемой.

Как уже было сказано, структура интерфейса позаимствовала множество «фишек» полиграфического дизайна, однако все они применяются не в первоначальном, а усовершенствованном виде. Material Design добавляет к этим «фишкам» неограниченные возможности масштабирования и изменения размеров страницы, которые позволяют адаптировать дизайн для любого устройства, например, планшета или смартфона. Все эти возможности дарят ощущение максимального комфорта при работе с навигацией и всем интерфейсом (так как неограниченные возможности подчиняются принципам простоты) и вызывают чувство доверия.

Главный вопрос, на который стоит ответить дизайнеру перед разработкой — что именно пользователь будет (или захочет) делать при работе с приложением? Как только вы сформулировали ответ, можно начинать воплощение идей Material Design.

При создании приложения помните, что контент здесь не менее важен, чем его визуальное оформление. Он не должен вводить пользователя в ступор, а наоборот, должен создавать ощущение комфорта и четкое понимание, зачем он здесь и что он будет сейчас делать.

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

Помните о принципах функциональности и старайтесь направлять пользователя, не «бросайте» его на первой же странице. Такой подход окажется более выигрышным: вы сможете заострить внимание посетителя на важных аспектах продукта/услуги, который вы предоставляете. Задумайтесь уже на этапе разработки о создании навигационной системы, позволяющей выделить опорные составляющие, до которых сможет легко и быстро добраться каждый посетитель.

Выбирая лучшие объекты, формы и цвета, не останавливайтесь на достигнутом: начните манипулировать этими элементами с помощью движений, придайте им гибкость и ощутимый «материальный» вес. Этот полный тактильный контроль над каждым, даже самым маленьким движением делает Material Design неповторимо прекрасным.

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

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

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

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

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

Постоянно держите в голове точки фокусировки, на которые должен ориентироваться пользователь, и убеждайтесь на каждом тестировании, что они не уходят на второй план, пока посетитель «бродит» по ресурсу. Всплывающие окна, уведомления и другие отвлекающие факторы могут раздражать посетителей или вовсе «загнать» их в угол. Будьте своеобразным гидом: помогайте им не потеряться и найти то, что нужно. Инструкции и кнопка помощи также должны быть доступны в любой момент.

Еще одна хорошая идея — вставить описания ссылок, которые вы размещаете на ресурсе. Они нужны для четкого и быстрого понимания, куда в итоге придет пользователь. Менее эффективным инструментом является использование кнопки «нажмите здесь»

4. Шаблон иконок от Google Design:

5. Icon Grid System для Android L:

Material Design представляет собой концепцию дизайна, созданную для унификации сервисов, интерфейсов и прочих продуктов. Концепция была разработана компанией Google и представлена ею для широкой аудитории 25.06.2014 года на конвенции Google I/O. В основе разработки цветовая схема, свойства и элементы объектов дизайна. Material Design регулярно дополняется и обновляется разработчиками. Говоря простым языком, основная идея заключается в дизайне в виде блоков, которые открываются и сворачиваются кубиками, подобно картам, с использованием эффекта тени. Сами карты должны плавным образом переключаться между собой.

В основе стратегии такого дизайна лежит в создании целостного пользовательского опыта, возможности проникновения сервисов в самые разные сферы жизнедеятельности пользователя ПК.

Создавая предметы, мы исходим из многовекового опыта и опираемся на него. Но программный дизайн — это еще только зародившийся и планомерно развивающийся продукт. Посмотрев всецело на него, мы задались вопросом: из чего он состоит?

- Джон Вайли, главный по дизайну поиска Google

Главные принципы

К главным принципам Material Design нужно отнести тактильные поверхности, полиграфический дизайн, осмысленная анимация, адаптивный дизайн.

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

Полиграфический дизайн. На «цифровой бумаге» отображаются «цифровые чернила». Для изображений - «цифровых чернил» применяется подход традиционного журнального или плакатного дизайна. Основными элементами печати дизайна являются , масштаб, сетка, цвет и пространство. Из них создается фокус, иерархия и значение. Благодаря цвету, шрифтам, размерам, фону и прочим элементам создается сам дизайн интерфейса. Пользование им акцентирует внимание на главных функциональных возможностях, ключевых точках управления продуктом или сервисом.

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

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

Тактильные поверхности

Тактильные поверхности - это те самые кусочки «цифровой бумаги», которые в отличие от обычной бумаги обладают сверхспособностями - умеют растягиваться, соединяться и менять свою форму.

Поверхность

Поверхностью называют часть элемента дизайна, отбрасывающую тень, благодаря которой один элемент отличается от другого. Материальный дизайн стремится к максимальной простоте и «чистому» дизайну.

«Чистым» дизайном принято называть возможность передачи свойств объекта посредством градиента или тени, без применения структуры. Все поверхности имеют собственную тень и определенную высоту.

Глубина

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

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

Нижний слой глубины является «дном».

  • Помните о логистике. Различные диалоговые окна, плавающие окна, тулбары имеют определенную высоту. Во избежание столкновений периодически им необходимо двигаться по оси Z.
  • Не насилуйте кнопки. Применять плавающую кнопку нужно только в случае острой необходимости, так как ее использование сразу же привносит в дизайн эффект Material Design. Для подтверждения каких-либо действий и закрытия окон использовать ее не стоит.
  • На карточке должно быть не все. Использовать карточку уместно только в случае, когда объект содержит в себе множество форм и большой объем контента. При других вариантах целесообразнее использовать традиционный текст или списки.
  • Минимализм в диалоговых окнах. Использовать диалоговые окна следует исключительно для подтверждения действий пользователя при возникновении вопросов.

Полиграфический дизайн

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

Изящная типографика

Типографика имеет важное значение в полиграфическом дизайне. Она задает структуру контента и влияет на образование стиля определенного бренда.

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

Контрастная типографика

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

Модульная сетка и направляющие

Если в экранном дизайне применяются базовые сетки, то в полиграфическом дизайне - модульные сетки. Для Material Design используют сетку с шагом 8dp.

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

Геометрическая иконографика

Простейшие иконки давно использовались на базе работы системы Андроид. В Material Design они выглядят еще проще и визуально приятнее.

Для примера, индикаторы и кнопки выделяют насыщенными яркими цветами. Благодаря таким цветам, расставляют акценты на основных элементах управления (плавающих кнопках и т.д.). При необходимости внесения дополнительных цветов в дизайн рекомендуется использовать базовые, неброские оттенки.

Скачать иконки по теме:

Цвет

Цвет в дизайне отвечает за выразительность. Ранее в Андроид цветовая гамма была второстепенной, теперь же ей отводится одна из ключевых ролей. В Материальном дизайне базовая палитра цвета состоит из акцентных и основных оттенков.

Основным цветом окрашивают action bar, а status bar выделяют более насыщенным его тоном. Акцентный цвет применяется для полосок, индикаторов, плавающих кнопок. Он привлекает внимание к ключевым элементам правления.

Акценты расставляются точечно и в небольшом количестве. Для остальной части интерфейса цвета применяют в соответствии с правилом: большой объем текста (список писем почты) оставляют стандартного размера и добавляют цвет для обращения внимания пользователя ПК; малый объем текста (калькулятор, фото) увеличивают в 2-3 раза в размере и добавляют цветные плашки.

В системе Андроид можно раскрашивать интерфейс динамически, то есть выделять основные цвета из общей фотографии.

Красивые фото

В Material Design можно и даже нужно использовать различные фотографии и иллюстрации. Часто в картинках отсутствуют рамки. Сам status bar делается бесцветным, чтобы не отвлекать внимание от изображений. «Цифровые чернила» всегда используют не только для красоты, но обязательно для функциональности дизайна.

  • Рекомендуется брендирование.
  • Нельзя забывать об отступах и свободном пространстве (для базовой сетки 8dp, для отступов — 72 dp).
  • Используйте яркие изображения.

Осмысленная анимация

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

Пример 1. Анимация показывает, что именно эта конкретная карточка после нажатия вышла на передний план, раскрылась, и стало видно больше информации.

Пример 2. При нажатии на дату в календаре всплывает событие, которое плавно отрывается слоем от общего календаря, превращается в отдельный блок и раскрывается в подробном отдельном блоке с описанием этого события.

Анимация помогает сконцентрировать внимание пользователя, сосредоточить его взгляд на действиях интерфейса.

Реакция

Еще одним ключевым моментом анимации в Материальном дизайне считается реакция на определенные действия пользователя ПК. Изменения в интерфейсе Андроид L происходят после касаний пальцев. Эти изменения отображаются волнообразным действием.

Микроанимации

Микроанимации крайне важны. Их используют в качестве ответных действий на все манипуляции пользователя. Это придает интерфейсу детальности и отзывчивости.

Четкость и резкость

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

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

Адаптивный дизайн

Заключительным ключевым аспектом Материального дизайна является концепция адаптивного дизайна. Это означает варианты применения других трех аспектов на различных экранах устройств (телефон, ПК, телевизор и т.д.).

От общего к частному


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

Отступы

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

Направляющие


Отступы задаются благодаря направляющим. Ширина отступов для смартфонов, планшетов, компьютеров и телевизоров будет абсолютно разной. Так, для планшета она составляет 80 dp, а для экрана смартфона - всего 72 dp.

Размеры

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

Блоки

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

Тулбар (Toolbar)

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

  • Не стоит использовать navigation drawer для простых инструментов. Применять навигацию рекомендуется только для многочисленных задач в приложении.
  • Будьте смелее с тулбарами.
  • Размещайте плавающую кнопку в наиболее оптимальном месте. Не делайте привязку строго к нижнему углу.
  • Отрабатывайте элементы интерфейса как под вертикальный, так и под горизонтальный экран устройства.

Material как метафора

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

Материализм в цифровой сфере используют не впервые. Так, Apple недавно использовала в дизайне интерфейсов философию скевоморфизма (имитации восприятия визуальных объектов из окружающего нас материального мира).

Хорошим его примером является приложение «Newsstand». Здесь визуализировались привычные нам объекты: газеты, журналы, которые стоят на полках. Перелистывая эти журналы мы имитируем реальное перелистывание обычной книги из повседневной жизни. Таким образом, в «цифру» продублирована традиционная реальная жизнь.

Развитие цифрового дизайна

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

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

Наглядность как фундаментальная основа

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

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

Основы Material design также включают в себя принципы печатного дизайна. Акценты расставляются не только для эстетики, но и для создания особой структуры, иерархии, создания простой системы управления.

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

Осмысленная динамика

Главное внимание фокусируется на поведении (действиях) пользователя. Его взаимодействие с дизайном происходит на базе накопленного пользовательского опыта, и никак не иначе.

Примеры сайтов в стиле Material Design

Как только в интернете появился релиз концепции, в сети появилось множество представителей Материального дизайна.

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



Видеоролики

Material Design заинтересовал собой огромную аудиторию. Он демонстрирует как правильно создавать UI, чтобы он был абсолютно понятен и ясен пользователю ровно также, как и привычный объект из реального мира, который можно потрогать руками.

Roman Nurik, один из дизайнеров команды Google, рассказал, как изменилось приложение I/O 2014 в процессе разработки, чтобы соответствовать принципам Material Design. Специально для вас мы перевели его видео.

Видео от канала «Google Design».

Вероятно, вы не раз встречали словосочетание «материальный дизайн». Концепция материал дизайн не новая и уже довольно крепко устоявшаяся на рынке веб дизайна, в первую очередь, благодаря своему обращению к пользовательскому опыту. Материальный дизайн впервые был представлен летом 2015 года компанией Google, и с тех пор является неразрывно связанным с этой компанией понятием. Какие его отличительные черты, основные принципы, и так ли он хорош, как о нем поют? Об этом далее в статье.

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

Что такое материальный дизайн?

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

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

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

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

Принципы материального дизайна:

  1. Материальный дизайн это метафора: визуальные сигналы и все графические элементы оформления должны быть основаны и взаимосвязаны с окружающей действительностью, материальным миром.
  2. Графичность, четкость, целенаправленность: базовая теория дизайна (использование типов, сетки, организация пространства, масштаб, пропорции, цвет и изображения) должна определять визуальные эффекты и составлять визуальную основу материал дизайна.
  3. Каждое перемещение или действие имеет значение: перемещение объектов или другие совершаемые действия не должны мешать пользователю, напротив, они должны обеспечивать удобство и согласованность совершаемых действий.

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

Все эти рекомендации основываются на основных свойствах материального дизайна. Самое главное то, что материальный дизайн основан на реальности, в нем объекты находятся в почти трехмерном пространстве. С точки зрения эстетики, материальный дизайн находится где-то между шкалой плоского дизайна (flat design) и скевоморфизмом.

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

Цвета в материальном дизайне имеют много общего с . Палитры матириал довольно смелые и яркие. , так же как в плоском дизайне, простые без засечек.

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

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

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

Шаблоны, структура и дизайн

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

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

Базовые элементы материал дизайна

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

  • Нижний экран (нижние слои дизайна)
  • Кнопки
  • Карты
  • Диалоги
  • Разделители
  • Сетки
  • Списки
  • Полосы прогресса и активности
  • Слайдеры
  • Подзаголовки
  • Переключатели
  • Вкладки
  • Текстовые поля
  • Всплывающие окна

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

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

«Продукт доступен, когда все люди – независимо от способностей – могут использовать его для достижения своих целей. Поистине успешный продукт доступен для максимально широкой аудитории».

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

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

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

10 Ресурсов по материальному дизайну

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

  1. Наборы элементов в стиле материал дизайн для смартфонов и других мобильных устройств (см. ниже).

Часть 1: Галерея материального дизайна для сайтов и приложений – бесплатные материалы

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

Материальный дизайн от UXPin

Материал дизайн от Creative Tim

Бесплатная подборка материал от Designtory

UIDE – бесплатный материал скетч от Mateusz Dembek

Google ресурс скетчей по материальному дизайну

L Bootstrap материальный дизайн в стиле Android от Виталия Чернеги

Скетч ресурс по материальному дизайну от Boilerplate

Материальный дизайн для EL Passion

Froala блоки в стиле материал

Бесплатный Landing 1.0 в материальном стиле

Мобильный материальный дизайн

avsc материал дизайн

UI материал дизайн от Jakub Kośla

Маткриальный дизайн для андроид от Ivan Bjelajac

Материал дизайн от Ultralinx

Мобильный материальный дизайн от Emma Drews

Бесплатная материал подборка от Adrian Goia

Материал дизайн от UI8

Материальный дизайн для Photoshop от Psddd

Android материал дизай PSD от Nine Hertz

Другие подборки материального дизайна, которые могут быть полезными

Station интерактивный материал дизайн от Nelson Sakwa


Виджеты в стиле материал от Elad Izak


Материал скетч от Benjamin Schmidt




Инструмент подбора цветов материал Color Picker


Подводим итоги

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

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

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