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, эти элементы называются символами.
Создание символа позволяет изменять все стили на одном элементе и наблюдать, как эти изменения происходят во всех подобных элементах, по всему файлу.
Для начала, создайте элемент таким, каким бы вы хотели его видеть.
8 1-Z056D4H4UkFmxBe6jCUcbw
Далее, выделите его и нажмите кнопку Create Symbol в набор инструментов наверху.
9 1-QU5UMRKF7jnifIcA0K6RlA
Подсказка: Для того, чтобы элементы с текстом превратились в модульные символы в Sketch, убедитесь, что вы также проверили поле Исключить текстовое значение из символа в панели инструментов справа.
Для этого, во-первых, вы должны выбрать текст внутри символа. Если вы не сделаете этого, вы не увидите опцию в панели инструментов справа.
10 -5iQXZSddoS-OxEm0YfU1Sw
Теперь вы можете оставить символ в любом месте и изменить внутренний текст без изменения текста в любом другом аналогичном символе, используемом в вашем дизайне.
11-X9DNHPtyXiBxYEes10u_Iw
Если внутренний текст не то, что вы планируете менять, забудьте про этот шаг. Но помните, что он есть, и это невероятно удобно.
Каждый раз, когда вы захотите разместить один из элементов, которые вы создали, все что вам нужно сделать, это нажать на выпадающем меню Вставка, найти опцию Символы и выбрать символ, который вы хотите использовать в выпадающем меню.
Преобразование в код
Теперь, когда мы создали наш проект, настало время экспортировать элементы в код.
Экспорт в код
Что лучше модульных символов? Экспортировать свои проекты непосредственно в код. Это означает, что вы дизайнеры не должны учиться кодировать, а вы разработчики не должны знать, как ломать активы дизайна. Хотя, вам следует это знать.
Чтобы получить код для элементов, вам сначала нужно убедиться, что они либо объединены надлежащим образом или превращены в символы. После этого, все просто, достаточно нажать правой кнопкой мыши на элементе и выбрать Копировать Атрибуты CSS из выпадающего списка
12-0JSPPy6qdMM6UUUfzH1Zmw
Все, что вам нужно сделать – это скопировать оттуда и вставить код в ваш любимый текстовый редактор.
13-qrSfNi7EmBroFNQoM1zcuw
Убедитесь, что вы учли все необходимые приставки также, потому что они исходят не от Sketch. В противном случае, убедитесь, что вы используете пакет функций, чтобы справиться с ними.
HTML
Так же, как Bootstrap или шаблон Foundation, теперь наши элементы в определенном стиле, и все что мы должны сделать, это добавить класс к элементу в нашем HTML.
Переход отсюда значит создание элементов HTML страниц, которые будут видны только командой разработчиков. Здесь мы можем создать страницу наших элементов с соответствующим классом, таким образом, мы можем видеть, как они выглядят в браузере по размерам экрана.
Брэд Фрост и Дэйв Олсон из Pattern Lab создали удивительный пример того, как это выглядит. Оцените.
Использование шаблонных языков
Бонусные баллы для тех из вас, кто окончил изучение языков шаблона и CSS, таких как swig, jade, haml и любой из многих других языков, доступных сегодня.
Многие из микроорганизмов, которые мы спроектировали, станут частичными как только их преобразуют в код.
Таким образом, вы сделали это
Теперь вы можете сделать вид, как будто вы знаете что-то о науке. И в какой-то степени вы действительно знаете. Атомарный Дизайн – наука о дизайне высокого качества.
Создавая модульные, повторяющиеся элементы и модели мы можем экспоненциально ускорить процесс проектирования и разработки. Дело не только в том, как быстро их можно построить, но и в том, как быстро сделать изменения во всей системе.
Проведите немного больше времени, размышляя о ядре системы, и вы как будто вернетесь назад во времени, пока разворачивается этот процесс.
Высоких конверсий!
