Рабочий процесс Unicorn:

20

От дизайна к коду с принципами Атомарного Дизайна (Atomic Design) и Sketch

Вкратце: Атомарный Дизайн на базе Sketch — это будущее продуктового дизайна.

Над переводом работали: Nancy Pong и Ринат Шайхутдинов. При поддержке iSpring.

iSpring — решение для запуска дистанционного обучения.


Интересующиеся свежими статьями собираются в группе UxJournal на Facebook

Введу вас в курс

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

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

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

Как практиковать Атомарный Дизайн?

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

Атомы

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

Молекулы

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

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

Организмы

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

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

Шаблоны

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

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

Страницы

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

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

Почему Sketch?

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

Организация

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

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

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

Модульность

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

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

Для начала, сделайте элемент таким, как вам нравится.

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

Профсовет: Чтобы превратить элементы с текстом в удобные модульные символы, убедитесь, что включили опцию Исключить текстовое значение из символа (Exclude Text Value from Symbol) на панели инструментов справа.

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

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

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

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

Превращаем в код

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

Экспорт в код

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

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

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

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

HTML

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

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

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

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

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

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

Итак, вы разобрались

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

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

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

Если хотите узнать, почему я делаю именно так (намек: экономлю время и деньги), читайте мою статью.

Ресурсы

Благодарности

Обязательно читайте Бреда Фроста и посмотрите его совместную с Дейвом Олсоном работу в Pattern Lab.

Благодарность Далтону Мэгу за создание прекрасного шрифта Precision Sans.

Скачайте Sketch 3. Хотя бы на время бесплатного триала!

И наконец, огромное спасибо моему хорошему другу и выпускнику BDW Нику Стивенсу, за то что показал мне методологию Атомарного Дизайна. Надеюсь ты быстро поправишься после аварии и скоро будешь здоров!


Я сейчас работаю продуктовым дизайнером и разработчиком в Quick Left в Боулдере (Колорадо) и пишу статьи для InVision.

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



Мобильное приложение «Заметки о психике» | Mental Notes

Подкидывает идеи, как привлечь, удержать и направить внимание пользователя.

Mental notes — это колода из 53 карточек с описанием психофизиологических моделей поведения людей, которые лежат в основе принципов веб-дизайна. Они помогают дизайнерам, проектировщикам лучше понять поведение пользователей и найти эффективные решения при создании дизайна интерфейсов.

Скачать приложение в Appstore →

Посты в категории UX-дизайн

40+ способов сделать опросы точнее: чек-лист для ux-исследователей

Ольга Жолудова

18 октября 2019

Посты в категории UX-дизайн

Ген UX/UI дизайнера: 5 жизненных принципов от продуктового дизайнера Atlassian

Ринат Шайхутдинов

18 июня 2019

Посты в категории UX-дизайн

100 вопросов для UX-анализа

Ольга Жолудова

22 апреля 2019