Атомарный дизайн и Gutenberg

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

Использование атомов

Атомы используются как базовые строительные блоки для создания любых элементов интерфейса. Например, кнопки, поля ввода, метки и т.д. могут быть собраны из набора атомов. Это позволяет комбинировать атомы и создавать новые элементы интерфейса без необходимости разрабатывать их с нуля.

Преимущества атомарного дизайна

Использование атомарного дизайна имеет ряд преимуществ. Во-первых, это облегчает создание и обновление интерфейса. Во-вторых, он делает интерфейс более гибким и масштабируемым. И наконец, атомарный дизайн улучшает взаимодействие с пользователем, позволяя создавать интуитивно понятные интерфейсы.

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

Качество сайта становится заметно выше, а затраты сокращаются в 10х раз и более.

Атомарный дизайн в контексте блоков Gutenberg

Зная и понимая концепцию атомарного дизайна, важно это интегрировать с пониманием редактора Gutenberg в WordPress.

Блоки Атомы

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

В Gutenberg это такие блоки как параграф, заголовок, кнопки или картинка. Это максимально простые блоки – атомы.

Блоки Молекулы

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

В Gutenberg мы можем собирать молекулы как атомы через паттерны – например обложка страницы, там блок Cover, блок Заголовок, описание, кнопки и какая то картинка.

Но ровно эту же задачу мы можем решить через разработку кастомного Блока Молекулы – типа Hero – когда блок задает единое поведение обложки для всего сайта и управляется кодом.

Блоки Организмы

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

Для примера я могу написать 1 блок типа система подбора курсов обучения под ваши требования – там может быть технология, стоимость, и что то еще.

Раньше для этого писались сложные структуры в теме или плагинов для WordPress. Но в эру блоков это можно писать через 1 блок типа Организм. Блок который управляет огромным количеством параметров и он будет выглядеть как целая страница.

Паттерны Gutenberg

Важное не путать паттерны и блоки.

Паттерны – это по сути настроенные блоки и их комбинация.

Паттерны также как и блоки могут делаться согласно атомарному дизайну:

  • паттерн атом – просто настроенная кнопка или картинка
  • паттерн молекула – преднастроенная комбинация блоков
  • паттерн организмы – целые страницы

Разница в том что где то выгодно молекулы или организмы делать блоком, а где то паттерном.

Паттерны молекулы или организмы более гибкие, но если вам надо поправить молекулу или организм в 100 местах сайта – это дорого.

Блоки молекулы или организмы – менее гибкие, но поправим его 1 раз в коде – оно автоматом применится на всем сайте.

Заключение

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

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

В контексте Gutenberg вы можете весь сайт собирать из блоков, но важно понимать их разницу: атомы, молекулы или организмы?

Фото аватара
Antony I

Веб разработчик, специализация на лучших мировых практиках: WordPress, WooCommerce, NextJS, Strapi, JAMStack ...

Основные типы проектов: CMS, eCommerce, SEO, LMS, ECM, BPM

Подробнее...

Статей: 121

Один комментарий

Ответить

Ваш адрес email не будет опубликован. Обязательные поля помечены *