Атомарный веб-дизайн

TL; DR: Атомарный дизайн с использованием Sketch - это будущее продукции дизайна.

Иди со мной

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

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

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

1-j1P0pjQtl36QJavv8lHdyw

Из чего состоит Атомарный дизайн?

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

Атомы

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

2 1-SmVWgKY2jdCYOV4dXJNlkg

Молекулы

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

Молекулы включают в себя такие составляющие, как поля формы с лейблами или таблицы с заголовками и столбцами с данными.

3 1-kA-WoT5O0uCgeowzhuSwiQ

Микроорганизмы

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

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

4 1-aL51hsdFw7ugSXXB5HnWZQ

Шаблоны

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

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

5 1-mx-cBDwsz3MkXa-oX_-56g

Страницы

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

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

Почему Sketch?

Несмотря на то, что Sketch может быть еще не лидер положения, которыми являются Adobe Illustrator или Photoshop, он по-прежнему уникальный инструмент при работе по методике Атомарного дизайна.

Организация

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

7 1-gyxduSTXDd1K-7eEuW1xHA

Модульность

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

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

Для начала, создайте элемент таким, каким бы вы хотели его видеть.

9 1-QU5UMRKF7jnifIcA0K6RlA

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

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

10 -5iQXZSddoS-OxEm0YfU1Sw

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

11-X9DNHPtyXiBxYEes10u_Iw

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

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

Преобразование в код

Теперь, когда мы создали наш проект, настало время экспортировать элементы в код.

Экспорт в код

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

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

12-0JSPPy6qdMM6UUUfzH1Zmw

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

13-qrSfNi7EmBroFNQoM1zcuw

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

Так же, как Bootstrap или шаблон Foundation, теперь наши элементы в определенном стиле, и все что мы должны сделать, это добавить класс к элементу в нашем HTML.

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

Брэд Фрост и Дэйв Олсон из Pattern Lab создали удивительный пример того, как это выглядит. Оцените.

Использование шаблонных языков

Бонусные баллы для тех из вас, кто окончил изучение языков шаблона и CSS, таких как swig, jade, haml и любой из многих других языков, доступных сегодня.

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

Таким образом, вы сделали это

Теперь вы можете сделать вид, как будто вы знаете что-то о науке. И в какой-то степени вы действительно знаете. Атомарный Дизайн - наука о дизайне высокого качества.

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

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

Высоких конверсий!

Предлагаю читателям «Хабрахабра» перевод статьи Брэда Фроста (Brad Frost) «Atomic Web Design» .

Мы не проектируем страницы, мы проектируем системы компонент. - Stephen Hay

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

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

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

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

Переодическая система элементов HTML.

Что такое атомарный дизайн

Атомарный дизайн это методология создания систем дизайна. В атомном дизайне есть пять отчётливых уровней:

1. Атомы
2. Молекулы
3. Огранизмы
4. Шаблоны
5. Страницы

Атомы

Атомы в природе - это основные строительные блоки материи. В контексте веб-интерфейсов атомы - это HTML тэги, такие как форма, поле ввода, или кнопка.

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

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

Молекулы

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

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

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

Организмы

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

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

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

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

Шаблоны

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

Шаблоны очень конкретные и предоставляют контекст ко всем довольно абстрактным молекулам и организмам. Именно шаблон позволяет видеть конечный дизайн. В моём опыте работы с этой методологией шаблоны начинаются с HTML wireframe"ов, но со временем становятся более точными. В итоге они становятся конечными продуктами. Bearded Studio в Питтсбурге имеют похожий процесс, при котором дизайны начинают разрабатывать чёрно-белыми и без разметки, но постепенно набирают конкретики и деталей до тех пор, пока не становятся конечными работами.

Страницы

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

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

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

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

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

Во многих смыслах именно так мы и делали сайты, даже если мы не задумывались об этом сознательно.

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

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

Pattern Lab

Для применения этой методологии в своей работе я (с помощью Дейва Ослена) разработал инструмент Pattern Lab , предназначенный для создания атомных систем дизайна. Расскажу о Pattern Lab в деталях позднее, но не стесняйтесь посмотреть исходники на Github

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В 2013 году эту методологию предложил Бред Фрост и описал ее в книге Atomic Design. Он провел аналогию между интерфейсами и химией: точно так же, как все вещества во Вселенной состоят из атомов, все интерфейсы состоят из компонентов. Эти элементы можно разложить на 5 уровней.

