Урок 17. Основні тренди у веб-дизайні. Види сайтів та цільова аудиторія

17.1. Основні тренди веб-дизайну 2019

Від якості дизайну залежить успіх всього сайту!

Тому дуже важливо стежити за трендом, розуміти які інструменти увійшли в моду в сфері сайтобудування, а які вже вважаються застарілими. 

Тренди в веб-дизайні постійно змінюються, удосконалюються, модернізуються. Те, що було актуально в 2016-2017 роках поступається абсолютно новим "фішкам". Саме тому необхідно знати про них, щоб результат розробки сайтів був не просто ефективним, а створював правильне враження про компанію, якій належить веб-ресурс.

Тенденції дизайну сайтів 2019 - приклади і опис ключових елементів

В першу чергу, тенденції в дизайні торкнулися мобільних ґаджетів. Тільки в минулому році частота переглядів сайтів за допомогою мобільних пристроїв перевершила використання ноутбуків і комп'ютерів. Логічно, що дизайн адаптивної версії сайту повинен відповідати цьому. Ще зовсім недавно зовнішній вигляд адаптивної версії ресурсу був обмежений - були відсутні яскраві елементи, які додавали вагу сторінок, різні повноформатні банери і тригери через обмежений розміру дисплеїв. 

Сьогодні ж, коли смартфони та планшети стали високоінтелектуальними, коли система розпізнає запит голосом і з'явилися голосові боти, а продуктивність ґаджета і розмір діагоналі його екрана дозволяє включати в дизайн сайту абсолютно будь-які інструменти, для розробників з'явилося більше можливостей. Це і вплинуло на тренди web дизайну 2019.

Візуальні елементи і стилі, які в наступному році будуть в тренді

Сторітеллінг (Приклад використання) Сторітелінг (калька з англ. storytelling, де story— історія, atelling — розповідання) — мистецтво складання і розповідання захопливих історій. Поняття сторітеллінга прийшло із Заходу. Сьогодні дуже часто можна зустріти сторітеллінг і в соціальних мережах, які переконують читача придбати якийсь товар або послугу, посилаючись на історію про те, як він допоміг автору. Але кілька років тому принцип сторітеллінга закріпився в веб-дизайні, показавши високі результати. За допомогою візуально оформленої історії, яка розповідається відвідувачеві, можна довго утримувати його увагу, мотивуючи до подальших дій: подивитися сайт, дізнатися більше про компанію, її товари або послуги. Сторітеллінг може виступати у вигляді відео, гіф-анімації або розділений за блоками і  може бути розміщений по всій довжині сторінки.

Більше простору Тренд з'явився відносно недавно - в 2016-2017 роках. Однак, він надійно осів в веб-дизайні завдяки своїй здатності концентрувати увагу на головному реченні. Великий білий простір візуально збільшує екран, що не дозволяє користувачеві втратити концентрацію. До того ж, цей колір поєднується з усіма іншими, тому в якості акцентів або дизайнерських ідей можна вибирати абсолютно будь-які відтінки. І вони будуть виглядати просто чудово.

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

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

Яскраві кольори Ніхто і ніколи не зможе вам заборонити використання яскравих кольорів в дизайні свого сайту, якщо вони підкреслюють загальну ідею. Кольори передають емоції, а емоції - найголовніше для користувача. Тренди в веб-дизайні - динамічна структура. Те, що ще вчора було модно і актуально, вже завтра може стати пройденим етапом, "минулим століттям".

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

Повноекранне відео Хоча Інфоконтент дозволяє максимально розкрити компанію, її конкурентні переваги та послуги, повноекранні відео можуть впоратися з цим не гірше.  По-перше, фонові відео роблять дизайн сайту незвичайним, сучасним, що збільшує залученість відвідувача і призводить проект до більшої ефективності.  По-друге, відео можуть стати не гіршою історією про компанію. При цьому користувачеві не потрібно скролл сторінки вниз, щоб знайти потрібну йому інформацію. Насправді фішка з повноформатним відео в якості основного фону з'явилася вже давно. Вона встигла побувати на вершині популярності і піти, як непотрібний елемент, через неможливість підтримки мобільними пристроями і велику вагу, що призводило до зниження швидкості завантаження сайту. Але продуктивність гаджетів і технічні можливості оптимізації знову повернули відео в якості основного фону в лад. А це означає, що вони можуть знову зайняти лідируючі позиції в розробці дизайну в 2019 році.

Геометричні форми і візерунки Ця тенденція досить нова. Вона зародилася в 2016 році, отримала розвиток в 17-му і продовжить набирати обертів популярності в 2019. Змішування різних геометричних форм може дати відмінні результати. Правильний підбір візерунків і форм допоможуть створити цілісну і привабливу композицію, яка дуже високо цінується веб-користувачем. І, незважаючи на те, що технологія 2D поступово здає свої позиції, поступаючись 3D, подібні прийоми можуть значно освіжити концепцію дизайну, зробивши його сучасним і дуже цікавим.

