8 трендів веб-дизайну в 2016, які допоможуть просунути сайт

  1. 1. Шаблони для сайтів
  2. 2. Матеріальний дизайн
  3. 3. Плоский дизайн (Flat design)
  4. 4. Критичний дизайн
  5. 5. Сайти з фоновими фото і відео
  6. 6. «Гамбургер» в меню
  7. 7. Нескінченний скролінг
  8. 8. Scrolljacking

Тенденції в 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. Сайти з фоновими фото і відео

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

приклад:

https://www.airbnb.ru

Наш вердикт: що добре для багатомільйонних проектів, то необов'язково допоможе вам. Пам'ятайте: Яндекс враховує швидкість завантаження сторінок при ранжируванні сайтів, плюс акцент на графіку призводить до мінімізації тексту (про що ми вже говорили вище).

6. «Гамбургер» в меню

«Гамбургер» - елемент, що складається з трьох горизонтальних смужок. Зазвичай використовується в мобільних версіях, щоб заощадити місце: при наведенні на елемент спливають розділи меню. У «гамбургера» є свої прихильники і противники. Перші вважають, що лаконічність - це добре, тим більше, що користувачі вже звикли і легко зчитують значення елемента. Інші переконані, що «гамбургер» тільки заважає: через нього не видно карта сайту, і потрібно здійснювати додаткові дії для переходу. Альтернатива видно на прикладі YouTube (див. Фото): в мобільній версії сервісу вирішили відмовитися від «гамбургера» на користь tab-елементів.

приклад:

Мобільна версія YouTube: до і після відмови від «гамбургера»

Наш вердикт: використовувати «гамбургер» варто з обережністю: він хороший для мобільних версій, якщо ваша аудиторія - молодше 40. Більш вікова може не брати до уваги і заплутатися. Кращий спосіб зрозуміти, допомагає «гамбургер» збільшити глибину перегляду (а з нею і конверсію) або навпаки - відстежити поведінку відвідувачів сайту. Поки що дані статистики свідчать на користь інших варіантів.

7. Нескінченний скролінг

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

приклад:

Наш вердикт: нескінченний скролінг зручний в мобільних версіях - не потрібно натискати на кнопки меню. Зручна мобільна версія з точки зору SEO - це плюс. Також він актуальний для сайтів з постійно оновлюється контентом: інформаційних і розважальних порталів, промо-сайтів фестивалів. Але не всі користувачі захочуть крутити вниз в пошуках потрібної інформації і просто покинуть сайт. Страждає і зручність навігації, прямі посилання на розділи, які важливі для SEO. Ще один мінус - підвищене навантаження на сервер за рахунок JavaScript. Нагадаємо, що Google не шанує сайти з нескінченної прокруткою.

8. Scrolljacking

Не плутати з нескінченним скролінгом. При скроллджекінге контент змінюється в процесі прокрутки. Сфера застосування поки не широка: в основному метод використовується для наочної презентації продукту в сегментах преміум і люкс.

приклад:

Наш вердикт: виглядає ефектно, але працює далеко не скрізь. Сильно ускладнює сайт, що позначається на швидкості завантаження і може не сподобатися пошуковим роботам. Якщо контент при цьому обмежений однією сторінкою, просувати такий сайт вкрай складно.

У наявності дві головні тенденції: мінімалізм і його повна протилежність. І та, і інша мають право на існування, за умови, що вони доречні саме для вашого сайту. Пам'ятайте: дизайн - це частина юзабіліті, а не самоціль. Його завдання - допомагати конверсії та просування сайту.