Атомарный дизайн – это подход к проектированию сайта и блоков, основанный на разбиении интерфейса на мельчайшие элементы и их комбинировании.
Использование атомов
Атомы используются как базовые строительные блоки для создания любых элементов интерфейса. Например, кнопки, поля ввода, метки и т.д. могут быть собраны из набора атомов. Это позволяет комбинировать атомы и создавать новые элементы интерфейса без необходимости разрабатывать их с нуля.
Преимущества атомарного дизайна
Использование атомарного дизайна имеет ряд преимуществ. Во-первых, это облегчает создание и обновление интерфейса. Во-вторых, он делает интерфейс более гибким и масштабируемым. И наконец, атомарный дизайн улучшает взаимодействие с пользователем, позволяя создавать интуитивно понятные интерфейсы.
Самое важное это то что вы весь сайт можете собирать из готовых блоков и паттернов, при том с единым стилем.
Качество сайта становится заметно выше, а затраты сокращаются в 10х раз и более.
Атомарный дизайн в контексте блоков Gutenberg
Зная и понимая концепцию атомарного дизайна, важно это интегрировать с пониманием редактора Gutenberg в WordPress.
Блоки Атомы
Атомы – это самые простые неделимые единицы, которые образуют основу для построения более сложных структур. В дизайне это могут быть цвета, шрифты, простые геометрические формы, кнопки, поля ввода и т.д. Комбинируя атомы, мы получаем молекулы.
В Gutenberg это такие блоки как параграф, заголовок, кнопки или картинка. Это максимально простые блоки – атомы.
Блоки Молекулы
Молекулы образуются путем комбинирования атомов. Это могут быть, например, кнопки с подписями, формы с полями ввода, наборы значков, компоненты интерфейса и т.д. Из молекул мы можем собирать организмы.
В Gutenberg мы можем собирать молекулы как атомы через паттерны – например обложка страницы, там блок Cover, блок Заголовок, описание, кнопки и какая то картинка.
Но ровно эту же задачу мы можем решить через разработку кастомного Блока Молекулы – типа Hero – когда блок задает единое поведение обложки для всего сайта и управляется кодом.
Блоки Организмы
Организмы представляют собой сложные системы, состоящие из множества взаимосвязанных молекул. Это могут быть целые интерфейсы, страницы. Организмы обладают свойствами, которых нет у отдельных молекул и атомов.
Для примера я могу написать 1 блок типа система подбора курсов обучения под ваши требования – там может быть технология, стоимость, и что то еще.
Раньше для этого писались сложные структуры в теме или плагинов для WordPress. Но в эру блоков это можно писать через 1 блок типа Организм. Блок который управляет огромным количеством параметров и он будет выглядеть как целая страница.
Паттерны Gutenberg
Важное не путать паттерны и блоки.
Паттерны – это по сути настроенные блоки и их комбинация.
Паттерны также как и блоки могут делаться согласно атомарному дизайну:
- паттерн атом – просто настроенная кнопка или картинка
- паттерн молекула – преднастроенная комбинация блоков
- паттерн организмы – целые страницы
Разница в том что где то выгодно молекулы или организмы делать блоком, а где то паттерном.
Паттерны молекулы или организмы более гибкие, но если вам надо поправить молекулу или организм в 100 местах сайта – это дорого.
Блоки молекулы или организмы – менее гибкие, но поправим его 1 раз в коде – оно автоматом применится на всем сайте.
Заключение
Подводя итог, атомарный дизайн – это подход, который стоит учитывать при разработке современных пользовательских интерфейсов. Использование атомов позволяет экономить время на разработку, делает интерфейс масштабируемым и удобным для пользователя.
Атомарный дизайн позволяет создавать гибкие и масштабируемые системы путем комбинирования простых и универсальных элементов. Этот подход применим в различных областях дизайна и позволяет создавать сложные решения, сохраняя их простоту и целостность.
В контексте Gutenberg вы можете весь сайт собирать из блоков, но важно понимать их разницу: атомы, молекулы или организмы?
Telegram WordPress
Телеграм канал и чат про WordPress
Будьте в теме и общайтесь про улучшение своих проектов и сайтов на WordPress
