Введение в атомный веб-дизайн. # Что в имени? Эффективная организация работы

Модульность, возможность многократного использования и масштабируемость – это не только концепции программирования и разработки. Их также можно использовать при создании оптимизированных систем дизайна.

Атомный дизайн – это новая методология построения эффективных снизу вверх, построенная на аналогии с химией.

Вместо разработки коллекции веб-страниц, в концепции атомного дизайна сначала создаются простейшие компоненты интерфейса – атомы (кнопки, пункты меню и т.д.). Дополняется UI на четырех последующих этапах: молекулы, организмы, шаблоны и страницы .

Методология была разработана дизайнером Брэдом Фростом для создания успешных UI систем. Ей посвящена книга автора.

Атомный дизайн предлагает совершенно новый взгляд на дизайн интерфейса. В сегодняшней статье мы рассмотрим основы этой интересной концепции, чтобы вы могли составить о ней общее представление.

Иерархия атомного дизайна

Атомный дизайн – это ментальная модель восприятия веб-страниц как иерархии многократно используемых компонентов.

В нее входит пять стадий, каждая из которых состоит из групп компонентов предыдущей стадии: атомы, молекулы, организмы, шаблоны и страницы . Все они создают понятную и логичную систему дизайна интерфейсов.

Ниже мы рассмотрим каждую из стадий более подробно.

1. Атомы

Так же как и в химии, атомы – наименьшие неделимые частицы дизайна. Это базовые HTML элементы: кнопки, ярлыки, поля форм.

Конечно, не все HTML элементы являются атомами. Например, article и section не могут быть мельчайшими элементами веб-страницы.К атомам относятся и такие элементы, как , цвета, разрешения и другие CSS правила. По словам автора концепции “атомы наглядно демонстрируют все базовые стили”.

Пример

2. Молекулы

Молекулы состоят из группы атомов. Это следующая стадия иерархии атомного дизайна.

К молекулам относятся простейшие UI элементы, которые состоят из нескольких HTML компонентов: строка поиска или рекомендованные посты в правой панели.

Организация в молекулы дает атомам определенную цель. В группе они поддерживают и дополняют друг друга.

Например, заголовок (один атом) должен быть более заметным (иметь более крупный размер и толщину шрифта), чем имя автора (другой атом) в блоке с рекомендованными постами. В этом случае два атома работают сообща, “в команде”.

Пример

3. Организмы

Организмы состоят из групп молекул, атомов и иногда других организмов. В веб-дизайне организмы – это более сложные UI компоненты, которые представляют собой определенные секции страницы: хедер, боковая панель.

Организмы могут состоять из разных типов молекул. Например, боковая панель может состоять из строки поиска и различных виджетов. Или из одной и той же повторяющейся молекулы – к примеру, блоков постов. Также возможна комбинация этих вариантов.

Пример

4. Шаблоны

Следующая стадия иерархии атомного дизайна – шаблон. Здесь аналогия с химией заканчивается, чтобы сделать концепцию более доступной.

Шаблоны состоят из организмов. Это элементы страницы без финального контента. Цель шаблона – представить структуру будущего контента.

Шаблоны отражают взаимодействие атомов, молекул и организмов в контексте разметки. Это своеобразный скелет страницы.

Пример

Пример шаблона – дизайн домашней страницы со стандартными изображениями и блоками текста lorem ipsum. Атомы, молекулы и организмы находятся на своих местах, но со схематическим контентом.

5. Страницы

Страницы – последняя стадия иерархии атомного дизайна. На этом этапе шаблоны заполняются реальным контентом (текстом, изображениями, видео) и приобретают вид конечного UI.

Страницы позволяют дизайнерам тестировать готовый интерфейс, чтобы оценить его эффективность с точки зрения , доступности и других метрик.

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

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

Например, кнопка должна выглядеть кликабельной в любом окружении. Если она не кажется интерактивным элементом в конкретной версии, необходимо изменить дизайн этого атома и сделать его подходящим для всех версий.

