[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"general-list":3,"footer-feature-tags":4,"slate-glossary-term-mobile-first":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":138},{"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":135,"helpful_yes_count":115,"helpful_no_count":115,"created_at":136,"updated_at":137,"published_at":17},335,"mobile-first",{"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},"Mobile-first (сначала мобильная версия)","Подход к проектированию, при котором сначала продумывают мобильную версию, а уже потом расширяют её до десктопа.","Mobile-first — привычка начинать дизайн с мобильной версии. Маленький экран заставляет команду выбирать только самое важное и избавляться от лишнего. Потом, расширяясь до десктопа, добавляют второстепенные элементы и больше пространства. Подход появился, когда трафик с телефонов стал преобладать; сегодня он остаётся стандартом для большинства публичных продуктов.","\u003Cp>Mobile-first — это не только про размер экрана, но и про приоритизацию. Маленький экран работает как естественный фильтр от лишнего.\u003C\u002Fp>\u003Ch3>Почему работает\u003C\u002Fh3>\u003Cul>\u003Cli>На 4–6 дюймах нельзя разместить всё, что хочется, — команда вынуждена выбирать главное.\u003C\u002Fli>\u003Cli>Мобильные пользователи часто на ходу, в спешке и с плохим интернетом: им нужны простые сценарии.\u003C\u002Fli>\u003Cli>Если что-то удобно работает на телефоне, на большом экране будет тем более удобно.\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>Что меняется в процессе\u003C\u002Fh3>\u003Cul>\u003Cli>Эскизы рисуют сначала под узкие экраны.\u003C\u002Fli>\u003Cli>Дизайн-систему проектируют так, чтобы компоненты расширялись к большим экранам.\u003C\u002Fli>\u003Cli>В вёрстке стили пишут от узкого экрана к широкому, добавляя правила для больших разрешений через медиа-запросы.\u003C\u002Fli>\u003C\u002Ful>","\u003Cul>\u003Cli>Веб-продукты с большой долей мобильного трафика\u003C\u002Fli>\u003Cli>Любые публичные сайты и посадочные страницы\u003C\u002Fli>\u003Cli>Любые SaaS-инструменты, которые открывают с разных устройств\u003C\u002Fli>\u003C\u002Ful>","\u003Cul>\u003Cli>Внутренние корпоративные инструменты, которыми точно пользуются только с десктопа\u003C\u002Fli>\u003Cli>Очень специализированные продукты под большие экраны (видеомонтаж, CAD-системы)\u003C\u002Fli>\u003C\u002Ful>","\u003Cp>Команда новостного сайта переходит от проектирования «сначала десктоп» к mobile-first. Поначалу это вызывает сопротивление: «как мы покажем все наши рекламные блоки и виджеты на телефоне?». В итоге команда пересматривает, какие виджеты действительно важны, и обнаруживает, что 60% из них читатели никогда не используют. После запуска мобильной версии и наведения порядка на десктопе выручка с мобильного трафика выросла, время на странице — тоже.\u003C\u002Fp>","\u003Cp>Если в команде ещё нет привычки mobile-first, попробуйте простой приём: для следующей функции дизайнер сначала рисует только мобильную версию и показывает её команде, а десктоп проектирует потом. Это заметно меняет приоритеты и обычно даёт более простые и сильные решения.\u003C\u002Fp>","Mobile-first, мобильный первым, сначала мобильная версия, mobile-first design","Mobile-first","Mobile-first: что это и зачем начинать с мобильного | Shtab","Mobile-first — подход к проектированию, когда дизайн начинают с мобильной версии. Почему это работает, как меняет процесс работы и где не подходит.",{"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},"Процесс дизайна","M",[113,120],{"id":114,"order":115,"translations":116},1457,0,{"ru":117},{"question":118,"answer":119},"Это то же, что и адаптивный дизайн?","\u003Cp>Не совсем. Адаптивный дизайн — это свойство интерфейса: вёрстка подстраивается под ширину экрана. Mobile-first — методологический подход к проектированию: начинаем с мобильной версии и достраиваем десктоп. Они часто идут вместе, но адаптивным можно сделать и макет, нарисованный сначала под десктоп, — просто получится он обычно хуже.\u003C\u002Fp>",{"id":121,"order":61,"translations":122},1458,{"ru":123},{"question":124,"answer":125},"Что делать, если основная аудитория — на десктопе?","\u003Cp>Mobile-first всё равно полезен: он помогает упростить дизайн и выделить главное, даже если телефоном пользуется меньшинство. Но десктопная версия в этом случае требует больше внимания и проработки, чем мобильная: именно там живёт основная работа пользователя. Подход остаётся, а акценты и объём проектирования смещаются к большому экрану.\u003C\u002Fp>",{"related":127},[128],{"id":129,"slug":130,"translations":131},334,"responsive-design",{"ru":132},{"title":133,"short_definition":134},"Адаптивный дизайн","Подход, при котором интерфейс автоматически подстраивается под размер экрана: от мобильного до большого монитора.",90,"2026-05-11T20:33:07.021912+03:00","2026-05-11T20:33:07.021925+03:00",[139,166,197],{"id":140,"slug":141,"translations":142,"category":147,"tags":150,"letter":164,"cover":17,"updated_at":165,"published_at":17},332,"atomic-design",{"ru":143},{"title":144,"short_definition":145,"translation_en":146},"Atomic Design (атомарный дизайн)","Подход Брэда Фроста, в котором интерфейс собирается из иерархии «атомов», «молекул», «организмов», «шаблонов» и «страниц».","Atomic Design",{"id":85,"slug":86,"hex":87,"icon":17,"order":85,"translations":148},{"ru":149},{"title":90,"description":91},[151,155],{"id":61,"slug":105,"kind":105,"hex":106,"order":61,"translations":152},{"ru":153},{"title":154},"Методология",{"id":156,"slug":157,"kind":158,"hex":159,"order":160,"translations":161},50,"design-system-tag","framework","#14b8a6",113,{"ru":162},{"title":163},"Дизайн-системы","A","2026-05-11T20:33:05.908305+03:00",{"id":167,"slug":168,"translations":169,"category":174,"tags":177,"letter":195,"cover":17,"updated_at":196,"published_at":17},319,"ux-vs-ui",{"ru":170},{"title":171,"short_definition":172,"translation_en":173},"UX и UI: в чём разница","UX — про общий опыт взаимодействия с продуктом, UI — про внешний вид и поведение конкретного интерфейса.","UX vs UI",{"id":85,"slug":86,"hex":87,"icon":17,"order":85,"translations":175},{"ru":176},{"title":90,"description":91},[178,185,192],{"id":6,"slug":179,"kind":180,"hex":181,"order":6,"translations":182},"concept","other","#4b5370",{"ru":183},{"title":184},"Концепция",{"id":186,"slug":187,"kind":96,"hex":87,"order":188,"translations":189},47,"ux-research",110,{"ru":190},{"title":191},"Исследования UX",{"id":94,"slug":95,"kind":96,"hex":97,"order":98,"translations":193},{"ru":194},{"title":101},"U","2026-05-11T20:33:01.213551+03:00",{"id":198,"slug":199,"translations":200,"category":205,"tags":208,"letter":220,"cover":17,"updated_at":221,"published_at":17},325,"wcag",{"ru":201},{"title":202,"short_definition":203,"translation_en":204},"WCAG (стандарт доступности)","Международный стандарт по доступности веб-контента от W3C: набор требований и уровней (A, AA, AAA).","WCAG (Web Content Accessibility Guidelines)",{"id":85,"slug":86,"hex":87,"icon":17,"order":85,"translations":206},{"ru":207},{"title":90,"description":91},[209,212],{"id":94,"slug":95,"kind":96,"hex":97,"order":98,"translations":210},{"ru":211},{"title":101},{"id":213,"slug":214,"kind":180,"hex":215,"order":216,"translations":217},51,"ux-pattern","#cc5649",114,{"ru":218},{"title":219},"UX-паттерны","W","2026-05-11T20:33:03.330518+03:00"]