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