10 достоинств атомарного дизайна


Хотя понятие атомарного дизайна появилось не так давно (это заслуга Брэда Фроста), такой способ графической композиции сайта становится все более популярным.

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

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

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

№1. Возможность сочетания и смешивания компонентов

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

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

№2. Простой способ создания руководства по стилю 

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

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

№3. Понятный макет

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

№4. Удобство программирования

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

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

Есть специальная коллекция инструментов под названием Pattern Lab. С ее помощью создание атомарного дизайна упрощается очень сильно, так как этот сервис представляет специальную панельку для поиска атомов. 

№5. Не базируется на дизайнах Pixel Perfect

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

Пример такого – это заголовки. Возьмем ситуацию, когда уже есть список необходимых для сайта заголовков, выделенных жирным шрифтом: Н1, Н2 и Н3. Разработчику необходимо сделать заголовок курсивом – он просто берет один из имеющихся атомов и модифицирует его. 

№6. Ускоренное прототипирование 

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

№7. Простота обновления и удаления частей сайта

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

№8. Увеличенная модулярность в структуре файла

Атомарный дизайн очень распространен в разметке HTML. Тем не менее, он также может использоваться в JavaScript, CSS и других языках программирования. Такой подход позволяет сделать код более универсальным и многоразовым. 

№9.Меньшее количество компонентов

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

Например, требуется заголовок с шрифтом 4.5em. У разработчика есть готовый атом заголовка со шрифтом 4em и в 99% случаев разработчик использует именно его – это проще и быстрее, чем создавать новый шаблон заголовка. Это позволяет использовать в общем гораздо меньше атомов, что в свою очередь делает сайт более компактным. 

№10. Pattern Lab

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

Он был разработан Дейвом Олсеном и Брэдом Фростом в РНР. Полноценным преимуществом его назвать нельзя, но он существенно расширяет функционал атомарного дизайна для разработчика. 

Реальные отзывы заказчиков о работе с «Профиланс»

star star star star star
оценок: 1889
среднее 4,9 из 5
Работы выполнена качественно и даже раньше ср...
Работы выполнена качественно и даже раньше срока, все доработки выполнены, текст получился отличный!!!!! Рекомендую))))
Виктор
Работы выполнена качественно и даже раньше срока, все доработки выполнены, текст получился отличный!!!!! Рекомендую))))
Виктор
Очередной заказ выполнен быстро и качественно...
Очередной заказ выполнен быстро и качественно. Обязательно ещё обращусь.)))
Виктор
Очередной заказ выполнен быстро и качественно. Обязательно ещё обращусь.)))
Виктор
Очень быстро выполнено задание, все замечания...
Очень быстро выполнено задание, все замечания были оперативно исправлены.
Алексей
Очень быстро выполнено задание, все замечания были оперативно исправлены.
Алексей
Отличная работа!!! БЫСТРО, КАЧЕСТВЕННО и СТРО...
Отличная работа!!! БЫСТРО, КАЧЕСТВЕННО и СТРОГО В РАМКАХ ТЕХЗАДАНИЯ!!! Обращайтесь, не пожалеете!!!
Валентина
Отличная работа!!! БЫСТРО, КАЧЕСТВЕННО и СТРОГО В РАМКАХ ТЕХЗАДАНИЯ!!! Обращайтесь, не пожалеете!!!
Валентина
Какой великолепный сайт, благодарна этому са...
Какой великолепный сайт, благодарна этому сайту, тут самые лучшие "фрилансеры"!!! Мария Фрилансер прекрасно и до срочно...
Инна
Какой великолепный сайт, благодарна этому сайту, тут самые лучшие "фрилансеры"!!! Мария Фрилансер прекрасно и до срочно выполнила перевод немецкого языка, быстро и на самую лучшую оценку "5", сразу чувствуется, что знает этот предмет на отлично! Я безмерно счастлива, у меня нет теперь долгов к этой сессии, благодарю Мария Вы супер! С наступающим Новым годом Мария, всех благ, счастья, любви, и все, то, что сами себе желаете!
Инна
Андрей - опытный и исполнительный специалист,...
Андрей - опытный и исполнительный специалист, взявшийся за горящий заказ в Новый Год и выполнивший его блестяще и в срок...
Василий
Андрей - опытный и исполнительный специалист, взявшийся за горящий заказ в Новый Год и выполнивший его блестяще и в срок. Заданием было выставить правильный тайминг готовых субтитров и добавить озвучку перевода документального фильма. Помимо самого задания были устранены шумы, получившиеся при записи озвучки, а также оперативно была исправлена ошибка в озвучке: фрагмент с оговоркой благополучно вырезан и заменен на присланный правильный.
Василий
Работа сделана быстро, единственное хотелось...
Работа сделана быстро, единственное хотелось бы, чтоб оформление было в ворде.
Ирина
Работа сделана быстро, единственное хотелось бы, чтоб оформление было в ворде.
Ирина
Очень быстро и качественно. До работы были за...
Очень быстро и качественно. До работы были заданы все уточняющие вопросы. Выполнено все без замечаний, были предложены н...
Валентина
Очень быстро и качественно. До работы были заданы все уточняющие вопросы. Выполнено все без замечаний, были предложены несколько итоговых вариантов. Очень рада сотрудничеству!!! Обращайтесь
Валентина

Вы заказчик и вам необходимо найти фрилансера?

«Профиланс» — это безопасный сервис для работы с фрилансерами

Вы фрилансер и вам нужны заказы?

Заполните заявку и получите доступ к заказам

Стать фрилансером

Заполните форму
и узнайте цену

Специализация
Специализация
Категория
Категория

Файлы при наличии

    Профиланс специализируется на фриланс-заказах: дизайн, маркетинг, реклама, программирование и т.д. Для студенческих заказов используйте сервис «Всё сдал!».
    • здесь больше исполнителей по студенческим заказам;
    • ниже цены;
    Все сдал!