Пример

Ниже представлен пример стадии страницы для сайта из предыдущего пункта. Выглядит совсем по-другому.

Чтобы создать эффективный UI, дизайнеры должны продумать все возможные изменения в реальном сайте. Также необходимо протестировать дизайн по разным вариантам шаблона.

Концепция атомного дизайна подразумевает создание интерфейса снизу вверх. Сначала прорабатываются простейшие элементы, на каждом последующем этапе они формируются в более крупные и сложные группы. В результате должна получиться целая система, состоящая из идеально организованных и связанных между собой элементов, – эффективный интерфейс.

Невозможно перестараться, оптимизируя работу над дизайном. Можно подойти к вопросу глобально и воспользоваться методологией атомарного дизайна, а можно ограничиться UI-kit. Разбираемся, какие инструменты для чего используются, как их не перепутать и получить именно то, что нужно для вашего проекта.

Атомарный дизайн

Главное свойство атомарного дизайна в том, что это не технология, а методология. С помощью атомарного дизайна можно создать полную дизайн-систему вне зависимости от программы, в которой вы привыкли работать. Это система содержит информацию о компонентах интерфейсов и дает возможность быстрее переходить от абстрактного уровня к конкретному.

В 2013 году эту методологию предложил Бред Фрост и описал ее в книге Atomic Design. Он провел аналогию между интерфейсами и химией: точно так же, как все вещества во Вселенной состоят из атомов, все интерфейсы состоят из компонентов. Эти элементы можно разложить на 5 уровней.

1. Атомы – самые маленькие элементы: форма, поле ввода, а также более абстрактные элементы, такие как анимации. Атомы задают единый стиль интерфейса и становятся строительным материалом для страницы.
2. Молекулы – комбинация атомов, которые становятся более полезными вместе, чем по отдельности. Например, комбинация заголовка, ссылки, изображения.
3. Организмы – крупные части интерфейса: логотип, шапка со всеми кнопками, полем поиска, списком соцсетей.
4. Шаблоны – элементы из нескольких организмов, каркас страницы, ее прототип.
5. Страницы – это последняя стадия с актуальным контентом, на которой проверяется эффективность всей дизайн-системы.

После того, как атомы созданы, можно собирать из них новые страницы. Атомарный подход удобно применять на крупных и быстрорастущих проектах. Если небольшой сайт окажется востребован пользователями, то через месяц он обрастет новыми разделами, и нагрузка вырастет. Если у дизайнера есть готовая система, при создании новых страниц не возникнет вопросов о цветах или величине отступов.

UI-kit

UI-kit набор элементов интерфейса: навигации, кнопки, табы, вкладки, баннеры. Главное, что в UI-kit прописаны все стили, размеры, их поведение при взаимодействии и состояния.

Не нужно каждый раз начинать работу с нуля, если нужный элемент храниться в UI-kit.

Это важный инструмент для кастомизации дизайна с учетом аудитории, обновления дизайна, создания единого стиля нескольких продуктов. Без UI-kit при создании новых страниц удается сохранить цвета и шрифты, указанные в гайде, но при этом кнопки, поля могут отличаться по размеру.

Для максимальной скорости работы готовый UI-kit должен быть переведен в код, к которому сможет обращаться верстальщик.

Почему эти понятия путают

Дизайн-система, в том числе созданная по методологии атомарного дизайна - это комбинация правил создания продукта, а не просто библиотека компонентов. Она подразумевает более глобальный подход и осмысление элементов на другом уровне – от меньшего к большему.

Подробная дизайн-система объединяет и эту методологию, и UI-kit. Но методология, по которой будет проектироваться дизайн, выбирается перед началом работы. Затем создается дизайн из готовых атомов и моделей. А в конце UI-kit набирается готовыми элементами, чтобы использовать его для развития сайта и удобства верстки.

