Как атомарный дизайн помогает проектировать веб-интерфейсы
Автоматизация дизайн-процесса
Вы уже определились со стилистикой и создали макеты первых страниц веб-интерфейса. Чтобы ускорить работу, разберите макет на части и используйте их как детали при конструировании остальных страниц.
Используйте методологию атомарного дизайна
Атомарный дизайн — это система маленьких элементов — атомов, которые можно использовать повторно и комбинировать друг с другом.
Атомы. Разберите интерфейс на кусочки: кнопки, поля ввода, чекбоксы, радио-кнопки, стили для типографики.
Молекулы. Комбинируйте два атома — вы получите молекулу. Например кнопка и поле ввода.
Организмы. Несколько молекул в совокупности образуют организм. Это крупные части интерфейса. Например основная навигация в верхней части страницы.
Шаблоны. Сочетайте организмы друг с другом, соберите из них весь интерфейс. У вас получится каркас страницы — это ваш прототип.
Страницы. Заполните шаблоны реальной информацией. Проверьте визуально насколько хорош ваш дизайн.
Расставляйте элементы по сетке в 8px. Так вы не будете задумываться какой отступ поставить между элементами интерфейса. Просто выровняйте их по квадратам.
Атомарный дизайн — это методология организации вашей работы. Он не требователен к инструменту. Вы можете работать в любой программе. Мыслите системно, создавайте повторяющиеся шаблоны и собирайте интерфейс из них.
Мыслить от меньшего к большему
Не путайте атомарный дизайн с библиотекой готовых элементов. В атомарном подходе главное — мыслить от меньшего к большему. Прорабатывайте дизайн с мелких атомов и закончите собранной страницей заполненной информацией. Если страница выглядит негармонично — измените атомы и проделайте весь путь еще раз.
Очистка от графического мусора
Веб-разработчики проводят рефакторинг написанного кода — так они ищут ошибки, оптимизируют скорость работы. Учитесь у них. По ходу сборки атомарного шаблона оптимизируйте дизайн. Срезайте лишнюю графику если не удается уместить ее в систему атомарного дизайна. Оптимизируйте количество цветов: используйте доминантный и один дополнительный цвет. Создайте пять или шесть оттенков серого. Этого цвета всегда не хватает, осторожнее с ним.
Быстрая сборка
Базовый атомарный шаблон готов. Новые страницы скомпонуйте из готовых блоков. Это удобно на средних и крупных проектах. Например интернет-магазине детских игрушек, сервисе по доставке пиццы, биржае через которую молодые родители ищут няню для ребенка. Пятистраничный сайт через месяц может превратиться в высоконагруженный сервис — он востребован пользователями. Срочно потребуются дополнительные страницы. Используя набор интерфейсных элементов дизайнер не будет задумываться над отступами или цветами. Он сосредоточится на проектировании системы целиком.
Легкая поддержка шаблона
Целевая аудитория сервиса над которым вы работали последние шесть месяцев может резко измениться. Нужно срочно изменить цвет или шрифт на всем сайте, использовать другие иконки и иллюстрации. Внесите изменения в шаблон с атомами и молекулы с организмами изменятся автоматически.
Форма обратной связи может быть неудобной для пользователя. Это выяснится только после запуска и тестирования сервиса. А эта форма используется в пяти местах сайта. Внесите изменение в организм с этой формой и дело сделано.
Кнопки на собранной странице могут оказаться слишком маленькими или поля ввода не контрастыми. Значит атомарный шаблон надо менять. Поправьте его пока не поздно. Отладка дазайна должна войти в привычку.
Верстайте на БЭМ
Если вы работаете в команде с разработчиком, обсудите с ним атомарный шаблон. Расскажите почему вы выбрали такой подход. Попросите его верстать на БЭМ — это методология веб-разработки от яндекса. Она позволяет создавать шаблонизируемые элементы интерфейса, чтобы использовать их повторно. Методология схожа с атомарным дизайном, но создавалась для веб-разработчиков.
Я, Белицкий Алексей. Занимаюсь дизайном, проектированием интерфейсов. Увлекаюсь веб-технологиями и всем, что упрощает современную жизнь. Можете найти меня в фейсбуке.
