7 советов по дизайну о том, как выбрать, изменить и улучшить изображение слайдера

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

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

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

1. Выберите подходящее фото

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

2. Фотография в высоком разрешении обязательна

Используйте разрешение, рекомендованное создателем темы. За последние 4 года я видел миллион веб-сайтов с фотографиями небольшого разрешения, растянутыми по всему экрану. Вы не пропустите, если выберете изображение шириной 1920 пикселей. Ничто так не обескураживает посетителя, как пиксельная фотография в слайдере. Отличным ресурсом бесплатных фотографий высокого качества является Unsplash. Если у вас есть бюджет, я рекомендую вам покупать фотографии премиум-класса на Shutterstock. Инвестиции окупятся.

3. Затемните или осветлите фотографию

Хороший способ сделать текст на слайдере более заметным — затемнить (или осветлить) фотографию. Это можно сделать в Photoshop или любой другой программе для редактирования фотографий. Для этого урока я буду использовать бесплатное приложение для дизайна под названием Canva. После регистрации в Canva нажмите «Создать дизайн» в верхнем левом углу. Затем в правом верхнем углу нажмите «Использовать нестандартные размеры» и введите размеры, рекомендованные разработчиком вашей темы. Если рекомендуемого разрешения нет, перейдите на демонстрационный сайт темы WordPress и осмотрите фотографию (или измените поставщика темы WordPress вместе с нами).
Нажмите «Дизайн!» и перейдите в раздел «Загрузки» в левом меню. Загрузите изображение слайдера и перетащите его на доску. В верхнем меню нажмите на «Фильтр» и уменьшите «Яркость» и «Контрастность» на 10-20%. Если цвет текста на вашем ползунке белый, вы хотите сделать фотографию немного темнее, чтобы улучшить контраст. Если у вас есть черный текст на вашем слайдере, вы хотите сделать обратное.

Сделайте шаг дальше. Раскрасьте фотографию в фирменные цвета, переместив карусель «Оттенок» (Hue) немного влево или вправо.

4. Полупрозрачная цветная накладка

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

Для этого перейдите в приложение Canva > «Элементы» > «Фигуры» и перетащите первый белый или второй темный прямоугольник на свою доску (где написано «бесплатно»). Измените размер этого прямоугольника от края до края и покрасьте его в черный цвет в верхнем левом углу. Затем в правом верхнем углу установите прозрачность для вашего прямоугольника на ~ 50%, в зависимости от того, какой контраст вам нужен.

5. Добавьте внутреннее сияние к вашей фотографии

Еще один отличный трюк, который сделает вашу фотографию слайдера более интересной, — это добавление черного полупрозрачного внутреннего свечения. Этот метод сделает ваш сайт еще более профессиональным. Это поместит фокус в центр экрана. В приложении Canva этот эффект называется «Виньетка», и вы можете найти его в верхнем меню «Фильтр» > «Дополнительные параметры». Когда вы довольны своей фотографией слайдера, вы можете сохранить ее, нажав кнопку «Загрузить» в правом верхнем углу.

6. Выберите правильный тип файла

Когда вы сохраняете отредактированное изображение слайдера, важно (из-за размера файла) выбрать правильный тип файла. Не волнуйтесь; правило простое. Если ваше изображение слайдера является реальной фотографией, сохраните его в формате .jpg. Если это что-то иное, чем фотография (т. е. узор, значок, рисунок), сохраните его в формате .png. Это важно, потому что вы хотите, чтобы изображения слайдера были как можно более легкими и оптимизированными.

7. Скорость страницы имеет большое значение

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

Дополнительный совет: используйте рекомендуемый размер изображения слайдера.

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

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

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

Слайдер — это первое, что посетитель увидит на вашем сайте. Улучшите пользовательский опыт, внедрив некоторые из вышеперечисленных приемов. Это не займет у вас много времени, но улучшит ваше счастье, вашего клиента и посетителя вашего клиента.

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

Минусы использования слайдеров на вашем сайте

Во-первых, давайте рассмотрим наиболее важные недостатки слайдеров.