UI-kit не будет таким же полным, как система, построенная по методологии атомарного дизайна. И если руководствоваться только Ui-kit, на сайте может появиться шаблон, который немного будет отличаться, не впишется.

Если не разобраться до конца и перепутать понятия, вы рискуете получить только UI-kit – большой исходник с набором молекул, ожидая расширенную систему. Но что бы вы не выбрали в конце проекта, и UI-kit, и система атомарного дизайна, ускорят дальнейшую работу над дизайном.

В агентстве «ДАЛЕЕ» создают UI-kit в конце работы над дизайном, когда сайт начинает содержать больше определенного числа уникальных шаблонов, например, такие проекты как, «Поговорим от Сбербанка» , «Pony Express» . На проекте «Альфа-Тревел» специалисты агентства воспользовались готовой дизайн-системой Альфа-Банка, поэтому сайт нового продукта получился полностью в стиле бренда, а главное – с привычной для пользователей механикой действия.

Атомарный дизайн подразумевает более глобальный подход и осмысление элементов на другом уровне – от меньшего к большему. Начните работу с атомов и закончите страницей с собранным контентом. Если результат получился негармоничным – начните заново с атомарного уровня.

Итак, ключевые отличия атомарного дизайна и UI-kit:

• UI-kit собирается после завершения дизайна проекта;
• В методологии атомарного дизайна существует страница как высший уровень конкретики, в UI-kit никогда не бывает такого уровня;
• Атомарный дизайн принимают как методологию с самого начала работы над дизайном;
• Атомарный дизайн – это расширенная дизайна-система, а UI-kit – ее часть.

Вконтакте

Одноклассники

Другие посты

Как найти сокровища в фотостоке

Даже крупные бренды совершают ошибки при подборе фото для иллюстрации своих услуг. Разбираемся, как найти изображения для сайта, которые вызовут...

Искусство диалога: налаживаем общение с клиентом

Много сил вкладывается в создание маркетинговых стратегий, формирование правильной команды, выбор технических инструментов, но стандарты общения...

Страница 404: как помочь пользователю, если он...

Все мы бывали на странице 404. Эта ошибка означает, что страница не найдена. Поделимся своим опытом, как этого избежать, и не только не...

5 Полезных инструментов для менеджера и всей...

Для организации процесса появилось так много программ, что выбрать подходящую уже непросто. У каждого своего приложения для смартфона и облако, а...

Как работать с другим агентством и улучшить проект

Часто привлечение нескольких агентств неизбежно, если речь идет о сложном и масштабном проекте. Разбираемся, какие плюсы и минусы в этой ситуации...

Когда релиз? Оцениваем эффективность команды...

В команде разработки МегаФона мы постоянно работаем над контролем качества кода. Для этого у нас есть практика code review, автотесты и разные...

Must have в веб-дизайне

В этом списке вы не прочитаете предсказаний о популярности видеоконтента, голосовых интерфейсов и адаптивной версии сайта, потому что и так об этом...

«Как у Тинькова»: какими решениями мы обязаны...

Российские банки одними из первых в рунете начали превращать свои сайты в сервисы. Этому способствовало несколько факторов. Во-первых,...

Волшебная кнопка. Чек-лист для повышения...

Эффективность промосайта зависит не от дизайна, копирайта и выгоды предложения. Успех заключается в том, как все работает вместе и образует...

Тренды диджитал-маркетинга в 2019 году

Мы давно слышим о том, что блокчейн и VR меняют нашу жизнь в Сети, но пока они все еще кажутся технологиями из сериала «Черное зеркало». Поговорим...

Топ 5 материалов 2018 года

Весь год мы рассказывали о наших разработках, интересных рекламных кампаниях, делились опытом и своим взглядом на применение новых технологий в...

Новогодние традиции в Далее. Спойлер: это не...

В декабре все переживают не только из-за отчетов и мероприятий, но и о том, как поздравить клиентов. В Далее есть праздничная традиция, которая...

Как нанять робота вместо менеджера проекта

