Веб дизайнеры используют миллиарды различных техник, подходов и приемов в своей работе. У каждого есть предпочтения с чего начинать – кто-то, как истинный кондитер, начинает с основы основ - коржа, и только в конце работы уделяет внимание деталям – вишенке на торте. Другие же, наоборот, работают снизу вверх – начиная с маленькой детали двигаясь при этом к цельной картинке. От простого к сложному. Такой подход называется атомным дизайном.
Основные принципы атомного дизайна
Название и принцип работы позаимствованы у химиков. Обратите внимание на следующее:
Атомы - основные строительные блоки. Они не могут делиться дальше без потери своих свойств. В веб дизайне такие атомы - базовые HTML элементы такие как inputs, buttons, form labels, и прочие.
Соединив два и более атома, мы получим молекулу. Атомы становятся более универсальными и функциональными когда они соединены вместе. Молекулы в веб дизайне комбинации форм (a form label, a button, and an input соединенные воедино).
Молекулы объединяясь превращаются в организмы - уже ощутимые живые формы. Организмы в цифровом интерфейсе – группы простых элементов пользовательского интерфейса, собранные вместе для достижения определенной цели. Например, поисковая форма, лого и навигационный лист могут составить хедер (заголовок, верхний колонтитул).
Шаблоны – группы организмов собранных вместе для создания объектов на уровне страниц которые, координируют структуру дизайна.
Страницы структуры в которых мы можем наблюдать как выглядит пользовательский интерфейс с текстом, картинками, фото и другим медиа в целом.
Плюсы атомного дизайна
Атомный дизайн обычно требует более тщательного планирования, но затраченное на подготовку время того стоит. Вот, к примеру, какие плюсы могут быть в таком подходе:
- Построение системы компонентов. Когда вы начнете делить систему на ее базовые элементы – атомы, легче выделить части которые нуждаются в доработке или могут быть использованы в других комбинациях и сочетаниях.
- Более интуитивная верстка. По своей природе интерфейсы разработанные по принципам атомного дизайна более интуитивны и их легче кодить. Это актуально как на этапе создания сайта, так и в последующих его обновлениях и переделках. И, как бонус, другим разработчиках базовый код будет понятен и легко читаем.Атомный дизайн так же снижет возможность написания дублированного кода. Из-за того, что вы используете «атомы» в создании первоначального макета, легче увидеть когда, где и какие компоненты вы использовали в создании сайта.
- Простое руководство стиля. Это обусловлено согласованностью дизайна и обмена сообщениями на разных платформах. Вы даже можете экстраполировать элементы из дизайна, который не является атомным, но всегда лучше начинать с принципов атомного проектирования, чем пытаться применять их точечно. Быстрое и простое создание прототипов и обновлений. Когда у вас с самого начала на руках есть список атомов – гораздо легче создавать макеты и прототипы. Все что вам нужно – скомбинировать базовые элементы страницы, которые затем можно усовершенствовать и кастомизировать под готовый сайт. Атомный дизайн так же дает возможность быстрого обновления и удаления определенных элементов дизайна. Когда вы удаляете по одному элементу, вам проще убедиться, что нововведение прижилось в интерфейсе.
Почему атомный дизайн?
Атомный дизайн стимулирует сильную структуру пользовательского опыта (UX), предоставляя методологию для дизайнеров. Соблюдая руководящие принципы, основанные на компонентах, дизайнеры могут по-прежнему полагаться на свое творчество, не сталкиваясь лбами с разработчиками. Разработчики, естественно, работают с нуля, но дизайн, как правило, является более художественным предприятием. Часто художник начинает с общей идеи и усиливает ее в процессе создания. Атомный дизайн, напротив, требует от дизайнеров начинать нуля, что может помочь обеспечить согласованность и целенаправленность интерфейса. Это также экономит время и минимизирует риск возникновения разногласий между дизайнером и разработчиком.
Атомный дизайн также выступает гарантом качества. Когда вы создаете или тестируете веб-сайт, у вас есть встроенное руководство стиля в вашем реестре интерфейса. Он работает как дизайнерский инструмент и как инструмент разработчика - на самом базовом уровне; он позволяет каждому участвовать в разговоре, сохраняя элементы согласованными, а значит и качественными.
Радикальный подход в построении сайта
Атомный дизайн не для слабонервных. Для дизайнеров и веб-разработчиков потребуется переосмыслить весь процесс создания веб-сайта. Подход является методичным и требует много работы. Использование принципов атомного проектирования позволяет разработчикам и дизайнерам оставаться на одной волне. Это позволяет не только четко придерживаться заданного стиля, но и быстрее создавать макеты и прототипы, что приводит к улучшению продукта и повышению удовлетворенности клиентов. Если вы скоро начнете новый проект или интерфейс, рассмотрите принципы работы атомного дизайна. Вы удивитесь, насколько вам это нравится.
Информация и изображения взяты с сайта: speckyboy.com
Добавить комментарий