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

Над переводом работали: Ольга Кокоулина и Ринат Шайхутдинов. При поддержке iSpring.
iSpring — решение для запуска дистанционного обучения.

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

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

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

Вступительное слово, Джош Кларк и Дэн Молл

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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