Подготовка к созданию сайта

Семь главных веб-технологий для современного лендинга

4_via_9

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

Минимализируй это!

Про всеобщее увлечение минималистичным дизайном мы подробно писали в вышеупомянутой недавней статье. Поэтому говорить о стилистической ценности подобного подхода к оформлению мы не будем, остановимся лишь на функциональных преимуществах минимализма. А их предостаточно! Исключение всех избыточных элементов радикально упрощает процесс взаимодействия посетителя с сайтом и уменьшает количество шагов в сценариях его поведения, что улучшает доступность контента, а значит – повышает Ваши продажи. Простые дизайнерские схемы также помогают сфокусировать интерес зрителя/читателя на содержании (= на Вашем продукте). Напомним, что ключевых составляющих удачного минималистического интерфейса всего три:

  • Плитки.
  • Яркие цвета.
  • Плоский web-дизайн без излишнего 3D.

minimal-webdesign-inspiration4

Несмотря на кажущуюся простоту, выглядят решения в таком стиле очень привлекательно

Фон как искусство

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

Вы и презентация

Этот пункт часто сочетается с предыдущим. Если слайды выполнены качественно, со вкусом и содержат интересную информацию, люди с удовольствием скроллят и смотрят всю страницу до конца. Располагаться они могут как горизонтально, так и вертикально. Для landing page последний вариант особенно заманчив, поскольку дает возможность упорядочить все необходимые сведения и кнопки в рамках нескольких экранов, не перегружая потенциального клиента большим объемом хаотично изложенных данных. К тому же, с помощью слайд-шоу можно рассказать целую историю о товаре (этот прием так и называется – storytelling).

03cups

Занимательный пример стори-теллинга: здесь крючок удочки – указатель, подсказывающий, что необходимо промотать ниже, чтобы узнать больше

Sticky-nav

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

Игры с пространством

Если двух измерений Вам уже недостаточно, можно применить parallax-эффект. Идея такова: слои макета (скажем, текст и несколько фонов) при скроллинге двигаются с различной скоростью, что создает эффект глубины и перспективы. Это одна из самых оригинальных техник привлечения внимания, но знайте меру – от эффектности до нечитабельности один шаг!

giphy

Параллакс

Адаптация

Разнообразие разрешений дисплеев, на которых просматривается типичный одностраничник, ставит разработчика перед нелегкой задачей: ведь нужно обеспечить адекватное его отображение на любом устройстве. Опций всего две. Или мы создаем дюжину версий сайта для разных гаджетов (а в итоге кто-то все равно откроет страничку через такой, который мы не предусмотрели), или прибегаем к адаптивной верстке. «Отзывчивый» дизайн позволяет адаптировать один-единственный макет под любые экраны, и отображаться он будет правильно во всех случаях.

Новый стандарт HTML

С каждой очередной версией этот язык предоставляет веб-разработчикам все больше возможностей для создания уникальных сайтов. Актуальная (пятая) позволяет размещать аудио и видео без сторонних плееров, гибко настраивать расположение и начертание надписей, задавать типы полей в веб-формах и так далее. А в сочетании с CSS3 можно получить потрясающие результаты: тени, полупрозрачные элементы, градиенты, CSS-трансформации, — и все это без обращения к графическим редакторам и без JavaScript. С повсеместным переходом на HTML5 отпала и нужда в Flash-технологиях. Флэш вообще перестал быть лучшим другом видео-роликов и анимации. Те же Android-устройства не поддерживают flash «из коробки» и даже после установки плагина с ним «дружат» далеко не все мобильные интернет-браузеры.

Современные технологические средства вполне достаточны для того, чтобы разработать действительно эффективный и стильно выглядящий лендинг. Не забывайте только, что все они будут бесполезны в руках непрофессионала!

comments powered by HyperComments
Похожие записи
4_via_7
Как грамотно продать свои преимущества?
4_via_4
Лучше один раз увидеть: создаем прототип будущего лендинга