Сінемаграфи: свіжі тренди web дизайну 2019 Сінемаграфи - зовсім не гіфки, які максимально заполонили Інтернет, а сучасні статичні ілюстрації з частковою анімацією. Сінемаграфи досить нове і свіже рішення, яке обов'язково слід задіяти при розробці трендового дизайну сайту.

Гіф-зображення (анімація) Якщо сінемаграфи - новинка в області дизайну, то анімація - це класика. А класика, як відомо, ніколи не виходить з моди. Гіфки максимально захоплюють увагу і дозволяють без великих красномовних описів дати зрозуміти користувачеві що йому пропонує компанія, на сайті якої він знаходиться.

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

3D-зображення Дизайн з 3D-зображеннями апріорі вважається модним. Тривимірні технології використовуються всюди і активно впливають на стилі веб дизайну 2019 році. А, враховуючи, тенденції доповненої і віртуальної реальності, 3Д-графіка обов'язково отримає ще більший поштовх в майбутньому році.

Кольори в веб дизайні 2019 Хочете виділитися серед своїх конкурентів? Вони значно «піднімуть ціну» зовнішнього вигляду сайту при використанні плоского дизайну. Для зручності вибору трендових кольорів, можна скористатися палітрою Google.

Градієнт Не зовсім нове, але все ще актуальне рішення з точки зору колористики для веб-дизайну сайту - використання градієнтного переходу кольорів. Досить простий інструмент, який дає прекрасний результат. Фон сторінки, виконаний в градієнті, створює враження свіжості і унікальності.

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

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

Паралакс-ефект (Приклади використання ефекту паралакса) Ефект паралакса раніше, практично, не використовувався в оформленні веб-ресурсів. Але в епоху прогресивності, коли технології VR вже почали щосили проявляти свої можливості, не використовувати паралакс на сайті порівняно зі злочином. Адже така фішка, як переміщення заднього фону та основних елементів з різною швидкістю стане справжньою знахідкою для ультрамодних дизайнів сайтів. Будьте впевнені, кожен відвідувач зверне на це увагу і вважатиме цей ефект за дуже крутою іміджевою складовою ресурсу.

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

Джерело

17.2. Види сайтів та цільова аудиторія

Різновиди сайтів:

• Landing Page (односторінковий сайт) = спонукання вчинити дію 
• Сайт-візитка = довідник компанії 
• Корпоративний сайт = представництво в мережі 
• Промо-сайт = чудовий інструмент реклами 
• Інтернет-магазин = прямі продажі 
• Іміджевий сайт = позитивне враження про власника 
• Сайт-портал = максимальна кількість корисної інформації 
• On-line сервіс = полегшення роботи і економія часу 
• Сайт-каталог = електронний каталог продукції 
• Сайт-форум = самогенерований контент 

Це далеко не повний список. Існують ще такі види: 

• дошки оголошень, 
• сайт новин, 
• форуми, 
• файлообмінники, 
• портали і 

багато інших. 

Є ще й специфічні типи, такі як 

• сателіти, 
• MFA і 
• MFS-сайти. 

Призначення різних видів сайтів: 

Landing Page

Сторінка-вітрина, також лендінг (англ.. Landing page) – це веб-сторінка, яка відкривається при натисканні на рекламне оголошення чи лінк. «Цільова сторінка» є логічним продовженням рекламного оголошення або посилання. Часто «лендінги» пов'язані з соціальними медіа, розсилками електронною поштою або маркетинговими кампаніями пошукових двигунів (контекстною рекламою) з метою підвищення ефективності реклами. «Лендінг» може бути будь-якою сторінкою сайту або спеціально створеною окремою сторінкою. Загальна мета «лендінгу» перетворення (конверсії) відвідувачів сайту в потенційних покупців, тому її ще часто називають «приманка для клієнтів».

Сайт-візитка

Сайт-візитка найчастіше складається з декількох сторінок: 

• інформація про фахівця; 
• сторінка з послугами та цінами; 
• сторінка з відгуками про роботу і портфоліо; 
• контактна інформація для зв'язку. 

Зараз даний вид сайтів не дуже популярний, так як майже кожен може створити собі повноцінний сайт для кращої пошукової оптимізації, а фахівці, які запускають свій сайт або представляють новий проект, часто використовують Landing Page.

Форум

Перші форуми з'явилися на початку 2000-х, але все ще залишаються популярним місцем спілкування. Форум – це сайт для спілкування, тут створюють теми і допомагають один одному в рамках однієї загальної тематики.

Найчастіше форуми створюють на наступні, в основному, вузькі теми:

• сім'я та діти; 
• відносини; 
• стиль; 
• гри; 
• фінанси; 

і інші популярні теми. 

Блог

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

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

Блоги створюються для: 

• самовираження; 
• самопіару і залучення уваги; 
• заробітку прямими або непрямими методами. 

На блозі можна заробляти продаючи рекламу і публікуючи рекламні пости або продавати товари і послуги.

Почати вести блог досить просто. Наприклад, на платформі livejournal або blogger. Можна замовити розробку блогу у фрілансера або у веб-студії.

Сайти новин

Відмінна риса сайту новин – відвідуваність (понад 3 000 відвідувачів на добу) і вид контенту. Залежно від охоплення і масштабу можна поділити на міські, обласні новинні сайти, новинні сайти в масштабах держави і світу.

