Атомарный дизайн: раскрытие того, что, как вы думали, вы знали о веб-дизайне

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

Дизайн-системы

Дизайнеры больше не просто создают веб-страницы; они создают дизайн-системы. В дизайн-системы входят:

• Цвет
• Сетки
• Текстура
• Типография
• И т.п.

Мне нравится, как Джек Страчан из UX Planet описывает системы дизайна: «Короче говоря, система дизайна - это набор компонентов многократного использования, руководствуясь четкими стандартами, которые можно собрать вместе для создания любого количества приложений. Дизайн-системы - это метод перевода единообразного опыта и визуального языка в продукт при работе с различными точками соприкосновения ».

Элементы дизайна могут быть субъективными, и они могут быстро стать подавляющими и хаотичными. Чтобы разделить их на категории, к дизайну нужно подходить более методично. Именно так поступил веб-дизайнер Брэд Фрост.

Рождение атомного дизайна

Вот как Брэд придумал атомный дизайн: «В поисках вдохновения и параллелей я возвращался к химии. Идея состоит в том, что вся материя (твердое тело, жидкость, газ, простое, сложное и т. Д.) Состоит из атомов. Эти атомные единицы соединяются вместе, образуя молекулы, которые, в свою очередь, объединяются в более сложные организмы, чтобы в конечном итоге создать всю материю в нашей Вселенной ».

Далее он объясняет, что интерфейсы состоят из компонентов, которые можно разделить на стандартные блоки. Вот порядок от меньшего к большему:

• Атомы
• Молекулы
• Организмы
• Шаблоны
• Страницы

Источник: BradFrost.com

Строительные блоки атомарного дизайна

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

1. Атомы

Как атомы имеют значение в естественном мире, так и теги HTML имеют значение для веб-интерфейсов. Значение: все веб-интерфейсы начинаются с HTML-тегов или основных элементов (анимации, кнопок, цветовых палитр, шрифтов, меток форм и т. Д.). Хотя эти атомы сами по себе не полезны для веб-дизайна, они необходимы для создания веб-интерфейса.

2. Молекулы

Молекулы сложнее атомов, но в целом они не сложны. Когда вы группируете не очень полезные атомы вместе, у вас есть более полезные молекулы: метка формы поиска + ввод + кнопка (атомы) = заполненная форма поиска (молекула)

3. Организмы

Когда вы группируете молекулы вместе, вы получаете организмы, которые более сложны, чем их предшественники: логотип + навигация + форма поиска + значки социальных сетей (молекулы) = завершенный заголовок (организм)

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

Это когда веб-интерфейс действительно начинает формироваться в уникальном индивидуальном стиле. Раньше ваш интерфейс представлял собой просто набор простых элементов. На стадии организмов веб-сайт становится более наглядным.

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

4. Шаблоны

Когда вы группируете организмы вместе, у вас есть шаблоны. Вот когда складывается фактический макет страницы. Хотя молекулы и организмы имеют собственное внутреннее устройство, стадия шаблонов - это когда вы начинаете видеть, как они дополняют друг друга и взаимодействуют друг с другом; где они расположены относительно друг друга; и как они текут в целом. Шаблон дает контекст молекул и организмов. Обратите внимание, что в шаблонах есть содержимое-заполнитель, а не настраиваемое или исходное содержимое.

Источник: BradFrost.com

5. Страницы

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

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

Последние мысли

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

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

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

Сохраните этот импульс веб-дизайна и ознакомьтесь с 10 правилами хорошего дизайна пользовательского интерфейса, которым следует следовать в каждом проекте веб-дизайна.

Лучшее изображение через ShadeDesign / shutterstock.com