ГлосарійUX/UI та вебдизайн
Терміни UX/UI та вебдизайну простими словами
Як сайти й цифрові продукти досліджують, структурують, проєктують, тестують і роблять доступними: від досліджень користувачів і вайрфреймів до дизайн-систем і багатомовної верстки. Кожне визначення веде на послугу або статтю, де ми розбираємо тему докладно.
Дослідження та UX-стратегія
Як команда з'ясовує, що має робити продукт, ще до того, як хтось намалює екран.
- Продуктовий дизайн (product design)
Продуктовий дизайн це дисципліна, яка визначає й проєктує цифровий продукт цілком: цілі бізнесу, потреби користувачів, робочі процеси, інформаційну архітектуру, дані та технічні обмеження, а також самі екрани. Дизайн користувацького досвіду та інтерфейсу (UX/UI, user experience і user interface) становить одну видиму частину цієї роботи. Результат: перевірена концепція, клікабельний прототип і дизайн-система, за якими команда розробки може працювати без здогадок.
Детальніше: Продуктовий дизайн
- UI/UX-дизайн
UI/UX-дизайн це проєктування того, як цифровий продукт поводиться для користувачів (UX, user experience) і як виглядають та відгукуються його екрани (UI, user interface). UX визначає, хто користувачі і що кожен із них має зробити; UI перетворює це на екрани й компоненти, які розробники можуть зібрати, з чіткою ієрархією, навігацією, станами та доступністю. Наш UI/UX-дизайн коштує від $10 000 для продуктів з акаунтами, ролями та сценаріями: компактний застосунок зазвичай має 15-30 екранів, продукт із кількома ролями 80 і більше, а прототипи перевіряють до розробки.
Детальніше: UI/UX Дизайн
- Дослідження користувачів
Дослідження користувачів це вивчення того, як реальні люди виконують роботу, яку має підтримувати продукт: інтерв'ю, спостереження, аналітика, звернення до підтримки й таблиці, де живуть винятки. Добрі запитання стосуються минулого («покажіть, що ви робили з останнім замовленням»), а не побажань, і в B2B покупець і користувач часто різні люди. Бем і Базилі оцінили, що 40-50% зусиль у програмних проєктах ідуть на переробки, яких можна було уникнути; значну їх частину дослідження, прототипи й тести виявляють заздалегідь.
Детальніше: UI/UX Дизайн
- Карта шляху клієнта (CJM)
Карта шляху клієнта (CJM, customer journey map) це схема кроків і рішень, через які людина проходить від першого контакту до заявки чи покупки, різними каналами і в часі. Побудована на даних, а не на здогадах, вона показує, що люди рідко йдуть прямо: бачать допис, через кілька днів шукають компанію в Google і повертаються ще за пару тижнів. Універсального найкращого шляху немає: люксовий магазин може навмисно сповільнювати клієнта, а магазин електроніки прибирає будь-які перешкоди. У люксі клієнти нерідко повертаються три-чотири рази, перш ніж вийти на зв'язок.
Детальніше: Чому luxury e-commerce порушує всі правила conversion optimization
- Jobs to Be Done (JTBD)
Jobs to Be Done (JTBD) це метод продуктового дизайну, який дивиться на прогрес, якого прагне клієнт, тобто на «роботу», для якої він «наймає» продукт чи послугу, а не на його демографію чи функції, про які він просить. Він переводить завдання з питання «що має бути на сторінці» у питання «що людині потрібно зробити». Разом із Double Diamond, об'єктно-орієнтованим UX та Atomic Design це один із визнаних методів, на яких тримається наш підхід до дизайну інтернет-магазинів.
Детальніше: Як ми проєктуємо e-commerce: від об'єктів до досвіду
- Подвійний діамант (Double Diamond)
Подвійний діамант (Double Diamond) це модель дизайн-процесу з чотирьох фаз: знайти й сформулювати правильну проблему, потім розробити й випустити правильне рішення, двічі розширюючи пошук і знову звужуючи його. Вона захищає від найдорожчої помилки в дизайні, відшліфованої відповіді на хибне питання. Як JTBD, OOUX та Atomic Design, вона формалізує простий принцип: починати з того, що бізнесу потрібно від його цифрового продукту.
Детальніше: Як ми проєктуємо e-commerce: від об'єктів до досвіду
- Об'єктно-орієнтований UX (OOUX)
Об'єктно-орієнтований UX (OOUX) це метод проєктування, що починається з реальних об'єктів системи, наприклад товарів, колекцій, матеріалів, експертів, локацій і послуг, та зв'язків між ними, а не з екранів. Спершу кожен об'єкт описують із властивостями та зв'язками, і лише потім вирішують, як він виглядає на сторінці. Кожен об'єкт стає кандидатом на сторінку, фільтр чи посилання, а той самий об'єкт може з'явитися в колекції, історії, порівнянні чи рекомендації.
Детальніше: Як ми проєктуємо e-commerce: від об'єктів до досвіду
- Атомарний дизайн (Atomic Design)
Атомарний дизайн (Atomic Design) це метод Бреда Фроста, у якому інтерфейс складається як ієрархія частин: атоми на кшталт кнопок і підписів, далі молекули, організми, шаблони та сторінки. Він робить компоненти багаторазовими й зберігає цілісність інтерфейсу, що росте. Ми застосовуємо його у зворотному порядку: починаємо з організму, тобто з реального бізнесу та шляхів його клієнтів, і лише потім розкладаємо його на компоненти, щоб частини служили цілому, а не UI-киту.
Детальніше: Як ми проєктуємо e-commerce: від об'єктів до досвіду
- Аналіз конкурентів у UX
Аналіз конкурентів у UX це системне вивчення того, як конкурентні сайти й застосунки розв'язують ті самі завдання: навігація, фільтри, картки товарів, форми й оформлення замовлення. Кожне знайдене рішення розглядають як гіпотезу, яку треба перевірити, адаптувати або відхилити, але не копіювати, і свіжий запуск конкурента не є точкою відліку. Для одного магазину перлів ми розібрали 13 ювелірних сайтів і склали матрицю з 24 способів увійти в каталог; одного з них, фільтра за розміром у міліметрах, не було в жодного з п'яти профільних конкурентів.
Детальніше: Процес створення сайту, який малюють агенції, хибний
- Продуктове мислення
Продуктове мислення це звичка пов'язувати кожне дизайн-рішення з бізнес-результатом, який воно має змінити: від симптому на кшталт «клієнти кидають процес» через робочі процеси, інформаційну архітектуру й логіку бекенду до конкретного KPI. Користувач бачить один клік, але за ним можуть стояти системи клієнтів, замовлень, оплат, складу, CRM і бухгалтерії, тому користувацький і бізнес-сценарій проєктують разом. Зручність не дорівнює корисності: ідеальний UX не врятує продукт, якщо проблема, яку він розв'язує, недостатньо важлива.
Детальніше: Product Design проти UX/UI: де реально починається цифровий продукт?
- Дизайн-гіпотеза
Дизайн-гіпотеза це дизайн-рішення, сформульоване як припущення, яке реальна поведінка підтвердить або спростує: якщо змінити це, має змінитися ось цей вимірюваний показник. До запуску будь-який дизайн лишається гіпотезою, після запуску її перевіряють аналітика, карти кліків і частка відмов, тож команда захищає гіпотезу, а не макет. Кожна гіпотеза отримує власну подію в аналітиці й дату розбору через шість-вісім тижнів після запуску. Один магазин, що став гучнішим і звичнішим для покупців, підняв конверсію на 17%.
Детальніше: Дизайн сайтів
Структура, сценарії та прототипи
Плани, шляхи й прототипи, що визначають роботу сайту чи застосунку до появи візуалу.
- Інформаційна архітектура (information architecture)
Інформаційна архітектура це структура сайту чи застосунку: які сторінки й розділи існують, як вони згруповані й названі, як навігація та внутрішні посилання їх пов'язують і де розміщується кожен тип контенту. Її проєктують до візуального дизайну, зазвичай у вигляді карти сайту та вайрфреймів. Добра інформаційна архітектура допомагає відвідувачам знаходити потрібне, а пошуковикам і ШІ-системам розуміти сайт.
Детальніше: Дизайн сайтів
- Карта сторінок (мапа сайту)
Карта сторінок, або мапа сайту, це перелік усіх сторінок і шаблонів сайту з їхньою ієрархією та правилами URL, який погоджують разом із вайрфреймами до появи будь-якого кольору. Вона фіксує обсяг дизайну й розробки. Ціну визначає кількість шаблонів, а не сторінок: п'ятдесят статей використовують один шаблон, а головна, каталог, картка товару й оформлення замовлення це чотири окремі дизайн-задачі.
Детальніше: Дизайн сайтів
- Користувацький сценарій (user flow)
Користувацький сценарій (user flow) це покроковий шлях, яким користувач виконує одне завдання в продукті, від точки входу до результату, включно з тим, що стається, коли якийсь крок не вдається. Сценарії малюють для кожного ключового завдання разом із таблицею ролей та інформаційною архітектурою і затверджують до візуального дизайну. На цьому етапі UX-проблему виправляють за години, після розробки на це йдуть тижні.
Детальніше: UI/UX Дизайн
- Вайрфрейм (wireframe)
Вайрфрейм (wireframe) це спрощена схема сторінки чи екрана, яка показує структуру, блоки контенту та їх порядок без кольорів, шрифтів і зображень. Він тримає обговорення на завданнях і контенті, а не на смаку, і не дає сторінкам виглядати більш готовими, ніж рішення за ними. Наші перші вайрфрейми навмисно прості, сірі форми зі справжніми підписами, і кожен шаблон проходить вайрфрейм і погодження до візуального дизайну. ШІ-інструменти вже вміють перетворювати затверджені вайрфрейми на робочі інтерфейси за кілька годин.
Детальніше: Процес створення сайту, який малюють агенції, хибний
- Клікабельний прототип
Клікабельний прототип це інтерактивна модель ключових екранів продукту, зазвичай у Figma, якою можна пройти основні сценарії ще до того, як написано код. Перевірити його на реальних користувачах недорого: правка в прототипі це кілька екранів, а після розробки це переробка коду й бази даних. Водночас охайний прототип може приховувати відкриті питання про джерела даних, відповідальність, збої та масштаб. Ним завершується discovery-фаза, у нас це два-чотири тижні й від $4 000.
Детальніше: Процес створення сайту, який малюють агенції, хибний
- Макет (мокап)
Макет, або мокап, це статичне повнокольорове зображення екрана, яке показує, як він виглядатиме, але не як він працює. Він допомагає погодити візуальний напрям, коли структуру й сценарії вже визначено. Намальований раніше за ці рішення, макет стає обіцянкою, якої розробка може не дотримати, тому він іде після вайрфреймів, а не замість них. Іноді жива річ переконує краще: один тендер виграли анімованою головною сторінкою з рухом, відео й музикою замість статичного макета.
Детальніше: Процес створення сайту, який малюють агенції, хибний
- Стани інтерфейсу (порожній, завантаження, помилка)
Стани інтерфейсу це всі варіанти, у яких може опинитися екран, крім ідеального: порожній, завантажується, помилка, закритий для ролі користувача або перевантажений тисячами записів. Кожен стан разом із текстами повідомлень варто спроєктувати заздалегідь, щоб розробникам не довелося вигадувати його в останній день. Порожній результат пошуку, товар, якого немає в наявності, країна без доставки чи помилка у формі мають бути в специфікації: за ними видно, чи думала команда далі за ідеальний сценарій.
Детальніше: Product Design проти UX/UI: де реально починається цифровий продукт?
- Happy path (ідеальний сценарій)
Happy path, або ідеальний сценарій, це ситуація, у якій усе йде правильно: користувач вводить коректні дані, мережа працює і всі пов'язані системи відповідають. Демо показують лише його, але реальні користувачі лишають поля порожніми, клікають двічі, втрачають зв'язок, відкривають сайт в іншому браузері або повертаються через пів року. Граничні випадки на кшталт відсутніх даних, невдалої оплати, недоступної CRM чи повільної мережі теж частина продукту, і їх треба проєктувати й тестувати, а не лишати на везіння.
Детальніше: Процес створення сайту, який малюють агенції, хибний
- Дизайн-специфікація
Дизайн-специфікація це документ, що описує кожен шаблон сторінки й кожен блок продукту: його контент, поведінку, стани, потрібні дані та обґрунтування кожного рішення. Вона перетворює дизайн на те, що команда може зібрати і з чим можна звірити результат. Кожен шаблон отримує короткий паспорт: навіщо існує сторінка, звідки на неї приходять, що там мають зробити, куди йдуть далі і як це вимірюється. Для одного люксового магазину наша специфікація склала 108 сторінок: 13 шаблонів і 61 блок.
Детальніше: Процес створення сайту, який малюють агенції, хибний
- Передача дизайну в розробку (handoff)
Передача дизайну в розробку (handoff) це передача готового дизайну розробникам у вигляді, за яким можна будувати: файл Figma з анотованими компонентами, специфікаціями відступів, експортованими ресурсами, прототипом, користувацькими сценаріями та переліком станів. Коли продукт збирає власна команда клієнта, handoff і є результатом роботи, тому до нього входять карта сторінок і вайрфрейми кожного шаблону з його призначенням. Це не естафета: реалізація змінює реальність, тож дизайнер лишається в роботі й рано помічає розбіжності між дизайном і збіркою.
Детальніше: UI/UX Дизайн
- Figma
Figma це браузерний інструмент дизайну, у якому створюють і спільно використовують інтерфейси, прототипи й дизайн-системи, а дизайнери, розробники та клієнти працюють в одному файлі. Це стандартний інструмент для дизайну сайтів і продуктів та для передачі дизайну в розробку. Наші прототипи, дизайн-системи й файли для розробників живуть там, зазвичай із двома-трьома раундами правок на сторінку. Відкрита надто рано, Figma починає диктувати реальність і породжує гарну систему, яка відповідає на питання, якого ніхто не ставив.
Детальніше: Дизайн сайтів
- Контент до дизайну (content-first)
Підхід «контент до дизайну» (content-first) це порядок роботи, за якого справжні тексти, фотографії та дані збирають або готують до візуального дизайну, щоб макет будувався навколо того, що бізнесу справді треба сказати. Без реального контенту дизайн можна перевірити лише на заглушках. Шаблонні сайти й сайти, згенеровані за промптом, схожі між собою саме тому, що спершу був дизайн, а контент залили потім. Структура вирішує, чи заслуговує бізнес на увагу; дизайн вирішує, чи отримає він її.
Детальніше: Дизайн сайтів
Візуальний дизайн і UI
Візуальний шар: системи, шрифти, колір, простір і перше враження, яке вони створюють.
- Дизайн-система (design system)
Дизайн-система це спільний набір правил і повторно використовуваних елементів інтерфейсу продукту: кольори, шрифти, відступи, компоненти на кшталт кнопок і форм та правила їх застосування, зазвичай у Figma і з відповідником у коді. Вона робить нові екрани узгодженими та пришвидшує і дизайн, і розробку. Без неї кожна нова сторінка виглядає трохи інакше, ніж попередня.
Детальніше: UI/UX Дизайн
- Дизайн-токени
Дизайн-токени це іменовані базові значення дизайн-системи, наприклад кольори, розміри шрифтів, відступи й радіуси заокруглення, які задають один раз і використовують і дизайнери, і код. Зміна токена оновлює всі компоненти, що на нього спираються, тож колірні шкали, шрифти й сітки відступів послідовно переносять логіку бренду на всі варіанти компонентів. ШІ-інструменти вже працюють і на цьому рівні: стежать за узгодженістю токенів, документують компоненти й запускають візуальні регресійні тести.
Детальніше: UI/UX Дизайн
- Борг дизайн-системи (дрейф дизайну)
Борг дизайн-системи, або дрейф дизайну, це поступова втрата візуальної цілісності, коли інтерфейс роками правлять поспіхом без спільної системи: десятки майже однакових кнопок, різні відступи, шрифти й розміри. Сайт може виглядати цілісним на перший погляд і при цьому не мати справжньої дизайн-системи під капотом. В одному великому інтернет-магазині чотири роки квапливих правок розмили початкову візуальну концепцію. Як і технічний борг, він росте непомітно і зазвичай оплачується під час наступного редизайну.
Детальніше: Прихований технічний борг, через який редизайн сайту коштує дорожче за план
- Візуальна ієрархія
Візуальна ієрархія це розстановка розміру, насиченості, кольору, контрасту й положення елементів, яка визначає, що відвідувач помітить на сторінці першим, другим і останнім. Вона підказує, що найважливіше і що робити далі, не змушуючи читати все підряд. Одноманітність зменшує зусилля на читання, а колір створює акцент, щоб одна дія була явно головною. Коли виділено все, не виділено нічого.
Детальніше: Що реально робить хороший веб-дизайн, коли структура вже правильна
- F-патерн і Z-патерн
F-патерн і Z-патерн це типові траєкторії погляду на сторінці: F-подібна на сторінках із великою кількістю тексту, де люди пробігають верхні рядки й лівий край, і Z-подібна на простих макетах, від лівого верхнього кута праворуч і далі по діагоналі вниз. Вони допомагають вирішити, де розмістити заголовки, ключові повідомлення й заклики до дії. Це тенденції, а не закони поведінки: контент, галузь і мотивація відвідувача змінюють те, як сторінку читають насправді.
Детальніше: Як дизайн сайту впливає на сприйману цінність бренду
- Типографіка
Типографіка це вибір і організація шрифтів: насиченість, шкала розмірів, інтервали, довжина рядка та ієрархія. У вебі це один із найсильніших сигналів якості: системні шрифти й налаштування фреймворку за замовчуванням читаються як відсутність задуму навіть на добре структурованому сайті. Люксові сайти зазвичай поєднують шрифт із зарубками для назв і заголовків та гротеск для інтерфейсу. На багатомовному сайті типографіка має працювати в кожній писемності, а не лише в латиниці.
Детальніше: Чому деякі сайти виглядають дешево, навіть коли вони добре спроєктовані
- Варіативні шрифти
Варіативний шрифт це один файл шрифту, що містить безперервний діапазон насиченості, ширини чи накреслень замість окремого файлу на кожен варіант. Його осі можуть плавно змінюватися залежно від розміру екрана, положення прокручування або стану елемента. У результаті завантажується менше файлів, а типографіка стає виразнішою без зайвої ваги сторінки.
Детальніше: 7 трендів UX/UI дизайну що реально мають значення у 2026 році
- Порожній простір (whitespace)
Порожній простір (whitespace, negative space) це вільне місце між елементами сторінки та навколо них: поля, внутрішні відступи, проміжки між рядками й блоками. Він дає контенту повітря для читання й виділяє головне. Простір виникає тому, що щось навмисно прибрали, тож він виглядає преміально лише тоді, коли те, що лишилося, достатньо сильне, щоб на нього заслужити; інакше сторінка просто здається порожньою.
Детальніше: Чому деякі сайти виглядають дешево, навіть коли вони добре спроєктовані
- Мінімалізм у дизайні
Мінімалізм у дизайні це вилучення всього, що сторінці не потрібно, щоб те, що лишилося, було зрозумілим і спонукало до дії. Це не відсутність інформації, а відсутність зайвої інформації: спершу зрозуміти, що необхідно, і лише потім прибрати решту. Мінімалізм, який ховає те, по що прийшли люди, наприклад ціни, розміри чи умови доставки, знижує продажі. Невидимий дизайн, що дає змогу зосередитися на завданні, а не на інтерфейсі, близька, але інша ідея.
Детальніше: Дизайн, який не відчуваєш: чому найкращий дизайн зникає
- Акцентний колір
Акцентний колір це один яскравий або контрастний колір палітри, який залишають для того, що потребує уваги: головних кнопок, посилань і ключових виділень. Вебпалітра зазвичай складається з базового, темного, світлого й одного акцентного кольору плюс функціональних кольорів для помилок і підтверджень. Акцент, використаний скупо, веде погляд; використаний скрізь, він перестає щось означати. На дев'яти люксових сайтах, які ми вивчили, п'ять кнопок покупки були чорними або майже чорними, колір бренду жив у дрібних деталях, а колір на сторінку приносили фотографії.
Детальніше: Та сама машина в іншому кольорі це інша машина
- Перший екран (above the fold)
Перший екран (above the fold) це частина сторінки, яку видно без прокручування. На ньому відвідувач має зрозуміти, чим займається бізнес, для кого він і що робити далі. Лендинг без чіткого заклику до дії на першому екрані змушує відвідувачів із реклами шукати, куди натиснути. Соціальний доказ, наприклад рейтинг і кількість клієнтів, працює найкраще поруч із головною обіцянкою, а не за три прокручування нижче.
Детальніше: Редизайн сайту в Сіетлі | Сайти, що генерують ліди
- Hero-блок (головний банер)
Hero-блок, або головний банер, це великий перший блок сторінки, зазвичай заголовок із зображенням чи відео та головним закликом до дії. Він задає перше враження й історію, яку розповідає вся сторінка, тому має відповідати бізнесу: ефектна картинка може розповісти не ту історію, а клініці не варто ставити довгий фільм перед посиланням на запис. Відео з автозапуском віддає перше враження випадковому кадру, а один чіткий об'єкт на екран і далі одна з найсильніших композицій у люксі.
Детальніше: Чи потрібен сайту редизайн? Почніть з юзабіліті-аудиту
- Темна тема (dark mode)
Темна тема (dark mode) це колірна схема зі світлим текстом на темному тлі, яку пропонують як альтернативу стандартній світлій і часто вмикають автоматично за налаштуванням пристрою. У B2B SaaS, фінтеху та інструментах для творчої роботи це тепер рішення рівня дизайну: обидві теми проєктують від початку як частину дизайн-системи, а не отримують пізніше інверсією кольорів. Просто інвертовані теми зазвичай ламають контраст, тіні й зображення.
Детальніше: 7 трендів UX/UI дизайну що реально мають значення у 2026 році
- Стокові фото
Стокові фото це готові зображення, ліцензовані у фотобанків, а не зняті для конкретного бізнесу. Знеособлений сток робить добре структурований сайт дешевшим на вигляд, ніж простіший сайт із конкретними справжніми фотографіями: відвідувачі впізнають картинки й нічого не дізнаються про компанію. На одному сайті виробничої компанії сприйняття змінилося, щойно заглушки замінили фотографіями реальної роботи. В архітектурі й будівництві правило коротке: рендери обіцяють, фотографії доводять.
Детальніше: Чому деякі сайти виглядають дешево, навіть коли вони добре спроєктовані
- Арт-дирекшн
Арт-дирекшн це творче керівництво, яке задає візуальну мову бренду чи проєкту: ідею, настрій, палітру, композицію, фотографію й рух, а також те, як усе це служить повідомленню. Він зберігає єдність зображень, відео та інтерфейсу, коли їх створює багато людей та інструментів. Тепер, коли ШІ генерує зображення й відео, арт-дирекшн лишається людською частиною роботи: чіткий візуальний бриф, палітра й розуміння того, як рух служить бренду.
Детальніше: AI веб-дизайн та AI відеомонтаж для фронтенду | PERETZ.agency
- Мудборд
Мудборд це колаж візуальних референсів, наприклад зображень, кольорів, фактур і шрифтів, який допомагає домовитися про настрій і напрям дизайну до початку роботи. Це корисний інструмент для розмови, але не стратегія. Палітра, обрана за мудбордом або за улюбленим кольором засновника без погляду на категорію, поширена помилка. Брендинг з історією варто починати з діагностики бренду, а голос бренду описують у письмовому документі, а не на мудборді.
Детальніше: Коли бренд зникає, він справді мертвий?
- Ефект естетики та зручності (ефект ореолу)
Ефект естетики та зручності це схильність людей вважати привабливіші інтерфейси зручнішими, навіть якщо вони працюють точнісінько так само. У 1995 році Куросу й Кашимура з Hitachi протестували 26 інтерфейсів банкоматів з однаковими функціями й виявили, що гарніші оцінювали як зручніші. Привабливий дизайн змушує пробачати дрібні незручності, але той самий ефект ореолу може приховати слабкий бізнес за гарною оболонкою, тому тестування має дивитися глибше.
Детальніше: Як дизайн сайту впливає на сприйману цінність бренду
- Перше враження (50 мілісекунд)
Перше враження від сайту це оцінка його візуальної привабливості, яку відвідувач складає майже миттєво, ще нічого не прочитавши. Ліндгаард і колеги з Карлтонського університету 2006 року показали, що люди оцінюють візуальну привабливість вебсторінки приблизно за 50 мілісекунд, і ці оцінки тісно збігаються з оцінками, зробленими через 500 мілісекунд. Цей перший погляд забарвлює сприйняття всього іншого на сайті, включно з довірою до нього.
Детальніше: Як дизайн сайту впливає на сприйману цінність бренду
Взаємодія, анімація та ШІ-інтерфейси
Як інтерфейси відповідають, рухаються і дедалі частіше підлаштовуються самі за допомогою ШІ.
- Дизайн взаємодії
Дизайн взаємодії це частина UX, яка визначає, як продукт відповідає людині в кожній точці контакту: дотик, свайп, наведення, прокручування, введення тексту й голос. Він охоплює зворотний зв'язок, переходи, мікровзаємодії, тактильний відгук і стани інтерфейсу, зокрема ті, що підлаштовуються під поведінку в реальному часі. Добрий дизайн взаємодії робить причину й наслідок очевидними, тож користувач завжди розуміє, що сталося і що можна зробити далі.
Детальніше: Вплив UX/UI-дизайну на бізнес у 2026 році: чому це окупається
- Мікровзаємодії та анімація
Мікровзаємодії це невеликі одноцільові відповіді інтерфейсу на дію користувача, наприклад кнопка, що реагує на натискання, або поле, яке підтверджує коректне введення; анімація це рух, через який вони проявляються. Вони підтверджують дії й спрямовують увагу, і їх планують на етапі стратегії, а не додають як останній штрих. На дев'яти люксових сайтах, які ми виміряли, переходи кнопок тривали від 0 до 0,5 секунди: спокій створюють нерухома композиція й небагатослівність, а не повільна анімація.
Детальніше: 7 трендів UX/UI дизайну що реально мають значення у 2026 році
- 3D на сайті (WebGL, three.js)
3D на сайті це тривимірна графіка, яку браузер малює в реальному часі, зазвичай за допомогою WebGL і бібліотек на кшталт three.js, для показу товарів, інтерактивних сцен або вражаючих перших екранів. Вона робить бренд помітним, але вона важка: на телефонах без сильного графічного чипа сторінка гальмує або ламається. Коли ми перевірили перший екран на three.js на власному сайті, мобільний PageSpeed упав до 32; після того як сцену почали завантажувати лише там, де її може відмалювати графічний чип, а решті показувати легку версію, оцінка зросла до 78.
Детальніше: 3D на живому сайті: наш експеримент із three.js і що побачив Google
- AI у вебдизайні
AI у вебдизайні це застосування інструментів машинного навчання на всіх етапах дизайну: генерація варіантів компонування, перевірка колірних систем, чернетки текстів, відео для hero-блоків і перевірка доступності в реальному часі. Тепер ШІ працює й на рівні дизайн-системи: підтримує узгодженість токенів, документує компоненти й запускає візуальні регресійні тести. Він пришвидшує й здешевлює виробництво, але стратегія та арт-дирекшн лишаються за людьми: хтось однаково має вирішити, для чого потрібен інтерфейс.
Детальніше: AI веб-дизайн та AI відеомонтаж для фронтенду | PERETZ.agency
- Генеративний UI
Генеративний UI це інтерфейс, який ШІ збирає за описом природною мовою або за контекстом користувача, замість того щоб його заздалегідь проєктували екран за екраном. Сучасні платформи вже генерують готові до продакшену структури компонентів і адаптують їх під різні брейкпоінти. Наступне завдання дизайнерів: створити систему, з якої інтерфейси можна перескладати, щоб ШІ перебудовував досвід навколо кожної людини, зберігаючи бренд і правила.
Детальніше: AI веб-дизайн та AI відеомонтаж для фронтенду | PERETZ.agency
- Персоналізація UX
Персоналізація UX це підлаштування сайту чи застосунку під кожного відвідувача: пріоритет контенту, навігація й формулювання закликів до дії змінюються залежно від того, хто він і чого, судячи з усього, хоче. Системи машинного навчання тепер виводять намір із поведінки, виходячи за межі правил і A/B-тестів 2010-х. Для дизайнера одиницею роботи стають уже не сторінка й компонент, а контекст, намір і рішення.
Детальніше: AI веб-дизайн та AI відеомонтаж для фронтенду | PERETZ.agency
- Zero UI (інтерфейси без екрана)
Zero UI це підхід до проєктування інтерфейсів без екрана, де людина взаємодіє голосом, жестами або через оточення, як із голосовими асистентами й розумними пристроями. Спертися на візуальну ієрархію тут не можна, тому всю структуру несе інформаційна архітектура, і вона має бути настільки чіткою, щоб у ній можна було орієнтуватися, нічого не бачачи. Це корисне нагадування: будь-який інтерфейс робить зручним структура, а не декор.
Детальніше: 7 трендів UX/UI дизайну що реально мають значення у 2026 році
Юзабіліті, конверсія та тестування
Способи знайти, де люди застрягають і що перетворює візит на заявку чи продаж.
- Юзабіліті-аудит (usability audit)
Юзабіліті-аудит це експертна перевірка того, наскільки легко людям зробити на сайті чи в застосунку те, заради чого вони прийшли: навігація, структура, форми, швидкість завантаження, биті посилання та місця, де відвідувачі кидають розпочате. Підсумком стає список виправлень за пріоритетами, а не новий дизайн, тому аудит часто виявляється дешевшим першим кроком перед редизайном. Наш юзабіліті-аудит коштує від $1 500. Аудит триває один-два тижні, спирається на записи сесій, rage clicks і аналітику та завершується скриншотами з позначками й дзвінком із розбором.
Детальніше: Юзабіліті аудит
- Евристична оцінка
Евристична оцінка це експертна перевірка інтерфейсу за визнаними принципами юзабіліті (евристиками), як-от зрозумілий зворотний зв'язок, послідовність, запобігання помилкам і легке відновлення після них. Фахівці проходять навігацію, ієрархію сторінок, мобільну версію, швидкість завантаження, шляхи до конверсії, тертя у формах і ясність контенту. У поєднанні з аналітикою кожна знахідка спирається або на принцип, або на реальну поведінку відвідувачів, і переліку виправлень простіше довіряти й розставляти в ньому пріоритети.
Детальніше: Юзабіліті аудит
- Юзабіліті-тестування
Юзабіліті-тестування це спостереження за тим, як реальні користувачі намагаються виконати реальні завдання на сайті, у застосунку чи в прототипі, щоб побачити, де вони вагаються, помиляються або здаються. Воно виявляє проблеми, яких не бачить команда, що надто добре знає продукт. Nielsen Norman Group ще 2000 року показала, що п'ятеро користувачів одного типу знаходять близько 85% проблем юзабіліті, тому кілька невеликих раундів із правками між ними кращі за одне велике дослідження. Тест має сенс, лише якщо він може провалитися.
Детальніше: UI/UX Дизайн
- Теплові карти та карти кліків
Теплові карти й карти кліків це візуальні звіти, які показують, куди відвідувачі натискають, як далеко прокручують сторінку і де зупиняється їхня увага, за сумою багатьох сесій. Вони також виявляють rage clicks, повторні кліки по тому, що не реагує, і dead clicks по елементах, які не є посиланнями, наприклад у Microsoft Clarity. Теплові карти дають змогу спертися в редизайні на поведінку, а не на думки; вони доповнюють дизайнерське судження, а не замінюють його.
Детальніше: Чи потрібен сайту редизайн? Почніть з юзабіліті-аудиту
- Записи сесій
Записи сесій це повтори окремих візитів, які показують, як реальна людина рухала курсор, прокручувала, натискала й вводила текст на сайті. Аналітика каже, що сталося, запис показує, що людина робила, а юзабіліті-аналіз пояснює чому. Одного разу записи показали, що покупці користуються хлібними крихтами, які попередній дизайн прибрав заради вигляду. А ще вони часто показують, що інтерфейс можна лишити, а замінити треба код під ним.
Детальніше: Чи потрібен сайту редизайн? Почніть з юзабіліті-аудиту
- Тертя в UX (UX friction)
Тертя в UX (UX friction) це відстань між тим, що людина прийшла зробити, і тим, що інтерфейс змушує її зробити на шляху до мети. Погане тертя це зламаний пошук, незрозумілі умови доставки й зайві поля під час оформлення замовлення, і кожне з них коштує конверсій. Частина тертя навмисна, наприклад підтвердження оплати, а в люксі час, витрачений на те, щоб роздивитися виріб з усіх боків, прочитати про його походження чи подивитися, як його робили, і створює бажання.
Детальніше: Чому luxury e-commerce порушує всі правила conversion optimization
- Когнітивне навантаження
Когнітивне навантаження це обсяг розумових зусиль, яких інтерфейс вимагає від людини, щоб його зрозуміти й ухвалити рішення. Кожен елемент без мети, кожна зайва опція й кожен незрозумілий підпис його збільшують, а перевантажений відвідувач відкладає рішення або йде. Практичне правило: одне чітке повідомлення й одна головна дія на екран і однакові патерни, щоб не доводилося заново опановувати інтерфейс на кожній сторінці.
Детальніше: 7 трендів UX/UI дизайну що реально мають значення у 2026 році
- Заклик до дії (CTA)
Заклик до дії (CTA, call to action) це елемент, зазвичай кнопка чи посилання, який каже відвідувачу, що робити далі: запросити розрахунок, записатися на дзвінок, купити. Розмиті CTA на кшталт «Дізнатися більше» змушують відвідувача думати більше, а конкретні дії з низьким ризиком на кшталт «Записатися на безкоштовну консультацію» отримують більше кліків. У люксі «Дізнатися про наявність» або «Записатися на приватний показ» замінюють «Купити», коли товар потребує огляду чи поради. CTA, що розчиняється в сторінці, не делікатний, а невидимий.
Детальніше: Чому ваш бізнес не отримує лідів з сайту (і як це виправити у 2026-му)
- Оптимізація форм
Оптимізація форм це зменшення зусиль, яких вимагає форма, щоб більше людей, які почали її заповнювати, доходили до надсилання. Кожне зайве поле це привід кинути: ім'я, email і одне уточнювальне питання зазвичай працюють краще за форму з десяти полів, а одна стоматологія, що скоротила форму з дев'яти полів до імені, телефону й зручного часу, отримала більше надісланих заявок. Важливий показник: скільки людей почали форму і скільки надіслали. В інтернет-магазині та сама проблема проявляється як тертя під час оформлення замовлення.
Детальніше: Редизайн сайту в Сіетлі | Сайти, що генерують ліди
- Сигнали довіри (соціальний доказ)
Сигнали довіри це елементи, які дають відвідувачу перевірювані причини повірити бізнесу: проєкти, відгуки, рейтинги, цифри, сертифікати й імена клієнтів у момент ухвалення рішення. Значки самі по собі довіри не створюють, її створюють твердження, які можна перевірити. Дизайн теж сигнал: у дослідженні Стенфордської лабораторії технологій переконання за участю понад 4 500 людей 46,1% сказали, що візуальний дизайн впливав на те, наскільки надійним їм здавався сайт. Одна компанія із сотнями відгуків у Google отримала більше заявок, коли ці відгуки з'явилися на її власному сайті.
Детальніше: Чому ваш бізнес не отримує лідів з сайту (і як це виправити у 2026-му)
- Закріплена кнопка покупки (sticky CTA)
Закріплена кнопка покупки (sticky CTA) це кнопка заклику до дії, яка лишається на екрані під час прокручування, найчастіше ціна й кнопка покупки на мобільній картці товару. Вона тримає головну дію під рукою на довгих сторінках; в одному редизайні магазину її запровадили тому, що 76% замовлень надходили з телефонів. Перевіряти її треба разом з усім, що плаває над сторінкою: на трьох із дев'яти вивчених нами люксових сайтів чат, кнопки допомоги або віджети доступності перекривали мобільну панель покупки.
Детальніше: Ми виміряли дев'ять сайтів люксових брендів. Ось що в їхньому дизайні працює
- Поп-апи та плаваючі віджети
Поп-апи й плаваючі віджети це елементи, що з'являються поверх контенту сторінки: вікна підписки та знижок, банери cookie, чати й кнопки допомоги. Кожен окремо може бути виправданим, але додані різними командами, вони рідко перевіряються разом на екрані телефона завширшки 390 пікселів, де закривають товари й кнопки. Вікно підписки чи знижки поверх товару заважає не лише людям, а й ШІ-агентам для покупок, які намагаються прочитати сторінку.
Детальніше: Ми виміряли дев'ять сайтів люксових брендів. Ось що в їхньому дизайні працює
- Сприйнята швидкість
Сприйнята швидкість це те, наскільки швидким сайт здається відвідувачу, і залежить вона не лише від часу завантаження, а й від того, що з'являється першим, чи зсувається макет і чи одразу сторінка відгукується. Швидкість це рішення UX: за даними Aberdeen Group, затримка в одну секунду знижувала конверсію приблизно на 7%. Сторінка, яка зволікає, стрибає під час завантаження чи проявляє картинки частинами, дещо каже про бізнес; в одному магазині блок ціни завантажувався після кнопки покупки й зсував її, тож перший клік влучав повз.
Детальніше: Чому деякі сайти виглядають дешево, навіть коли вони добре спроєктовані
Доступність, мобільні та мови
Дизайн, що працює для кожної людини, кожного екрана й кожної мови сайту.
- Вебдоступність
Вебдоступність це практика проєктування й розробки сайтів, якими можуть користуватися люди з порушеннями зору, слуху, моторики чи когнітивних функцій, часто за допомогою допоміжних технологій на кшталт екранних читачів. Їй місце в дизайні й розробці, а не в чек-листі після запуску: високий контраст, навігація з клавіатури, справжні заголовки, підписані поля форм, текстові альтернативи для зображень і режим зменшення руху зручні всім і допомагають машинам читати сторінку. Для сайту однієї федерації ми зробили окремий режим для людей із порушеннями зору.
Детальніше: Сайт для архітектурного бюро: що клієнти дивляться, перш ніж зателефонувати
- WCAG 2.2
WCAG 2.2 (Web Content Accessibility Guidelines) це версія міжнародного стандарту вебдоступності, яку W3C опублікував у жовтні 2023 року, з критеріями успіху рівнів A, AA і AAA. Рівень AA, звичайна ціль, вимагає контрасту щонайменше 4,5:1 для звичайного тексту і 3:1 для великого тексту та елементів інтерфейсу, а також зон натискання щонайменше 24 на 24 CSS-пікселі. Відповідність стандарту це мінімум, а не стеля: сайт може пройти всі перевірки й однаково лишатися незручним.
Детальніше: Дизайн сайтів
- Відповідність сайту ADA
Відповідність сайту ADA означає, що сайт доступний людям з інвалідністю відповідно до Americans with Disabilities Act, американського закону про громадянські права. У роз'ясненнях березня 2022 року Міністерство юстиції США зазначило, що ADA поширюється на те, що відкритий для публіки бізнес пропонує в інтернеті; детального технічного правила закон не встановлює, а WCAG називає корисним орієнтиром. Позови щодо доступності сайтів у США звичайна справа, тож для бізнесу, що працює з американським ринком, доступність це не лише питання UX, а й юридичне.
Детальніше: UI/UX Дизайн
- Контрастність кольору (contrast ratio)
Контрастність кольору (contrast ratio) це виміряна різниця яскравості між текстом чи елементом інтерфейсу та його тлом, виражена в діапазоні від 1:1 (контрасту немає) до 21:1 (чорне на білому). WCAG вимагає щонайменше 4,5:1 для звичайного тексту. Низький контраст ховає навіть найважливіші кнопки: в одного люксового дому кнопка замовлення телефоном була чорною на тлі #222222, приблизно 1,3:1. Палітру, яка не проходить за цифрами, неможливо виправити в коді без зміни дизайну, тому контраст перевіряють уже під час вибору палітри.
Детальніше: Ми виміряли дев'ять сайтів люксових брендів. Ось що в їхньому дизайні працює
- Alt-текст (альтернативний текст)
Alt-текст (альтернативний текст) це короткий текстовий опис зображення в коді сторінки, який зачитують екранні читачі і за яким пошуковики та ШІ-системи розуміють, що на картинці. WCAG вимагає текстових альтернатив для значущих зображень, а пошук за картинками сам по собі приводить відвідувачів. Корисний alt описує конкретний знімок, наприклад «вітальня приватного будинку зі скляною стіною», а не повторює ключове слово чи назву файлу.
Детальніше: Сайт для архітектурного бюро: що клієнти дивляться, перш ніж зателефонувати
- Доступна автентифікація (WCAG 2.2)
Доступна автентифікація це вимога WCAG 2.2 (рівень AA): вхід у систему не має залежати від перевірки пам'яті чи головоломки, якщо немає альтернативи, тому менеджери паролів і вставлення з буфера мають працювати. WCAG 2.2 додав і пов'язані правила для форм і керування: користувачу не треба заново вводити вже зазначені дані (рівень A), а дії перетягування мають мати альтернативу одним натисканням (рівень AA). Ці правила допомагають усім, а не лише людям з інвалідністю.
Детальніше: UI/UX Дизайн
- Розмір зони дотику
Розмір зони дотику це розмір області, яка реагує на натискання пальцем, і вона може бути більшою за видиму іконку чи текст. Рекомендації Apple за замовчуванням 44 на 44 пункти, Android щонайменше 48 на 48 dp, WCAG 2.2 щонайменше 24 на 24 CSS-пікселі, якщо цілі не рознесені. Ціль, зручна для миші чи тачпада, часто замала для великого пальця, а це промахи й роздратування на телефонах.
Детальніше: UI/UX Дизайн
- Зменшення руху (reduced motion)
Зменшення руху (reduced motion) це налаштування операційної системи для людей, чутливих до анімації, яке сайт може розпізнати через медіазапит prefers-reduced-motion. Уважний до відвідувачів сайт його поважає: пом'якшує або вимикає паралакс, великі переходи й рухомі сцени. На нашому сайті відвідувачі з цим налаштуванням бачать легкий перший екран без 3D-сцени.
Детальніше: 3D на живому сайті: наш експеримент із three.js і що побачив Google
- Mobile-first дизайн
Mobile-first дизайн це підхід, за якого спершу проєктують для телефона, а потім розширюють макет до планшета й десктопа, замість того щоб стискати десктопний дизайн. Для більшості сайтів мобільний досвід основний: якщо 65% відвідувачів заходять із телефонів, дизайн під десктоп із доробкою мобільної версії потім оптимізує сайт під меншість. Основа: кнопки в зоні великого пальця, дзвінок одним дотиком і форми, які не треба збільшувати, а в магазині каталог, фільтри, картка товару, кошик і оформлення замовлення проєктуються спершу для телефона.
Детальніше: Редизайн сайту в Сіетлі | Сайти, що генерують ліди
- Адаптивний дизайн (брейкпоінти)
Адаптивний дизайн це підхід, за якого один сайт підлаштовує макет під екран, на якому його дивляться, перебудовуючи колонки, зображення й навігацію на заданих значеннях ширини, брейкпоінтах, для телефонів, планшетів і десктопів. Так одна кодова база й одна адреса обслуговують усі пристрої. Адаптивний сайт не те саме, що мобільний застосунок, а добра мобільна версія проєктується, а не просто стискається. ШІ-інструменти вже вміють автоматично адаптувати структури під брейкпоінти.
Детальніше: AI веб-дизайн та AI відеомонтаж для фронтенду | PERETZ.agency
- Дзвінок одним дотиком (click-to-call)
Дзвінок одним дотиком (click-to-call) це номер телефону на сайті чи в рекламі, за яким на мобільному пристрої дзвінок починається одним натисканням. Для сервісного бізнесу це одна з мобільних основ поряд із кнопками в зоні великого пальця й короткими формами. Номер, показаний простим текстом або картинкою, на який не можна натиснути, один із тихих способів утратити заявку саме тоді, коли відвідувач готовий діяти.
Детальніше: Редизайн сайту в Сіетлі | Сайти, що генерують ліди
- Гайдлайни платформ (iOS і Material Design)
Гайдлайни платформ це офіційні правила дизайну мобільних операційних систем: Human Interface Guidelines від Apple для iOS і Material Design від Google для Android. Користувачі чекають, що застосунок для iOS поводитиметься як інші застосунки для iOS, а застосунок для Android як інші застосунки для Android, тож боротьба з цими домовленостями створює тертя. Дотримуючись їх, продукт отримує основу на кшталт зон натискання під палець і важливих дій у зоні досяжності, але стани помилок і роботи без мережі однаково треба проєктувати для кожного продукту.
Детальніше: Коли бізнесу реально потрібен мобільний застосунок?
- Багатомовний сайт
Багатомовний сайт це сайт, що обслуговує відвідувачів кількома мовами, в ідеалі як єдина система, адаптована до різних аудиторій, ринків і процесів роботи з контентом, а не один дизайн, перекладений кілька разів. Структура й бренд лишаються спільними, а контент, макет, типографіка, зображення, навігація та бізнес-правила можуть змінюватися. Кожен додатковий ринок додає приблизно 10-30% до дизайну й розробки та 20-30% до пошукової роботи, тому дві добре підтримувані версії кращі за п'ять занедбаних. Наш власний сайт працює англійською, російською та українською, і кожну версію спроєктовано окремо.
Детальніше: Дизайн багатомовного сайту: що змінюється, крім перекладу
- Перемикач мов
Перемикач мов це елемент, який дає відвідувачу змогу переходити між мовними версіями сайту, в ідеалі на ту саму сторінку, а не на головну. Зазвичай сайти пропонують вибір регіону під час першого візиту, мову за замовчуванням для основного ринку або версію, підказану за місцезнаходженням, але відвідувач завжди має мати змогу змінити мову. Google не радить автоматично перенаправляти за мовою і називає визначення місцезнаходження за IP ненадійним: пропонуйте версію, пов'язуйте відповідники посиланнями й тримайте перемикач на виду.
Детальніше: Чому мультимовні сайти потребують іншого підходу до дизайну
- RTL-верстка (справа наліво)
RTL-верстка (right to left) це дзеркальна версія сайту для мов, які пишуться справа наліво, наприклад арабської. Навігація, порядок колонок, стрілки, слайдери, іконки й форми віддзеркалюються, а числа, латинські назви брендів і артикули й далі йдуть зліва направо, і шрифти добирають заново. Для цього потрібен був окремий дзеркальний дизайн, а не просте перемикання, тому арабська версія потрапляє у верхню частину діапазону в 10-30% додаткового бюджету на кожен ринок.
Детальніше: Вихід українського бізнесу на ринок ОАЕ: digital під ключ
- Розширення тексту під час перекладу
Розширення тексту під час перекладу це зростання довжини тексту інтерфейсу під час перекладу з англійської іншою мовою. Українська й російська зазвичай на 15-25% довші: «Book a Call» українською стає «Записатися на дзвінок», це майже вдвічі більше символів. Кнопки, меню й заголовки, які ідеально вміщаються англійською, починають переноситися або ламатися, тому кожен компонент треба перевіряти на найдовшій мові до затвердження дизайну.
Детальніше: Чому мультимовні сайти потребують іншого підходу до дизайну
- Типографіка для різних писемностей (кирилиця, арабське письмо)
Типографіка для різних писемностей це добір і набір шрифтів для кожної системи письма на сайті, наприклад латиниці, кирилиці чи арабського письма, без розрахунку на те, що один шрифт підійде всюди. Шрифт із чудовою латиницею може мати слабку кирилицю, і навпаки. Кожна писемність має власні лапки, тире й комфортну довжину рядка, а китайській мові з її щільнішими знаками потрібна ще й інша довжина рядка.
Детальніше: Чому мультимовні сайти потребують іншого підходу до дизайну
- Культурна адаптація дизайну
Культурна адаптація дизайну це налаштування сайту чи продукту під культуру кожного ринку поза межами перекладу: метафори, свята, фотографії, те, який соціальний доказ переконує, і наскільки прямим може бути тон. Те, що викликає довіру на одному ринку, на іншому може здатися нав'язливим або холодним. Глобальна дизайн-система дає єдину основу й лишає місце для власного контенту та зображень кожного ринку.
Детальніше: Чому мультимовні сайти потребують іншого підходу до дизайну
Типи сайтів і редизайн
Які сайти замовляє бізнес і коли їх варто перемалювати, перебудувати або зробити заново.
- Дизайн сайту
Дизайн сайту це опрацювання структури й зовнішнього вигляду сайту настільки докладно, щоб його можна було зібрати: карта сторінок, вайрфрейми кожного шаблону, ключові сторінки для десктопа й мобільних, дизайн-система та передача в розробку. Якщо замовляти його окремо від розробки, архітектурні рішення пізніше може ухвалити хтось інший. Наш дизайн сайту коштує від $8 000; ціна залежить від кількості мов і ринків, наявності айдентики, того, скільки компонентів і станів охоплює система, та готовності текстів і фотографій.
Детальніше: Дизайн сайтів
- Лендинг (landing page)
Лендинг це одна вебсторінка, побудована навколо однієї пропозиції та однієї дії, наприклад заявки, запису чи купівлі, зазвичай як точка приземлення рекламної або поштової кампанії. Усе на ній працює на це рішення, і того, що відволікає, на ній мінімум. Коли реклама приносить кліки, але не заявки, проблема часто саме в сторінці, куди веде оголошення. Наші лендинги коштують від $4 000.
Детальніше: Landing page
- Корпоративний сайт
Корпоративний сайт це основний сайт компанії, де вона пояснює, чим займається, для кого і чому їй можна довіряти. Він пасує бізнесу з кількома послугами чи аудиторіями і зазвичай містить кейси, кілька мов і заявки, які одразу потрапляють у CRM. Це проєкт більший за лендинг: у нас корпоративний сайт коштує $20 000-40 000.
Детальніше: Корпоративні сайти
- Сайт для лідогенерації
Сайт для лідогенерації це сайт, побудований як інструмент бізнесу, головне завдання якого перетворювати відвідувачів на заявки, дзвінки чи записи, а не цифрова брошура. Він може втрачати заявки у трьох місцях: охоплення, коли трафік не той або його мало; розуміння, коли відвідувач не розуміє пропозиції; і дія, коли наступний крок неясний, доказів немає, форма довга або на номер телефону не можна натиснути. Кожна з цих проблем лікується по-своєму, тому діагноз іде раніше за редизайн.
Детальніше: Редизайн сайту в Сіетлі | Сайти, що генерують ліди
- Шаблонний сайт та індивідуальний сайт
Шаблонний сайт будують на готовій темі або конструкторі, а індивідуальний проєктують і розробляють під конкретний бізнес, його структуру й цілі. Шаблони підходять для перевірки ідеї, портфоліо й зовсім маленьких локальних компаній; індивідуальний сайт потрібен, щоб конкурувати в пошуку, отримувати заявки чи залучати дорогих клієнтів, адже шаблонні й згенеровані за промптом сайти роблять компанії однієї галузі схожими між собою. У США 2026 року конструктори коштують $20-80 на місяць, фрилансери $1 500-6 000, а індивідуальні сайти від агенцій $15 000-50 000 і більше.
Детальніше: Скільки коштує сайт у Сіетлі у 2026 році?
- Редизайн сайту
Редизайн сайту це новий дизайн, а часто й нова структура наявного сайту зі збереженням домену, контенту й пошукового авторитету. Це правильний вибір, коли фундамент здоровий: є видимість у пошуку, надійна CMS, логічна структура й добра швидкість. Якщо будь-яка зміна потребує розробника, а платформа повільна й крихка, кращим може виявитися новий сайт, а редизайн лише тому, що сайт виглядає застарілим, не стратегія. У США редизайн зазвичай коштує $5 000-15 000 і триває 6-12 тижнів.
Детальніше: Редизайн сайту в Сіетлі | Сайти, що генерують ліди
- Реструктуризація сайту
Реструктуризація сайту це зміна того, які сторінки є на сайті, навіщо вони існують, у якому порядку йдуть і чи підказують відвідувачу, що робити далі, причому зовнішній вигляд може лишитися тим самим. Редизайн змінює те, як сайт виглядає, реструктуризація змінює те, чи він працює. В одному наведеному випадку перебудова повідомлень і структури підняла кількість якісних заявок на 34% за квартал, а візуальний редизайн із тим самим позиціонуванням цього не дав.
Детальніше: Більшості компаній потрібний не новий сайт, а нова структура
- Сторінка кейсу
Сторінка кейсу розповідає історію одного проєкту: завдання, обмеження, ключові рішення, обсяг робіт і результат, із планами й фотографіями, а не лише з рендерами. У візуальних галузях найкраще переконують етапи «до і після», що пояснюють кожне рішення, адже рендери обіцяють, а фотографії доводять. Клієнти одразу йдуть до проєктів зі своєї ніші, тому портфоліо потрібні фільтри за типом проєкту, а в кожному кейсі варто вказати людей, які справді вели роботу.
Детальніше: Сайт для архітектурного бюро: що клієнти дивляться, перш ніж зателефонувати
- UX люксового інтернет-магазину
UX люксового інтернет-магазину це проєктування онлайн-магазинів для преміальних брендів, де сам досвід покупки стає частиною продукту, а стандартні правила конверсії часто не працюють. Люксовий сайт може навмисно сповільнювати відвідувача, використовувати багато порожнього простору чи нестандартну навігацію; порушення звичного правила тут буває правильним рішенням. Повільні переходи й відео належать бренду, але повний текст про матеріали й розміри має бути в HTML з першого завантаження. На дев'яти люксових сайтах шість із восьми кнопок покупки мали прямі кути, і жодна не використовувала заокруглену кнопку-пігулку масових магазинів.
Детальніше: Чому luxury e-commerce порушує всі правила conversion optimization
- UX-дизайн інтернет-магазину
UX-дизайн інтернет-магазину це проєктування цифрового шару торговельного бізнесу, його об'єктів, зв'язків, шляхів клієнтів і рішень, а не просто набору сторінок магазину. Навігація слідує тому, як клієнти справді купують: ювелірному дому, організованому і за категоріями товарів, і за колекціями, потрібна навігація, що підтримує обидва шляхи. Магазин, який продає двом аудиторіям, наприклад архітекторам і дизайнерам поряд із приватними покупцями, дає кожній окремий вхід.
Детальніше: Як ми проєктуємо e-commerce: від об'єктів до досвіду
Інші теми
Глосарій
Хочете розібрати термін на прикладі свого проєкту?
Приходьте на стратегічну сесію. За дві години ми подивимося на ваш бізнес цілком і простими словами пояснимо, що кожне технічне чи маркетингове рішення означає саме для нього. Сесія коштує $500, і ця сума зараховується в проєкт, розпочатий протягом 30 днів.