вебинар  «реальные кейсы: как искать и выполнять «Как найти первые заказы  на фрилансе»  3 декабря  в 19:00 по мск!

Почему всегда нужно начинать с дизайна в серых оттенках?

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

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

1. Доступность

Главная задача UX/UI-дизайнера — предоставить пользователям наилучший опыт взаимодействия. А это значит, что интерфейс должен быть удобным и инклюзивным.

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

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

2. В центре внимания лейаут и структура

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

Лейаут имеет в UX/UI-дизайне решающее значение. Он должен быть логичным и продуманным. Как только все будет готово, можно добавлять цвет.

3. Отправная точка для командного взаимодействия

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

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

4. Быстрые итерации

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

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

5. Проще подбирать цвета

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

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

6. Устраняет визуальный беспорядок

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

7. Цвет — не самый важный аспект

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

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

8. Больше конструктивной критики

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

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

9. Экономия времени и денег

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

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

10. Цвета могут меняться 

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

Заключение

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

Источник
и
:
arrow