Время экспериментов. 10 карточек по A/B...

Рассказываем о методе, который поможет улучшить юзабилити сайта, увеличить трафик и главное – повысить конверсию.

Не заставляйте меня думать: как снизить уровень...

Технологии и стандарты меняются, и дизайн сайта должен им соответствовать. Но даже если новый дизайн эстетически и функционально безупречен,...

В поисках Dream Team для разработки сайта

Найти классную команду для разработки проекта – это челлендж для менеджера. Построить работу можно по-разному: собрать команду у себя в штате,...

Релиз или жизнь? Хеллоуин в digital

В самую страшную ночь года на специалистов нашего диджитал-агентства больше ужаса наводят не сверхъестественные силы, а дедлайны, и самые страшные...

Как данные и эмоции меняют дизайн

Четкий подход при создании нового сайта или его редизайне поможет систематизировать работу: не нужно принимать решение наугад и думать, выстрелит...

Темная сторона дизайна

Apple сделал темную тему основной по умолчанию для новой Mac iOS, а Youtube начал тестировать темный фон еще год назад. Темные темы в интерфейсах...

Зачем нужно тестирование сайта

До тестирования сайт ведет себя как кот Шредингера. Вы не знаете, работает ли все так, как задумано. Тесты перед запуском или обновлением сайта...

Большой брат: как и зачем использовать...

Сегодня сайт может подстраиваться под пользователя в реальном времени, что помогает укрепить отношения с брендом и соответствовать высоким...

Дизайн B2B-портала: найдите отличия

Есть мнение, что в компаниях, которые оказывают услуги для B2C и B2B, необходим разный подход к разработке дизайна для своего сайта, т.к....

Еще раз об эффективности: чек-лист перед...

Чтобы взять все необходимое в поездку, организовать порядок в доме, начать вести здоровый образ жизни, можно воспользоваться чек-листами. Та же...

Типографика в веб-дизайне

Типографика на сайте – это не просто выбор шрифта, а набор правил оформления текста. Они основаны на том, как пользователь воспринимает текст на...

Как бренду рассказать свою историю

Психологи-эволюционисты доказали, что притягательность историй обусловлена строением нашего мозга. По данным сайта brainrules услышанную информацию...

Финансовые сервисы в digital: будущее уже...

Удобство нашей жизни во многом зависит от скорости развития финансового сектора в digital. Многие уже привыкли к оплате коммунальных услуг на сайте...

UX-аналитик и другие профессии с приставкой UX

UX-дизайн определяет, каким будет опыт взаимодействия пользователя с продуктом. В процессе проектирования пользовательского опыта участвуют четыре...

Преимущество использования отзывчивого веб-дизайна

Как адаптировать дизайн под разные устройства, чтобы он оставался удобным для пользователя? Вместе с контент-продюссером компании InVision Уиллом...

Лучшие диджитал-кампании к Чемпионату Мира 2018

Чемпионат стартовал 14 июня, и острая борьба среди брендов началась задолго до этого. На самом главном спортивном мероприятии в мире мы увидим не...

Как составить контент-план, который работает

От контента зависит максимум эффективности кампании. Что лучше, традиционный подход с подготовкой всего контента на месяц вперед или эксперименты в...

Правило Хемингуэя: как агентству и заказчику...

В оценке качества креативной концепции есть две проблемы. Первая - как его оценивать агентству, внутри команды, что пропускать дальше, а что...

Обзор самых популярных систем для управления...

Система для управления проектами может сильно повлияет на продуктивность компании. Сложно определиться с системой для работы с клиентами, и еще...

Сам себе Youtube: 5 шагов к вирусному контенту

Над видео для компании лучше работать вместе с продакшн-агентством. Вы смотрите портфолио агентств и выбираете подходящее по стилю и по цене. Что...

Как агентства представляют свои кейсы

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

Просто о сложном: agile-разработка

