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

Сайты-лендинги

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

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

Преимущества:

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

Недостатки:

• подходит только небольшим компаниям с ограниченным набором услуг или интернет-магазинам для продвижения конкретных товаров;
• у пользователей мобильных устройств загрузка слишком длинной страницы может занять продолжительное время (особенно при отсутствии 3G);
• хороший лендинг получается только при слаженной работе исполнителя и заказчика.

Кому рекомендуется использовать:

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

Примеры использования:

• http://thefernway.com/
• http://thinkpixellab.com/
• https://webflow.com/
• https://releasetherenegade.de/
• http://www.234mono.com/

Фоновое видео

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

Преимущества:

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

Недостатки:

• если нет готовых материалов, то необходимо создать ролик с нуля – а это серьезные бюджеты;
• вырастают требования к скорости соединения пользователя с сайтом;
• большинство старых браузеров не поддерживают видео в качестве фона (обычно в таких случаях пользователю выводится просто статичная картинка).

Кому рекомендуется использовать:

• на промо-сайтах, рекламирующих конкретный товар или бренд;
• на сайтах, посвященных конкретным кинолентам или видео-контенту в целом;
• на личных портфолио-сайтах;
• на сайтах туристических компаний, на индивидуальных страничках стран.

Примеры использования:

• http://www.webuildrail.com/
• http://www.daarnhouwer.com/
• http://www.laquadra.tv/
• http://www.eagleadventuretours.de/

Параллакс

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

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

Преимущества:

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

Недостатки:

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

Кому рекомендуется использовать:

• промо-сайты и лендинги, посвященные конкретному товару или бренду;
• сайты, продающие что-то «динамичное», например - велосипеды или автомобили;
• в ограниченном объеме параллакс может использоваться практически на любом проекте, что добавит сайту оригинальности.

Примеры использования:

• http://jason-kenny.com/
• http://journey.lifeofpimovie.com/
• http://www.flatvsrealism.com/
• http://www.nintendo.com.au/gamesites/mariokartwii/#home
• http://www.cabletv.com/the-walking-dead

Нестандартная геометрия

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

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

Преимущества:

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

Недостатки:

• затруднена верстка сайта, что приводит к повышению стоимости разработки;

Кому рекомендуется использовать:

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

Примеры использования:

• http://www.wixel.co.uk/
• http://2011annualreport.edprenovaveis.pt/
• http://webey.eu/
• http://www.arnaudbeelen.be/

Минимализм

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

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

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

Преимущества:

• сайт выглядит более стильным и профессиональным по сравнению с традиционным дизайном;
• посетитель всегда сфокусирован на контенте - его внимание не распыляется на окружение;
• сайты привлекают простотой и ощущением легкости;

Недостатки:

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

Кому рекомендуется использовать:

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

Примеры использования:

• http://www.re-create.com/
• http://www.guillaumebouvet.com/
• http://rokkan.com/
• http://www.dc-d.eu/

Карточки

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

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

Веб достаточно быстро перешел на «карточки» - Twitter, Google, Facebook и множество других гигантов используют этот формат. Хотя «плитка» и не является дизайнерским решением сама по себе, она полностью преображает ресурс - и поэтому достойна места в нашем топе.

Преимущества:

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

Недостатки:

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

Кому рекомендуется использовать:

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

Примеры использования:

• https://www.pinterest.com/
• http://www.ahh.com/
• https://dribbble.com/
• http://www.vox.com/cardstacks