Очень немногие плагины-слайдеры действительно адаптированы для мобильных устройств.

Вы когда-нибудь сталкивались с веб-сайтом, на котором используется слайдер, и пытались просмотреть его на своем телефоне? Хотя телефоны становятся больше, простой факт заключается в том, что большинство ползунков изменяются в соответствии с меньшим размером экрана.

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

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

Большинство посетителей не задерживаются на первых двух слайдах.

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

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

Элементы управления слайдером можно легко пропустить

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

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

Слайдеры могут замедлить работу вашего сайта

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

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

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

Также стоит отметить, что из-за влияния на время загрузки сайта слайдеры могут негативно повлиять на SEO.

Человеческий глаз реагирует на движение

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

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

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

Плюсы использования слайдеров на вашем сайте

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

Вы можете продемонстрировать больше контента на меньшем пространстве

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

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

Ползунки упрощают добавление текста к изображениям без использования Photoshop.

Большинство плагинов для слайдеров позволяют загружать изображения и добавлять к ним текст без использования Photoshop или других программ для редактирования изображений. Некоторые слайдеры даже позволяют добавлять кнопки и призывы к действию или ссылки на другие части вашего сайта.

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

Слайдеры заставляют пользователей взаимодействовать с вашим сайтом

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

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

Слайдеры — отличный способ поделиться своей работой

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

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

Вердикт: стоит ли использовать слайдеры?

Разобравшись со всеми плюсами и минусами, пришло время принять решение: стоит ли вам использовать слайдеры на вашем сайте? Ответ на этот вопрос можно свести к двум словам: это зависит.

Когда использование слайдера является хорошим выбором?

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

• Используйте ползунок, если хотите продемонстрировать свою работу или галерею. Как упоминалось ранее, слайдеры хорошо подходят для отображения фотогалерей или элементов портфолио. Если ваш веб-сайт относится к этой категории, то, во что бы то ни стало, использование слайдера — отличный способ продемонстрировать свою работу, не перегружая посетителей.
• Используйте слайдер, чтобы продемонстрировать продукт. Аналогичным образом, если вы запускаете новый продукт или услугу; слайдер может стать отличным способом продемонстрировать продукт в действии или подчеркнуть его преимущества и особенности.
• Используйте ползунок, чтобы поделиться связной историей. Это может быть история вашего бренда и вашей компании, или вы можете рассказать о членах вашей команды и их опыте. Независимо от того, какой историей вы решите поделиться в своем слайдере, убедитесь, что история имеет смысл, иначе ваши посетители будут смотреть на кучу несвязанных слайдов, которые не имеют смысла. В то же время убедитесь, что каждый слайд вызывает ожидание следующего слайда и интригует ваших посетителей, чтобы они задерживались до последнего слайда.

Когда не следует использовать слайдеры?

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

• Если вы используете слайд только потому, что это модно. Если все так делают, это не значит, что вы тоже должны это делать. Мало того, что вы рискуете не добавить ничего ценного на свой сайт с помощью слайдера, вы также рискуете смешаться и выглядеть так же, как ваши конкуренты.
• Если ваш сайт уже работает медленно, воздержитесь от использования слайдеров. Как мы уже говорили выше, слайдеры могут быть довольно ресурсоемкими, поэтому последнее, что вам нужно сделать, это замедлить загрузку вашего сайта. Сначала поработайте над исправлением скорости вашего сайта, а затем подумайте о добавлении ползунка.
• Если вы не знаете, что добавить в слайдер, не добавляйте его. Слайдер работает лучше всего, когда за ним стоит история. Без истории у вас будет беспорядок изображений, которые не добавляют никакой ценности вашему сайту и могут даже запутать ваших посетителей.
• Если вы можете поделиться контентом более простым способом, сделайте это. Нет смысла усложнять дизайн вашего сайта или жертвовать скоростью ради последних тенденций дизайна. Более простое решение обычно означает, что ваш сайт будет легче обновлять и поддерживать, не говоря уже о более быстрой загрузке. Таким образом, отказ от ползунка в пользу более простого решения — гораздо лучший выбор.

Вывод

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