Изначально аджайл был вотчиной программистов. Так они называли методы разработки ПО, принципиально отличавшиеся от традиционного. Но оказалось, что...

Что такое нативная реклама и как она работает

Несколько лет подряд все говорят о нативной рекламе. Недавно Business Insider заявили, что к 2021 году выручка от нее вырастет до 74% от общих...

Разработка единой дизайн-системы для группы ВТБ

Собственные дизайн-системы – что это? Модный тренд или рабочий инструмент для качественного продвижения бренда? Рассказываем про наш опыт.

Чем дизайнер продукта отличается от просто...

Мы собрали пять отличительных признаков дизайнера продукта от дизайнера, занятого на «потоке» - чтобы окончательно разобраться в вопросе и...

Быстрее, выше, сильнее: как использовать видео...

Почему видеоконтента становится всё больше, где стоит размещать ваши видеоролики, и как сделать их ещё лучше.

Микроинфлюенсеры – будущее маркетинга влияния

Одним из трендов инфлюенс-маркетинга стал «подъем микроинфлюенсеров» - блогеров с небольшой, но активной аудиторией. Бренды обращают меньше...

Мессенджер-маркетинг как современный способ...

Мы решили сделать обзор самых популярных мессенджеров и выяснить, как бренды могут использовать их для коммуникации с клиентами.

Формы оплаты работ за разработку сайта

Мы разберем детально какие бывают формы ценообразования на создание интернет-проекта.

Все, кто когда-либо разрабатывал дизайн сайтов, знают, насколько это нелегкая и кропотливая работа. Да, если вы работаете в одиночку, все немного проще: вы сами решаете, как должен выглядеть итоговый результат, оговариваете правки с заказчиком, устанавливаете свои негласные правила, согласно которым создаете дизайн. Но если вы работаете в команде, на счету которой не один десяток проектов, отсутствие четкой методологии наверняка скажется на эффективности вашей работы.

Отсутствие четких правил работы над дизайном приведет к тому, что каждый дизайнер будет проектировать элементы по-своему. В итоге уже готовые эскизы придется постоянно корректировать, верстка часто будет отличаться от изначально созданных макетов, а о постоянной реализации новых идей придется забыть, ведь кучу времени будет отнимать рутинная работа. Если в команду придет новый человек, ему понадобится не один месяц, чтобы войти в курс дела и начать полноценно работать. Разумеется, при полном «хаосе» в команде дизайнеров сбиты с толку будут и разработчики. В результате - недовольные клиенты, неэффективная работа, отсутствие какого-либо развития.

Во избежание подобных ситуаций команде просто необходима система правил по разработке дизайна. В последнее время для систематизации процесса разработки сайтов нередко используют методологию «атомарного дизайна », предложенную в 2013 году Брэдом Фростом . Эта методология полезна не только для крупных компаний, но и для тех, кто работает над сайтами в одиночку, ведь она помогает значительно упростить процесс разработки. Сегодня мы постараемся разобраться, что такое атомарный дизайн и как эта методология поможет вам оптимизировать рабочий процесс.

Что такое атомарный дизайн?

Как утверждает сам создатель методологии, идея атомарного дизайна пришла к нему из химии. Как известно, в природе все вещества состоят из атомов и молекул. Подобным образом Фрост рассматривает интерфейсы, ведь они тоже состоят из определенных компонентов. Данная методология предлагает дизайнеру работать не над целым интерфейсом сразу, а создать сначала его компоненты, постепенно объединяя их в блоки и создавая дизайн. Одним словом, методология «атомарного дизайна» требует от разработчика умения мыслить от меньшего к большему и комбинировать готовые элементы.

В методологии атомарного дизайна выделяют 5 уровней разработки:

1. Атомы

Это наименьшие части интерфейса - кнопки, поля ввода, абзацы, заголовки, иконки, изображения. В понятие атомов входят также и более абстрактные понятия - цвета, шрифты, градиенты, анимации. Подразумевается, что дизайнер сначала определит, какие элементы понадобятся ему для создания макета страницы и разработает их дизайн.

