Головна » Блог » CRO | Юзабіліті і підвищення конверсії сайту » Як маркетологу знайти спільну мову з веб-дизайнером: вивчаємо UX/UI термінологію

Як маркетологу знайти спільну мову з веб-дизайнером: вивчаємо UX/UI термінологію

30.12.2022

Таня Шевченко


Без якісного веб-дизайну при digital-просуванні не обійтись. Розробка landing page, підвищення юзабіліті сайту за допомогою графічних елементів, рішення інших важливих «візуальних» задач вимагають залучення досвідченого UX/UI дизайнера. Під час обговорення проєкту, питання та уточнення фахівця маркетологам-новачкам можуть нагадувати рандомні набори літер. Щоб краще зрозуміти спеціаліста можна скористатись Google для кожного окремого слова та витратити години на освоєння нових виразів, а можна ознайомитись з нашим словником, в якому ми розкрили таємниці термінології професійних веб-дизайнерів.

Пропонуємо добірку найпопулярніших висловів, які полегшать комунікацію із UI/UX-розробником.

 

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

Акордеон-меню список із додатковими прихованими вкладками, які можна переглянути при натисканні на елемент.

Акордеон-меню

 

Альт-бургер-меню — елемент навігації у вигляді двох горизонтальних смужок для відображення більш детальної інформації на сайті. 

Апрув — з англ. to approve — схвалювати — наприклад, затвердити проміжний чи остаточний варіант макету з замовником

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

Бенто-меню елемент інтерфейсу у вигляді 9 міні-квадратів, при натисканні на них можна переглянути повну версію меню. Часто застосовується у додатках.

Беха популярна серед дизайнерів та ілюстраторів платформа Behance.

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

Вайрфрейм

 



 

Викатувати — розмістити будь-яку нову інформацію на сайті у фінальній чи бета-версії. Приклад вживання: «Учора ми викатили нову версію сайту»

Відкатувати — видалити зміни, повернути попередню версію сайту, наприклад через невдале оновлення. 

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

Дропдаун меню — випадаюче меню для обрання потрібного розділу на сайті.

Дьонер-меню на відміну від «гамбургера» представляє собою три смужки різної довжини. 

Ітерація — ряд правок, які мають бути висвітлені в рамках одного проміжного обговорення проєкту, або вказані в одному документі. Як правило, кількість ітерацій з’ясовується на початку співпраці — усно або письмово в договорі. Наприклад, замовник може двічі або тричі запропонувати перелік рекомендацій, які потрібно внести.

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

Карусель

Джерело: https://atl.ua/

 

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

Колор пікер (color picker) — палітра кольорів.

Колор Пікер

 

Лінія згину — ділянка між першим екраном та невидимою частиною сайту відразу при його відкритті, яка відображається лише після прокрутки сторінки.

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

Макет — готовий візуальний образ сайту в реальному розмірі, розроблений з урахуванням технічних можливостей HTML-верстки. На макеті може демонструватись як сайт загалом, так і його окремі елементи. 

Мітбол-меню — три горизонтальних крапки для відкриття додаткових параметрів на мобільній версії сайту чи в застосунку

Інтерфейс-меню

Джерело: https://www.waqart.com/

 

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

Негативний простір — порожній простір навколо об’єктів на веб-сторінці чи окремому зображені. Може бути використаний, щоб надати композиції мінімалістичного вигляду. Часто застосовується при створенні логотипів.

Пагінація — розподілення великого обсягу даних на окремі сторінки в межах одного розділу.

Пагінація

 

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

Паттерн — повторюваний згідно з певними правилами графічний елемент. Впроваджується при створенні фірмового стилю для підвищення впізнаваності бренду.

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

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

Прапорець (або тумблер) — перемикач параметрів, який дозволяє обрати або навпаки вимкнути певну опцію на сайті. Як правило, застосовується для підтвердження чи відхилення певних дій. Приклад тумблеру — знак «✓» напроти напису «надсилати новини» або «перетелефонувати для підтвердження замовлення».

