Лого www.SiteHere.ru

Лучшие Landing Page — подборка лучших интерактивных Landing Page

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

О том с чего начать при изучении создания сайтов, а в частности лендингов, я рассказал в небольшом мини-курсе: "Лендинг за 60 минут".

Итак, вот подборка из 9 лендингов где стоит черпать вдохновение:

Подборка — лучшие интерактивные Landing Page

1 Fixed Group

Fixed Group

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

2 Fubiz

Fubiz

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

3 Vimeo

Vimeo

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

4 Black Negative

Black Negative

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

5 Super Top Secret

Super Top Secret

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

6 WE AIN’T PLASTIC

WE AIN'T PLASTIC

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

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

7 ANTON & IRENE

ANTON and IRENE

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

8 BLITZ

BLITZ

Что привлекло меня данном сайте, так это эффекты при наведении. Хоть сайт и создан в современном стиле минимализма, но здесь очень красиво сочетаются 3D объекты: раскрывающиеся открытки, движение объектов на открытке. Также обратите внимание на смену блоков при прокрутке.

9 The Boat

The Boat

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

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

Вывод

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

Успехов!

С Уважением, Юрий Немец

Лучшие Landing Page — подборка лучших интерактивных Landing Page 4.92/5 (98.46%) 13 голос(ов)

Понравилась статья - расскажи друзьям! :)

18 комментариев к записи
  • Галина Нагорная

    Я просто зависла на этих сайтах! 
    Совсем не такие, как привыкла видеть!
    Спасибо! Очень понравилась подборка!

     
  • Валентина

    Юрий я в восторге от новшества и вашей полезной информации.  laugh

     
    • Юрий

      Спасибо, Валентина! 🙂

       
  • Евгений

    Как я думаю можно было добавить ещё сайт Apple.У них действительно есть хорошие страницы.
    А так ваши подборки ВЕЛИКОЛЕПНЫ.

     
    • Юрий

      Спасибо, Евгений!

      Я подбирал страницы, где есть достаточно много интерактивных элементов, а у Apple страницы выполнены в достаточно сдержанном стиле. 🙂

       
  • Игорь

    Интересная подборка страниц с интерактивными элементами. Смотрится необычно. Спасибо!

     
  • Михаил

    Юрий, здравствуйте!

    А на чём делаются такие сайты типа the boat? Предположим есть вся графика. В каком редакторе собирать сцены? Не ручками же в блокноте писать.

    Не встречали мануалы где подучиться по этому вопросу?

     
    • Юрий Немец

      Михаил, для этого есть специальные библиотеки, например ScrollMagic.

       
      • Михаил

        Спасибо! А нигде не встречали уроки, можно на английском, где за ручку проводят по процессу создания подобных сайтов?

         
      • Наталья Яшина

        Юрий, подборка СУПЕР! А возможно ли вас попросить сделать подбор сервисов типа  ScrollMagic?

         
        • Юрий Немец

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

           
  • Вера

    Юрий спасибо за все подборки, особенно по дизайну. Посмотрела эти сайты, да классные, стильные, необычные. НО!!!! Сейчас идет тенденция делать лендинг, особливо начало, на темном фоне.Да понятно, так проще сверху писать белым текстом, тока ничо не видно, пялю глазки, чтобы разглядеть-а что там под чернотой. И все сайты идут как под копирку, картинку затемняют и пишут на ней. Я женщина, поэтому смотрю на это по другому. Есть такое модное черное маленькое платье типа от Шанель и его вроде должна иметь каждая женщина. Но представьте тусовку, на которую пришли все женщины в таких платьях, черных. Получается мрак и никто не оценить этот стиль, так как он потонет в общей куче. Магазины предлагают очень много таких платьев, просто вал одних черных, других мало.Сложно наверно дизайнерам подобрать другой цвет. Так вот я против таких стилей, не хочу черный сайт, как бы якобы стильно он не смотрелся. Эти стили в основном придумывают мужчины, их в  вэб дизайне 99%, вот мрак и гонят. Сделайте пожалуйста подборку из ярких цветных стилей в лэндинге, буду благодарна. А вот эппл точно красиво, хучь и мало крутилок-вертелок.

     
  • Вера

    вот красиво, синенький сайт http://riiotlabs.com/    не знаю чей, так как все по англицки.

     
  • Алена

    Юрий, подборка просто супер. Всегда черпаю идеи в Ваших материалах

     
    • Юрий Немец

      Спасибо, Алена! Рад что нашли много полезного 🙂 .

       
  • Grigoriy

    Читаю и удивляюсь, неужели задача "крутого лендинга" — чем по-больше эффектов?

    Эффекты, конечно, хорошо. Но!

    Всегда считал, что Главная задача таких сайтов — это конверсия.

    То есть, получение клиентов или подписчиков от вашего

    Уникального торгового предложения — что, где и как вы преджлагаете.

    Структура самого сайта.

     
    • Артём Есеноманов

      Здравствуйте Grigoriy,

      Главная задача Landing Page конверсия — это Вы правильно сказали,
      НО статья не про подборку самых конверсионных Landing Page…
      А про подборку лучших интерактивных Landing Page на взгляд автора.

       
      • Алексей

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

         

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *