[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"general-list":3,"footer-feature-tags":4,"slate-glossary-term-mockup":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":152},{"id":68,"slug":69,"translations":70,"category":84,"tags":92,"letter":111,"og_image":17,"cover":17,"author_name":17,"author_position":17,"author_avatar":17,"faqs":112,"related":126,"views_count":149,"helpful_yes_count":115,"helpful_no_count":115,"created_at":150,"updated_at":151,"published_at":17},329,"mockup",{"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},"Мокап интерфейса","Статичный высокодетализированный визуал интерфейса с финальным дизайном, но без интерактивности.","Мокап — это финальная картинка экрана: цвета, шрифты, отступы, иконки, иногда и реальный контент. От прототипа отличается тем, что не кликается, а от вайрфрейма — тем, что показывает уже не структуру, а готовый внешний вид. Мокапы удобны для согласования визуального стиля, для презентаций и для передачи экранов в разработку.","\u003Cp>Мокап — это «фотография» будущего экрана. Он не заменяет прототип и не показывает, как продукт работает в движении, но прекрасно объясняет, как он будет выглядеть.\u003C\u002Fp>\u003Ch3>Когда мокап незаменим\u003C\u002Fh3>\u003Cul>\u003Cli>В презентациях заинтересованным сторонам и инвесторам.\u003C\u002Fli>\u003Cli>В маркетинговых материалах и магазинах приложений.\u003C\u002Fli>\u003Cli>В передаче конкретных экранов в разработку.\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>Что обычно включает\u003C\u002Fh3>\u003Cul>\u003Cli>Финальную типографику и цвета.\u003C\u002Fli>\u003Cli>Реальный или близкий к нему контент.\u003C\u002Fli>\u003Cli>Иконки, изображения, разные состояния.\u003C\u002Fli>\u003Cli>Размеры и отступы под сетку.\u003C\u002Fli>\u003C\u002Ful>","\u003Cul>\u003Cli>Когда нужно показать конкретный визуал, а не сценарий взаимодействия\u003C\u002Fli>\u003Cli>Для разбора дизайна и согласования с заказчиками\u003C\u002Fli>\u003Cli>Для маркетинговых материалов\u003C\u002Fli>\u003C\u002Ful>","\u003Cul>\u003Cli>На очень ранних этапах — мокап слишком «дорогой» и его жалко переделывать\u003C\u002Fli>\u003Cli>Для проверки сценариев и логики — здесь нужен прототип\u003C\u002Fli>\u003C\u002Ful>","\u003Cp>В маркетинг попросили изображения будущей функции для презентации инвесторам. Команда дизайна готовит набор мокапов с детально прорисованным интерфейсом, реальными цифрами и сценариями. Это не интерактивный прототип, но именно для презентации он работает лучше: показывает, как продукт будет выглядеть, без отвлечения на нажатия и переходы.\u003C\u002Fp>","\u003Cp>Не путайте мокапы и боевой интерфейс: в мокапе всё «всегда хорошо», в реальном продукте есть пустые экраны, ошибки, длинные тексты на разных языках. Перед передачей в разработку добавьте к мокапам все важные состояния, иначе разработчик будет догадываться сам.\u003C\u002Fp>","мокап, макет интерфейса, мокап интерфейса, Mockup","Mockup","Мокап интерфейса: что это и отличия от прототипа | Shtab","Мокап — статичный детальный визуал экрана с финальным дизайном. Чем отличается от вайрфрейма и прототипа, когда он уместен и как готовить его к разработке.",{"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,102],{"id":94,"slug":95,"kind":96,"hex":97,"order":98,"translations":99},48,"ui-design","tool","#7c5ce6",111,{"ru":100},{"title":101},"UI-дизайн",{"id":103,"slug":104,"kind":105,"hex":106,"order":107,"translations":108},49,"design-process","methodology","#5e79ec",112,{"ru":109},{"title":110},"Процесс дизайна","М",[113,120],{"id":114,"order":115,"translations":116},1430,0,{"ru":117},{"question":118,"answer":119},"Мокап или прототип — что важнее?","\u003Cp>Это разные инструменты для разных задач. Мокап показывает, как выглядит. Прототип показывает, как работает. В большинстве серьёзных проектов используются оба: сначала прототип для согласования логики, потом мокап для финального вида.\u003C\u002Fp>",{"id":121,"order":61,"translations":122},1431,{"ru":123},{"question":124,"answer":125},"Нужно ли передавать мокапы в разработку, если есть дизайн-система?","\u003Cp>Да, но в более компактной форме. Когда дизайн-система зрелая, разработчик уже знает, как выглядят базовые компоненты. Мокапы тогда показывают только нестандартные экраны и нюансы: новые состояния, отступы, конкретные сочетания компонентов.\u003C\u002Fp>",{"related":127},[128,135,142],{"id":129,"slug":130,"translations":131},328,"prototype",{"ru":132},{"title":133,"short_definition":134},"Прототип интерфейса","Интерактивная или статичная модель будущего продукта, на которой можно проверять идеи до разработки.",{"id":136,"slug":137,"translations":138},135,"wireframe",{"ru":139},{"title":140,"short_definition":141},"Wireframe (каркас интерфейса)","Схематичный черновой макет интерфейса: показывает структуру экрана и расположение элементов без цветов, шрифтов и прочих деталей оформления.",{"id":143,"slug":144,"translations":145},330,"design-system",{"ru":146},{"title":147,"short_definition":148},"Дизайн-система","Единый набор переиспользуемых компонентов, правил и токенов, который обеспечивает единообразие интерфейса продукта.",109,"2026-05-11T20:33:04.835866+03:00","2026-05-11T20:33:04.835882+03:00",[153,180,200],{"id":154,"slug":155,"translations":156,"category":161,"tags":164,"letter":178,"cover":17,"updated_at":179,"published_at":17},332,"atomic-design",{"ru":157},{"title":158,"short_definition":159,"translation_en":160},"Atomic Design (атомарный дизайн)","Подход Брэда Фроста, в котором интерфейс собирается из иерархии «атомов», «молекул», «организмов», «шаблонов» и «страниц».","Atomic Design",{"id":85,"slug":86,"hex":87,"icon":17,"order":85,"translations":162},{"ru":163},{"title":90,"description":91},[165,169],{"id":61,"slug":105,"kind":105,"hex":106,"order":61,"translations":166},{"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":198,"cover":17,"updated_at":199,"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":94,"slug":95,"kind":96,"hex":97,"order":98,"translations":193},{"ru":194},{"title":101},{"id":103,"slug":104,"kind":105,"hex":106,"order":107,"translations":196},{"ru":197},{"title":110},"M","2026-05-11T20:33:07.021925+03:00",{"id":201,"slug":202,"translations":203,"category":208,"tags":211,"letter":229,"cover":17,"updated_at":230,"published_at":17},319,"ux-vs-ui",{"ru":204},{"title":205,"short_definition":206,"translation_en":207},"UX и UI: в чём разница","UX — про общий опыт взаимодействия с продуктом, UI — про внешний вид и поведение конкретного интерфейса.","UX vs UI",{"id":85,"slug":86,"hex":87,"icon":17,"order":85,"translations":209},{"ru":210},{"title":90,"description":91},[212,219,226],{"id":6,"slug":213,"kind":214,"hex":215,"order":6,"translations":216},"concept","other","#4b5370",{"ru":217},{"title":218},"Концепция",{"id":220,"slug":221,"kind":96,"hex":87,"order":222,"translations":223},47,"ux-research",110,{"ru":224},{"title":225},"Исследования UX",{"id":94,"slug":95,"kind":96,"hex":97,"order":98,"translations":227},{"ru":228},{"title":101},"U","2026-05-11T20:33:01.213551+03:00"]