Ищете примеры прокрутки? 🧐

Если вы работаете с цифровым контентом, возможно, вы слышали о «прокрутке». Однако эта привлекательная дизайнерская практика относительно нова. Итак, вам может быть интересно, как это работает и какие типы сайтов могут реализовать эту технику.

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

«Скроллителлинг» — это цифровое повествовательное устройство, которое рассказывает историю вертикально, требуя от пользователей прокрутки. Эта тенденция веб-дизайна начала набирать обороты в последние несколько лет:

GIF сайта Pixie Think.

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

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

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

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

Он также часто используется с интерактивной инфографикой и визуализацией данных. Это делает прокрутку идеальной для представления результатов сложного исследования в доступной и увлекательной форме:

Яркий пример из New York Times.

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

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

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

Четыре примера прокрутки

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

  1. Публикации
  2. Брендинг
  3. Некоммерческие организации
  4. Креатив/искусство

1. Публикации

Как мы упоминали ранее, прокрутка идеально подходит для длинных повествований. Поэтому он становится все более распространенным в объяснительной журналистике и художественных публикациях.

Например, известный музыкальный журнал Pitchfork часто использует впечатляющую графику и анимацию в своих обложках:

Подробная статья о Daft Punk для Pitchfork.

Цифровая версия вышеупомянутой истории о Daft Punk сразу привлекает внимание своей гифкой. Затем вы можете увидеть изображения художников, разбросанных повсюду. Кроме того, он использует две простые колонки для создания потрясающего дизайна.

Цитаты также отображаются на видном месте в разных точках истории, выделяя самые интересные мысли художника. Этот формат распространен в журнальных прокрутках, потому что эти цитаты делают более длинные истории более удобными для просмотра и позволяют читателям быстрее добраться до сообщения «вынос».

2. Брендинг

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

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

Например, бизнес по продаже элитного жилья. Белароза Шаледовольно эффективно использует прокрутку:

Пример прокрутки BelArosa.

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

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

3. Некоммерческие организации

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

Более того, он отлично подходит для нескольких общих документов, связанных с некоммерческими организациями, таких как графики и годовые отчеты. Например, Общество юридической помощи Нью-Йорка использовало прокрутку для своего годового отчета за 2021 год. [1]:

Годовой отчет Нью-Йоркского общества юридической помощи.

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

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

4. Креатив/искусство

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

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

Сайт Мирроуз является единственным в своем роде примером этого:

Художественный сайт Mirrows NFT.

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

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

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

Какие темы WordPress вы можете использовать для прокрутки?

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

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

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

Neve — отличный вариант freemium, если вы хотите попробовать прокрутку:

Тема Neve может помочь вам реализовать эти примеры прокрутки.

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

Neve легко интегрируется с плагинами параллакса, такими как Advanced WordPress Backgrounds. Кроме того, его версия Pro позволяет создавать липкие заголовки, которые часто бывают полезны для прокрутки.

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

Попробуйте прокрутку сегодня 🚀

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

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

У вас есть вопросы о прокрутке или этих примерах прокрутки? Дайте нам знать в комментариях ниже!