Що таке UI (користувацький інтерфейс)?

UI (User Interface) — це візуальна частина продукту, через яку людина з ним взаємодіє: екрани, кнопки, поля, іконки, шрифти, кольори та відступи. UI-дизайнер відповідає за те, як продукт виглядає і як виглядають його стани.

Робота над UI — це не лише естетика. Розмір кнопки впливає на те, чи влучить у неї палець, контраст тексту — на читабельність, єдині відступи — на відчуття порядку. Дизайнер опрацьовує не тільки «як є», а й усі стани: порожній екран, завантаження, помилку, довгий текст.

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

UI та UX — у чому різниця

UI — це те, як продукт виглядає: конкретні екрани та елементи. UX — те, як ним користуються: логіка шляху, кількість кроків, зрозумілість і відсутність глухих кутів. Красивий інтерфейс із заплутаним сценарієм — хороший UI і поганий UX. На невеликих проєктах обидві ролі часто поєднує одна людина.

Повʼязані терміни

UX (User Experience) — це весь досвід людини під час використання продукту: наскільки зрозуміло, де міститься потрібне, скільки кроків займає задача, що відбувається при помилці й чи залишається відчуття, що ціль досягнута без зайвих зусиль.

Figma

Figma — онлайн-редактор для дизайну інтерфейсів. У ньому малюють макети сайтів і застосунків, збирають клікабельні прототипи та передають роботу розробникам, а кілька людей можуть правити один файл одночасно прямо у браузері.

Design System

Дизайн-система — єдиний набір правил і готових компонентів продукту: палітра, типографіка, відступи, кнопки, поля, картки, а також опис того, коли і як їх застосовувати. Вона існує одночасно в макетах і в коді.

CSS

CSS (Cascading Style Sheets) — мова опису зовнішнього вигляду сторінки: кольори, шрифти, відступи, розташування блоків і поведінка верстки на різних розмірах екрана. HTML задає, що є на сторінці, CSS — як це виглядає.

Frontend

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