Автоматизация процесса unicorn: кодируем дизайн на основе принципов атомарного дизайна и sketch

Posted on by riasevastopol

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

Иди со мной

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

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

Вот в чем суть Атомарного Дизайна.

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

1-j1P0pjQtl36QJavv8lHdyw

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

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

Атомы

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

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 и любой из многих вторых языков, дешёвых сейчас.

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

Так, вы сделали это

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

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

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

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

Случайные статьи:

UX UI дизайн – что это такое, уроки для начинающих: как рисовать тень, чекбокс, ссылки,


Подборка похожих статей:

riasevastopol

More Posts