Личный кабинет

Разница между UX и UI

Главная путаница индустрии

Привет! Сегодня разбираем тему, на которой сыплются новички. UX против UI. Если открыть вакансии, везде увидишь: «UX/UI-дизайнер». Многие думают, что это просто одно длинное название профессии. Но на самом деле это два разных режима работы твоего мозга.

В отличие от США в России почти нет вакансий «чистого» UX-специалиста. Бизнесу нужен универсальный солдат. От тебя будут ждать и железную логику, и сочную картинку. Поэтому тебе придётся быть двуликим: сначала проектировщиком, потом художником.

Давай разберемся, где заканчивается одно и начинается другое.
UX — это фундамент

Представь, что ты строишь дом. UX (User Experience) — это инженерная часть, чертежи и планировка. В этом режиме ты решаешь: где будет вход, чтобы не биться головой? Как пройдут трубы, чтобы вода текла в кран? Удобно ли будет дойти от спальни до кухни в темноте?

На этапе UX нам плевать на цвет обоев. Мы работаем с логикой и сценариями. Если планировка квартиры кривая и туалет посреди гостиной — никакой дорогой декор это не спасет.
Режим «Логика»

Когда ты включаешь режим UX, ты забываешь о красоте. Ты отвечаешь на вопросы:
  • Куда человек нажмёт, чтобы купить?
  • Поймёт ли он, что оплата прошла?
  • Сколько кликов ему нужно до цели?
Инструмент этого этапа — «вайрфреймы» (wireframes). Это серые скучные прямоугольники и стрелочки. Если в твоей схеме всё логично и быстро приводит к результату — у тебя крутой UX. Даже если это выглядит как чертеж на салфетке.
UI — это фасад

А вот теперь мы переключаем тумблер в режим UI (User Interface). Это «интерфейс». Это всё, что видит глаз: цвета, шрифты, отступы, тени, иконки.

Возвращаемся к дому: UI — это отделка. Какой ламинат постелить? Какие шторы повесить? Приятная ли на ощупь ручка двери? UI отвечает за эстетику и эмоции.

Но главное — он управляет вниманием. Хороший UI не просто «делает красиво», он подсказывает глазам, куда смотреть в первую очередь.
Красиво, но бесполезно?

Важный момент: UI без UX — деньги на ветер. Ты можешь нарисовать нереально стильную кнопку с модными градиентами (это крутой UI). Но если пользователь не понимает, что на неё можно нажать, или она ведёт в никуда — твой продукт провалился (это плохой UX).

Красота должна помогать функции. Если интерфейс выглядит как картина в галерее, но им невозможно пользоваться — это искусство, а не дизайн. За искусство нам платят редко.
Феррари или УАЗ?

Запомни простую формулу на примере тачек:
  • UX — это ходовая часть (как машина едет, слушается ли руль, не глохнет ли мотор).
  • UI — это кузов и салон (красный цвет, кожа, хромированные диски).
Если у тебя Феррари, которая глохнет каждые 5 метров — это плохой UX при отличном UI. Если у тебя старый УАЗ, который проедет везде, но внутри пахнет бензином — это мощный UX при так себе UI. Наша цель — сделать условную «Теслу»: и едет идеально, и выглядит как классно.
Универсальный солдат

Почему у нас не разделяют UX и UI? Потому что бизнесу выгодно, чтобы это делал один человек. И это нормально. Ты будешь постоянно переключаться.

Утром ты проектировщик (UX): проектируешь логику, споришь с заказчиком о функциях, рисуешь серые схемы. После обеда ты эстет (UI): наводишь лоск, подбираешь цвета, выверяешь каждый пиксель.

Профи отличается тем, что не начинает «красить» (UI), пока не утвердил «чертеж» (UX).

Влияние на деньги


В реальной работе UX и UI всегда переплетены. Например, мы можем спорить, какого цвета сделать кнопку «Купить». Это вопрос UI? Вроде бы да, это же цвет. Но мы спорим не о вкусах, а о том, заметит ли её пользователь.


Если красная кнопка приносит больше продаж, чем зеленая — значит, это решение влияет на опыт (UX) и на деньги бизнеса. Любое «красиво» должно быть обосновано пользой.

Что выберешь, Нео?
Задание: Раздели на слои

Давай тренировать мышление. Возьми телефон. Открой любое приложение, которым пользуешься каждый день и попробуй объяснить: что в нём UI, а что UX.

🎉 Отлично! Урок пройден.


Теперь ты понимаешь, что сначала строим каркас, потом наводим красоту.


В следующем уроке нырнем в историю. Узнаем, откуда вообще взялось это понятие и почему раньше дизайнерам жилось... а может, и не проще. Идем дальше!

Шаг: