Подробности

Категория: Статьи

 

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

 

Atomic Design был создан американским фронтенд-разработчиком по имени Брэдом Форстом. Этот метод нашел свое применение в веб-дизайнерах благодаря простому конструктиву и эффективности. Эта технологи позволяет привнести инженерный подход в творческую деятельность.

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

В чем суть концепции атомарного веб-дизайна?

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

1. атом. Мельчайшие частицы, которые входят в состав интерфейса: кнопки, поля ввода, чекбоксы, радиокнопки, типографика.
молекулярный. Атомная группа. Если взять два атома и соединить их воедино, то можно получить молекулу. К примеру, кнопка и поле ввода.
2. организм. Соедините несколько молекул, и вы создадите организм. Это большая часть интерфейса. Например, сквозная навигация в шапке или боковой панели сайта.
3. шаблон. Комбинируйте организмы друг с другом и создавайте шаблон — интерфейс, предназначенный для решения общих задач.
4. Страница. Наполните шаблон реальным контентом. Оцените, насколько хорош ваш дизайн.

Лайфхак: расположите элементы на сетке 8 пикселей, и вы сэкономите время, выбирая отступы между элементами интерфейса. Расположите их квадратом.

Atomic Design — это культура мышления, подход к дизайну как к системе. Он не предназначен для конкретного инструмента проектирования. Попробуйте это в своей рабочей программе.

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

В чем разница между Atomic Design и UI Kit?

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

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

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

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

---

---