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

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

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

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

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

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

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

Параллакс

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

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

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

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

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

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

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

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

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

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

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

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

Видеофон

Небольшие видеофоны — это еще один популярный способ оживить сайт, сделать его более интересным с визуальной точки зрения. Сейчас видеоконтент — один из наиболее востребованных и эффективных с маркетинговой точки зрения трендов в веб-дизайне и создании сайтов. Взгляните на лендинг с оригинальной анимированной загрузкой и поэкранной прокруткой, сделанный для фильма «Our Brand Is Crisis» с Сандрой Буллок и Билли Бобом Торнтоном:

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

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

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

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

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

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

Следующие развороты с необычным расположением элементов, украшены плавным параллаксом:

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

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

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

Вместо выводов

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

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

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

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

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

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

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