Используем материальный дизайн с умом! 10 «невредных» советов

Posted on by riasevastopol

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

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

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

В собственной сути материальный дизайн сфокусирован на привнесении в цифровой опыт толики физических (в частности — тактильных) сотрудничеств.Используем материальный дизайн с умом! 10 «невредных» советов Главными понятиями этого языка являются «адаптивный дизайн» (responsive design), «цифровая бумага» (digital paper) и «цифровые чернила» (digital ink), естественные анимации и переходы. Все, что происходит в цифровом интерфейсе, в соответствии с концепции материального дизайна, должно быть интуитивно-понятным и естественным для пользователя.

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

Материальный дизайн: второй, но не лучший

Возможно ли быть неповторимым и «материальным» в один момент?

Концепт материального дизайна красив и несложен. Мысль, в соответствии с которой элементы интерфейса должны вести себя как объекты материального мира, разрешила всем нам по-новому посмотреть на сущность цифрового сотрудничества и привнесла больше смысла в Интернет вещей (IoT — internet of things). Но, потому, что язык был создан Гугл, он выглядит и ощущается как что-то родственное Гугл.

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

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

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

Все, что вам необходимо знать о Material Design

Последние трансформации в материальном дизайне

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

Основная страница «Inbox by Gmail» Гугл.

На сайте Google «Inbox by Gmail» (почтовый сервис от Google) вы имеете возможность лицезреть тот самый материальный дизайн. Плоские кнопки, шрифты и графика — все это черты фирменного стиля Гугл. Если вы перейдете на сам сайт, то сможете разглядеть еще и анимацию, выполненную в стиле материального дизайна.

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

Еще один пример — сайт компании Nimbus 9, основная страница которого кроме этого направляться заветам материального дизайна. Стрелка, показывающая вниз, та же самая, что мы видели на сайте «Inbox by Gmail». Эти два продукта отличаются, но подход к проектированию похожий.

Основная страница сайта компании Nimbus 9.

Материальный дизайн – смертельный удар по Apple?

Как сохранить уникальность бренда в рамках материального дизайна

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

1. Действуйте избирательно

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

2. Поменяйте шрифты и цвета

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

3. Не жертвуйте функциональностью в угоду форме

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

4. Доверяйте собственному опыту

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

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

5. Доберитесь до самого сердца материального дизайна

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

6. Посетите сайты соперников

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

7. Отыщите настоящую обстоятельство

Применяйте элементы материального дизайна лишь тогда, в то время, когда в этом имеется суть. Вправду ли стоит додавать элементам глубины или применять FAB (floating action button — плавающая кнопка действий)? В случае если дополнение не разрешит улучшить сотрудничество пользователя с интерфейсом, перейдите на статический либо плоский элемент, отвечающие потребностям пользователя.

8. Инвестируйтев собственное обучение

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

9. Прислушивайтесь к отзывам визитёров

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

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

10. Применяйте материальный дизайн, лишь в то время, когда это имеет суть

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

Sketch с материальным дизайном

Заключение

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

Material Design — философия современного дизайна. Желаете получить от нее максимум? Мыслите шире и не упускайте из виду основное — качественный UX.

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

Высоких вам конверсий!

По данным usabilitygeek.comimage source lirent.net

Случайные статьи:

uWebPodcast #38 — 12 принципов материального дизайна


Подборка похожих статей:

riasevastopol

More Posts