[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"general-list":3,"footer-feature-tags":4,"slate-glossary-term-ux-vs-ui":66},true,[5,14,20,29,34,40,46,52,56,62],{"id":6,"name":7,"hex":8,"translations":9,"count_pages":13},8,"Компания","#f40925",{"ru":10,"en":11},{"name":7},{"name":12},"Company",9,{"id":15,"name":16,"hex":17,"translations":18,"count_pages":6},26,"Главная страница",null,{"ru":19},{"name":16},{"id":21,"name":22,"hex":23,"translations":24,"count_pages":28},2,"Проекты","#3027ff",{"ru":25,"en":26},{"name":22},{"name":27},"Project",15,{"id":30,"name":31,"hex":17,"translations":32,"count_pages":21},33,"ИИ",{"ru":33},{"name":31},{"id":35,"name":36,"hex":17,"translations":37,"count_pages":39},34,"Комментарии",{"ru":38},{"name":36},4,{"id":41,"name":42,"hex":17,"translations":43,"count_pages":45},25,"Задачи",{"ru":44},{"name":42},24,{"id":47,"name":48,"hex":17,"translations":49,"count_pages":51},27,"Рабочие пространства",{"ru":50},{"name":48},3,{"id":45,"name":53,"hex":17,"translations":54,"count_pages":6},"Kanban-доска",{"ru":55},{"name":53},{"id":57,"name":58,"hex":17,"translations":59,"count_pages":61},23,"Диаграмма Ганта",{"ru":60},{"name":58},1,{"id":28,"name":63,"hex":17,"translations":64,"count_pages":61},"Календарь",{"ru":65},{"name":63},{"detail":67,"more":150},{"id":68,"slug":69,"translations":70,"category":84,"tags":92,"letter":116,"og_image":17,"cover":17,"author_name":17,"author_position":17,"author_avatar":17,"faqs":117,"related":131,"views_count":147,"helpful_yes_count":120,"helpful_no_count":120,"created_at":148,"updated_at":149,"published_at":17},319,"ux-vs-ui",{"ru":71},{"title":72,"short_definition":73,"tldr":74,"full_explanation":75,"when_to_apply":76,"when_not_to_apply":77,"examples":78,"tips":79,"synonyms":80,"translation_en":81,"seo_title":82,"seo_description":83},"UX и UI: в чём разница","UX — про общий опыт взаимодействия с продуктом, UI — про внешний вид и поведение конкретного интерфейса.","UX (пользовательский опыт) и UI (интерфейс пользователя) — связанные, но разные дисциплины. UX отвечает за весь путь пользователя: понятна ли задача, удобно ли её решить, чего ожидать на каждом шаге. UI — про конкретные экраны: типографика, цвета, отступы, состояния кнопок. Хороший UI без UX — это красивый, но неудобный продукт. Хороший UX без UI — это работающая, но раздражающая глаз система.","\u003Cp>Путаница между UX и UI — одна из самых частых в продуктовых командах. Полезно держать в голове, что эти дисциплины смотрят на разные слои одного продукта.\u003C\u002Fp>\u003Ch3>Что делает UX\u003C\u002Fh3>\u003Cul>\u003Cli>Понимает, кто пользователь и какие у него задачи.\u003C\u002Fli>\u003Cli>Проектирует структуру продукта и пути пользователя.\u003C\u002Fli>\u003Cli>Проверяет гипотезы на прототипах и реальных людях.\u003C\u002Fli>\u003Cli>Работает с метриками: успешность задачи, скорость, удовлетворённость.\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>Что делает UI\u003C\u002Fh3>\u003Cul>\u003Cli>Делает экраны конкретными: вёрстка, типографика, цвета, иконки.\u003C\u002Fli>\u003Cli>Описывает состояния: наведение курсора, фокус, ошибка, загрузка, пустой экран.\u003C\u002Fli>\u003Cli>Поддерживает единообразие через дизайн-систему.\u003C\u002Fli>\u003Cli>Договаривается с разработкой о реализуемости и доступности.\u003C\u002Fli>\u003C\u002Ful>\u003Cp>В маленькой команде эти роли часто совмещает один человек. В крупной — это разные специалисты с разными процессами.\u003C\u002Fp>","\u003Cul>\u003Cli>Когда команда обсуждает, кого нанимать в дизайн\u003C\u002Fli>\u003Cli>В разделении ответственности на продуктовых встречах\u003C\u002Fli>\u003Cli>При найме внешнего подрядчика: уточнить, на каком уровне он работает\u003C\u002Fli>\u003C\u002Ful>","\u003Cul>\u003Cli>Внутри команды эти термины не стоит разводить до фанатизма — в реальной работе они переплетаются\u003C\u002Fli>\u003C\u002Ful>","\u003Cp>В команде была претензия: «дизайн красивый, но пользоваться неудобно». При разборе выяснилось, что нанятый дизайнер — сильный специалист по интерфейсам: он отлично рисует экраны, но не работает с архитектурой и сценариями. Сторону опыта не вёл никто, и продукт получился набором красивых разрозненных экранов. После добавления роли исследователя сценарии стали целостными, а визуальная часть осталась такой же сильной.\u003C\u002Fp>","\u003Cp>Если в команде только один дизайнер, явно опишите, какую часть работы он делает сам, а какую помогают делать продакт, аналитик и тимлид. Иначе сторона опыта будет провисать, потому что ею никто конкретно не «владеет», и решения в продукте начнут приниматься только из соображений красоты экранов.\u003C\u002Fp>","UX, UI, пользовательский опыт, интерфейс пользователя, разница между UX и UI, user experience, user interface","UX vs UI","UX и UI: чем отличаются и кто за что отвечает | Shtab","UX отвечает за весь опыт взаимодействия, UI — за конкретный интерфейс. Разбираем разницу, кто и за что отвечает в команде и какие ошибки бывают при найме.",{"id":85,"slug":86,"hex":87,"icon":17,"order":85,"translations":88},12,"ux-design","#ec4899",{"ru":89},{"title":90,"description":91},"UX и дизайн","Понятия дизайна пользовательских интерфейсов и пользовательского опыта: исследования, юзабилити, доступность, IA, прототипы, дизайн-системы, методологии и тёмные паттерны.",[93,100,108],{"id":6,"slug":94,"kind":95,"hex":96,"order":6,"translations":97},"concept","other","#4b5370",{"ru":98},{"title":99},"Концепция",{"id":101,"slug":102,"kind":103,"hex":87,"order":104,"translations":105},47,"ux-research","tool",110,{"ru":106},{"title":107},"Исследования UX",{"id":109,"slug":110,"kind":103,"hex":111,"order":112,"translations":113},48,"ui-design","#7c5ce6",111,{"ru":114},{"title":115},"UI-дизайн","U",[118,125],{"id":119,"order":120,"translations":121},1424,0,{"ru":122},{"question":123,"answer":124},"Можно ли быть «UX\u002FUI-дизайнером»?","\u003Cp>На уровне маленьких команд — да, и это распространённая позиция. На уровне крупных продуктов и сервисов обычно эти роли разделяют: один человек редко одинаково силён и в исследованиях, и в визуальном дизайне. Обычно такой специалист сильнее в одной из двух частей, и это стоит честно проговорить на собеседовании.\u003C\u002Fp>",{"id":126,"order":61,"translations":127},1425,{"ru":128},{"question":129,"answer":130},"А что такое продуктовый дизайн (Product Design)?","\u003Cp>Продуктовый дизайн — собирательный термин, в который чаще всего включают и UX, и UI, и работу с продуктом в целом. В российской традиции «продуктовый дизайнер» — это обычно специалист, способный закрывать обе стороны и работать в продуктовой команде с менеджером и инженерами.\u003C\u002Fp>",{"related":132},[133,140],{"id":134,"slug":135,"translations":136},320,"user-research",{"ru":137},{"title":138,"short_definition":139},"Пользовательские исследования (User Research)","Систематическая работа по изучению пользователей: их задач, контекста, мотивации и проблем с продуктом.",{"id":141,"slug":142,"translations":143},330,"design-system",{"ru":144},{"title":145,"short_definition":146},"Дизайн-система","Единый набор переиспользуемых компонентов, правил и токенов, который обеспечивает единообразие интерфейса продукта.",98,"2026-05-11T20:33:01.213535+03:00","2026-05-11T20:33:01.213551+03:00",[151,180,204],{"id":152,"slug":153,"translations":154,"category":159,"tags":162,"letter":178,"cover":17,"updated_at":179,"published_at":17},332,"atomic-design",{"ru":155},{"title":156,"short_definition":157,"translation_en":158},"Atomic Design (атомарный дизайн)","Подход Брэда Фроста, в котором интерфейс собирается из иерархии «атомов», «молекул», «организмов», «шаблонов» и «страниц».","Atomic Design",{"id":85,"slug":86,"hex":87,"icon":17,"order":85,"translations":160},{"ru":161},{"title":90,"description":91},[163,169],{"id":61,"slug":164,"kind":164,"hex":165,"order":61,"translations":166},"methodology","#5e79ec",{"ru":167},{"title":168},"Методология",{"id":170,"slug":171,"kind":172,"hex":173,"order":174,"translations":175},50,"design-system-tag","framework","#14b8a6",113,{"ru":176},{"title":177},"Дизайн-системы","A","2026-05-11T20:33:05.908305+03:00",{"id":181,"slug":182,"translations":183,"category":188,"tags":191,"letter":202,"cover":17,"updated_at":203,"published_at":17},335,"mobile-first",{"ru":184},{"title":185,"short_definition":186,"translation_en":187},"Mobile-first (сначала мобильная версия)","Подход к проектированию, при котором сначала продумывают мобильную версию, а уже потом расширяют её до десктопа.","Mobile-first",{"id":85,"slug":86,"hex":87,"icon":17,"order":85,"translations":189},{"ru":190},{"title":90,"description":91},[192,195],{"id":109,"slug":110,"kind":103,"hex":111,"order":112,"translations":193},{"ru":194},{"title":115},{"id":196,"slug":197,"kind":164,"hex":165,"order":198,"translations":199},49,"design-process",112,{"ru":200},{"title":201},"Процесс дизайна","M","2026-05-11T20:33:07.021925+03:00",{"id":205,"slug":206,"translations":207,"category":212,"tags":215,"letter":227,"cover":17,"updated_at":228,"published_at":17},325,"wcag",{"ru":208},{"title":209,"short_definition":210,"translation_en":211},"WCAG (стандарт доступности)","Международный стандарт по доступности веб-контента от W3C: набор требований и уровней (A, AA, AAA).","WCAG (Web Content Accessibility Guidelines)",{"id":85,"slug":86,"hex":87,"icon":17,"order":85,"translations":213},{"ru":214},{"title":90,"description":91},[216,219],{"id":109,"slug":110,"kind":103,"hex":111,"order":112,"translations":217},{"ru":218},{"title":115},{"id":220,"slug":221,"kind":95,"hex":222,"order":223,"translations":224},51,"ux-pattern","#cc5649",114,{"ru":225},{"title":226},"UX-паттерны","W","2026-05-11T20:33:03.330518+03:00"]