Material дизайн убивает Интернет?

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

Обзор материал-дизайна

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

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

Материал-дизайн ушёл далеко в массы, оторвавшись от своего первоначального предназначения – служить визитной карточкой Android-устройств. Несмотря на то, что концепция является детищем Google, дизайнеры активно используют её при создании веб-сайтов на различных платформах для всех типов устройств. Конечной целью материал-дизайна является «создать визуальный язык, который синтезирует классические принципы хорошего дизайна, включающего инновации, а также достижения науки и технологии». Единый «визуальный язык» наводит мысли на вопрос: материал-дизайн убивает Интернет?

Material Design Lite

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

Шаблоны “Framework agnostic” позволяют создавать что-то быстро и в соответствии со спецификациями. Они предназначены для блогов, контента больших и тяжёлых сайтов, панели управления, визуальных проектов или же отдельных страниц сайтов. Поле дизайна было полито и удобрено Google как никогда ранее.

Следуйте правилам в рамках тесного дизайнерского шаблона

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

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

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

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

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

Общие элементы пользовательского интерфейса

Вот быстрый ответ на поставленный выше вопрос: всё кроется в деталях.

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

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

Но подождите… Вы же не должны следовать этой тенденции

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

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

1. Выйдите за пределы обозначенной цветовой палитры. Вместо ярких, супер-насыщенных цветов поиграйте лучше с пастелями и тёмными оттенками;
2. Проектируйте иконки и пользовательский интерфейс в соответствии с базовыми принципами дизайна. Пускай иконки содержат в себе элементы, говорящие об их назначении. Не используйте готовые наборы.
3. Не следуйте материал-дизайну на 100%. Используйте один из его аспектов ваших дизайнерских концептах. Правила, касающиеся анимации, исключительно приятны, следуйте принципам о том, как должны двигаться элементы в рамках всего веб-сайта. Остальные части проектируйте так, словно вы не слышали о материал-дизайне. Ещё одной интересной идеей, достойной следования ей, является использование карточек, но не ограничивайте себя, пытаясь рисовать их в совершенном материальном пространстве.
4. Используйте лучшие образцы гайдов по материал-дизайну для того, чтобы получить более качественное представление о вариантах работы с деталями вашего макета. Раздел документации об иконках является хорошим примером использования сетки для их создания. Можете применить данную технику к вашей общей концепции эстетики.
5. Расширьте типографическую палитру. Множество одинаково выглядящих элементов – это одна из тех вещей, что убивает дизайн. Пусть шрифты соответствуют вашей личной концепции дизайна. Не используйте какие-то из них только из-за их принадлежности к стоковому набору материал-дизайна. Если только выбранные шрифты не являются частью бренда – тогда, конечно, нужно брать их.
6. Разрабатывайте так же, как и при работе с любым другим дизайнерским направлением. В конце концов, материал-дизайн не является готовым дизайнерским решением, которого необходимо жестко придерживаться. Это просто направление. Не будьте шаблонны в своей работе. Комбинируйте любые элементы так, как вам нравится, без ограничений. Некоторые подходы вам подойдут, другие – нет. Экспериментируйте.

Выводы

Итак, вернёмся ко главному вопросу: материал-дизайн убивает Интернет? Ответим просто – нет. Чрезмерно старательное следование его постулатам приводит к появлению однотипных конструкций. Реальной проблемой является стремление проектировать по тренду ради самого его соблюдения, а не следования интересам проекта - поискам лучших инструментов, идей и подходов. Так что идеи и принципы материал-дизайна можно смело использовать, ничего плохого в этом нет. Просто убедитесь, что вы правильно это делаете.