Как использовать изображение в качестве фона веб-сайта: 4 рекомендации | by Justinmind
Ознакомьтесь с нашими советами экспертов по созданию идеальных фонов для веб-сайтов, которые заставят пользователей задержаться на нем
Фон вашего веб-сайта или приложения не просто приятно иметь — это неотъемлемая часть UX-дизайна вашего сайта.
Согласно The Next Web, фон вашего веб-сайта может стать мощным инструментом рассказывания историй и помочь укрепить имидж вашего бренда, а также оказать эмоциональное воздействие на ваших пользователей. И как бы вы ни решили создать фон своего веб-сайта — с неподвижным изображением, иллюстрацией, видео или сплошным цветом — есть над чем подумать.
В сегодняшней статье мы расскажем вам, как создать фон веб-сайта с изображениями, а также покажем, как начать работу с прототипом Justinmind. Чтобы ваш веб-сайт или приложение были доступны и выглядели великолепно, следуйте этим четырем рекомендациям по созданию фона веб-сайта с изображениями.
4 рекомендации по использованию изображений в качестве фона веб-сайта
Прежде чем мы перейдем к тому, что нужно и чего нельзя делать при разработке фона веб-сайта, давайте настроим вас с помощью Justinmind. Начните с загрузки 30-дневной бесплатной пробной версии здесь. После установки инструмента Justinmind должен открыться автоматически.
Хорошо, приступим к прототипированию!
1 — Выберите правильное изображение для фона вашего сайта
Прежде всего, вам нужны изображения высокого качества (300 dpi). По данным Nielsen Norman Group, большинство пользователей решают, хотят ли они оставаться на вашем сайте, в течение первых 10–20 секунд просмотра. Фоновое изображение вашего веб-сайта обычно будет первым элементом пользовательского интерфейса, загружаемым на страницу, следовательно, первым элементом пользовательского интерфейса, который увидят ваши пользователи. Поэтому, если вы хотите, чтобы пользователи видели ценность вашего сайта при использовании фонового изображения, вам необходимо использовать высококачественные визуальные эффекты.
На самом деле, чем больше, тем лучше. Хитрость заключается в том, чтобы использовать максимально возможный файл, не замедляя работу вашего сайта. Разумное отношение к типу файла вашего изображения гарантирует, что оно не только будет выглядеть великолепно, но и не повлияет на производительность вашего сайта или взаимодействие с пользователем.
Изображения с большим количеством деталей следует сохранять в формате JPEG. JPEG может отображать миллионы цветов и совместим с различными платформами, браузерами и графическими редакторами. По данным HubSpot, JPEG — лучший тип файла для обеспечения высокого качества изображений при минимально возможном размере файла — идеально подходит для оптимизации скорости страницы вашего сайта.
Если вам нужно масштабировать изображение до различных размеров, SVG — ваш лучший друг. SVG (масштабируемая векторная графика) позволяет изменять размер изображений без потери качества, что отлично подходит для разработки адаптивного веб-сайта.
Создайте прототип с помощью Justinmind: Justinmind позволяет работать с изображениями с различными типами файлов, включая векторы SVG.
Просто перетащите изображение на холст, чтобы масштабировать изображения SVG без потери качества изображения. Для масштабирования перетащите углы изображения, как в любом другом инструменте дизайна, или измените размер на палитре свойств.
Создавайте потрясающие фоновые изображения для веб-сайтов с помощью своего любимого инструмента для создания прототипов
2 — Разумно используйте цвет пользовательского интерфейса в качестве фона веб-сайта так и образно.
Выбор потрясающего фонового изображения веб-сайта в теории звучит великолепно, но не в том случае, если ваши пользователи не могут прочитать текст, размещенный поверх изображения. Точно так же слепой выбор любого старого изображения повлияет на эмоциональный заряд всего дизайна вашего сайта.
Текст должен быть читаемым и сканируемым, а в сочетании с фоном сайта должен иметь приемлемый коэффициент контрастности.
Чтобы содержимое было читабельным и хорошо видимым, Wix рекомендует использовать резкий цветовой контраст, который выделяет текст и кнопки призыва к действию, а не позволяет им теряться на заднем плане.
Создайте прототип с помощью Justinmind: Палитра цветов Justinmind позволяет изменять цвет любого элемента пользовательского интерфейса, а также настраивать уровни его прозрачности. Для этого просто перейдите в палитру свойств.
В палитре свойств вы также можете изменить прозрачность фонового изображения, чтобы оптимизировать цветовой баланс фона вашего веб-сайта. Кроме того, рассмотрите возможность добавления четкой границы вокруг основного контента, чтобы отделить его от фона и вывести его вперед в визуальной иерархии.
И если вы работаете с изображениями SVG, не забывайте, что вы можете изменить цвет ваших изображений, а также их размер в Justinmind. Опять же, все, что для этого нужно, — это зайти в палитру свойств.
3 — Рассмотрите расположение фонового изображения вашего сайта
При правильном использовании большие фоновые изображения могут помочь передать цель и видение вашего бренда.
Однако полноэкранное фоновое изображение иногда может отвлекать внимание от других элементов пользовательского интерфейса на странице. Очень важно найти баланс между большим впечатляющим изображением, которое привлекает пользователей, и изображением, которое отвлекает их от важного контента.
Начните с рассмотрения различных типов фонового изображения: фон v главные заголовки. Основные изображения прикрепляются к заголовку веб-сайта и относятся к содержимому, которое находится непосредственно под ним. Они помогают донести сообщение о конкретной функции вашего сайта.
Напротив, фоновые изображения не закрепляются на странице и видны пользователю при прокрутке. Они лучше всего подходят для создания общей темы или атмосферы сайта, а не для выделения определенного аспекта сайта.
Что бы вы ни выбрали, фоновое изображение вашего веб-сайта должно служить визуальной подсказкой для ваших пользователей, а не занимать центральное место. Для получения дополнительной информации о различных типах фоновых изображений и о том, как разместить их на своем веб-сайте, ознакомьтесь с этой публикацией в журнале Smashing.
Создайте прототип с помощью Justinmind: с помощью Justinmind вы можете управлять функциональностью фоновых изображений вашего веб-сайта в своем прототипе. С нашей новой функцией прототипирования параллакса вы можете закрепить элементы пользовательского интерфейса на холсте, чтобы они оставались видимыми при прокрутке пользователем.
Кроме того, если вы хотите добавить главное изображение поверх своего веб-прототипа, вы можете поместить его в заголовок. Просто нажмите на элемент пользовательского интерфейса, который вы хотите содержать в качестве основного изображения, и перейдите на палитру свойств.
В разделе «Фон» нажмите «Добавить изображение», выберите изображение, которое будет вашим основным изображением, и нажмите «Открыть». Вернувшись в палитру свойств, выберите «Обложка» из раскрывающегося списка, если вы хотите, чтобы изображение заполнило элемент пользовательского интерфейса, или «Содержать», если вы хотите, чтобы оно содержалось внутри элемента пользовательского интерфейса.
4 — Сделайте адаптивным фоновое изображение вашего веб-сайта
Поскольку пользователи просматривают сайты с множества устройств, ни один веб-дизайнер, имеющий лицензию Adobe XD, не мечтает о разработке веб-сайта, не экспериментируя с различными размерами экрана и разной шириной окна браузера.
Так почему же должно быть по-другому, когда дело доходит до фона вашего веб-сайта? Использование изображения, которое, как вы надеетесь, будет выглядеть одинаково хорошо на маленьком и большом экранах при масштабировании, уже недостаточно хорошо. Пользователи ожидают, что ваш контент будет идеально адаптироваться к их устройствам — в конце концов, на дворе 2018 год.
Чтобы представить свой сайт как можно большему количеству пользователей, вам следует протестировать фон вашего сайта как на мобильных устройствах, так и на настольных компьютерах.
Создайте прототип с помощью Justinmind: отзывчивый дизайн не является чем-то новым для Justinmind.
Наш холст, элементы пользовательского интерфейса и взаимодействия были созданы с учетом различных разрешений экрана, чтобы вы могли создавать контент, который адаптируется к любым устройствам. Недавнее обновление сделало масштабирование контента еще проще — ознакомьтесь с нашими обновлениями адаптивных функций здесь.
Но что действительно интересно, так это то, что мы объявили в нашем последнем выпуске. Теперь вы можете тестировать экраны разного размера в одном и том же прототипе для идеального многоканального взаимодействия с пользователем.
Просто создайте новый экран в палитре «Экраны» и выберите тип устройства, для которого вы хотите создать экран. Затем перетащите фоновые изображения на каждый экран и уменьшите масштаб! Простые.
Мы рекомендуем начать с мобильных устройств, так как это поможет вам оптимизировать контент для устройств меньшего размера, а также фоновое изображение. И, как всегда, начните с копии, потому что контент — это главное.
Как использовать изображение в качестве фона: заключение
Говорят, что картинка стоит тысячи слов.
Мы говорим, что изображение стоит всего вашего сайта!
Потрясающие фотографии и стильная графика могут дополнить ваш сайт, но только при правильном использовании. Веб-дизайнеры, если вы хотите максимально использовать фон своего сайта, пришло время воспользоваться нашим советом.
Загрузите Justinmind прямо сейчас и начните создавать привлекательные, удобные веб-сайты с красивым фоном изображений в кратчайшие сроки.
Рекомендации по использованию фонового изображения для веб-сайта
Фоновое изображение для веб-сайта — это не просто то, что хорошо выглядит. На самом деле это влияет на весь пользовательский опыт. У него есть потенциал стать мощным инструментом рассказывания историй, который может заинтересовать вашу аудиторию и побудить ее остаться. Вот почему многое зависит от того, какое веб-фоновое изображение использовать — будь то простой однотонный блок, фактическое изображение или даже видео. Вот руководство по передовым методам выбора фона веб-сайта, которое поможет вам сделать правильный выбор.
Выбор правильного изображения
Крутые фоны для веб-сайтов предназначены для того, чтобы задавать тон содержанию вашего веб-сайта. Их можно использовать, чтобы подчеркнуть текстовое содержание и усилить сообщение вашего сайта. При этом важно выбрать правильное изображение. Во-первых, вы должны помнить о рекомендуемых размерах фона веб-сайта. Хорошее эмпирическое правило — выбрать максимально возможный размер файла, но придерживаться максимально рекомендуемого размера фона веб-сайта, чтобы не замедлять работу сайта.
Держитесь подальше от загруженных изображений
При выборе фоновых изображений страницы веб-сайта важно выбирать фотографии, которые не слишком загружены. Это особенно важно при добавлении текстового содержимого поверх изображения. Вы хотите выбрать красивое изображение, но оно не должно отвлекать внимание от сообщения текста. Например, пейзажи с достаточным пространством над головой могут стать отличным фоновым изображением в Интернете.
Мы также рекомендуем использовать более приглушенные цвета или настроить контрастность фонового изображения в Интернете, чтобы оно не затмевало текст.
Где взять изображения
Хотя настоятельно рекомендуется инвестировать в профессиональную фотографию для создания фоновых изображений веб-сайта, не у всех есть бюджет на такую услугу. В Интернете есть много мест, где вы можете найти бесплатные веб-фоны. Patternico имеет встроенную библиотеку изображений, которая предлагает коллекцию бесплатных веб-шаблонов, подходящих для большинства веб-сайтов. Сайты с бесплатными изображениями, такие как Unsplash, также являются отличными источниками бесплатных фонов.
Если вы сомневаетесь, используйте абстрактные изображения.
Абстрактные и градиентные фоны обычно используются в современном веб-дизайне, чтобы сделать минималистский макет более эффектным. При использовании против большого количества пробелов он добавляет характер веб-сайту и делает его более привлекательным.
Единственная особенность рефератов заключается в том, что они работают только с определенными типами веб-сайтов. У Gradienta есть коллекция градиентов для вашего сайта.
Другой вариант — использовать блочные цвета для текста вместо реальных изображений. Однако вам нужно будет приложить много усилий для создания привлекательного текстового контента. Но, с другой стороны, это означает, что у вас больше места для передачи вашего сообщения, потому что фон не отвлекает пользователя от того, что пытается сказать ваш текст.
Используйте видеофоны
Современные тенденции дизайна веб-сайтов начинают использовать видео вместо фоновых изображений. Видео, как известно, увеличивает вовлеченность, потому что посетители привлекают его больше, чем неподвижные изображения. Используйте фоновое видео, рассказывающее о вашем бренде или о том, о чем ваш сайт. Это может быть первое, что увидит пользователь, как только попадет на ваш сайт.
Нас легко отвлечь на все, что движется — как та собака, которая игнорирует все в своем мире, чтобы преследовать надоедливую маленькую белку!
«Ладно, вы заставили меня посмотреть ваше дурацкое видео, какое это имеет отношение к дизайну моего веб-сайта?»
Какой замечательный вопрос, и я рад, что вы его задали.