Пара трендовых вещей в дизайне и разработке сайтов

Персональный блог Владислава Рудницкого: https://www.rudnytskyi.com/ru/blog-2/

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

Но согласитесь, такой сайт будет приносить продажи ровно в двух случаях:

  1. Если посетителю очень нужен этот продукт или услуга
  2. Если продукт насколько редкий и специфичный, что альтернатив с более качественной «упаковкой» просто нет

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

Параллакс

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

Параллакс на Javascript / jQuery выглядит эффектно, однако может ухудшать производительность сайта. Имитация параллакса в CSS3 работает быстрее, но имеет свои собственные сложности.

Пример параллакс-эффекта — лендинг терморегуляторов Senz:

Здесь используется довольно оригинальный первый разворот и интересная анимация руки Обратите внимание на то, как анимированы изображения продукта. Смотрится интересно, не так ли? Или как при скроллинге «плывет» верхнее изображение термостата:

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

А вот и длинный лендинг с параллакс-прокруткой для датских судовладельцев Navigating Responsibly:

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

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

Читайте далее в моем личном блоге: https://www.rudnytskyi.com/ru/sed-ut-perspiciatis-0/