Атомарный веб дизайн. Атомарный дизайн

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

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

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

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

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

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

1. Атомы

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

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

2. Молекулы

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

3. Организмы

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

4. Шаблоны

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

5. Страницы

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

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

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

Дизайн-система с детальной документацией может сыграть большую роль в успехе любого крупного проекта. Существует множество подходов к созданию такой системы. Atomic Design - один из недавно предложенных методов.

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

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

Часть 1. Компонентно-ориентированные системы

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

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

Такой подход не уникален для программирования. Существует 2 наиболее распространенных компонентно-ориентированных метода в дизайне сайтов.

Сложно проследить наследование компонентов. Для крупного проекта не редкость наличие нескольких стилей для кнопки, поля ввода или другого элемента. И когда разработчики (или другие дизайнеры) будут рассматривать ваш макет, у них могут возникнуть трудности с пониманием, какой конкретно компонент из стайл-гайда вы используете.
Большое количество компонентов не описывается в типичном стайл-гайде. Обычно он содержит информацию лишь о текстовых стилях, иконках, кнопках, полях ввода и так далее. Мелочах. Без детальной документации дизайна макеты зачастую имплементируются не так, как задумал дизайнер.
Плохая документация серьезно уменьшает повторное использование ваших дизайн-компонентов. Если в проекте больше десятка страниц, это может стать проблемой. Далеко не всегда другие дизайнеры или разработчики пройдутся по всем макетам вашего проекта, чтобы убедиться, что всплывающее окно «ну такое, с кнопочками» не было уже сделано ранее. Дизайнер рисует новое окошко. Разработчик кодит новое окошко. Прошел месяц, у вас в проекте пятнадцать15 разных версий всплывающего окна для простого вопроса «да/нет».

Часть 2. Что такое Atomic Design

Что, если бы вы могли использовать преимущества и фреймворков, и стайл-гайдов? Одно из решений было предложено Брэдом Фростом , веб-дизайнером из Питтсбурга, США. Оно называется Atomic Design.

Atomic Design - это методология, которая позволяет (и требует) описать каждый компонент в вашей дизайн-системе.

Этот подход делит элементы на пять категорий:

1. Атомы. Наименьшие конструктивные блоки вашего проекта. Прямо как кубики LEGO. Текстовые стили, кнопки, иконки, поля ввода, чекбоксы и так далее. Все эти компоненты не могут быть поделены на более мелкие части, не потеряв при этом всякого смысла (зачем, например, вам кнопка без текста или иконки?).

Атомы

2. Молекулы. Это уже более сложные элементы, состоящие из нескольких атомов. К примеру, «тостеры» с уведомлениями, поля ввода с кнопками (поле поиска), значения данных (например, «скорость: 343 м/c», где слово «скорость» написано в одном стиле, а значение - в другом) и прочие. Иногда молекулы уже становятся полноценно функционирующими элементами. Но, как правило, они должны быть частью организма , чтобы иметь практическую ценность.

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

Организмы могут быть достаточно сложными и содержать более мелкие организмы (прямо как в жизни).

Организм «кот» с организмом «мышь» внутри. Фото Тимоти Мейнберг

4. Темплейты. По сути, это страницы без реального контента. Темплейты комбинируют организмы в полноценный макет сайта.

5. Страницы. Когда вы создали темплейт , на основе его копий вы генерируете страницы , заполняя их реальным контентом. Давайте, к примеру, возьмем статью из Википедии. Если упростить её структуру, темплейт статьи будет состоять из таких организмов , как боковая панель, навигация и основной контент. Каждая статья Википедии с реальным контентом будет страницей, которая использует один и тот же темплейт .

Организмы высокого уровня в статье из Википедии

Как atomic-подход используется на практике? Брэд Фрост вместе с командой разработчиков создали инструмент Pattern Lab . Он позволяет сгенерировать статический веб-сайт для документирования вашей atomic-библиотеки. Вы можете хранить там код ваших компонентов и их описание. Это решение для разработчиков.

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

Часть 3. Atomic в рабочем процессе дизайнера

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