1. Атомы – самые маленькие элементы: форма, поле ввода, а также более абстрактные элементы, такие как анимации. Атомы задают единый стиль интерфейса и становятся строительным материалом для страницы.
2. Молекулы – комбинация атомов, которые становятся более полезными вместе, чем по отдельности. Например, комбинация заголовка, ссылки, изображения.
3. Организмы – крупные части интерфейса: логотип, шапка со всеми кнопками, полем поиска, списком соцсетей.
4. Шаблоны – элементы из нескольких организмов, каркас страницы, ее прототип.
5. Страницы – это последняя стадия с актуальным контентом, на которой проверяется эффективность всей дизайн-системы.

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

UI-kit

UI-kit набор элементов интерфейса: навигации, кнопки, табы, вкладки, баннеры. Главное, что в UI-kit прописаны все стили, размеры, их поведение при взаимодействии и состояния.

Не нужно каждый раз начинать работу с нуля, если нужный элемент храниться в UI-kit.

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

Для максимальной скорости работы готовый UI-kit должен быть переведен в код, к которому сможет обращаться верстальщик.

Почему эти понятия путают

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

Подробная дизайн-система объединяет и эту методологию, и UI-kit. Но методология, по которой будет проектироваться дизайн, выбирается перед началом работы. Затем создается дизайн из готовых атомов и моделей. А в конце UI-kit набирается готовыми элементами, чтобы использовать его для развития сайта и удобства верстки.

UI-kit не будет таким же полным, как система, построенная по методологии атомарного дизайна. И если руководствоваться только Ui-kit, на сайте может появиться шаблон, который немного будет отличаться, не впишется.

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

В агентстве «ДАЛЕЕ» создают UI-kit в конце работы над дизайном, когда сайт начинает содержать больше определенного числа уникальных шаблонов, например, такие проекты как, «Поговорим от Сбербанка» , «Pony Express» . На проекте «Альфа-Тревел» специалисты агентства воспользовались готовой дизайн-системой Альфа-Банка, поэтому сайт нового продукта получился полностью в стиле бренда, а главное – с привычной для пользователей механикой действия.

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

Итак, ключевые отличия атомарного дизайна и UI-kit:

• UI-kit собирается после завершения дизайна проекта;
• В методологии атомарного дизайна существует страница как высший уровень конкретики, в UI-kit никогда не бывает такого уровня;
• Атомарный дизайн принимают как методологию с самого начала работы над дизайном;
• Атомарный дизайн – это расширенная дизайна-система, а UI-kit – ее часть.

Вконтакте

Одноклассники

Другие посты

Как найти сокровища в фотостоке

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

Искусство диалога: налаживаем общение с клиентом

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

Страница 404: как помочь пользователю, если он...

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

5 Полезных инструментов для менеджера и всей...

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

Как работать с другим агентством и улучшить проект

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

Когда релиз? Оцениваем эффективность команды...

В команде разработки МегаФона мы постоянно работаем над контролем качества кода. Для этого у нас есть практика code review, автотесты и разные...

Must have в веб-дизайне

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

«Как у Тинькова»: какими решениями мы обязаны...

Российские банки одними из первых в рунете начали превращать свои сайты в сервисы. Этому способствовало несколько факторов. Во-первых,...

Волшебная кнопка. Чек-лист для повышения...

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

Тренды диджитал-маркетинга в 2019 году

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

Топ 5 материалов 2018 года

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

Новогодние традиции в Далее. Спойлер: это не...

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

Как нанять робота вместо менеджера проекта

Время экспериментов. 10 карточек по A/B...

Рассказываем о методе, который поможет улучшить юзабилити сайта, увеличить трафик и главное – повысить конверсию.

Не заставляйте меня думать: как снизить уровень...

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

В поисках Dream Team для разработки сайта

Найти классную команду для разработки проекта – это челлендж для менеджера. Построить работу можно по-разному: собрать команду у себя в штате,...

Релиз или жизнь? Хеллоуин в digital

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

Как данные и эмоции меняют дизайн

Четкий подход при создании нового сайта или его редизайне поможет систематизировать работу: не нужно принимать решение наугад и думать, выстрелит...

Темная сторона дизайна

Apple сделал темную тему основной по умолчанию для новой Mac iOS, а Youtube начал тестировать темный фон еще год назад. Темные темы в интерфейсах...

