Было модно иметь большие фоновые изображения с относительно небольшим количеством текста над ними для заголовков и вступлений к веб-страницам, включая начало постов в блоге. Я мог бы привести бесчисленное множество примеров этого, но я думаю, что вы точно знаете, о чем я говорю.
Что делает эффективную обложку / фоновое фото? Что я должен иметь в виду при поиске изображений или планировании их создания и редактирования для своего сайта?
website-design
images
background
design-principles
Зак Соусье
источник
источник
Ответы:
Вы действительно должны следовать за тенденцией?
Никогда не делай что-нибудь, потому что это тенденция. Делайте вещи, потому что они полезны для пользователя, потому что это то, что лучше для вашей компании и вашего дизайна. Тщательно подумайте о последствиях добавления большого изображения на ваш сайт и взвесьте другие варианты, которые у вас есть. Вам не нужно использовать эту технику, чтобы иметь «современный» сайт .
С учетом вышесказанного, при выборе фонового изображения для вашего сайта нужно помнить много вещей. Поскольку этот ответ очень длинный, вот список вкратце; Я даю более подробную информацию о каждом из них, включая примеры ниже.
Убедитесь, что изображение связано с содержанием
Несвязанная фотография не принесет ничего, кроме вреда. Как и все в вашем дизайне, если он не соответствует цели вашего сайта, то избавьтесь от него. Убедитесь, что это напрямую связано с контентом , а не с чем-то позже. Изображение должно иметь дополнительный контекст, привнесенный некоторым текстом или макетом, чтобы помочь пользователям понять, что это сайт, а не просто статичное изображение.
Убедитесь, что изображение говорит, что вы хотите
Все изображения имеют коннотацию, основанную на содержании изображения и его стиле. Убедитесь, что изображение соответствует ощущениям, которые вы надеетесь передать, а также бренду. Изображение должно передавать дополнительное понимание того, что обеспечивает текст вокруг него. Также убедитесь, что это помогает создать ваш бренд так, как вы хотите, чтобы он был построен.
Само собой разумеется, что изображение должно быть визуально привлекательным. Подробнее о чертах для привлекательности изображения ниже.
Убедитесь, что изображение относительно уникально
Пользовательские изображения лучше, чем стандартные, при условии, что качество, по крайней мере, такое же. Это означает, что вам следует избегать очень известных стоковых изображений, если альтернатива является столь же качественной и подходящей. Однако быть абсолютно уникальным не так важно, как обладать отличным, подходящим образом.
Используйте изображение реальных вещей
Есть что-то в реальном имидже (даже в сильно отредактированной версии), которое очень сильно влияет на нас как людей. Нам нравится видеть реальные вещи. Когда бы ни было возможно, выбирайте реальное изображение по чему-то, сгенерированному компьютером, если оно полностью не соответствует содержанию или стилю, к которому вы стремитесь.
Показ людей имеет еще больший эффект, который может быть как хорошим, так и плохим. Если все сделано правильно, пользователи могут почувствовать, что опыт более реальный и личный. Если сделано плохо, он может сделать это , кажется , им - личное и дешево. Подробнее об этом здесь .
Лица, в частности, привлекают внимание, поэтому убедитесь, что это подходящее лицо, и размещайте их только там, где это действительно важно. Иногда может помочь их размещение в другом контексте, таком как книга, iPad, компьютер и т. Д. В других случаях более уместно вырезать лица (например, на сайте одежды или манекене). Демонстрация лица бренда / представителя очень эффективна, если все сделано правильно, я очень рекомендую, если вы можете.
Убедитесь, что изображение работает с вашим макетом
Ваш пользовательский поток и макет сайта важнее любого изображения, которое вы можете выбрать. Сначала создайте их. Если у этого лучшего макета и потока есть немного открытого пространства наверху, тогда рассмотрите добавление изображения.
Убедитесь, что никакие важные части изображения не покрыты имеющимся у вас содержимым. Используйте визуальные рекомендации, чтобы помочь пользователям получить доступ к контенту, который вы хотите, чтобы они увидели (подробнее об этом в следующем разделе).
Убедитесь, что изображение соответствует хорошим правилам фотографии и дизайна
Изображения должны соответствовать основным правилам фотографии, в том числе правилу третей , с использованием визуальных линий, хорошей фокусировкой на основном контенте, правильной компоновке объекта, хорошим фоном, симметричностью и шаблонами. Подробнее об этом читайте здесь или ищите больше ресурсов в Интернете.
Эти принципы сделают изображение более целенаправленным, помогая привлечь внимание к важным частям изображения и его окружению.
Убедитесь, что изображение соответствует вашей цветовой схеме
Все веб-сайты должны быть едины, включая цветовую гамму. Независимо от того, выбираете ли вы сначала цветовую схему, а затем выберите изображение или выберите изображение, а затем цветовую схему ( подобные инструменты могут помочь с последними), убедитесь, что цвета изображения соответствуют вашей общей цветовой схеме. Иногда вымывание изображения и затем применение цветного фильтра может работать хорошо.
Ограничить дисперсию в изображении
Не заставляйте внешний вид быть занятым. Наличие множества цветов и объектов на изображении затрудняет наложение текста поверх него и подгонку его под макет. Как сказано выше, сначала создайте контент, а затем выберите изображение.
Добавление частично прозрачных наложений, затемнение изображения или вымывание его в черно-белое перед добавлением цветного фильтра может помочь уменьшить ненужный шум. Кроме того, цвета фона могут быть применены позади текста или элемента, чтобы помочь с удобочитаемостью.
Изображение выше затемняет исходное изображение и использует некоторые тени по краям, чтобы уменьшить шум. Изображение ниже, кажется, использует частично прозрачное темное наложение, чтобы сделать то же самое.
Убедитесь, что размер изображения достаточно велик
Само собой разумеется, что используемое изображение должно быть достаточно большим, чтобы охватить каждый экран без растяжения. Это означает, что для полноразмерных экранов нам нужно иметь изображения с минимальным разрешением 1024 x 768 пикселей, но лучше всего стремиться к ширине не менее 1200 пикселей. Мы также можем сохранить загрузку больших изображений для небольших экранов, предоставляя изображения разного размера в зависимости от разрешения, подробнее об этом здесь . Попытайтесь оптимизировать время загрузки изображения, насколько это возможно, не уступая качеству изображения.
Убедитесь, что у вас есть права на использование изображения
Если вы не можете использовать его, не используйте его . Если вы не знаете, какое авторское право на изображение , ищите его, но не используйте его, пока не узнаете! Последнее, что вы хотите сделать, это привлечь к ответственности за нарушение.
Убедитесь, что качество фотографий высокое
Не используйте зернистые или размытые изображения. Не используйте фотографию с сомнительным или не связанным содержанием. Держите это простым, но (главным образом) реальным. Подумайте о хороших и плохих частях каждого изображения, которое вы рассматриваете, и не принимайте что-то посредственное.
Дополнительные ресурсы:
источник