Прогрес-бар — елемент інтерфейсу для відображення етапу завантаження даних.

Прогрес-бар

 

Прототип — більш пропрацьована (на відміну від вайрфрейму та майндмепу) схема ​​всіх або декількох сторінок сайту у вигляді ескізу або html-документа, де показана вся структура (меню, кнопки, форми), а також додані тексти, але без дизайну.

Растр — зображення, що складається з пікселів — мініатюрних кольорових точок. Якщо ви маштабуєте картинку, то побачите щось подібне мозаїці. З растровими зображеннями працюють в Adobe Photoshop.

Реліз — остаточне затвердження та розміщення фінальної версії дизайну на сайті.

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

Сайдбар — бокова панель сайту, візуально розмежена з контентом на сторінці. Призначена для кращого сприйняття контенту на сайті. Ширина бокової панелі зазвичай значно менше ширини основного блоку з контентом. Яскравий приклад сайдбара — перелік категорій товарів в інтернет-магазині.

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

Сітка — вертикальні та горизонтальні лінії, які розділяють сторінку на прямокутники. Сітка допомагає визначити, як буде виглядати макет та де краще розташовувати окремі елементи (заголовоки, тексти).

Сітка

 



 

Степпер — елемент управління, який дозволяє користувачам змінювати значення в певних діапазонах. Вдалий приклад степпера — кількість одиниць певного товару, доданого до кошика на сайті. 

Текстури повторювані, часто ледь помітні лінії, фігури, малюнки для створення певної атмосфери на сайті. Здебільшого використовуються як фон.

Темплейт — зразок, за яким створюються графічні елементи веб-сторінки.

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

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

ФІД — вимірювач часу від початку першої взаємодії користувача з веб-сторінкою (наприклад коли він натискає на посилання) до моменту «відгуку» браузера на здійснену відвідувачем дію. Оптимальний показник FID — 100 мілісекунд. 

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

Хедер або «шапка» — верхня частина сайту із лого, основними елементами навігації, «перемикачем» мови, контактними даними. 

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

Шакал — неякісне зображення з низькою роздільною здатністю.

Хлібні крихти

Хлібні крихти

Последние материалы рубрики

«Вітамінізований кейс», або Як за допомогою структурованого сайту та ребрендингу просувати екопродукцію: історія компанії VitaminBox

«Вітамінізований кейс», або Як за допомогою...

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

Аудит Google Ads

Аудит Google Ads: на що звернути увагу маркетологу?

Що таке аудит Google Ads? Які задачі виконує та як правильно провести аналіз облікового запису?

Оголошення Google Local Inventory Ads

Оголошення Google Local Inventory Ads: як вони працюють та кому...

Оголошення Google Local Inventory Ads — ефективний спосіб просування в інтернеті фізичних торгових точок. Про переваги та недоліки LIA, а також...

Аналоги Canva

Аналоги Canva: 8 зручних онлайн-сервісів для роботи з...

Графічний онлайн-редактор Canva — справжній фаворит багатьох digital-фахівців, які працюють із зображеннями чи презентаціями. Зважаючи на...

Підпишіться на нашу розсилку
Будьте в курсі останніх новин та спецпропозицій
Підписка на розсилку в Telegram
Залишились питання?
Наші експерти готові відповісти на них

 

Зв’яжіться за вказаним нижче телефоном з нашим менеджером або скористайтеся послугою «Зателефонуйте мені». Ми зв’яжемося з вами найближчим часом.

Виконують всі задачі, досягаючи кращих КРІ
Рекомендую Webpromo як надійних партнерів
Кратно зросли показники приросту органічного трафіку
Серед багатьох ми обрали Webpromo
Кожен в команді— майстер своєї справи
Ціную Webpromo за гнучкість
Команда Webpromo - це продовження нашого відділу маркетингу
Спокійний за просування своїх проєктів в інтернеті

Ми використовуємо cookie-файли для надання найбільш актуальної інформації.

Продовжуючи використовувати сайт, Ви погоджуєтесь з використанням файлів cookie.

Політика конфіденційності