Можна ще виділити вузькотематичні ресурси, наприклад: новини фондових і валютних ринків. Існують великі портали новин про високі технології, фінанси, бізнес, бухгалтерію, ігри, спорт і т. д.

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

Інформаційні сайти 

Інформаційні сайти (ще називають SEO-сайти) мають дуже схожий вигляд на сайт новин, але мають ряд відмінностей. SEO-сайти створюються для надання відвідувачам того, що цікавить їх. 

Основне завдання SEO-сайту – вихід в ТОП пошукової видачі за певними запитами. З цією метою пишуться і оптимізуються статті, складається ядро сайту, проводиться аналіз і моніторинг для поліпшення ресурсу і контенту. 

Корпоративні сайти

Сайт для середніх і великих компаній.Створюється для публікації такої інформації: 

• Про компанію; 
• Про вакансії; 
• Про товари, послуги; 
• Про партнерів; 
• Про контактної інформації. 

Досить часто на корпоративних сайтах присутній каталог продукції з актуальними цінами і новини компанії. На деяких сайтах присутні додаткові сервіси для клієнтів, закриті розділи сайту, в які можна потрапити тільки після реєстрації. Наприклад: сайти дистриб'юторів надають доступ в b2b-розділ, де можна здійснювати замовлення продукції за оптовими цінами.

Інтернет-магазини

Інтернет-магазин (онлайн-магазин) – це платформа, де ви розміщуєте свої товари, а відвідувачі купують товар, оформляючи замовлення і оплачуючи покупку в режимі онлайн. Завдяки інтернет-магазину, спрощуються процеси покупки, оплати і отримання замовлень.

Інтернет-магазини набули широкого поширення, тому що дозволяють стартувати без значних капітальних вкладень в інфраструктуру, персонал, склади і торгові платформи.

Інтернет-портали

Інтернет-портал – тип сайту, який містить різні блоки, сервіси, новини і корисні матеріали. Найбільш популярний формат порталів – міські портали. Міські портали надають різну інформацію про те чи інше в місті чи області: новини, прогноз погоди, вакансії, каталоги компаній, оголошення та ін.

Портали досить складний в розробці вид сайту, тому що вимагає великої команди фахівців.

Онлайн-сервіси

Онлайн-сервіси дещо відрізняються від інших видів сайтів. Головне завдання такого сайту – здійснення певних процесів онлайн.Найбільш популярні і, ті що мають великий попит онлайн-сервіси: 

• Фріланс-біржі; 
• Органайзери та календарі; 
• Кредитні калькулятори; 
• Редактори документів; 
• Онлайн-бухгалтерія; 
• Онлайн CRM-системи 
• Хмарні файлові сховища. 

Онлайн-сервіси можуть бути як самостійними, так і бути частиною масштабних проектів (Google Disk, Google Docs і т.п.). 

17.3. Цільова аудиторія сайту. Класифікація цільових аудиторій сайту

Цільова аудиторія сайту ( «цільові відвідувачі», «цільовий трафік», «цільова відвідуваність») – так називаються відвідувачі певного сайту, для яких призначений зміст інтернет-ресурсу.

У зв'язку з цілями відвідування сайту серед цільових аудиторій виділяються наступні типи:

• Аудиторія, яка зацікавлена в інформації, наявної на сайті; 
• Коло користувачів, яким цікаві товари і послуги, представлені на сайті; 
• Відвідувачі, зацікавлені в тому, щоб придбати товари та послуги, представлені на сайті. 

Відповідно до термінології з теорії перекладу, аудиторія може бути відкритою і закритою. 

Якщо говорити про відвідувачів сайту, то це означає наступне:

• Закрита аудиторія - користувачі без зворотного зв'язку; 
• Відкрита аудиторія - користувачі, що володіють якоюсь організацією і можливістю зворотного зв'язку (форуми, відгуки, коментарі). 

Аудиторія другого типу має ряд переваг: 

• Користувачі проводять значно більшу кількість часу на сайті при спілкуванні між собою і адміністраторами; 
• Відвідувачі більше довіряють ресурсу, отримуючи відповіді на питання від власників, адміністрації або сторонніх користувачів; 
• З'являється бажання з'являтися на сайті знову для того, щоб продовжити спілкування, або отримати інформацію в індивідуальному порядку. 

Як визначається цільова аудиторія сайту? 

Портрет цільового відвідувача. Для визначення цільової аудиторії конкретного сайту, спочатку слід скласти приблизний портрет цільового відвідувача. В якості основних характеристик відвідувачів виступають:

• Веб-браузери; 
• Вік; 
• Місце проживання; 
• Стать; 
• Соціальний статус; 
• Статистика поведінки на сайті; 
• Сфера зайнятості; 
• Тип мережевого підключення; 
• Рівень освіти; 
• Фінансове положення; 
• Характеристики відповідно до специфіки конкретного сайту; 
• Частота використання інтернету. 

Орієнтування на портрет цільових відвідувачів сайту слід проводити в момент розробки дизайну сайту з наповненням його контентом.