Сами по себе атомы бесполезны, но, объединяя их в блоки, дизайнер постепенно придет к целостной структуре интерфейса. Уже на стадии атомов разработчику стоит позаботиться о том, чтобы все элементы соответствовали определенному стилю и сочетались между собой.

2. Молекулы

Молекулы - это комбинации двух и больше атомов; наименьшие блоки, из которых состоит дизайн. К примеру, объединив несколько полей ввода, кнопок и иконок мы получим готовую форму. На этой стадии преимущества атомарного подхода уже более понятны - ведь очевидно, что молекулы можно использовать повторно, а это существенно сокращает время разработки.

3. Организмы

Организм - это совокупность молекул. На этой стадии разработчик уже гораздо ближе к конечному результату, ведь организмы - это готовые разделы интерфейса. На данном этапе заказчик уже может видеть, какими будут отдельные блоки сайта, и при необходимости внести свои правки. Сделать это будет крайне просто: дизайнеру, который изначально работал по атомарной методологии, не придется долго искать нужные элементы в коде или редактировать целую структуру страницы. Таким образом, простота изменения сайта также относится к преимуществам атомарного дизайна.

4. Шаблоны

Объединяя организмы и размещая их согласно намеченному эскизу, вы получаете шаблон - готовый прототип вашего интерфейса. Зачастую сначала создается структурная схема страницы (wireframe). В этой схеме дизайнер определяет, как будут размещены элементы и как они будут реагировать на действия пользователей. Некоторые разработчики создают простой черно-белый макет, который постепенно превращается в готовую страницу. Так или иначе, данный этап крайне важен - ведь стоит изначально определить, какие элементы должны привлекать внимание пользователей, а какие можно опустить на второй план.

5. Страницы

Страница - это шаблон, заполненный реальным контентом. Именно на стадии страниц можно проверить, как выглядит контент, читабелен ли он, удобна ли страница для пользователей. В случае обнаружения каких-либо неточностей можно всегда вернуться назад и изменить конкретный атом, молекулу или организм (что гораздо удобнее, чем работать с целой страницей).

Как видите, атомарный подход к работе над дизайном страниц крайне эффективен - он позволяет избегать грубых ошибок, а также экономить время разработки и оперативно вносить правки.

В следующей статьей вы узнаете о преимуществах и применении атомарного дизайна.

Если кратко: Atomic Design с использованием Sketch – это будущее разработки продуктового дизайна.

Следуйте за мной

Брэд Фрост, потрясающая личность из видеоролика, является одним из основателей системы, о которой пойдет речь в этой статье. Atomic Design был разработан в ответ на этот цифровой, адаптивный мир, в котором мы все живем и работаем.

Мы создаем руководства по стилям, руководства по элементам, мудборды и прочие инструменты с целью упростить понимание и будущее применение наших дизайнов. Точно также разработчики используют вещи вроде Bootstrap, Foundation, Bourbon и прочие похожие инструменты, чтобы ускорить процесс кодинга. Когда мы работаем в команде, с помощью таких вещей жизнь заметно облегчается. И вот именно для этого существует Atomic Design.

Atomic design больше пригоден для дизайна большой картины в целом, чем создания какой-то отдельной сущности или страницы. Этот инструмент отлично подойдет для дизайна ядра системы.

Atomic design подразумевает создание системы отдельных фрагментов, которые могут использоваться для создания элементов и шаблонов, которые можно использовать повторно множество раз.

Атомы

Атомы – это абсолютный фундамент нашей системы. Атомы включают палитры цветов, шрифты, индивидуальные элементы (например, заголовки, абзацы, кнопки и т.д.) и прочие вещи, которые соединяются с другими атомами для создания молекулы.

Молекулы

Молекулы – это кусочки системы, которые мы строим из атомов. И хотя молекулы требуют атомы, они больше похожи на блоки лего-конструктора, из которого складываются более сложные вещи.

