8 трендов веб-дизайна в 2016, которые помогут продвинуть сайт
Тенденции в 2015-2016 таковы, что уже и не видно границ, где заканчивается SEO и начинается контент-маркетинг. Все работает в комплексе и, продвигая сайт, полезно улучшать его со всех сторон. При подаче контента на первый план выходят легкость, лаконичность, удобство и польза. Веб-дизайн как часть юзабилити развивается по тем же законам. Мы собрали 8 главных трендов веб-дизайна в 2016 году и прокомментировали их с точки зрения SEO.
1. Шаблоны для сайтов
Вслед за популярной открытой платформой WordPress «в массы» шагнул сервис готовых UI-шаблонов Wix и его аналоги. Теперь создание простых и удобных сайтов — общедоступное благо. На выходе получается достойный продукт с легким и современным дизайном. У готовых UI-шаблонов есть свои недостатки — ограниченные возможности и неоригинальность (как следствие — гомогенизация сайтов, их однообразие). Но для небольшого промо-сайта или посадочной страницы этого хватит.
Пример:
Наш вердикт: шаблон позволяет сэкономить ресурсы и ускорить запуск простых сайтов с минимальным наполнением. Но продвижение сайтов на шаблонах (в частности, на Wix) практически не возможно. На них нельзя установить сервисы веб-аналитики (либо это платная опция), произвести перелинковку и корректно прописать URL, проставить редирект и отредактировать robots.txt. Есть и другие ограничения по функционалу, которые перекрывают первоначальную выгоду.
2. Материальный дизайн
Впервые появился в мобильных приложениях Google и стал активно применяться в мобильных версиях сайтов. Приоритет здесь — тактильное взаимодействие с элементами меню — нажатие, «смахивание» в сторону (swipe). Главным элементом дизайна становится кнопка, а нефункциональная графика уходит на второй план. Главный прием — придание объема, «материальности» элементам.
Пример:
Наш вердикт: идеально для мобильных версий, которые все больше учитываются поисковиками при формировании выдачи. Воплощение легкости, функциональности и простоты, побуждение к действию — все это увеличивает отклики и конверсию. Не подойдет для сайтов с большим объемом информации и множеством разделов.
3. Плоский дизайн (Flat design)
В отличие от материального дизайна, здесь не используются градиенты, тень и глубина. Зато активно работают цвет и фигурные элементы. Главный плюс — простота и удобство: все предельно лаконично, интуитивно понятно и не отвлекает. Сегодня плоский дизайн активно трансформируется в «полуплоский» (или Flat 2.0), сочетая черты карточного и материального. Что из этого получится — увидим.
Пример:
Наш вердикт: с точки зрения SEO такой дизайн — практически универсальное решение. Помогает хорошо структурировать и не перегружать страницу визуально. Поместите главные разделы с иконками и описаниями в центре, и вы упростите жизнь посетителям, направив их в нужную сторону. Одинаково удобен для десктопных и мобильных версий.
4. Карточный дизайн
Пришел из социальной сети Pinterest, где пользователи выкладывают свои «доски» из фото и коллажей. Оказался наглядным и жизнеспособным, особенно для развлекательных и кулинарных порталов. Позволяет удобно представить контент, в том числе в мобильной версии.
Пример:
Наш вердикт: удобство — это хорошо. Удобство мобильной версии — просто замечательно. С точки зрения SEO такой ход вполне оправдан, хотя и с оглядкой на аудиторию: не подойдет «солидным» ресурсам с консервативной публикой. Ощутимый минус — минимальное количество текста на таких сайтах, что затрудняет продвижение. Обилие изображений увеличивает нагрузку на сервер и отвлекает посетителей, если они пришли не за контентом, а за конкретным товаром или услугой.
5. Сайты с фоновыми фото и видео
Речь о веб-страницах с большими фоновыми изображениями, флеш-анимацией и видео на фоне. Прямое следствие безлимитного скоростного интернета, которое позволяет сразу зацепить внимание пользователя.
Пример:
Наш вердикт: что хорошо для многомиллионных проектов, то необязательно поможет вам. Помните: Яндекс учитывает скорость загрузки страниц при ранжировании сайтов, плюс акцент на графике приводит к минимизации текста (о чем мы уже говорили выше).
6. «Гамбургер» в меню
«Гамбургер» — элемент, состоящий из трех горизонтальных полосок. Обычно используется в мобильных версиях, чтобы сэкономить место: при наведении на элемент всплывают разделы меню. У «гамбургера» есть свои сторонники и противники. Первые считают, что лаконичность — это хорошо, тем более, что пользователи уже привыкли и легко считывают значение элемента. Другие убеждены, что «гамбургер» только мешает: из-за него не видна карта сайта, и нужно совершать дополнительные действия для перехода. Альтернатива видна на примере YouTube (см. фото): в мобильной версии сервиса решили отказаться от «гамбургера» в пользу tab-элементов.
Пример:
Наш вердикт: использовать «гамбургер» стоит с осторожностью: он хорош для мобильных версий, если ваша аудитория — младше 40. Более возрастная может не считать и запутаться. Лучший способ понять, помогает «гамбургер» увеличить глубину просмотра (а с ней и конверсию) или наоборот — отследить поведение посетителей сайта. Пока что данные статистики говорят в пользу других вариантов.
7. Бесконечный скроллинг
Пришел к нам из 2011, но для российского веба актуален до сих пор. Под бесконечным скроллингом понимают размещение контента таким образом, что он подгружается и подгружается в процессе прокрутки вниз. Прием позволяет создать эффект многостраничного сайта и удержать внимание пользователя при условии, что контент действительно захватывает.
Пример: http://cssline.com
Наш вердикт: бесконечный скроллинг удобен в мобильных версиях — не нужно нажимать на кнопки меню. Удобная мобильная версия с точки зрения SEO — это плюс. Также он актуален для сайтов с постоянно обновляемым контентом: информационных и развлекательных порталов, промо-сайтов фестивалей. Но не все пользователи захотят крутить вниз в поисках нужной информации и просто покинут сайт. Страдает и удобство навигации, прямые ссылки на разделы, которые важны для SEO. Еще один минус — повышенная нагрузка на сервер за счет JavaScript. Напомним, что Google не жалует сайты с бесконечной прокруткой.
8. Scrolljacking
Не путать с бесконечным скроллингом. При скроллджекинге контент меняется в процессе прокрутки. Сфера применения пока не широка: в основном метод используется для наглядной презентации продукта в сегментах премиум и люкс.
Пример: http://www.apple.com/mac-pro/
Наш вердикт: выглядит эффектно, но работает далеко не везде. Сильно утяжеляет сайт, что сказывается на скорости загрузки и может не понравиться поисковым роботам. Если контент при этом ограничен одной страницей, продвигать такой сайт крайне сложно.
Налицо две главные тенденции: минимализм и его полная противоположность. И та, и другая имеют право на существование, при условии, что они уместны именно для вашего сайта. Помните: дизайн — это часть юзабилити, а не самоцель. Его задача — помогать конверсии и продвижению сайта.