Если вы веб/UI-дизайнер, то в повседневной работе, скорее всего, используете Sketch или (до сих пор?) Photoshop для создания дизайн-макетов. Также, с помощью InVision/Zeplin/Avocode вы передаете ваши макеты команде разработчиков, где они могут рассмотреть структуру и сделать все необходимые измерения. Кроме того, у вас есть какой-никакой стайл-гайд, где описаны некоторые дизайн-элементы.

В рамках этой статьи я буду использовать следующую комбинацию инструментов для описания процесса работы:

Atomic-подход со знакомыми инструментами

Стайл-гайд

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

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

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

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

Базовый стайл-гайд

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

Правила наименования

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

Слова всегда написаны в нижнем регистре и разделены дефисами. Так их просто использовать дизайнеру. И легко использовать разработчику в исходном коде и для наименования файлов. Более того, такой формат названий позволяет быстро понять, какие слои или группы из вашего макета описаны в стайл-гайде. У вас все равно останутся простейшие слои типа bg, divider и так далее.

Первая буква отвечает за категорию элемента: атом, молекула, организм. Далее следует слово, описывающее тип элемента. Остальная часть используется для описания вариаций этого компонента.

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

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

Четко установленные правила наименования имеют немаловажную роль в успехе дизайн-системы. К примеру, разработчик изучает ваш макет и видит организм o-popup-alert-exit . Он открывает папку с исходным кодом проекта и видит, что компонент уже разработан в файле o-popup-alert-exit.html (ведь у него такая же система наименования). Вместо того, чтобы заново делать компонент, он оперативно добавляет его в нужное место проекта.

Старайтесь делать имена различимыми и понятными, не используйте числа. Например, a-dropdown-main, a-dropdown-secondary , вместо a-dropdown-1, a-dropdown-2 . Имена, в которых содержится смысл, позволят избежать недоразумений (у нас на практике был случай, когда неправильная цифра повлекла за собой целую серию ошибок в макетах и имплементации).
Во время наименования старайтесь сосредоточиться на роли элемента в системе, а не его внешнем виде. Не называйте кнопку для главного действия a-button-blue только потому, что она синяя. Это главная кнопка, так что зовите её a-button-primary . В будущем, если цвет главных кнопок у вас поменяется, вам не придется переименовывать каждую синюю кнопку на каждой странице. И просто взглянув на название компонента, вы сможете прикинуть, какую роль он играет в системе.

Sketch Libraries

Примечание: не забудьте организовать и упорядочить символы вашего стайл-гайда на странице Symbols. Когда гайд растет, эта страница становится беспорядочной свалкой. Вам не нужно делать это вручную, достаточно использовать плагин, например, Symbol and Artboard Organizer . Если вы назвали ваши символы правильно, он сделает всё в один клик.

Дизайн-макеты

Базовый стайл-гайд создан, настало время собирать страницы. Организуйте ваш рабочий процесс следующим образом:

1. Соберите макет страницы. Некоторые элементы будут из стайл-гайда, но многие - абсолютно новые. Пока что организуйте ваши слои в группы так, как вы обычно делаете.

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

3. Дизайн-макет утвержден, настало время атомизировать его. Убедитесь, что все ваши слои и группы названы и структурированы согласно методологии, описанной выше. Добавьте компоненты и их описания в стайл-гайд. Как правило, на начальных этапах проекта этот шаг занимает существенное количество времени. Будьте готовы к этому.

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

5. Наконец, ваша страница задокументирована полностью. Это означает меньше вопросов от разработчиков и более продуктивный рабочий процесс.

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

Часть 4. Как Atomic-методология может помочь вашей команде

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

Разработчики пользуются Invision Inspect для просмотра структуры макето в

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

Улучшения имплементации дизайна и коммуникации в команде . Успех любого проекта значительно зависит от хорошей кооперации дизайнеров и разработчиков. Методология, описанная в статье, позволяет команде найти общий язык общения. Принятые правила наименования и детализированные описания компонентов играют существенную роль в этом. Любой участник команды имеет полную наглядную документацию. Это означает меньше недопониманий и более качественно имплементированный дизайн.

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

Выводы

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

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