Молекулы включают такие элементы, как поля формы с надписью или таблица с заголовками и колонками данных.

Организмы

С организмов мы уже получаем более-менее целостный вид интерфейса. Комбинируя молекулы, мы можем создавать более сложные, но повторяемые, кусочки нашего продукта.

Пример организма – главная навигация на страничке, которая включает лого, ссылки навигации и поле поиска или кнопку регистрации.

Шаблоны

Шаблоны – это по сути наши каркасные модели или макеты. Комбинируя множество организмов, мы действительно начинаем видеть целостную картину того, что мы создаем.

Если высокоточный, детальный результат не требует, с этой точки мы можем уже начать реализовывать нашу систему в коде.

Страницы

Страницы – это уже более детализированная версия шаблонов. Дизайн на картинке выше уже расценивается как страничка. Здесь уже даже новичок в дизайне может понять, что за проект мы создаем.

Страницы не всегда являются необходимостью, но кто же не любит красивую визуализацию?

Почему Sketch?

Хотя Sketch еще не стал таким мощным центром разработки дизайна, как Adobe Illustrator или Photoshop, это потрясающий инструмент для работы по методологии Atomic Design.

Организация

Sketch – это своего рода удачное дитя любви Adobe Illustrator и Photoshop. Несомненно, Sketch еще очень молод, но уже достаточно мощен, и помимо этого, невероятно прост в работе.

Вы можете не только реализовать практически все, что нужно, без этого нескончаемого поиска нужного инструмента в залежах многочисленных многоуровневых менюшек, но и организовать свой рабочий процесс еще лаконичнее с помощью иерархии слоев.

Если вы не организуетесь, как следует, скорее всего, вы начнете терять деньги на процессе дизайна, просто вы еще не осознали эти потери. Организация работы крайне важна в эффективном расходовании времени и прочих ресурсов!

Модульность

Sketch отлично подходит для Atomic Design из-за простоты создания модульных систем. Вы не только можете добиться идеальной организации со слоями, как в Adobe Photoshop, вы также можете создавать модульные элементы. В Sketch такие элементы называются символами.

Создание символа позволяет вам менять все стили элемента, и эти изменения будут отражаться на всех сущностях символа в рамках одного файла.

Для начала нарисуйте свой элемент, каким вы хотите его видеть.

Затем выделите его и кликните на кнопку Create Symbol (создать символ) на верхней панели инструментов.

Совет от профессионала: Чтобы превратить элементы с текстом в идеально модульные символы в Sketch, обязательно отметьте галочкой опцию Exclude Text Value from Symbol в наборе инструментов справа.

Чтобы сделать это, вам нужно сначала выделить текст в символе, если вы этого не сделаете, вы не увидите нужную опцию в наборе инструментов.

Теперь вы можете вставить символ где угодно и изменить внутренний текст так, чтобы текст на других копиях символов остался неизменным.

Если вы не планируете делать текстовое наполнение разным для каждого символа, не беспокойтесь и пропустите этот шаг. Но просто знайте, что такая возможность есть, и это очень удобно.

Всегда, когда хотите разместить один из созданных элементов, нужно просто кликнуть на дропдаун Insert , найти опцию Symbols и выбрать символ, который хотите вставить.

Конвертация в код

Экспорт в код

Что может быть лучше модульных символов? Экспорт дизайна прямо в код. Это означает, что вам, дизайнерам, не нужно учиться правильно разделять исходники для кода. Хотя, и это не помешает.

Чтобы получить код ваших элементов, сначала нужно убедиться, что они соответствующим образом между собой сгруппированы и конвертированы в символы. После этого нужно просто кликнуть правой кнопкой мыши на элементе и выбрать Copy CSS Attributes в выпавшем меню.

Убедитесь, что вы позаботились обо всех нужных префиксах, так как они не включены в код из Sketch. Или же воспользуйтесь специальным пакетом для этого.

HTML

