Как выбрать хорошую обложку для моего сайта?

Вам действительно нужно следовать тренду?

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

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

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

  ---

Убедитесь, что изображение связано с содержанием

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

---

Убедитесь, что изображение говорит то, что вы хотите

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

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

---

Убедитесь, что изображение относительно уникально

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

---

Используйте изображение реальных вещей

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

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

Лица, в частности, привлекают внимание, поэтому убедитесь, что это подходящее лицо, и размещайте их только там, где это действительно важно. Иногда может помочь размещение их в другом контексте, таком как книга, iPad, компьютер и т. д. В других случаях более уместно обрезать лица (подумайте о веб-сайте одежды или манекене). Показ лица бренда/представителя очень эффективен, если все сделано правильно, я очень рекомендую это, если вы можете.

---

Убедитесь, что изображение подходит к вашему макету

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

Убедитесь, что ни одна важная часть изображения не закрыта имеющимся у вас контентом. Используйте визуальные подсказки, чтобы помочь пользователям перейти к контенту, который вы хотите, чтобы они увидели (подробнее об этом в следующем разделе).

---

Убедитесь, что изображение соответствует правилам хорошей фотографии и дизайна.

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

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

---

Убедитесь, что изображение соответствует вашей цветовой схеме.

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

---

Ограничьте дисперсию внутри изображения

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

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

_{Изображение выше затемняет исходное изображение и использует тени по краям для уменьшения шума. Изображение ниже, кажется, использует частично прозрачное темное наложение, чтобы сделать то же самое.}

---

Убедитесь, что размер изображения достаточно велик

Само собой разумеется, что используемое изображение должно быть достаточно большим, чтобы покрыть каждый экран без растягивания. Это означает, что для полноразмерных экранов нам необходимо иметь изображения с минимальным разрешением 1024 x 768 пикселей, но лучше стремиться к ширине не менее 1200 пикселей. Мы также можем сэкономить на загрузке больших изображений для небольших экранов, предоставляя изображения разного размера в зависимости от разрешения, подробнее об этом здесь . Старайтесь оптимизировать время загрузки изображения, насколько это возможно, не уступая при этом качеству изображения.

---

Убедитесь, что у вас есть права на использование изображения

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

---

Убедитесь, что качество фото высокое

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

_{Дополнительные ресурсы:}

• Как выбрать эффективные фотографии и изображения для сайта
• Лучшие полноэкранные веб-сайты