Главное Свежее Вакансии Образование
7 358 11 В избр. Сохранено
Авторизуйтесь
Вход с паролем

Материал-дизайн убивает Интернет?

«Материал-дизайн» - та самая фраза, которая сейчас у многих дизайнеров на устах. Концепция, разработанная Google для Android-устройств, одарена аккуратным и чистым шармом при высоком уровне юзабилити.

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

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

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

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

b_567abafee3c44.jpg

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

Material Design Lite

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

b_567abb001999a.jpg

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

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

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

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

b_567abb01d63c9.jpg

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

b_567abb02ad1f1.jpg

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

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

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

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

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

b_567abb035502d.jpg

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

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

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

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

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

Выводы

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

Оригинал: http://wbest.ru/blog_21_12

Перевод: https://goo.gl/cxMt8n

+7
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Tucanus
3D-печать иначе
Григорий 10016
Несколько лет назад Flat "убивал Интернет", теперь Material, завтра еще кто-нибудь. Стили меняются, заголовки и их желтизна - нет.
Ответить
Webest
Разработка и продвижение сайтов. Комплексные маркетинговые исследования.
Чистяков Дмитрий
Григорий, в статье речь как раз идет об обратном!
Ответить
Tucanus
3D-печать иначе
Григорий 10016
Дмитрий, я понял!
Ответить
ubercrm
уберизация и локальные справочники
Саша Noxon
Ну для меня материал дизайн это концепция слоев, что есть нижний слой, второй слой, третий. например верхняя панель должна быть поверх основного контента, а вот на спарке она на одном уровне. или например вот сейчас смотрю на виджет последних комментариев перед кнопкой "Показать следующие" есть тень тоесть она ниже уровнем, но при этом весь блок не имеет тени по отношению к заднему бэкраунду, что говорит о том, что дизайнеры спарка явно не заморачивались материал дизайном)) С другой стороны если материал это дизайн от гугла, то что тогда дизайн от эпла? Что бы то ни было от эпла явно круче!
Ответить
Nick Udintsev
Принципы дизайна Apple называются Human Interface.
Ответить
Вадим Лега
Юзерам нужна юзабилити, а не извращенные фантазии дизайнеров. Работают те сайты, где пользователь знает, куда ему идти, за что тянуть, на что жать, и как должен выглядеть искомый им контент, а не играть в квест "угадай, как этой ?%:№%:ой управлять?"
Ответить
Артём Александрович
мне не нравится материал хотя бы из-з атого, что соблюдая подобные гайды трудно разместить логично большое количество контента и грамотно скомпоновать элементы
Ответить
Visait Nunaev
Как по мне, так «создать визуальный язык, который синтезирует классические принципы хорошего дизайна, включающего инновации, а также достижения науки и технологии» - это не "Create a visual language that synthesizes classic principles of good design with the innovation and possibility of technology and science". Material дизайн не про типовые цвета, карточки и кнопочки из UI Kit, не про Flat легким косметическим изменение, а про слои, про объекты, про их "вес", про их положении в "трехмерном" пространстве и взаимодействии друг с другом.
Ответить
Gordon Shamway
Мое мнение. То, что попадает под это определение, в принципе, неплохо. Но раздражает потребительское поклонение. Мне очень смешно, что для очевидно простого и аккуратного эпизодического, совершенно не нового оформления придумали целый термин и возвели в культ. Мне также было смешно, когда из очевидно простого и аккуратного плоского сделали стиль "флэт" с набором фанатичных признаков доведя его до детских карикатур с идиотскими цветами. Материал дизайн - это когда ты берешь гвоздь и молоток и забиваешь первое вторым. И ты этот просто делаешь, а оказывается это целый стиль такой. и оказывается некоторые забивали гвозди кулаками и ботинками, а некоторые просто бились лбом о мокрый пол без гвоздей. Термин "материал дизайн" я придумал для себя году в 2008 или 2009, тогда стали популярны всякие сайты с реалистичными текстурами. И вот гугл такой моим названием обозвал свое капитанство. А еще в детстве, в эпоху 8 битного Спектрума я, как теперь оказывается, был основоположником плоского стиля и длинных жестких теней.
Ответить
Лиза N.
Отличный комментарий и стёб над тем большинством лентяев, которое не хочет думать, а просто следует моде. Все эти теории чистый популистский маркетинг, потому что «Материал-дизайн» можно продать быстрее и дороже, чем «мы подумали над оптимальным расположением и видом элементов».
Ответить
Vladimir Stanovkin
Я считаю, что material дизайн очень хорошая вещь для мобильного дизайна, но вот на десктопе он и не функционален, и эстетически не очень...Но у разработчиков, видимо другое мнение, интернет сейчас заштампован(их очень много) сайтами с типовым дизайном от Google.
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

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