Зачем нужно тестирование сайта

До тестирования сайт ведет себя как кот Шредингера. Вы не знаете, работает ли все так, как задумано. Тесты перед запуском или обновлением сайта...

Большой брат: как и зачем использовать...

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

Дизайн B2B-портала: найдите отличия

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

Еще раз об эффективности: чек-лист перед...

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

Типографика в веб-дизайне

Типографика на сайте – это не просто выбор шрифта, а набор правил оформления текста. Они основаны на том, как пользователь воспринимает текст на...

Как бренду рассказать свою историю

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

Финансовые сервисы в digital: будущее уже...

Удобство нашей жизни во многом зависит от скорости развития финансового сектора в digital. Многие уже привыкли к оплате коммунальных услуг на сайте...

UX-аналитик и другие профессии с приставкой UX

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

Преимущество использования отзывчивого веб-дизайна

Как адаптировать дизайн под разные устройства, чтобы он оставался удобным для пользователя? Вместе с контент-продюссером компании InVision Уиллом...

Лучшие диджитал-кампании к Чемпионату Мира 2018

Чемпионат стартовал 14 июня, и острая борьба среди брендов началась задолго до этого. На самом главном спортивном мероприятии в мире мы увидим не...

Как составить контент-план, который работает

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

Правило Хемингуэя: как агентству и заказчику...

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

Обзор самых популярных систем для управления...

Система для управления проектами может сильно повлияет на продуктивность компании. Сложно определиться с системой для работы с клиентами, и еще...

Сам себе Youtube: 5 шагов к вирусному контенту

Над видео для компании лучше работать вместе с продакшн-агентством. Вы смотрите портфолио агентств и выбираете подходящее по стилю и по цене. Что...

Как агентства представляют свои кейсы

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

Просто о сложном: agile-разработка

Изначально аджайл был вотчиной программистов. Так они называли методы разработки ПО, принципиально отличавшиеся от традиционного. Но оказалось, что...

Что такое нативная реклама и как она работает

Несколько лет подряд все говорят о нативной рекламе. Недавно Business Insider заявили, что к 2021 году выручка от нее вырастет до 74% от общих...

Разработка единой дизайн-системы для группы ВТБ

Собственные дизайн-системы – что это? Модный тренд или рабочий инструмент для качественного продвижения бренда? Рассказываем про наш опыт.

Чем дизайнер продукта отличается от просто...

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

Быстрее, выше, сильнее: как использовать видео...

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

Микроинфлюенсеры – будущее маркетинга влияния

Одним из трендов инфлюенс-маркетинга стал «подъем микроинфлюенсеров» - блогеров с небольшой, но активной аудиторией. Бренды обращают меньше...

Мессенджер-маркетинг как современный способ...

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

Формы оплаты работ за разработку сайта

Мы разберем детально какие бывают формы ценообразования на создание интернет-проекта.

Предлагаю читателям «Хабрахабра» перевод статьи Брэда Фроста (Brad Frost) «Atomic Web Design» .

Мы не проектируем страницы, мы проектируем системы компонент. - Stephen Hay

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

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

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

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

Переодическая система элементов HTML.

Что такое атомарный дизайн

Атомарный дизайн это методология создания систем дизайна. В атомном дизайне есть пять отчётливых уровней:

1. Атомы
2. Молекулы
3. Огранизмы
4. Шаблоны
5. Страницы

Атомы

Атомы в природе - это основные строительные блоки материи. В контексте веб-интерфейсов атомы - это HTML тэги, такие как форма, поле ввода, или кнопка.

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

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

Молекулы

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

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

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

Организмы

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

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

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

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

Шаблоны

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

Шаблоны очень конкретные и предоставляют контекст ко всем довольно абстрактным молекулам и организмам. Именно шаблон позволяет видеть конечный дизайн. В моём опыте работы с этой методологией шаблоны начинаются с HTML wireframe"ов, но со временем становятся более точными. В итоге они становятся конечными продуктами. Bearded Studio в Питтсбурге имеют похожий процесс, при котором дизайны начинают разрабатывать чёрно-белыми и без разметки, но постепенно набирают конкретики и деталей до тех пор, пока не становятся конечными работами.

Страницы

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

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

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

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

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

Во многих смыслах именно так мы и делали сайты, даже если мы не задумывались об этом сознательно.

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

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

Pattern Lab

Для применения этой методологии в своей работе я (с помощью