Что такое 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 — это часть сайта или приложения, которая выполняется в браузере пользователя: вёрстка, стили, анимации и вся логика интерфейса. Всё, что человек видит и с чем взаимодействует, — зона ответственности фронтенда.