4 секрета соответствия изображений цветам сайта

Почему важно, чтобы изображения соответствовали цветам вашего сайта?

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

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

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

Стоковое фото:
Adobe Stock – платный (но лучший способ найти);
Shutterstock – платный;
Pexels – бесплатно;
Pixabay – бесплатно;
Unsplash – бесплатно. Детальней тут.

1) Подберите цветовую схему изображения в соответствии с цветовой схемой вашего сайта.

Хороший способ придать дизайну великолепный вид – сделать так, чтобы картинки точно соответствовали дизайну сайта. Это особенно заметно, когда картинка имеет такой же цветовой акцент, что и на сайте. На рисунке ниже представлен файл Adobe XD, разработанный компанией по чистке ковров. Цвета слева – это цвета, используемые на сайте. Я использовал оригинал изображения, чтобы лучше показать соответствие цветов.

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

2) Редактируйте изображения, чтобы показать акценты.

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

3) Используйте наложение цвета.

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

4) Сделайте фоновые изображения похожими по цвету.

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

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