Введение в атомный дизайн для веб-дизайнеров

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

Читайте также: 10 причин, почему вам нужна оптимизация кода

Вместо разработки коллекций веб-страниц атомарный дизайн начинается с простейших компонентов пользовательского интерфейса, называемых атомами (кнопки, пункты меню и т. Д.), И создает весь пользовательский интерфейс на четырех дополнительных этапах: молекулы, организмы, шаблоны и страницы.
Книга
Методология была создана дизайнером Бред мороз с целью «создания успешных систем проектирования пользовательского интерфейса». Атомный дизайн был выпущен как книга что ты можешь читать онлайн бесплатно или заказать как мягкая обложка ($ 20,00) или электронная книга (10,00 $) также.

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Атомный дизайн подходит к дизайну пользовательского интерфейса с новой, новой перспективы, которая, надеюсь, немного поколебает ландшафт веб-дизайна. Эта статья намеревается дать введение в эту методологию, но книга углубляется в объяснение гораздо дальше, поэтому прочитайте его, если можете, оно того стоит.
Иерархия атомного дизайна
Атомный дизайн – это в основном ментальная модель, которая заставляет дизайнеров думать о веб-страницах как об иерархии многократно используемых компонентов. Иерархия атомного дизайна состоит из пяти этапов; каждый этап состоит из группы компонентов предыдущего этапа. Пять этапов складываются в четкую и логичную систему проектирования интерфейсов. Они заключаются в следующем:

атомы
Как и в химии, атомы – это самые маленькие строительные блоки, которые невозможно разложить. Следовательно, атомы – это основные элементы HTML, такие как кнопки, метки и поля ввода, которые обеспечивают наименьшие единицы веб-страницы.

Конечно, не все элементы HTML являются атомами, например, элементы секционирования (

article>,

section>и т. д.) не являются (не могут быть) наименьшими единицами веб-страницы.

Атомы – это не просто элементы HTML, но и их стили: шрифты, цвета, размеры и другие правила стиля CSS. С Собственные слова БрэдаАтомы «демонстрируют все ваши основные стили с одного взгляда».
Атомы – Пример
Вот пример с нашего сайта. Заголовки рекомендуемых постов могут составлять один тип атома; они используют один и тот же код HTML и CSS и их легко отличить от остального содержимого.
Обратите внимание, что Hongkiat.com не был разработан для атомного дизайна, здесь он используется только для демонстрационных целей.

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

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

Например, заголовок (один атом) должен получить больший акцент (больший размер шрифта, больший вес и т. Д.), Чем имя автора (другой атом) в рекомендуемом пост-блоке. Таким образом, два атома «предназначены» для работы в команде, чтобы получить лучший результат.
Молекулы – Пример
Используя наш предыдущий пример, вы можете видеть, что на боковой панели Hongkiat один блок рекомендованного поста можно рассматривать как молекулу. Рекомендуемая почтовая молекула состоит из трех атомов: миниатюры, заголовка и атома имени автора.
3. микроорганизмы
Организмы состоят из группы молекул, атомов (а иногда и других организмов). В веб-дизайне организмы представляют собой более сложные компоненты пользовательского интерфейса, которые представляют определенные разделы страницы, такие как верхний или нижний колонтитулы или боковая панель.

Организмы могут состоять из разных типов молекул, например, боковая панель может состоять из панели поиска и виджетов разного типа, или из одной и той же молекулы, повторяемой несколько раз, например, несколько связанных друг с другом постблоков. И это может быть сочетание этих двух.
Организмы – Пример
На веб-сайте Hongkiat боковой панелью может быть организм. Он состоит из строки поиска (один тип молекулы, отображаемый только один раз) и нескольких рекомендуемых сообщений (другой тип молекулы, отображаемый много раз).

Однако организм боковой панели также можно рассматривать как состав молекулы (панель поиска) и другого организма (рекомендуемый виджет постов с несколькими рекомендованными постами). Атомный дизайн – гибкая модель, правила не очень строгие, поэтому в этом случае мы можем определить один и тот же строительный блок как молекулу, так и организм.
4. Шаблоны
Следующим этапом в атомарной иерархии дизайна являются шаблоны. Как видите, это когда атомный дизайн перестает использовать химическую аналогию. На этом этапе Брэд воздерживается от терминологии, поскольку считает, что это менее понятно для клиентов и других заинтересованных сторон, и, по сути, это два последних этапа (шаблоны и страницы), которые дизайнеры должны продавать.

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

Шаблоны показывают, как разные атомы, молекулы, организмы «функционируют вместе в контексте макета». Они в основном представляют каркас страницы.
Шаблоны – Пример
Например, подумайте о шаблоне домашней страницы с изображениями-заполнителями и текстовыми блоками lorem ipsum.

Ниже вы можете увидеть пример из книги по атомному дизайну. Это шаблон домашней страницы TimeInc журнал. Атомы, молекулы и организмы все на своем месте, но только с схематическим содержанием.
5. страницы
Страницы представляют собой последний этап иерархии атомного дизайна. Страницы являются «конкретными экземплярами шаблонов». На стадии страницы шаблоны заполняются реальным контентом (копирование, микроскопия, изображения, видео и т. Д.), Так же, как они будут отображаться в реальном интерфейсе.

Страницы позволяют дизайнерам увидеть, как будет выглядеть конечный пользовательский опыт, протестировать проект с реальными пользователями и измерить, насколько хорошо он работает с точки зрения удобства использования, конверсии, доступности и других показателей.
Страницы и варианты шаблона
Другая цель этапа страницы – сделать возможными варианты шаблона. Мы говорим о вариациях шаблона, когда базовый шаблон один и тот же, но наполненный контент (немного) отличается. Например, если вы хотите показывать разный контент различным группам пользователей (например, для посетителей по сравнению с зарегистрированными пользователями), или когда один заголовок намного длиннее, чем другие.

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

Например, кнопка должна выглядеть кликабельной с окружающими ее элементами. Если в определенном варианте он не выглядит активным, вам нужно изменить дизайн атома кнопки, пока он не будет соответствовать всем вариантам использования.
Страницы – Пример
Ниже вы можете увидеть этап страницы предыдущего шаблона домашней страницы TimeInc. Выглядит иначе, а? Это всего лишь один вариант шаблона. Чтобы иметь эффективный пользовательский интерфейс, команда разработчиков должна тщательно продумать, что может измениться на реальном сайте. Затем им также необходимо проверить дизайн для этого варианта шаблона (страницы).