4 секрети відповідності зображень кольорам сайту
Чому важливо, щоб зображення відповідали кольорам вашого сайту?
Схоже, це одна з недооцінених тем у веб-дизайні. Ця стаття розкриває 4 приховані секрети, які ви можете використовувати, щоб ваші зображення стали частиною відмінного дизайну сайту. Є так багато сайтів з великим потенціалом, але просто вбиті фотографіями, які не вписуються у нього. Тільки використання зображень з правильними квітами може зробити потворний веб-сайт красивим. Ось реальність: 80% того, що робить сайт, що добре виглядає – це картинки! Візьмемо, наприклад, наступний макет компанії з чищення килимів:
На лендінг все те ж саме, крім фотографій. Але самі сайти знаходяться в різних світових за якістю. Фотографії дійсно займають більшу частину дизайну вашого сайту. Якщо ви вибираєте хорошу колірну схему, ваші фотографії ПОВИННІ бути частиною цієї колірної схеми.
Порада, перш ніж ми почнемо – не забувайте про стікові зображення. Якщо ви не наймаєте професійного фотографа, використовуйте стикові зображення. Будь-яка інформація про те, що ви не повинні використовувати стікові зображення, є повною нісенітницею! Є випадки, коли вам потрібно використовувати свої власні зображення, наприклад, портфоліо, але для більшості інших ситуацій – стокові зображення є підходящим варіантом. Ви можете знайти високоякісні зображення, які відповідають кольорам вашого сайту набагато якісніше, ніж якби ви зробили їх самі.
Стокове фото:
Adobe Stock – платний (але найкращий спосіб знайти);
Shutterstock – платний;
Pexels – безкоштовно;
Pixabay – безкоштовно;
Unsplash – безкоштовно.
1) Підберіть колірну схему зображення відповідно до схеми кольору вашого сайту.
Хороший спосіб надати дизайну чудового вигляду – зробити так, щоб картинки точно відповідали дизайну сайту. Це особливо помітно, коли картинка має такий самий колірний акцент, що і на сайті. Нижче наведено файл Adobe XD, розроблений компанією з чищення килимів. Кольори ліворуч – це кольори, що використовуються на сайті. Я використовував оригінал зображення, щоб краще показати відповідність кольорів.
У цьому прикладі ми бачимо світлу картинку з білими та сріблястими кольорами з акцентами синього та чорного, як фірмові кольори сайту. Вам не обов’язково точно підбирати кожне зображення, але вони мають бути близькими, враховуючи, що зображення займають величезну частину макета та колірної схеми сайту. Це не означає, що у вас не повинно бути зображень, які не входять до вашої колірної схеми, але добре дотримуватися цього правила для більшості ваших зображень, які займають багато місця. Це визначить вашу колірну схему.
2) Редагуйте зображення, щоб показати акценти.
Неможливо змусити всі ваші фото точно відповідати вашій колірній схемі, в цьому випадку корисно додати акценти вашого кольору. Наприклад, якщо у вас є розділ про географію діяльності компанії і ви хочете розмістити там схематичну карту, ви повинні відредагувати фотографію відповідно до вашого дизайну. Ось приклад, який ми використовували в іншому проекті із зеленим корпоративним кольором:
3) Використовуйте накладання кольору.
Це дуже швидкий, але ефективний спосіб зробити фотографію придатною для вашого сайту. Хоча це не змінює колір зображення, воно дає посилання на колір вашого сайту. Накладення дуже корисні при використанні на фонових зображеннях не тільки тому, що вони допомагають відповідати колірній схемі веб-сайту, але й тому, що полегшують читання тексту поверх нього. Є багато способів зробити це, але простий спосіб зробити так, щоб текст на фонових зображеннях читався – затемнити їх.
4) Зробіть фонові зображення схожими за кольором.
Найкраще це зробити, використовуючи зображення, які вже мають схожі колірні профілі, та внести деякі зміни у фотошопі, щоб закріпити їх. Фонові зображення є найбільш помітними на сайті, і вони дійсно визначають колірну схему. Якщо у вас немає погоджених кольорів, ваша колірна схема не буде хаотичною.
Замість виведення. Немає єдиного способу, щоб картинки на сайті виглядали чудово і відповідали вашому дизайну. Але якщо ви будете дотримуватися цих порад, дизайн вашого сайту зможе швидко перейти від хаосу до цілісності. Не будьте частиною більшості, яка додає будь-яку фотографію на сайт без урахування загального дизайну. І пам’ятайте, що хороший фотограф позбавить вас необхідності сидіти ночами за обробкою фото. А добрий дизайнер підбере та обробить фото в єдиному стилі.
