Фоны для сайта. Набор 4
| |||||||||||||||||||||||||||||||||||||||||||||||||||
5 причин выбрать белый фон для веб-сайтов
В связи с развитием технологий в веб-разработке многие веб-дизайнеры отказываются от традиционного белого и выбирают цветные фоны для своих веб-сайтов. Хотя это может выглядеть привлекательно и креативно, выбор фона вашего веб-сайта во многом зависит от вашей цели, контекста и содержания.
Белый фон по-прежнему предпочитают (и неоднократно становятся хитом) многие при создании веб-сайтов. Если вы создаете бизнес-сайт, широко распространено мнение, что выбор белого фона будет очень выгодным. Позвольте мне поделиться некоторыми причин, по которым выбор белого фона для вашего делового веб-сайта важен в наши дни.
1. Является фоном по умолчанию для HTML и CSS
Традиционно книги и распечатки обычно имеют белый фон, и есть причины, по которым использование белого фона более эффективно. Поскольку белый цвет является фоном по умолчанию для HTML и CSS, сохранение такого фона облегчает работу веб-разработчиков, чтобы они могли уделять больше времени другим частям веб-сайта. Использование белого фона может быть более эффективным.
2. Легкая читаемость темных шрифтов
Читаемость является приоритетом в веб-дизайне. Это один из факторов, который способствует отличному пользовательскому опыту. Использование белого фона повышает читаемость контента.
Контрастность играет огромную роль в удобочитаемости, а темный шрифт на белом фоне — самый простой способ ее создать. Также светлые шрифты на темном фоне могут быть неудобными для глаз. Большинству людей легче читать темные шрифты на белом фоне. Также лучше смотреть веб-сайты с белым фоном, особенно если вы просматриваете их в течение дня.
Кроме того, целью вашего бизнес-сайта может быть охват более широкого возрастного диапазона. Использование темного шрифта на белом фоне более удобочитаемо как для молодых, так и для пожилых людей и даже для людей с астигматизмом. Несмотря на то, что он обеспечивает хороший контраст, белые шрифты на темном фоне, как правило, размывают текст, затрудняя его чтение (возьмите это у кого-то вроде меня, который с детства был слабовидящим). Астигматизм поражает самых разных людей, независимо от возраста. Чем доступнее веб-сайт, тем больше аудитория, вероятно, останется или повторно посетит его.
3. Изображения выделяются
Изображения выглядят лучше на белом фоне. Есть причина, по которой большинство веб-сайтов электронной коммерции поощряют использование белого фона при публикации продуктов: белый цвет нейтрален и может подчеркнуть цвета ваших фотографий, не вызывая утомления глаз. При покупке продуктов мы понимаем, и часто получаем отказ от ответственности, что цвета могут отличаться в зависимости от экранов устройств.
Белый фон помогает сосредоточиться на содержании. Меньше визуального беспорядка может быть весьма полезным в современном быстро меняющемся обществе. Да, цветной фон может быть креативным, но вы хотите отвлечь внимание вашего посетителя на то, что ваш сайт пытается передать. Я читал, что кто-то сравнивает белый фон с тем, чтобы он был скорее вспомогательным актером, выделяющим ваш контент.
4. Нейтральный и безопасный
Простой, минималистичный и эстетичный дизайн стал классикой и снова становится тенденцией. Белый всегда воспринимается как чистый, вневременной и элегантный, означающий мир и спокойствие.
Нейтральность белого фона помогает брендингу вашего сайта. Поскольку все цвета совпадают с белым, вам не нужно сильно беспокоиться о фоне, создающем зрительное напряжение на фоне вашего бренда.
Белый фон также подойдет, если вы хотите, чтобы ваш бизнес выглядел профессионально и корпоративно. Но это не ограничивается этим. Вы все еще можете быть модным, современным и современным. Помимо игры с цветами, вы можете использовать типографику в качестве своего дизайна, который, опять же, лучше всего работает с белым фоном.
5. Сокращает беспорядок и фокусирует внимание на CTA
Мы говорили о содержании, теперь давайте сделаем CTA (призыв к действию). Я неоднократно говорил, что использование белого цвета в качестве фона способствует сосредоточению внимания на важнейших аспектах. вашего веб-сайта. Это помогает привлечь внимание именно там, где оно должно быть. Ваш призыв к действию является важным аспектом вашего сайта.
Ваша часть CTA или кнопка должны быть яркими и отчетливыми.
Как еще вы могли бы сделать это более очевидным, кроме как использовать заметный цвет на белом фоне? Даже такой простой шаг может принести много изменений, вы должны попробовать.
Заключение
При множестве вариантов дизайна и постоянно меняющихся стилях белый цвет всегда был самым безопасным для любого художника. Его простота, нейтральность и элегантность неподвластны времени и могут гармонировать с тем, что мы на него творчески помещаем.
Это то, что мы можем привнести в веб-дизайн. Сделайте свой бизнес-сайт уникальным не только с точки зрения дизайна, но и с точки зрения функциональности и доступности.
Итак, каковы ваши цели для вашего бизнес-сайта? Это может быть эффективность или читабельность и доступность контента. Возможно, вы захотите увеличить продажи своего продукта; больше взаимодействия с CTA. Теперь вы можете начать рассматривать возможность использования белого фона для своего бизнес-сайта.
Как насчет того, чтобы начать с полностраничного веб-сайта с белым фоном? Вы можете легко запустить его с помощью JS-библиотеки, такой как fullPage.
js. Он прост в использовании и отлично интегрируется с WordPress. Это ваше время, чтобы поднять свой бизнес с мертвой точки!
- 7 Веб-сайт Проектные идеи для студентов
- Отличные идеи веб-сайтов
сообщить об этом объявлении
Как эффективно использовать видео для фона веб-сайта
Видео для фона веб-сайта стало обычным явлением среди веб-дизайнеров во всем мире. За последнее десятилетие использование движущихся изображений на сайтах резко возросло. Согласно Google Trends, интерес к видеофонам для веб-сайтов начал неуклонно расти примерно в 2011 году и резко возрос в 2017 году. Хотя количество поисковых запросов немного снизилось, данные Google также говорят нам о том, что видеофоны для веб-сайтов остаются востребованной тенденцией дизайна и по сей день.
Есть две причины, по которым дизайнеры начали использовать видео для фона веб-сайтов. Во-первых, улучшения в технологиях, на которых работают сайты, значительно упростили создание видеофонов.
Во-вторых, наши глаза эволюционно тянутся к движению, согласно книге
Правила мозга.
Использование движения для привлечения внимания приносит большие дивиденды в маркетинге и рекламе. Например, движущиеся вывески привлекают На 400 % больше просмотров, чем у традиционных вывесок, согласно исследованию Intel.
Вот некоторые другие убедительные статистические данные об использовании видео в маркетинге:
- 85% маркетологов считают видео эффективным способом привлечь внимание в Интернете, согласно Animoto
- 81% маркетологов говорят, что видео увеличило время пребывания на их веб-сайте. Wyzowl
- Согласно тому же отчету, 45,86% людей хотели бы видеть больше видео от брендов
Ниже приведен краткий контрольный список, который поможет вам понять, как создать правильный видеофон для веб-сайтов.
- Будь смелыми, но сбалансирован
- Рассмотрим свой видео -источник
- Установите видео на автозагоп. контрольный список.
Будьте смелыми, но сбалансированными
Чтобы быть эффективным, выбранный вами видеофон веб-сайта должен быть смелым, но не отвлекающим внимание. В противном случае велика вероятность, что конверсия пострадает больше, чем поможет.
Итак, первое, что вам нужно решить, это то, принадлежит ли вообще фоновое видео вашему веб-сайту (и особенно главной странице)? Может ли он привлечь внимание посетителей, передавая настроение/ощущения/тональность/этос бренда быстрее, чем текст и изображения? Если да, рассмотрите возможность использования видео в качестве фона. Если нет, выберите более статичный вариант. микро-анимации.
После того, как вы решили, использовать видеофон или нет, планируйте выделить его, используя много контраста, чтобы заголовок/вступительный текст, наложенный на видео, выглядел четче на фоне видео. Возможно, вам нужно затемнить или осветлить видео, чтобы создать больший контраст с заголовком и вступлением. Вы также захотите рассмотреть макет видео. Например, возможно, основное движение видео должно быть сбоку от основных текстовых элементов, а не позади них.
Итог: Чтобы видео работало, оно не должно отвлекать от основного контента.
Совет: используйте фоновое видео для создания настроения, но не пытайтесь информировать или объяснять продукты или услуги компании. Сохраняйте поясняющие видео для более глубокого изучения продукта или страницы услуг.Нужен конструктор веб-сайтов, позволяющий легко создавать веб-сайты с фоновым видео для клиентов малого бизнеса? Попробуйте Дуда бесплатно!
Источник видео
При поиске источника видео у вас есть несколько вариантов. Вы можете использовать видео, принадлежащее владельцу сайта, если у него есть что-то высокого качества, а это возможно. Многие компании инвестируют в создание видео для своих маркетинговых усилий. Действительно, 85% предприятий сейчас используют видео в качестве маркетингового инструмента. Вызов. Кроме того, согласно данным, почти 46% маркетологов планируют увеличить свои расходы на видео в 2021 году.
Постклик.
Если у вашего клиента нет готового видео, вы можете порекомендовать ему его создать.Подсказка: Если вы собираетесь создавать видеоконтент с нуля, создавайте столько, сколько сможете. Подготовка к съемке стоит дорого и требует много работы. Подобные инвестиции должны быть чем-то большим, чем просто получение видео для фона веб-сайта.
Другой вариант — полагаться на стоковые кадры. Такие услуги, как Shutterstock предлагает доступ к огромному хранилищу стокового видео.Автовоспроизведение и звук
Запланируйте автоматическое повторение видео. Автовоспроизведение — это идеальная настройка для большинства фоновых видео, позволяющая использовать как можно меньший размер видео, при этом повторяя его жизнь. Имея это в виду, выберите фоновое видео, которое будет отлично смотреться в цикле.
Совет: фоновое видео не должно иметь видеоплеер с элементами управления. В отличие от пояснительного видео или видео-отзыва, расположенного глубже на веб-сайте, это фоновое видео должно действительно действовать как фон и не требовать от посетителя веб-сайта каких-либо действий с ним. Видео просто там, задает тон.
Пока вы думаете о правильном видео для автовоспроизведения при повторе, вам нужно решить, имеет ли смысл автоматически включать звук или выключать его. Рассмотрим само видео. Вы не хотите, чтобы это отвлекало, поэтому почти во всех случаях лучше отключить звук. Если звук действительно может добавить что-то на страницу веб-сайта, то позвольте посетителю веб-сайта выбрать звук или отсутствие звука.
Совет: Автозвук на фоновом видео — хороший способ потерять посетителей. Фактически, Chrome версии 66 включает автоматические изменения видео, которые не позволяют Chrome автоматически воспроизводить видео, если звук включен. по умолчанию.Выбирайте встраивание, когда это возможно
Размещение видеофайла на вашем веб-сайте может значительно замедлить работу пользователя, если он не настроен правильно. По возможности лучше встраивать видео, размещенное на сторонней платформе, такой как YouTube или Vimeo.
Подсказка: Конструкторы веб-сайтов, такие как Duda, позволяют легко вставлять видеофоны, которые красиво отображаются на настольный компьютер, планшет и мобильный телефон.
Скорость веб-сайта имеет значение
Большинство успешных сайтов используют 3-7-секундное повторяющееся видео, чтобы видео не замедляло скорость сайта. После того, как вы создадите сайт, вы захотите проверить его скорость и удобство страницы с помощью Инструменты Google для проверки скорости и соответствующие настройки.
Совет. Удаление встроенного звука из файла с отключенным звуком уменьшает размер видео, что способствует увеличению скорости. Вы можете найти больше советов по уменьшению размера файла в этом замечательном сообщение в блоге от KeyCDN.Test Content
Многие веб-дизайнеры и цифровые агентства могут продавать клиентам дополнительные услуги помимо создания веб-сайта. Они могут включать планы обслуживания веб-сайтов — и эти планы также могут включать A/B-тестирование.
Тестирование различного контента и анализ того, как он работает, информирует о стратегии фонового видео на вашем веб-сайте и помогает вам увеличить количество конверсий, потенциальных клиентов и другие важные показатели для владельца сайта.
Вот несколько точек данных, которые вы можете использовать, чтобы убедить клиента веб-дизайна, что он должен инвестировать в A/B-тестирование:- Улучшенный UX-дизайн в результате пользовательского тестирования может увеличить коэффициент конверсии компании на 400% в соответствии с Предприниматель.
- Изменение в рекламе увеличило доход Microsoft Bing на 12 процентов согласно Исследование Harvard Business Review.
Реальные примеры веб-сайтов с видеофоном
Хотя фоновое видео не всегда является разумным решением для каждого веб-сайта. Но когда это работает, это выделяет веб-сайт, увеличивает время пребывания на нем и быстро передает тон и настроение бренда компании.
Давайте рассмотрим несколько примеров сайтов, которые стратегически и эффективно использовали видеофоны веб-сайтов.
The Columbus Building
Здание Columbus Building в Лондоне предлагает 160 000 квадратных футов замечательных видов на реку в центре Лондона. Веб-сайт использует фоновое видео, чтобы быстро передать культуру и настроение здания и района с помощью богатых и интересных кадров.
Forum Insurance
Этот веб-сайт Forum Insurance был создан Hilton Web Design с использованием шаблона REAL ESTATE на Duda.
Это видео работает, потому что оно показывает успокаивающую атмосферу, в которой люди живут своей жизнью без каких-либо хлопот, а это именно то чувство, которое вы хотите, чтобы люди чувствовали при продаже страховки.Wistia
New Paragra Теперь давайте рассмотрим пример, когда видеофон на сайте не работал, и владелец сайта принял стратегическое решение изменить его.
Wistia использовала фоновое видео на своей домашней странице. Когда компания удалила его, они увидели увеличение органического трафика на главную страницу на 53%, увеличение количества регистраций на 7% и улучшение коэффициента выхода на 4%.
Справедливости ради следует отметить, что видео, выбранное Wistia, больше походило на кадры из объясняющих видео (так оно и было), чем видео, созданное для использования в качестве эффективного фонового видео. Кроме того, контраст был плохим, что затрудняло чтение заголовка. Скриншот старого фона видео можно увидеть на главной странице ниже.
Smith LLC
Эта юридическая фирма идеально следует нашему контрольному списку. Фон представляет собой медленно движущееся беззвучное видео, которое играет вспомогательную роль по отношению к основному сообщению на странице. Именно движение привлекает и влияет на то, как работает наш мозг, а не отвлекает.
Контрастность фонового видео Смита высокая. Видео затемнено почти до теней с красными оттенками (и его легче смотреть, чем показано на скриншоте ниже), в то время как заголовок занимает видное место и легко читается. Циклическое видео также относительно короткое и не замедляет скорость сайта.Использование лучших практик
Видеофоны для веб-сайтов могут помочь бизнесу выделиться и увеличить время пребывания на сайте при правильном использовании.
Например, возможно, основное движение видео должно быть сбоку от основных текстовых элементов, а не позади них.
Постклик.
Видео просто там, задает тон.
Тестирование различного контента и анализ того, как он работает, информирует о стратегии фонового видео на вашем веб-сайте и помогает вам увеличить количество конверсий, потенциальных клиентов и другие важные показатели для владельца сайта.
