Створення дизайну сайту - один із найбільш трудомістких процесів під час його розробки. Дизайн відіграє ключову роль у сприйнятті продукту користувачем, впливаючи на зручність і залученість. Коли ми заходимо на сайт, перше, що ми бачимо, - це картинку, тобто дизайн. Спрацьовує візуальне сприйняття, і від того, яким воно буде, залежить і наше користувацьке ставлення. Причому так відбувається скрізь.
Створення якісного дизайну неможливе без працюючого дизайн-процесу - послідовності кроків, з яких складається робота над дизайном продукту.
Дизайнери-початківці часто дивляться на дизайн як на процес створення красивої картинки. У результаті виходить неефективний, хоч і красивий проєкт, який не розв'яже проблеми користувачів. Але робота дизайнера починається не зі створення картинки, а набагато раніше, і не закінчується разом із релізом, а триває весь час існування продукту. Тому при розробці дизайну важливі UX дослідження, аналітика, створення дизайн концепції.
Давайте розглянемо більш детально основні підходи до створення дизайну.
Увесь процес розробки UX орієнтований на створення кращого користувацького досвіду за рахунок усунення інформаційного навантаження. Він складається з двох частин:
Головний інструмент дизайнера на цьому етапі - UX Research. За допомогою UX-досліджень дизайнер дізнається про проблеми, з якими стикаються користувачі, їхні цілі, мотивацію, очікування, а також контекст, у якому використовуватиметься продукт. Він допомагає точніше визначити цільову аудиторію (ЦА) продукту і дізнатися її потреби, розробити максимально зручний і водночас ефективний інтерфейс.
Один із ключових методів збору інсайтів — аналіз конкурентних сайтів. Оцінюйте не те, як вони виглядають, а зміст: з чого складається меню, що вони винесли на головну сторінку, які розділи на сайті, що вони пишуть і як. Також потрібно враховувати місцеву специфіку, особливості країни, для якої розроблятиметься дизайн: звички покупців у виборі товару, способи оплати та доставки, місцеві традиції, культурні особливості.
Спираючись на отримані дані, дизайнер формує інформаційну архітектуру продукту, створюючи персон для детальнішого портрета користувача та розробляючи шлях користувача (user flow) для оптимізації взаємодії.
Метод персон — це якісний метод дослідження. Його мета — створити кількох персонажів із характеристиками потенційних користувачів продукту. Простіше кажучи, кожен персонаж - це збірний образ однієї групи вашої цільової аудиторії. Створення образу користувача допоможе вам краще пізнати свою аудиторію. Ви зможете точніше визначити їхні ключові проблеми, потреби, цілі та больові точки. В кінцевому підсумку це призведе до кращої взаємодії з користувачем, зробить продукт ціннішим і привабливішим для цільової аудиторії.
Характеристики, які включають до портрета, залежать від ніші та специфіки бізнесу. Але є універсальні критерії, які в методі персон враховують завжди:
Інші характеристики сильно прив'язані до специфіки товару, послуги або діджитал-проєкту:
Ґрунтуючись на портреті користувача, ви зможете ухвалювати більш розумні та обґрунтовані рішення щодо продукту. Наприклад, які функції можуть бути корисні користувачам, на який логотип вони реагуватимуть краще або який текст їм зрозуміліший.
Після того як усі дослідження було проведено, результати проаналізовано, команду залучено до процесу створення, переходьте до проєктування продукту. Зробити це можна за допомогою User Flow.
Competitive analysis у дизайні — це процес дослідження та оцінки робіт конкурентів, щоб виявити їхні сильні та слабкі сторони, тренди ринку та можливості для покращення власного продукту. Це включає аналіз візуального стилю, зручності використання, взаємодії з користувачем та загальної ефективності дизайну. Розуміння того, як конкуренти вирішують схожі задачі, допомагає дизайнерам створювати унікальні, більш привабливі та функціональні рішення, які виділяють продукт серед інших.
User Flow — це поєднання логічних схем і візуального представлення інтерфейсу, яке допомагає зрозуміти, як користувачі взаємодіють із продуктом. Такі діаграми дозволяють на ранніх етапах визначити ключові кроки, протестувати запропоновані рішення та виявити потенційні проблеми ще до початку прототипування.
Основна перевага User Flow Diagrams — це можливість уникнути більшості UX-помилок на ранніх етапах розробки, що значно знижує витрати на доопрацювання. Крім того, ці схеми допомагають наочно пояснити замовникам або менеджерам логіку взаємодії, обґрунтовуючи дизайн-рішення.
Спираючись на User Flow, можна переходити до створення вайрфреймів — схематичного представлення структури кожного екрану. Вони не потребують багато часу на розробку та дозволяють швидко зафіксувати розташування основних елементів інтерфейсу.
Wireframes розрізняють за рівнем деталізації:
Наступний етап процесу проектування після вайрфрейму - це прототип. Це робоча модель застосунку або вебсайту, яка точніше імітує взаємодію з користувачем. Він потрібен для того, щоб сфокусуватися на сенсі та продумати інтерфейс на концептуальному рівні, перш ніж переходити до візуального оформлення.
Прототипи допомагають тестувати User Flow і виявляти можливі проблеми. Зокрема, за їхньою допомогою можна зрозуміти, як користувач насправді переміщується під час використання програми або застосунку. Наприклад, якщо для виконання цільової дії потрібно занадто багато кліків, це погіршує користувацький досвід і може призвести до відмов.
Дизайн-концепт - це етап розробки візуального стилю сайту, що формує його фінальний вигляд. Крім того, це інструмент діалогу між дизайнером і замовником. Обговорення, коригування та узгодження дизайн-концепції допомагають дизайнеру зрозуміти, в якому напрямку працювати, а клієнту - зрозуміти, яким буде фінальний результат. Ці ідеї реалізуються в декількох різних варіантах дизайну, з яких згодом і формується остаточний варіант зовнішнього вигляду сайту, а перші варіанти і є концептуальним дизайном майбутнього проєкту.
Отримайте від замовника бриф. Робота над концепцією починається з розмови з клієнтом і заповнення брифу - особливої анкети з питаннями про бізнес і бажаний результат. На цьому етапі дизайнер має розібратися, чим займається компанія, навіщо їм потрібен цей конкретний проєкт, що не влаштовує в наявному сайті і на які візуальні образи орієнтується клієнт. Цей етап критично важливий для розуміння завдань і обсягів роботи: чи потрібна розробка нового продукту, чи достатньо редизайну.
Отримавши бриф, необхідно проаналізувати поставлені завдання та дослідити ринок. Це включає самостійний аналіз відкритих джерел, вивчення конкурентів, аналогічних сервісів і аналітичних звітів. Ретельний аналіз допомагає виявити сильні та слабкі сторони існуючих рішень, що дозволяє створити більш ефективний концепт.
Референси відіграють ключову роль у визначенні візуального напрямку проєкту та допомагають сформулювати відповідь на запитання, яким має бути кінцевий результат. Вони дозволяють зрозуміти актуальні тренди в галузі, а також побачити, як ці тренди адаптуються в різних проєктах, і які рішення є стандартними або інноваційними. Завдяки референсам легше донести свої побажання до колег і синхронізувати загальні цілі роботи.
Колір — це один із основних елементів, через який люди сприймають навколишній світ з самого народження. Незалежно від того, куди ми дивимося, кольори оточують нас всюди, і це одразу викликає певні асоціації у користувачів. Тому кольори відіграють важливу роль у візуальному сприйнятті і здатні значно впливати на сприйняття бренду.
Колірна палітра є основою для вибору тональності, відтінків та їх поєднань під час створення дизайну. Знання психології кольору дає дизайнеру змогу створювати фірмовий стиль, який буде запам’ятовуватися користувачам. Правильно підібрана колірна схема не лише створює візуальну привабливість, але й спонукає користувача затриматися на сайті, здійснити цільову дію або взаємодіяти з контентом.
При виборі кольорів варто орієнтуватися на тематику сторінки, цільову аудиторію та бренд компанії. Щоб підібрати гармонійні відтінки, варто звернути увагу на кольорові рішення конкурентів, а також на тренди в суміжних галузях. Якщо у компанії є брендбук, обов’язково попросіть його для точного узгодження кольорової палітри.
Часто шрифт не привертає увагу користувача, і він сприймається як щось само собою зрозуміле. Проте типографіка є важливим елементом дизайну, адже вона визначає, як правильно сприймається текстова інформація на сайті. Для створення ефективного дизайну недостатньо просто експериментувати з шрифтами; потрібно створювати чітку ієрархію за допомогою тексту. Це можна зробити, вибравши один шрифт і варіюючи його розмір та товщину накреслення. Такий підхід дозволяє створити збалансовану сторінку, яка не перевантажена різними шрифтами, і полегшує сприйняття тексту в послідовному порядку.
Вайрфрейм — це базова схема структури майбутньої сторінки або екрана. Після того, як обрано кольорову палітру та шрифти, можна приступати до детальної розробки макетів, орієнтуючись на вайрфрейми. Це дозволяє ефективно розподілити елементи на сторінці та забезпечити логічну і зручну навігацію.
Презентація — це публічне представлення проєкту, під час якого первинний варіант обговорюється із замовником та іншими членами команди. На фінальних етапах розробки дизайн-проєкту важливо вміти грамотно презентувати свою ідею замовнику. Дизайнер має чітко розуміти, як ефективно «продати» концепцію, адже хороший дизайн не може бути успішним без правильної презентації. Це критичний етап завершення дизайн-концепції, на якому дизайнер має подати ідею зрозуміло та переконливо, щоб досягти схвалення та подальшу реалізацію.
Дизайн-система — це набір компонентів, стилів і патернів, які забезпечують єдиний вигляд і взаємодію в інтерфейсі. Вона дозволяє дизайнерам і розробникам структуровано працювати над продуктом, використовуючи стандартні елементи для створення якісного дизайну.
Ця система також допомагає користувачам інтуїтивно орієнтуватися в продукті, оскільки всі елементи виконані у єдиному стилі.
Для ефективної роботи важливо визначити чіткі шаблони, набір компонентів, палітру кольорів, шрифти та UI-патерни, які забезпечать консистентність в інтерфейсі вебсайту чи застосунку. В майбутньому це полегшить роботу, як розробнику так і дизайнеру. Детальніше в нашій статті ↗
З вашим продуктом будуть щодня взаємодіяти сотні, а то й тисячі людей, і слід враховувати, що серед них будуть і люди з обмеженими можливостями. Серед них можуть бути люди з порушеннями зору, слуху, моторики (як тимчасовими, так і постійними) або когнітивними особливостями.
Web accessibility гарантує, що люди з обмеженими можливостями можуть сприймати, розуміти, орієнтуватися та взаємодіяти з продуктом, який ви створили. Це означає, що кожна сторінка має бути: сприйнятливою, працездатною, зрозумілою та надійною. Ключові аспекти доступності включають в себе: можливість навігації з клавіатури, чітке відображення полів форм і кнопок, а також наявність альтернативного тексту для зображень, відео, іконок та інших елементів.
Перед стартом веб проєкту та підбору палітри використовуйте Web Content Accessibility Guidlines (WCAG - рекомендації з доступності веб контенту), що розроблений групою Web Accessibility Initiative (WAI), яка входить до W3C.
Це специфікація про те, як зробити сторінки доступними шляхом додавання ролей і атрибутів ARIA в HTML-розмітку. Багато законів про доступність у всьому світі засновані на критеріях виконання WCAG.
Ці специфікації включають три рівні відповідності та пріоритетів:
Для кожного гайдлайну чи критерію є різні методи досягнення потрібного рівня. Вони здебільшого поділяються на два рівні:
Розділимо гайдлани на кілька категорій, щоб було зручніше орієнтуватися:
Завжди показуйте видимий тригер для кожної дії. Переконайтеся, що вашим користувачам не потрібно шукати якусь дію по ховеру і її одразу видно. Не всі користувачі використовують мишку, деякі користуються голосовим набором або програмою для читання з екрана.
Завжди враховуйте, як ваші користувачі, які користуються лише клавіатурою або допоміжними технологіями, будуть взаємодіяти з вашим продуктом.
Доступність клавіатури - один із найважливіших аспектів у web accessibility. Люди з моторно-руховими порушеннями, незрячі люди, які користуються програмою читання з екрана, люди, які не мають чіткого контролю над м'язами, - усі вони залежні від використання клавіатури для навігації.
Не використовуйте колір як єдиний візуальний засіб передачі інформації.
Якщо інформація передається лише за допомогою кольору або різними кольорами, це буде проблемою для людей, які не можуть їх розрізняти.
Спробуйте додавати до елементів якийсь допоміжний індикатор, як-от інформаційний текст, іконки, текстури, обведення. Наприклад, замість використання зеленого тексту, щоб показати успіх і червоного для невдачі, використовуйте ще зелену галочку і червоний хрест.
Люди з поганим зором часто мають труднощі з читанням тексту, у якого поганий контраст із бекграундом. Якщо ви робите хоча б мінімальний контраст між текстом і бекграундом, це може зробити текст більш читабельним, навіть якщо людина не повністю розрізняє кольори.
Є кілька головних гайдлайнів щодо контрасту тексту та елементів на сторінці:
Форми для введення даних значно впливають на доступність вашого продукту. Важливо чітко позначати межі інпутів. Якщо поля не мають явного позначення, користувачі можуть не розуміти, де саме потрібно натискати на екрані.
Також важливо, щоб підписи до інпутів завжди залишалися видимими. Якщо інформація надається лише у вигляді placeholder, вона зникає під час початку введення тексту, і користувач може забути, що саме потрібно було ввести. Це особливо важливо для людей з проблемами пам'яті або когнітивними порушеннями.
Завжди робіть вашу область кліка більшою. Перевірте, щоб ваша область кліка була щонайменше, 44х44 px, незалежно від розміру екрана, девайса або роздільної здатності.
Це дуже допоможе людям, у яких проблеми з рухами або більші пальці. А також для людей, які користуються телефоном тільки однією рукою або з поганим зором.
Уникайте посилань, які говорять «Click here». Це допоможе людям із обмеженими можливостями руху, когнітивними порушеннями або проблемами із зором уникнути непотрібних кліків, щоб подивитися, яка інформація там міститься.
Також це допоможе користувачам розуміти мету кожного посилання і таким чином вони можуть вирішити, чи хочуть вони перейти туди чи ні. За можливості додавайте до посилань текст, який чітко вказує на їхню мету.
Підкреслюйте посилання в тексті, щоб користувачі, які мають дефіцит сприйняття кольору могли легко зрозуміти, що це посилання.
UI-дизайн - це процес створення візуальної частини інтерфейсу, що включає підбір основних кольорів і шрифтів, а також розробку кнопок, іконок та ілюстрацій.
Згідно з дослідженнями, дизайн формує перше враження про продукт у 94% випадків. Такий висновок зробили австрійські дослідники.
46,1% користувачів вирішують, чи можна довіряти сайту, ґрунтуючись на його дизайні, виявили вчені зі Стенфорда.
59% користувачів виберуть контент із красивим дизайном, а не контент із мінімальним оформленням. Це результати дослідження компанії Adobe.
Візуальний дизайн має бути послідовним на всіх сторінках продукту. Консистентність дає змогу поліпшити користувацький досвід і спростити взаємодію з продуктом. Хороший інтерфейс непомітний для користувача - він просто допомагає досягти потрібного результату. А якщо постаратися його проаналізувати, здається очевидним, що кнопки мають розташовуватися саме так, а кольори мають бути саме такими. Насправді, якщо інтерфейс справляє таке враження, значить над ним добре попрацювали.
Крім того, візуальна частина інтерфейсу не повинна бути переобтяжена декором: надмірність у візуальних акцентах може відволікти користувача і збити його зі шляху. Не забувайте також про чуйність вашого інтерфейсу - користувач повинен завжди розуміти, що відбувається на екрані просто зараз.
На цьому етапі дизайнер не тільки відшліфовує макети, а й налаштовує процес взаємодії з командою розробки.
Чому це важливо? Дизайнер є частиною команди, яка створює продукт, а фаза дизайну - це етап, який передує фазі розробки.
Зрештою, дизайнер готує вимоги для розробників у вигляді макетів та інших артефактів. І тому дизайнер повинен:
Це ітеративний процес, який повторюється знову і знову в умовах мінливих версій дизайну і розробки, і його потрібно налаштувати і підтримувати.
У налагодженні процесу дизайнеру допоможуть:
Page Speed Insights (PSI) - безкоштовний онлайн сервіс для визначення продуктивності сайту та вибору ефективних шляхів його оптимізації. Його зручно використовувати як на комп'ютері, так і на мобільному пристрої. Він не показує швидкість завантаження сторінки, а аналізує ефективність динаміки завантаження сторінок і елементів сайту з урахуванням JavaScript, CSS, структура HTML, конфігурація сервера, розмір зображень тощо.
PSI проводить аналіз завантажувальної динаміки, враховуючи фактори, на які не впливає якість зв'язку:
1. Оптимізація зображень. Проводиться шляхом зменшення розміру файлів такими способами:
2. Не використовуйте громіздкі елементи дизайну.
Прискорення завантаження сайтів - це досить молодий напрям оптимізації. Процедура важлива в конкурентній боротьбі. Власник сайту завжди повинен пам'ятати про користувачів і їхню зручність. Тоді проєкт розвиватиметься і зароблятиме гроші.
Після завершення розробки і релізу все тільки починається. З цього моменту ви і ваша команда будете безперервно працювати над поліпшенням продукту. Основним інструментом на цьому етапі є аналітика, що збирає дані про взаємодію користувачів із продуктом. Наприклад, можна подивитися Bounce Rate і дізнатися відсоток користувачів, які залишили сайт, подивившись тільки одну його сторінку. Або відстежити середній час (AVG time on page), який користувач проводить на сторінці, а потім дізнатися, скільки користувачів (the number of targeted actions) досягли фінальної точки у своєму шляху по продукту.
Використовуйте цю інформацію для того, щоб виявити слабкі місця в інтерфейсі, сформулюйте нові гіпотези щодо проблем та їхніх рішень, перевірте їх за допомогою досліджень і робіть ваш продукт ще кращим.
У результаті дотримання всіх підходів під час розроблення дизайну, формується набір правил і стилістичних рішень, які поширюватимуться на всі інші сторінки проєкту. Оскільки команда розуміє, в якому напрямку рухається дизайн, скорочується час на відтворення внутрішніх сторінок і спрощується процес узгодження. Решта сторінок сайту матимуть вигляд у єдиній стилістиці, а для нового контенту не доведеться створювати дизайн з нуля. Навіть якщо проєкт буде передано іншим дизайнерам, то за умови грамотного дотримання розроблених правил, макети різних сторінок матимуть цілісний вигляд і в єдиній візуальній системі.
Дизайн сайту відіграє велике значення в процесі його просування і розкрутки. Перший контакт відвідувача з сайтом здійснюється на основі візуального сприйняття сторінки. Якщо зовнішній вигляд сайту буде приємним і цікавим, то користувач затримається тут і захоче більше дізнатися про вміст веб-ресурсу. Дизайн сайту і його якісне оформлення - це показник іміджу компанії, вираження її ставлення до потенційних клієнтів. Якщо сайт має гарний і оригінальний вигляд, значить, його власнику важливо справити гарне враження на відвідувачів, і він зацікавлений у вашій увазі та оцінці.
Працювати над дизайном сайту необхідно. Якщо цього не робити, падає залученість аудиторії, знижуються продажі, збільшується кількість негативу щодо компанії.
Створення будь-якого продукту починається з ідеї. Це круто, коли інтерфейс продукту, який ви створюєте, має гарний і сучасний вигляд. Однак ваш продукт буде успішним тільки тоді, коли він буде жаданий у користувачів. А для цього:
.jpg)