Все, кто когда-либо разрабатывал дизайн сайтов, знают, насколько это нелегкая и кропотливая работа. Да, если вы работаете в одиночку, все немного проще: вы сами решаете, как должен выглядеть итоговый результат, оговариваете правки с заказчиком, устанавливаете свои негласные правила, согласно которым создаете дизайн. Но если вы работаете в команде, на счету которой не один десяток проектов, отсутствие четкой методологии наверняка скажется на эффективности вашей работы.
Отсутствие четких правил работы над дизайном приведет к тому, что каждый дизайнер будет проектировать элементы по-своему. В итоге уже готовые эскизы придется постоянно корректировать, верстка часто будет отличаться от изначально созданных макетов, а о постоянной реализации новых идей придется забыть, ведь кучу времени будет отнимать рутинная работа. Если в команду придет новый человек, ему понадобится не один месяц, чтобы войти в курс дела и начать полноценно работать. Разумеется, при полном «хаосе» в команде дизайнеров сбиты с толку будут и разработчики. В результате - недовольные клиенты, неэффективная работа, отсутствие какого-либо развития.
Во избежание подобных ситуаций команде просто необходима система правил по разработке дизайна. В последнее время для систематизации процесса разработки сайтов нередко используют методологию «атомарного дизайна », предложенную в 2013 году Брэдом Фростом . Эта методология полезна не только для крупных компаний, но и для тех, кто работает над сайтами в одиночку, ведь она помогает значительно упростить процесс разработки. Сегодня мы постараемся разобраться, что такое атомарный дизайн и как эта методология поможет вам оптимизировать рабочий процесс.
Что такое атомарный дизайн?
Как утверждает сам создатель методологии, идея атомарного дизайна пришла к нему из химии. Как известно, в природе все вещества состоят из атомов и молекул. Подобным образом Фрост рассматривает интерфейсы, ведь они тоже состоят из определенных компонентов. Данная методология предлагает дизайнеру работать не над целым интерфейсом сразу, а создать сначала его компоненты, постепенно объединяя их в блоки и создавая дизайн. Одним словом, методология «атомарного дизайна» требует от разработчика умения мыслить от меньшего к большему и комбинировать готовые элементы.
В методологии атомарного дизайна выделяют 5 уровней разработки:
1. Атомы
Это наименьшие части интерфейса - кнопки, поля ввода, абзацы, заголовки, иконки, изображения. В понятие атомов входят также и более абстрактные понятия - цвета, шрифты, градиенты, анимации. Подразумевается, что дизайнер сначала определит, какие элементы понадобятся ему для создания макета страницы и разработает их дизайн.
Сами по себе атомы бесполезны, но, объединяя их в блоки, дизайнер постепенно придет к целостной структуре интерфейса. Уже на стадии атомов разработчику стоит позаботиться о том, чтобы все элементы соответствовали определенному стилю и сочетались между собой.
2. Молекулы
Молекулы - это комбинации двух и больше атомов; наименьшие блоки, из которых состоит дизайн. К примеру, объединив несколько полей ввода, кнопок и иконок мы получим готовую форму. На этой стадии преимущества атомарного подхода уже более понятны - ведь очевидно, что молекулы можно использовать повторно, а это существенно сокращает время разработки.
3. Организмы
Организм - это совокупность молекул. На этой стадии разработчик уже гораздо ближе к конечному результату, ведь организмы - это готовые разделы интерфейса. На данном этапе заказчик уже может видеть, какими будут отдельные блоки сайта, и при необходимости внести свои правки. Сделать это будет крайне просто: дизайнеру, который изначально работал по атомарной методологии, не придется долго искать нужные элементы в коде или редактировать целую структуру страницы. Таким образом, простота изменения сайта также относится к преимуществам атомарного дизайна.
4. Шаблоны
Объединяя организмы и размещая их согласно намеченному эскизу, вы получаете шаблон - готовый прототип вашего интерфейса. Зачастую сначала создается структурная схема страницы (wireframe). В этой схеме дизайнер определяет, как будут размещены элементы и как они будут реагировать на действия пользователей. Некоторые разработчики создают простой черно-белый макет, который постепенно превращается в готовую страницу. Так или иначе, данный этап крайне важен - ведь стоит изначально определить, какие элементы должны привлекать внимание пользователей, а какие можно опустить на второй план.
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 и любой из многих других языков, доступных сегодня.
Многие из микроорганизмов, которые мы спроектировали, станут частичными как только их преобразуют в код.
Таким образом, вы сделали это
Теперь вы можете сделать вид, как будто вы знаете что-то о науке. И в какой-то степени вы действительно знаете. Атомарный Дизайн - наука о дизайне высокого качества.
Создавая модульные, повторяющиеся элементы и модели мы можем экспоненциально ускорить процесс проектирования и разработки. Дело не только в том, как быстро их можно построить, но и в том, как быстро сделать изменения во всей системе.
Проведите немного больше времени, размышляя о ядре системы, и вы как будто вернетесь назад во времени, пока разворачивается этот процесс.
Высоких конверсий!
При создании веб-сайтов дизайнеры и разработчики используют различные методики. Кто-то , кто-то использует мудборды и UI-киты, кто-то занимается прототипированием и определением основных элементов.
Мы расскажем о методологии «Атомарный дизайн», созданной Брэдом Форстом, разработчиком интерфейсов из США. Эта методика получила популярность среди веб-дизайнеров благодаря своей простоте и эффективности. Как можно использовать Atomic Design в работе, что это такое и как поэтапно его внедрить - читайте в статье.
Понятие атомарного веб-дизайна
Брэд Форст задумался о строении нашей Вселенной. Мы знаем, что одной из самых маленьких частиц является атом. Из атомов состоят наши тела, предметы и воздушное пространство, мониторы наших компьютеров и живые существа. Если Вселенную можно разбить на множество конечных частей, почему же мы не можем представить интерфейс, который также состоит из модулей - кнопок, иконок, полей ввода в формах и многого другого. Так появилось понятие атомарного дизайна - концепции, в которой интерфейс представляет собой множество отдельных элементов .
Атомарный дизайн подразумевает разработку отдельных частей системы, которые впоследствии можно объединить для создания шаблонов и полноценных веб-страниц. В природе атомы объединяются в молекулы, молекулы - в микроорганизмы и сложные системы . Такое сравнение можно применить и к интерфейсам. Остановимся на данной аналогии подробнее.
Атомы
Атомы в веб-интерфейсе - базовые элементы, которые нельзя разбить на еще меньшие, не потеряв при этом их функциональности . К таким частям относятся:
- кнопки;
- веб-формы;
- иконки;
- поля ввода;
- чекбоксы;
- текстовые стили и другие базовые элементы.
Также атомы могут быть абстрактными понятиями - шрифтами, динамическими эффектами, цветовой палитрой и прочим. Каждый атом обладает конкретными индивидуальными характеристиками.
Молекулы
Объединение атомов называется молекулой. Например, если мы комбинируем друг с другом поле ввода, кнопку и чекбокс получается форма . Таким образом, соединения атомов веб-интерфейса образуют отдельные элементы системы.
В веб-дизайне молекулами могут быть:
- формы;
- навигация или меню сайта;
- карточка товаров;
- баннеры с подписями и прочее.
Связь атомов друг с другом дает совсем иное значение элементам. Теперь кнопка не является просто частью дизайна, а связана с полем ввода и представляет собой отдельную деталь, которая предназначена для отправки формы.
Организмы
Организмы - это сложная совокупность элементов: молекул и отдельных атомов . К примеру, есть шапка сайта, которая состоит из нескольких частей: логотипа, пунктов меню, контактов, корзины, формы поиска, кнопки и декоративных элементов. Хедер является независимой частью интерфейса и состоит из отдельных маленьких модулей. Объединение этих молекул и атомов можно назвать организмом.
К организмам можно отнести:
- шапку сайта;
- полностью оформленные карточки товаров с формами заказа и выбором характеристик (как создать идеальную - );
- футер;
- товарные сетки и прочее.
Организмы - это уже самостоятельные элементы, которые используются для создания более сложных конструкций - шаблонов.
Шаблоны
Шаблоны объединяют компоненты в единообразный макет и формируют первоначальное представление о будущей странице. К примеру, обратимся к предыдущей версии шапки сайта и попробуем сделать шаблон, состоящий из схематичных отображений организмов, молекул и атомов.
Шаблон - это своеобразный каркас будущей веб-страницы. В нем содержатся основные модули, без отображения основного содержимого. В результате отдельные элементы приобретают определенный контекст и становятся частью одного целого. Прототипирование - схожий процесс, который также размещает детали страницы на макете, однако, не учитывает принцип «от меньшего к большему».
Шаблоны могут быть различными и меняться в соответствии с предполагаемым контентом. К примеру, можно выделить:
- шаблоны для различных категорий товаров, например, для одежды и для мебели;
- шаблоны для страниц с акциями, приуроченных к праздникам. Например, создание нового раздела в каталоге товаров в предновогоднее время (подробнее об оформлении сайта к Новому году );
- шаблоны страницы оформления заказа, где клиенту предоставляется персональная скидка и прочее.
Страница
Страница - это конкретный результат применения шаблона. Мы добавляем в шаблон реальный контент и анализируем, отвечает ли получившаяся страница нашим представлениям об эффективном интерфейсе.
Это последний этап, который показывается заказчику и пользователям сайта. В тех случаях, когда страница выглядит не так, как хотелось бы, мы можем поменять отдельные организмы, молекулы или атомы. В этом и есть основная идея атомарного дизайна: мы создаем полноценную систему, в которой изменяем отдельные ее элементы . 5 самостоятельных этапов, которые впоследствии работают одновременно.
В чем еще «фишка» атомарного дизайна? Есть ресурсы, в которых страницы в разделах выглядят разрозненно, нет общего стиля. С помощью Atomic Design создается единая концепция сайта, где расписано, как должны выглядеть отдельные атомы, молекулы, организмы и страницы в целом. Так можно добиться единой атмосферы и сделать сайт однородным.
Как применять Atomic design на практике
С помощью атомарного дизайна мы создаем структуру с самых начальных элементов, которые объединяют веб-страницы сайта единым стилем. В теории понятно, что есть конкретные детали, как детали в большом механизме, но как теоретические знания применить на практике?
При работе над крупными проектами - многостраничными ресурсами со множеством форм и разнообразным контентом, необходим единый документ, из которого команда веб-дизайнеров и разработчиков смогут понять концепцию сайта и по крупицам собрать единую структуру. Этот документ называют стайл-гайдом, в котором описан каждый этап.
Стайл-гайд создается в несколько этапов:
- Сначала разрабатывается страница, в которую включены как ранее придуманные атомы, так и новые модули. Дизайн согласовывается с заказчиком.
- После этого веб-страница разбирается на детали, которые описываются в стайл-гайде. Как правило есть отдельные правила для названия атомов, которые потом используют разработчики при написании кода.
- Остальные страницы создаются с помощью разработанного документа.
Готовый набор элементов позволяет сразу проектировать интерфейсы, не тратя силы на отрисовку отдельных деталей, выбор цветовой палитры и шрифтов.
Atomic Design - удобный способ создания дизайна интернет-магазинов. Как правило, на таких ресурсах очень много блоков - карточки товаров, всевозможные баннеры с акциями, формы для заказа. Каталог делится на несколько отдельных страниц, и в этом случае важно выдержать дизайн в едином стиле. Пример страницы интернет-магазина, дизайн состоит из отдельных модулей:
Здесь мы видим карточки товара с ценой и кнопкой «купить», баннер с промокодом, различные фильтры, переключатели страниц и выпадающий список. Каждый элемент может быть разработан по методологии атомарного дизайна, внесен в стайл-гайд и впоследствии применяться для дизайна других страниц каталога.
В связи с этим, можно выделить несколько этапов создания дизайна модульного сайта:
- разработка основной концепции и базовых атомов и молекул;
- создание первого шаблона и страницы, согласование с заказчиком;
- разработка стайл-гайда, в который вносятся как базовые атомы, так и новые, появившиеся во время оформления шаблона и страницы;
- на основании стайл-гайда разработка остальных страниц веб-сайта, используя выбранную цветовую палитру, шрифты и другие элементы;
- тестирование интерфейса и замена отдельных элементов по необходимости (к примеру, если пользователям не подошла форма заявки, можно заменить ее, не изменяя остальные части).
Созданные детали используют на разных страницах сайта, тем самым сокращая общее количество элементов и время разработки. Разработанные прототипы часто используют в других проектах.
Технология атомарного дизайна подходит не только для разработки веб-сайтов, но и для создания программного обеспечения, мобильных приложений и других объектов. К примеру, Брэд Форст применяет методику к известному приложению Instagram и разбивает его на несколько частей:
Таким образом, можно упростить каждое приложение до уровня атомов и менять шаблоны в соответствии с требованиями пользователей.
Как атомарный дизайн поможет в работе
Используя методологию, можно не только создать привлекательный и удобный для пользователей интерфейс, но и правильно организовать работу дизайнеров. Подход обладает несколькими преимуществами, относительно классических методов создания дизайна.
1. Оптимизация ресурсов
Данный подход экономит время дизайнеров и разработчиков. Конечно, создание полного стайл-гайда требует усилий и времени, но если вы работаете над крупным проектом, с помощью задокументированных компонентов количество лишней работы существенно уменьшится.
2. Повторное использование
Созданные модули можно реализовывать в других проектах заказчиков, ведь все этапы, кроме создания страниц, можно рассматривать как абстрактные компоненты, без привязки к определенному контенту.
3. Эффективная организация работы
Работая над одним проектом, дизайнеры и веб-разработчики находят общий язык и помогают друг другу. Структурированная документация проекта поддерживает дисциплину внутри команды, поэтому все организационные вопросы решаются сами собой, не возникает непонимания поставленных задач.
4. Простота понимания
Дизайн и код, созданный с помощью данной технологии, легко читается. Простые названия отдельных элементов (разработчики используют наименования компонентов в коде) помогают дизайнерам и программистам понимать друг друга.
5. Легкость в поддержке
Меняются с каждым годом и целевая аудитория ресурса может требовать от разработчиков обновлений. С помощью атомарного дизайна можно с легкостью поменять шаблон и протестировать новвоведения на пользователях. Так, создавая атомы и молекулы можно менять их со старыми, тем самым создавая новый дизайн.
Чем отличается атомарный дизайн от UI-китов
UI-kit представляет собой набор деталей интерфейса - кнопок, баннеров, переключателей, слайдеров и других элементов. Это чем-то похоже на собранный стайл-гайд из атомов и молекул, о котором говорилось ранее. В чем же отличие UI-kit от концепции атомарного дизайна?
Дело в том, что атомарный дизайн - это технология последовательного создания дизайна веб-сайта, тогда как UI-kit - своеобразная библиотека компонентов . Наборы являются важным и полезным инструментом при разработке дизайна, так как упрощают работу дизайнера, способствует приведению страниц к единому стилю. На примере представлена часть UI-kit, которая визуально описывает кнопки и чекбоксы:
Здесь указано несколько вариантов кнопок, их состояния (активное, при наведении, при нажатии), а также другие . Однако, UI-kit не будет таким полным, как разработанная дизайн-система в соответствии с методологией Atomic Design.
Если использовать только набор элементов, может появиться такой шаблон, который будет отличаться от выбранной концепции, так как при его создании не учитывалось состояние других шаблонов и страниц. Можно назвать UI-kit исходником атомов и молекул, но не стайл-гайдом для дизайна сайта в целом. Однако, использование UI-kit экономит ресурсы дизайнера и позволяет создать стильный продукт за меньшее время.
Использование различных методик при разработке - правильная и полезная практика. применяет разнообразные подходы в разработке, каждый раз тестируя решения и выявляя наиболее эффективные способы для создания продающих сайтов и повышения конверсии с помощью интерфейсов.
Предлагаю читателям «Хабрахабра» перевод статьи Брэда Фроста (Brad Frost) «Atomic Web Design» .
Мы не проектируем страницы, мы проектируем системы компонент. - Stephen Hay
По мере того, как ремесло веб-дизайна продолжает развиваться, мы всe больше ощущаем нужду в продуманной, системной разработке, в отличие от создания простых наборов веб страничек.
Многое было сказано насчeт создания систем дизайна, и наибольший акцент делается, в основном, на установление цветов, типографии, сеток, текстур и т.п. Такой тип мышления, несомненно, важен, но я чуть меньше заинтересован в этих аспектах дизайна, потому что, по большому счeту, они всегда субъективны. В последнее время меня больше озадачил вопрос о том, из чего состоят наши интерфейсы, и как мы можем проектировать их более систематично.
В поисках вдохновения я возвращался к химии. Всe вещества (будь то твeрдые тела, жидкости, газы, простые, сложные и т.д) состоят из атомов
. Атомы связываются между собой и образуют молекулы
, которые, в свою очередь, комбинируются и формируют организмы
. В конечном счeте так создается все вещество в нашей вселенной.
Аналогично интерфейсы состоят из меньших компонент. Это означает, что мы можем разбить интерфейсы на фундаментальные блоки и комбинировать их, постепенно наращивая сложность . Это суть атомного веб дизайна.
Переодическая система элементов HTML.
Что такое атомарный дизайн
Атомарный дизайн это методология создания систем дизайна. В атомном дизайне есть пять отчётливых уровней:- Атомы
- Молекулы
- Огранизмы
- Шаблоны
- Страницы
Атомы
Атомы в природе - это основные строительные блоки материи. В контексте веб-интерфейсов атомы - это HTML тэги, такие как форма, поле ввода, или кнопка.
Атомы могут включать в себя даже более абстрактные элементы, такие как цветовые палитры, шрифты, или даже такие более скрытые аспекты интерфейса как анимации.
Как и атомы в природе, они довольно абстрактны и зачастую бесполезны сами по себе. Однако польза от их проектирования состоит в задании единого общего стиля интерфейса.
Молекулы
Всё становится интересней и ощутимей, когда мы начинаем комбинировать атомы. Молекулы - это совокупности связанных между собой атомов. Они имеют собственные свойства и играют роль скелета нашей системы дизайна.Например - метка, поле ввода и кнопка не так уж применимы сами по себе, но могут быть действительно полезными, если их соединить.
Построение молекул из атомов способстует умонастроению «делай что-то одно, но хорошо» . В то время как молекулы могут быть достаточно сложными, чаще всего это простая комбинация атомов, построенная для повторного использования.
Организмы
Молекулы дают нам некоторые строительные блоки для работы. Теперь мы можем соединять их вместе для формирования организмов. Организмы - это объединения молекул, которые образуют довольно сложные, отдельные разделы интерфейса.
Мы всё быстрее переходим к конкретике . Клиент может быть не очень заинтересованным в молекулах системы дизайна, но с появлением огранизмов можно наблюдать начало формирования конечного продукта. Дэн Молл (с которым я работаю над несколькими проектами) использует коллажи элементов, которые показывают ключевые идеи и направления интерфейса без нужды проектирования сайта целиком.
Огранизмы могут состоять из похожих или разных типов молекул. К примеру, заголовок страницы может состоять из разных компонент - логотипа, главного меню, формы поиска и списка медиа-каналов. Но организм, отображающий сетку товаров, может содержать одну молекулу (изображение продукта, название и цена), которая повторяется много раз.
Переход от молекул к организмам способствует созданию самостоятельных компонент, готовых к повторному использованию.
Шаблоны
На этой стадии мы перестанем проводить аналогии с химией, чтобы общаться на более осмысленном для наших клиентов языке. Шаблоны чаще всего состоят из групп организмов, связанных вместе и формирующих страницы. Именно на этом этапе становится видна общая картина.
Шаблоны очень конкретные и предоставляют контекст ко всем довольно абстрактным молекулам и организмам. Именно шаблон позволяет видеть конечный дизайн. В моём опыте работы с этой методологией шаблоны начинаются с HTML wireframe"ов, но со временем становятся более точными. В итоге они становятся конечными продуктами. Bearded Studio в Питтсбурге имеют похожий процесс, при котором дизайны начинают разрабатывать чёрно-белыми и без разметки, но постепенно набирают конкретики и деталей до тех пор, пока не становятся конечными работами.
Страницы
Страницы - это конкретные экземпляры шаблонов. В них для точной передачи того, что увидит пользователь, «заглушечный» контент заменён настоящим.
Страницы - это высший уровень конкретики и, т.к. они наиболее осязаемы. В работе над ними тратится большинство времени большинства людей, вовлечённых в процесс, и на них пишется большинство обзоров.
Страничная стадия необходима, потому что именно на ней проверяется эффективность всей системы дизайна. Видя всё в контексте можно сделать шаг назад и изменить наши молекулы, организмы и шаблоны для того, чтобы лучше подстроиться под реальный контекст дизайна.
Также это стадия для тестирования изменений в шаблонах. Например, вам нужно удостовериться в том, что заголовок с 40 символами выглядит согласованно с заголовком из 340 символов. Или проверить, как вместо корзины с одной вещью выглядит она же с 10 вещами и со скидкой по промо-коду. Эти ситуации влияют на то, как мы строим нашу систему.
Почему атомарный дизайн
Во многих смыслах именно так мы и делали сайты, даже если мы не задумывались об этом сознательно.Атомарный дизайн предоставляет ясную методологию для создания систем дизайна. Клиенты и члены команды могут оценить идеи конкретной системы дизайна благодаря тому, что они видят этапы её разработки.
Атомарный дизайн даёт нам возможность переходить от абстрактного к конкретному. Поэтому мы можем создавать системы, являющиеся масштабируемыми и обладающие единым, постоянным стилем, и в то же время показывающие итоговую общую картину. Процесс вместо деструктурирования превращается в сборку - мы создаём структуру с самого начала, а не тщательно выбираем подходящие шаблоны после.
Pattern Lab
Для применения этой методологии в своей работе я (с помощьюПеред вами перевод книги Atomic Design Брэда Фроста, разработчика интерфейсов, поклонника мобильного интернета и создателя методики “Атомарный дизайн”.
Нам поручено создание интерфейсов для все большего числа пользователей, которые используют разные браузеры на разных устройствах с разным размером экранов и с таким количеством возможностей, как никогда прежде. Это действительно грандиозная задача. К счастью, нам на помощь приходят системы проектирования.
Книга “Атомарный веб-дизайн” подробно описывает весь процесс создания и поддержания надежных систем проектирования, которые позволят быстрее выпускать более качественные и логичные пользовательские интерфейсы.
В этой книге представлена методология работы с пользовательскими интерфейсами как с продуманным иерархиями, обсуждаются способы эффективной организации библиотек шаблонов и демонстрируются методы оптимизации проектной документации вашей команды.
Вступительное слово
Джош Кларк и Дэн Молл
На дворе стоял 2013 год. Мы в компании Брэда Фроста собрались в Бруклине на залитой солнечным светом кухне в гостях у Дженнифер Брук. Наша четверка как раз начала работать над новым веб-сайтом для TechCrunch. Мы рисовали эскизы страниц, мучаясь с новыми требованиями адаптивного дизайна. Неожиданно Брэд достает ноутбук и заявляет: “Я тут поэксперементировал с новой идеей…”
Результат эксперимента Брэда выглядел так, словно сайт взорвался. Кусочки и обрывки UI болтались независимо друг от друга, не связанные единым дизайном или иерархией. Все это было похоже на груду запасных частей из гаража веб-дизайнера.
Улыбаясь, как сумасшедший, Брэд спросил: “Круто, правда?”
Мы же смотрели на экран с каменными лицами. Кто-то вежливо покашлял.
А затем Брэд Фрост, фронт-энд разработчик, вдруг заговорил как Брэд Фрост, химик. Он говорил об атомах, молекулах и организмах - о том, как крупные элементы дизайна могут быть разбиты на меньшие части и даже могут стать частью других крупных элементов. Другими словами, вместо готового блюда, он показал нам его ингредиенты.
И тут нас озарило. Ведь это был настоящий прорыв: вместо создания набора статичных страниц, начать работать с динамичной системой адаптивных элементов. Этот подход стал движущей силой при создании нашего проекта для TechCrunch. Да и всех остальных проектов, связанных с адаптивным дизайном, если уж на то пошло.
Свою идею Брэд называл “атомарный дизайн”, и она полностью изменила наш подход к работе в этом потрясающем мульти-девайсном мире. Сумев взглянуть на интерфейс сразу в двух измерениях - на макро-уровне (страницы) и микро-уровне (элементы) - мы смогли упростить разработку. Мы ввели более строгие требования к функции каждого элемента; у нас появились привычки, сделавшие наш UX лучше; и, что действительно важно, мы начали работать быстрее и более согласованно. Атомарный дизайн стал для нас супер-силой!
На ранних этапах редизайна TechCrunch был момент, когда мы обсуждали оформление страницы для статей. Всего за час Брэд из своего набора элементов собрал абсолютно адаптивную версию страницы. Именно тогда мы осознали, как быстро сможем двигаться вперед, и решили, что такой подход однозначно стоит вложения сил.
Почти четыре года спустя мы уже не оглядывались назад. Брэд продолжил совершенствовать свои техники и инструменты в работе над последующими проектами, в том числе для Entertainment Weekly и Time, Inc. Мы использовали полученные знания, чтобы помогать командам внутри компании делать сайты быстрее и качественнее; мы проектировали сложные системы дизайна для организаций, которые хотели упорядочить дизайн и разработку в обособленных международных офисах и многое другое.
Атомарный дизайн придал нам ускорение, дал свободу творчества и гибкость. Он изменил все. Уверены, он сработает и для вас.
Эта замечательная книга объяснит философию, применение и поддержку систем атомарного дизайна. Причем сделает это с радостью и великодушием, которые присущи самому Брэду.
Энергия и энтузиазм Брэда во всем, что связано с интернетом и его творцами, поистине безграничны. На протяжении многих лет он оттачивал мастерство адаптивного дизайна и делился своими наработками.
Его сайт This Is Responsive - это готовый ресурс для поиска решений любых задач, связанных с UX. У него есть блог и Твиттер, где он также делится проблемами и их решениями. Когда дизайнеры и разработчики следуют указаниям Брэда Фроста, они попадают в быстрый и плотный поток вдохновения, необходимого для создания красивых и жизнеспособных веб-сайтов. Эта книга удваивает эффект.
Будь такая возможность, Брэд постучался бы дверь каждого дизайнера и разработчика, чтобы лично донести свои идеи. Мы с восхищением (и легкой завистью ) наблюдали, как Брэд словно ураган пронесся по всем шести континентам, распространяя знания среди сотен команд и компаний. (Вероятно, вскоре атомарный дизайн доберется и до Антарктики! ) Но поскольку Брэд Фрост все-таки не может быть во всех местах сразу, мы рады, что он рассказал о своих идеях в этой книге, полной смысла и тонкого юмора.
Атомарный дизайн - это глобальный тренд; он изменил наши подходы к дизайну; и мы с нетерпением ждем того момента, когда он привнесет такую же творческую искру в вашу работу.
