Малий лексикон UX-UI (частина 2)

 

 Щодня за завданням мені доводиться обмінюватися з різними учасниками проекту. Залежно від посади та інтересу до дисципліни дизайну UX-UI, кожен має різні знання про використовувані терміни.

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

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

Ми почали серію минулого місяця з першої частини, продовжуємо її наступними 19 поняттями.

#1 _Типи сторінок і екранів

Шаблон (шаблон, макет англійською)

Шаблон служить довідковим документом, який використовує ту саму структуру елементів, які його складають.

Наприклад, на сайті ЗМІ ми створимо стандартну сторінку для статей, які будуть щоразу повторюватися. Текст і зображення матимуть своє відведене місце.

Заставка

Це екран, який відображається під час відкриття програми або під час завантаження даних на екран.

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

На борту

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

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

Цільова сторінка

Цільова сторінка – це певна веб-сторінка. Користувач отримує доступ до нього після натискання, наприклад, реклами або кнопки дії. Його мета полягає в розгортанні маркетингової кампанії для просування продукту або послуги.

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

#2 _Наскрізні організації

Header

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

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

Нижній колонтитул

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

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

Панірувальні сухарі

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

прапор героя

Головний банер – це частина веб-сторінки, яка займає всю ширину екрана.

Його часто використовують у верхній частині сторінки, щоб надихнути користувача та створити всесвіт.

#3 _Ідентичність бренду

Логотип

Логотип відповідає назві компанії, яка графічно її представляє.

Ми часто будемо використовувати шрифт або форми, які будемо налаштовувати, щоб передати ідентичність і цінності компанії.

Логотип Google

Логотип (= значок французькою мовою)

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

Ми часто використовуємо дуже виразну піктограму, яка дозволить читачеві визначити природу компанії. Крім того, часто саме логотип використовується на предметах (смаколиках), одязі та інших рекламних елементах.

Знак логотипу Google

логотип

Логотип відноситься до всіх типів емблем, які можуть представляти бренд. Отже, як логотипи, так і логотипи.

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

Логотип UX Republic

Favicon

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

Палітра кольорів

Кольорову палітру прийнято ділити на кілька груп:

● Основні та додаткові кольори

● Відтінки сірого

● Кольори стану (успіх, попередження тощо)

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

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

 

#4 _Типографія

Поліція

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

Шрифт має 5 характеристик, які можна змінювати індивідуально:

● сім'я

● жир

● форма або стиль

● розмір (тіло)

● регістр (великі, малі)

Шрифти

Це набір символів одного шрифту, однакового сімейства, однакової ваги, однакового розміру та однакової форми. Наприклад, в UX Republic ми використовуємо шрифт Montserrat.

Типографські сімейства

Є 5 сімей:

●  Засічки: який включає шрифти із засічками (приклади: Times New Roman, Georgia, Garamond…)

●  Без зарубок : або шрифти без зарубок (наприклад, Helvetica, Montserrat, Myriad…)

●  Курсив: які шрифти імітують рукописне введення (наприклад: Lucida Handwriting, а також Comic Sans MS (і так!))

●  фантазія: більш екзотичні, декоративні шрифти (наприклад, Impact, Fraktur…)

●  MPV: шрифти фіксованої ширини (ширина використовується для кожного символу) (наприклад, Courier New, Lucida Console тощо)

# Висновок

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

Якщо ви коли-небудь пропустили першу частину цієї серії, я запрошую вас проконсультуватися це посилання.

Якщо ви колись захочете поглибити свої знання та попрактикуватися в дизайні веб-інтерфейсу, навчальний центр UX Republic пропонує тренінг «UI Design, the fundamentals». Ось посилання для отримання додаткової інформації.

 

 

Алекса КУЕЛЛАР, дизайнер UX @UX-Republic

Джерела зображень:
– https://undraw.co/

Наші наступні тренування