Как и при использовании Bootstrap или Foundation, у нас есть стилизованные элементы. Все, что осталось сделать – добавить класс к элементу в нашем коде HTML.

Здесь нужно превратить элементы в HTML-страничку, которую будут видеть только разработчики из команды. Можно создать страничку элементов с нужным примененным классом, чтобы проверить, как это все выглядит в браузере, на различных экранах.

Брэд Фрост и Дэйв Олсон из Pattern Lab создали отличный пример, посмотрите:

Использование шаблонизаторов

Это бонус для тех, кто освоил шаблонизаторы и CSS, вроде swig, jade, haml и множество других языков, доступных сегодня.

Множество организмов, которые мы создали, станут частичными шаблонами (partials), как только конвертируются в код.

Мы сделали это

Теперь можно притвориться, будто вы разбираетесь в науке. И до определенной степени, вы таки разбираетесь в этом. Atomic Design – это наука высококачественного дизайна.

Создавая модульные, повторяемые элементы и паттерны мы можем экспоненциально ускорить процесс дизайна и разработки. И ускорение затрагивает не только саму отрисовку элементов, а и процесс внесения изменения по всему проекту.

And much of it focuses on establishing foundations for color, typography, grids, texture and the like. This type of thinking is certainly important, but I’m slightly less interested in these aspects of design because ultimately they are and will always be subjective. Lately I’ve been more interested in what our interfaces are comprised of and how we can construct design systems in a more methodical way.

In searching for inspiration and parallels, I kept coming back to chemistry. The thought is that all matter (whether solid, liquid, gas, simple, complex, etc) is comprised of atoms. Those atomic units bond together to form molecules, which in turn combine into more complex organisms to ultimately create all matter in our universe.

Similarly, interfaces are made up of smaller components. This means we can break entire interfaces down into fundamental building blocks and work up from there. That’s the basic gist of atomic design.

Pages

Pages are specific instances of templates. Here, placeholder content is replaced with real representative content to give an accurate depiction of what a user will ultimately see.

Pages are the highest level of fidelity and because they’re the most tangible, it’s typically where most people in the process spend most of their time and what most reviews revolve around.

The page stage is essential as it’s where we test the effectiveness of the design system. Viewing everything in context allows us to loop back to modify our molecules, organisms, and templates to better address the real context of the design.

Pages are also the place to test variations in templates. For example, you might want to articulate what a headline containing 40 characters looks like, but also demonstrate what 340 characters looks like. What does it look like when a user has one item in their shopping cart versus 10 items with a discount code applied? Again, these specific instances influence how we loop back through and construct our system.

Why Atomic Design

In a lot of ways, this is how we’ve been doing things all along, even if we haven’t been consciously thinking about it in this specific way.

Atomic design provides a clear methodology for crafting design systems. Clients and team members are able to better appreciate the concept of design systems by actually seeing the steps laid out in front of them.

Atomic design gives us the ability to traverse from abstract to concrete. Because of this, we can create systems that promote consistency and scalability while simultaneously showing things in their final context. And by assembling rather than deconstructing, we’re crafting a system right out of the gate instead of cherry picking patterns after the fact.

Pattern Lab

In order to apply this methodology in my work, I (along with the help of the great Dave Olsen) created a tool called Pattern Lab to actually create these atomic design systems. I’ll cover Pattern Lab in detail later, but feel free to check it out on Github .

Further Reading

• So Andy Clarke has been setting the stage for these types of conversations for a long while now. In fact, he wrote a chapter for Smashing Book 3 called “Becoming Fabulously Flexible: Designing Atoms and Elements.” I had no idea that existed, so how about that! I highly encourage you to check that out. I also highly encourage you to take a look at his tool called Rock Hammer Vimeo .

  I’m really excited to dive in deeper and develop more tools and thoughts around these concepts.

  Update: since writing this original article, I wrote a book called that dives into this topic in more detail, which you can buy in /or formats. Thanks!