Атомарный дизайн | Брэд Фрост

Olga Kokoulina
Jun 15, 2017 · 4 min read

Перед вами перевод книги Atomic Design Брэда Фроста, разработчика интерфейсов, поклонника мобильного интернета и создателя методики “Атомарный дизайн”.

Над переводом работали: Ольга Кокоулина и Ринат Шайхутдинов.

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

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

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


Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook.


Все 557+ статей по дизайну читайте на сайте ux-journal.ru


Вступительное слово

Джош Кларк и Дэн Молл

На дворе стоял 2013 год. Мы в компании Брэда Фроста собрались в Бруклине на залитой солнечным светом кухне в гостях у Дженнифер Брук. Наша четверка как раз начала работать над новым веб-сайтом для TechCrunch. Мы рисовали эскизы страниц, мучаясь с новыми требованиями адаптивного дизайна. Неожиданно Брэд достает ноутбук и заявляет: “Я тут поэксперементировал с новой идеей…”

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

Улыбаясь, как сумасшедший, Брэд спросил: “Круто, правда?”

Мы же смотрели на экран с каменными лицами. Кто-то вежливо покашлял.

А затем Брэд Фрост, фронт-энд разработчик, вдруг заговорил как Брэд Фрост, химик. Он говорил об атомах, молекулах и организмах — о том, как крупные элементы дизайна могут быть разбиты на меньшие части и даже могут стать частью других крупных элементов. Другими словами, вместо готового блюда, он показал нам его ингредиенты.

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

Свою идею Брэд называл “атомарный дизайн”, и она полностью изменила наш подход к работе в этом потрясающем мульти-девайсном мире. Сумев взглянуть на интерфейс сразу в двух измерениях — на макро-уровне (страницы) и микро-уровне (элементы) — мы смогли упростить разработку. Мы ввели более строгие требования к функции каждого элемента; у нас появились привычки, сделавшие наш UX лучше; и, что действительно важно, мы начали работать быстрее и более согласованно. Атомарный дизайн стал для нас супер-силой!

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

Почти четыре года спустя мы уже не оглядывались назад. Брэд продолжил совершенствовать свои техники и инструменты в работе над последующими проектами, в том числе для Entertainment Weekly и Time, Inc. Мы использовали полученные знания, чтобы помогать командам внутри компании делать сайты быстрее и качественнее; мы проектировали сложные системы дизайна для организаций, которые хотели упорядочить дизайн и разработку в обособленных международных офисах и многое другое.

Атомарный дизайн придал нам ускорение, дал свободу творчества и гибкость. Он изменил все. Уверены, он сработает и для вас.

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

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

Его сайт This Is Responsive — это готовый ресурс для поиска решений любых задач, связанных с UX. У него есть блог и Твиттер, где он также делится проблемами и их решениями. Когда дизайнеры и разработчики следуют указаниям Брэда Фроста, они попадают в быстрый и плотный поток вдохновения, необходимого для создания красивых и жизнеспособных веб-сайтов. Эта книга удваивает эффект.

Будь такая возможность, Брэд постучался бы дверь каждого дизайнера и разработчика, чтобы лично донести свои идеи. Мы с восхищением (и легкой завистью) наблюдали, как Брэд словно ураган пронесся по всем шести континентам, распространяя знания среди сотен команд и компаний. (Вероятно, вскоре атомарный дизайн доберется и до Антарктики!) Но поскольку Брэд Фрост все-таки не может быть во всех местах сразу, мы рады, что он рассказал о своих идеях в этой книге, полной смысла и тонкого юмора.

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

— Джош Кларк и Дэн Молл, частые коллеги Брэда и его большие поклонники.

Если вам понравился перевод, дайте нам знать — нажмите кнопку Recommend.

Читать далее | Глава 1: Проектируем системы (часть 1)


Image for post
Image for post

Видеокурсы и практика по дизайну интерактивных систем: ux/ui, веб-дизайн и бренд-дизайн

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

Breezzly — это среда для тренировки digital-навыков. Здесь вы встретите комплекты видеокурсов в актуальных инструментах интерактивного дизайна, среди них Figma, Principle и Invision Studio. А каждый проект — это живой кейс с историей, собранной по горячим следам!

Посмотреть каталог курсов →

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

В этой коллекции публикуется перевод книги Atomic Design…

Olga Kokoulina

Written by

Пишущий маркетолог, Tg: @ollieko

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

В этой коллекции публикуется перевод книги Atomic Design, которая посвящена разработке систем проектирования пользовательского интерфейса. Автор книги — Брэд Фрост. Читать в оригинале: http://atomicdesign.bradfrost.com/table-of-contents/

Olga Kokoulina

Written by

Пишущий маркетолог, Tg: @ollieko

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

В этой коллекции публикуется перевод книги Atomic Design, которая посвящена разработке систем проектирования пользовательского интерфейса. Автор книги — Брэд Фрост. Читать в оригинале: http://atomicdesign.bradfrost.com/table-of-contents/

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store