Монохромный и чёрно-белый дизайн сайтов

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

Если отталкиваться от минимальных данных, например только от логотипа, — это путь тупиковый. Что вы сделаете с красно-белой эмблемой? Очередной скучный сайт? Всё равно придётся создавать новый концепт. Да и логотип чаще всего тоже нужно разрабатывать вам. Наличие брендбука облегчает задачу. Хотя даже в этом случае не всегда фирменный стиль соответствует цели проекта и придётся вносить свои коррективы и их согласовывать. 

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

С чего начать

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

Что нужно учесть:

• Необходимо отыскать цвет, который подходит по «настроению» проекта. И не только основной, но и дополнительные тона, которые хорошо впишутся. Монохром — это не один оттенок, а некоторые вариации основного цвета, светлые и тёмные, полупрозрачные.  
• Тёмная и светлая тема. Известно, что в мобильных устройствах они есть. И придётся придумать такой вариант, который будет смотреться хорошо в обоих случаях. Сочетание с чёрным и белым может быть разным для определённых цветов и их оттенков.
• Интенсивность цвета. Ассоциативные ряды настолько обширные, что сложно выделить конкретные значения оттенков. Но всегда можно собрать палитру и примерить её на проект — возможно, сделать чуть ярче или использовать более пастельные тона.
• Тон, насыщенность, оттенки. Когда определились с тонами основного цвета — назначьте иерархию. Воспринимайте оттенки как самостоятельные цвета, работайте с ними как обычно. То есть, должен быть свой цвет для акцентов, отдельный для кнопок и меню, своя собственная роль в дизайне. Не заменяйте цвета в этих ролях. Нужен визуальный порядок.
• Дополнительные фишки. Монохромная палитра — это не только цвет. Не забывайте, что разбавить однотонность можно градиентами, текстурами, тонировкой.
• Разброс тонов. Когда мы говорим про оттенки одного цвета, то не имеем ввиду глубокий фиолетовый и кислотно-лиловый. Это слишком большое расстояние на шкале, оно уже не даёт нашему дизайну называться монохромным. Выбирай самые близкие цветовые отклонения, это будет смотреться аккуратно и глаза не будут разбегаться.

Если пройдётесь по всем этим пунктам, то в итоге получите готовую палитру для проекта. Поехали дальше!

Дополнительные элементы дизайна

Что хорошо смотрится в монохроме? Выбирайте конкретно под свой проект. Вот несколько проверенных советов:

• Полужирные шрифты, с жирными элементами и штрихами будут лучше смотреться, чем тонкие. Они не потеряются. Текст будет самостоятельным и выделится, как важная часть сайта.
• Если используете тени, то в монохроме не применяйте стандартные серые. Используйте вместо этого тона рабочей палитры. Можно даже добавить градиентную рамку.
• Иллюстрации. Если есть возможность и проект позволяет, то добавьте рисованные элементы, которые оживят строгость монохрома. Лайфхак: посмотрите сначала на стоках подходящие картинки. Там много интересных решений, которые выполнены в одном цвете. И иногда от них получится оттолкнуться на этапе создания палитры. А ещё такие иллюстрации легко скорректировать и исправить первоначальный цвет на тот, что нужен.

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

«50 оттенков серого»

Ч/б — вечная классика. А оттенков серого, как известно, гораздо больше, чем пятьдесят.

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

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

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

Почти монохромный

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

Добавить красный к серым оттенкам или к синим жёлтый — это красиво и всё ещё не наляписто. Главное, сделать это аккуратно. Тонкая линия, еле заметная тень. Не более 10% от основных оттенков в проекте.

Вы решите проблемы с выделением важных блоков, заголовков, призыва к действию. 

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

Плюсы и минусы монохрома

Начнём с очевидных преимуществ подхода:

1. Интересно работать, новый вызов, нестандартный подход.
2. Всегда в тренде. Монохром не выйдет из моды, это классика, которая не устаревает.
3. Возможность сконцентрировать внимание посетителя на контенте.
4. Оригинальность. С таким цветовым решением легче выделиться среди конкурентов в нише. Если работа для участия в конкурсе — тем более.

Недостатки:

1. Непростая реализация. Если у специалиста недостаточно навыков, то выйдет не стильная страница, а скучная и блеклая. 
2. Небольшая вариативность. Если принять монохромную палитру за основу и применять как фирменные цвета, то можно загнать себя в рамки. Они не позволят делать дополнительные проекты (рекламные баннеры, посты в соцсетях, афиши) яркими без потери узнаваемости.
3. Сложность согласования. Это случается не всегда, но такой момент возможен. Монохромный сайт выглядит необычно, поэтому заказчику может показаться странным. Тут уже нужно изначально исходить из настроения и креативности работодателя. Готов ли он к таким решениям.

Чёрно-белые фото

Отдельно стоит обсудить фотографии на сайте. Если сделать их чёрно-белыми, то можно очень круто решить много задач. Как минимум с обработкой и общим стилем уже не будет никакой разрозненности, все снимки будут идеально подходить друг другу.

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

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

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

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

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

Играйте с оттенками. Чистый ч/б может не вписаться в ваш стиль. Попробуйте добавить некоторые тона — мимолетные, лёгкие, почти незаметные. Редактируйте теплоту. Выделите один цвет на фоне чёрно-белой композиции. 

Делаем стильно, а не скучно

Работа в монохроме — сложное искусство. Необходим не только опыт в веб-дизайне, но и художественный вкус. Важно разбираться в типографике, уметь видеть цвета и тональности. А ещё работать в фоторедакторах, если нужно подправить изображения и иллюстрации. 
Это не талант. Это навык, который можно развить. Если хотите делать трендовые проекты, выделяться среди других дизайнеров и зарабатывать на этом — присоединяйтесь к онлайн-курсу «‎Веб-дизайнер: счастливый билет в Таиланд»‎, который скоро стартует!