Шаблонов: 22,774     Фрилансеров: 2,778     Веб-студий: 218
Статьи Новости Реклама на сайте Форум
Помогаем продавать
и покупать готовый дизайн
Каталог шаблонов Каталог продавцов Продающие страницы Подписка на новые шаблоны

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

12 ноября 2018     Комментарии
Атомный дизайн

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

Основные принципы атомного дизайна

Название и принцип работы позаимствованы у химиков. Обратите внимание на следующее:

Атомы - основные строительные блоки. Они не могут делиться дальше без потери своих свойств. В веб дизайне такие атомы - базовые HTML элементы такие как inputs, buttons, form labels, и прочие.

Соединив два и более атома, мы получим молекулу. Атомы становятся более универсальными и функциональными когда они соединены вместе. Молекулы в веб дизайне комбинации форм (a form label, a button, and an input соединенные воедино).
Молекулы объединяясь превращаются в организмы - уже ощутимые живые формы. Организмы в цифровом интерфейсе – группы простых элементов пользовательского интерфейса, собранные вместе для достижения определенной цели. Например, поисковая форма, лого и навигационный лист могут составить хедер (заголовок, верхний колонтитул).

Шаблоны – группы организмов собранных вместе для создания объектов на уровне страниц которые, координируют структуру дизайна.

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

 

Плюсы атомного дизайна

Атомный дизайн обычно требует более тщательного планирования, но затраченное на подготовку время того стоит. Вот, к примеру, какие плюсы могут быть в таком подходе:

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

Почему атомный дизайн?

Атомный дизайн стимулирует сильную структуру пользовательского опыта (UX), предоставляя методологию для дизайнеров. Соблюдая руководящие принципы, основанные на компонентах, дизайнеры могут по-прежнему полагаться на свое творчество, не сталкиваясь лбами с разработчиками. Разработчики, естественно, работают с нуля, но дизайн, как правило, является более художественным предприятием. Часто художник начинает с общей идеи и усиливает ее в процессе создания. Атомный дизайн, напротив, требует от дизайнеров начинать нуля, что может помочь обеспечить согласованность и целенаправленность интерфейса. Это также экономит время и минимизирует риск возникновения разногласий между дизайнером и разработчиком.
Атомный дизайн также выступает гарантом качества. Когда вы создаете или тестируете веб-сайт, у вас есть встроенное руководство стиля в вашем реестре интерфейса. Он работает как дизайнерский инструмент и как инструмент разработчика - на самом базовом уровне; он позволяет каждому участвовать в разговоре, сохраняя элементы согласованными, а значит и качественными.

Радикальный подход в построении сайта

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

Информация и изображения взяты с сайта: speckyboy.com

Комментарии (0)

Комментариев пока нет. Вы будете первым!

Как продать дизайн?

Наши и другие рекомендации по разработке дизайна и дальнейшей публикации на сайте
Продаём фирменный стиль. Основные аспекты. Хочу продать логотип. Как это сделать? Как продать дизайн сайта
 
Место сдаётся
1$ за 1000 показов
40$ в неделю
1000x90


Вход в кабинет