Дизайн сайтов претерпел огромные изменения с начала веб индустрии. Если мы рассмотрим начало расцвета интернета в России, то это условно 2001 год, примерно с этого времени Интернет стал проникать в нашу жизнь повсеместно. Менялось время, менялся и дизайн. Первое, о чем я сразу хочу сказать, что в веб-разработке существуют так называемые тренды. Это новые решения в дизайне, снискавшие популярность у пользователей и разработчиков. Они могут надолго закрепиться и стать некоторым стандартом разработки сайтов. Или же довольно быстро кануть в лету.

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

Одним из новых трендов, который становится стандартом дизайна, является атомарный дизайн сайта .

Что это и в чем его отличие? Ответить на этот вопрос нам поможет знание причин его происхождения. Главная причина проста. Это мобильные пользователи. Пользователей, сидящих в сети с мобильных устройств, все больше и больше. Они уже давно перевалили за 50% практически по всем нишам и стабильно приближаются к 70% от общего трафика. Когда разработчики обратили внимание на эту проблему, то первичным решением было создание мобильной версии сайта. Дизайнерам и разработчиком приходилось фактически делать два сайта: основной, в который вкладывалась большая часть усилий, и второй, поменьше, мобильный. Распространенность мобильных устройств с возможностью выхода в сеть достигла наивысшей точки, поэтому мобильный трафик игнорировать больше нельзя.

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

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

Элементы атомного дизайна

В структуре атомарного дизайна прослеживается 5 основных уровней:

Атомы
Молекулы
Огранизмы
Шаблоны
Страницы

Атомы - это базовые элементы, которые определяют будущий дизайн сайта.

Молекулы - это соединение атомов в первые осмысленные блоки и приобретение первого разрозненного функционала.

Организмы - следующий этап эволюции дизайна. Позволяет нам предугадать будущую структуру..

Шаблоны - уже практически готовый дизайн, максимум конкретики котору. мы получаем если собираем все предыдущие элементы вместе.

Страницы - Финальная стадия дизайна.

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

TL; DR: Атомарный дизайн с использованием Sketch - это будущее продукции дизайна.

Иди со мной

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

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

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

1-j1P0pjQtl36QJavv8lHdyw

Из чего состоит Атомарный дизайн?

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

Атомы

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

2 1-SmVWgKY2jdCYOV4dXJNlkg

Молекулы

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

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

3 1-kA-WoT5O0uCgeowzhuSwiQ

Микроорганизмы

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

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

4 1-aL51hsdFw7ugSXXB5HnWZQ

Шаблоны

Шаблоны по сути своей те же самые схемы. Объединив несколько микроорганизмов, мы действительно начинаем видеть большую картину того, что мы строим.

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

5 1-mx-cBDwsz3MkXa-oX_-56g

Страницы

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

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

Почему Sketch?

Несмотря на то, что Sketch может быть еще не лидер положения, которыми являются Adobe Illustrator или Photoshop, он по-прежнему уникальный инструмент при работе по методике Атомарного дизайна.

Организация

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

7 1-gyxduSTXDd1K-7eEuW1xHA

Модульность

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

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

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

9 1-QU5UMRKF7jnifIcA0K6RlA

Подсказка: Для того, чтобы элементы с текстом превратились в модульные символы в Sketch, убедитесь, что вы также проверили поле Исключить текстовое значение из символа в панели инструментов справа.

Для этого, во-первых, вы должны выбрать текст внутри символа. Если вы не сделаете этого, вы не увидите опцию в панели инструментов справа.

10 -5iQXZSddoS-OxEm0YfU1Sw

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

11-X9DNHPtyXiBxYEes10u_Iw

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

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

Преобразование в код

Теперь, когда мы создали наш проект, настало время экспортировать элементы в код.

Экспорт в код

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

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

12-0JSPPy6qdMM6UUUfzH1Zmw

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

13-qrSfNi7EmBroFNQoM1zcuw

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

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

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

Брэд Фрост и Дэйв Олсон из Pattern Lab создали удивительный пример того, как это выглядит. Оцените.

Использование шаблонных языков

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

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

Таким образом, вы сделали это

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

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

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

Высоких конверсий!

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 .