• Новости
    • Статьи
    • Курсы
    • События скоро...
    • Инструменты скоро...
    • Шаблоны скоро...
    • Предложения скоро...
    Инструменты

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

    main-image
    Модульность, возможность многократного использования и масштабируемость - это не только концепции программирования и разработки. Их также можно использовать при создании оптимизированных систем дизайна. Атомный дизайн - это новая методология построения эффективных UI снизу вверх, построенная на аналогии с химией. Вместо разработки коллекции веб-страниц, в концепции атомного дизайна сначала создаются простейшие компоненты интерфейса - атомы (кнопки, пункты меню и т.д.). Дополняется UI на четырех последующих этапах: молекулы, организмы, шаблоны и страницы. Методология была разработана дизайнером Брэдом Фростом для создания успешных UI систем. Ей посвящена книга автора. Атомный дизайн предлагает совершенно новый взгляд на дизайн интерфейса. В сегодняшней статье мы рассмотрим основы этой интересной концепции, чтобы вы могли составить о ней общее представление.

    Иерархия атомного дизайна

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

    1. Атомы

    Так же как и в химии, атомы - наименьшие неделимые частицы дизайна. Это базовые HTML элементы: кнопки, ярлыки, поля форм. Конечно, не все HTML элементы являются атомами. Например, article и section не могут быть мельчайшими элементами веб-страницы.К атомам относятся и такие элементы, как шрифты, цвета, разрешения и другие CSS правила. По словам автора концепции "атомы наглядно демонстрируют все базовые стили".
    Пример
    дизайн, веб дизайн, юзабилити, интерфейс, удобство пользования интерфейсом, web-дизайн, ui, атомный дизайн, веб-дизайн, тренды юзабилити На этой странице заголовки рекомендованных постов можно считать одним из типов атомов. Для них используется одинаковый HTML и CSS код и эти элементы отличаются от всего остального контента.

    2. Молекулы

    Молекулы состоят из группы атомов. Это следующая стадия иерархии атомного дизайна. К молекулам относятся простейшие UI элементы, которые состоят из нескольких HTML компонентов: строка поиска или рекомендованные посты в правой панели. Организация в молекулы дает атомам определенную цель. В группе они поддерживают и дополняют друг друга. Например, заголовок (один атом) должен быть более заметным (иметь более крупный размер и толщину шрифта), чем имя автора (другой атом) в блоке с рекомендованными постами. В этом случае два атома работают сообща, "в команде".
    Пример
    дизайн, веб дизайн, юзабилити, интерфейс, удобство пользования интерфейсом, web-дизайн, ui, атомный дизайн, веб-дизайн, тренды юзабилити В боковой панели сайта один блок с рекомендованным постом можно считать молекулой. В данном случае эта молекула состоит из трех атомов: изображение, заголовок и имя автора.

    3. Организмы

    Организмы состоят из групп молекул, атомов и иногда других организмов. В веб-дизайне организмы - это более сложные UI компоненты, которые представляют собой определенные секции страницы: хедер, футер, боковая панель. Организмы могут состоять из разных типов молекул. Например, боковая панель может состоять из строки поиска и различных виджетов. Или из одной и той же повторяющейся молекулы - к примеру, блоков постов. Также возможна комбинация этих вариантов.
    Пример
    дизайн, веб дизайн, юзабилити, интерфейс, удобство пользования интерфейсом, web-дизайн, ui, атомный дизайн, веб-дизайн, тренды юзабилити Боковую панель можно считать организмом. Здесь она состоит из строки поиска (один тип молекул, повторяется один раз) и нескольких рекомендованных постов (второй тип молекул, повторяется много раз).

    4. Шаблоны

    Следующая стадия иерархии атомного дизайна - шаблон. Здесь аналогия с химией заканчивается, чтобы сделать концепцию более доступной. Шаблоны состоят из организмов. Это элементы страницы без финального контента. Цель шаблона - представить структуру будущего контента. Шаблоны отражают взаимодействие атомов, молекул и организмов в контексте разметки. Это своеобразный скелет страницы.
    Пример
    дизайн, веб дизайн, юзабилити, интерфейс, удобство пользования интерфейсом, web-дизайн, ui, атомный дизайн, веб-дизайн, тренды юзабилити Пример шаблона - дизайн домашней страницы со стандартными изображениями и блоками текста lorem ipsum. Атомы, молекулы и организмы находятся на своих местах, но со схематическим контентом.

    5. Страницы

    Страницы - последняя стадия иерархии атомного дизайна. На этом этапе шаблоны заполняются реальным контентом (текстом, изображениями, видео) и приобретают вид конечного UI. Страницы позволяют дизайнерам тестировать готовый интерфейс, чтобы оценить его эффективность с точки зрения юзабилити, конверсии, доступности и других метрик. Еще одна цель стадии страниц - создание вариантов шаблонов. При этом базовый шаблон остается прежним, но контент немного отличается. Например, если вы хотите показать разный контент разным группам пользователей (зарегистрированным и незарегистрированным) или один из заголовков гораздо длиннее других. Использование вариантов шаблонов важно для создания последовательного и устойчивого пользовательского интерфейса. Все базовые элементы (атомы, молекулы, организмы) должны корректно и эффективно функционировать в разных сценариях. Например, кнопка должна выглядеть кликабельной в любом окружении. Если она не кажется интерактивным элементом в конкретной версии, необходимо изменить дизайн этого атома и сделать его подходящим для всех версий.
    Пример
    дизайн, веб дизайн, юзабилити, интерфейс, удобство пользования интерфейсом, web-дизайн, ui, атомный дизайн, веб-дизайн, тренды юзабилити Ниже представлен пример стадии страницы для сайта из предыдущего пункта. Выглядит совсем по-другому. Чтобы создать эффективный UI, дизайнеры должны продумать все возможные изменения в реальном сайте. Также необходимо протестировать дизайн по разным вариантам шаблона. Концепция атомного дизайна подразумевает создание интерфейса снизу вверх. Сначала прорабатываются простейшие элементы, на каждом последующем этапе они формируются в более крупные и сложные группы. В результате должна получиться целая система, состоящая из идеально организованных и связанных между собой элементов, - эффективный интерфейс.
    More on the same topic
    юзабилити
    веб дизайн
    дизайн
    интерфейс
    ui
    web-дизайн
    веб-дизайн

    Комментарии