Лого vc.ru

Кейс: Как дизайн-команда Yammer сократила количество макетов для проекта с 30 до одного файла

Кейс: Как дизайн-команда Yammer сократила количество макетов для проекта с 30 до одного файла

Издание Sketchapp подготовило перевод заметки дизайнера корпоративной социальной сети Yammer Кэмерон Лок о том, как при помощи внедрения модульного подхода команде удалось сократить количество макетов одного проекта с 30 до одного.

С чего всё начиналось: отдельный артборд для каждого типа веток Yammer. Их было много.

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

После большого количества сессий дизайна и кодинга вместе с Виктором Альказаром и Оззи Тебе — двух невероятно терпеливых Android-инженеров Yammer — каждая часть веток Yammer стала выглядеть идеально.

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

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

Я обратилась с этой проблемой к нашему ведущему дизайнеру Мануэлю Муноз-Солере. У него огромный опыт в дизайне модульных UI — это популярный и хорошо документированный подход для CSS-фреймворков, но из-за нескольких лет беглых переделок продукта и неидеально структурированного кода и дизайна мы так и не внедрили полноценно модульный подход в Yammer.

После объединения всех наших фрагментов в один гигантский файл и ряда переделок мы выработали более простой и модульный подход в дизайне веток — и именно он решил нашу проблему с интервалами.

Вот что у нас получилось:

  1. Мы сгруппировали каждый кусок ветки Yammer так же, как наши разработчики группируют их в коде. Каждому такому фрагменту мы назначили определённый цвет для лучшего визуального восприятия. На этом этапе мы также стали ссылаться на фрагменты как на отдельные модули. Мы перестали задавать между ними границы.
  2. Вместо этого все интервалы в приложении задавались выравниванием модулей, в частности, выравниванием по верху. Нижнее выравнивание тоже могло бы отлично сработать — главное, чтобы использовались не оба вместе, нужно выбрать что-то одно. Теперь всё стало намного проще, так как больше не нужно задавать верхнюю и нижнюю границы для каждого случая отдельно.
  3. Мы сложили все отдельные модули в один супердлинный артборд. Смотрелось очень странно, так как это ветка, которой на самом деле не существует в Yammer. Она нужна лишь для проверки выравнивания по сетке и проверки соответствия каждого элемента структуре.
  4. Когда всё было подогнано по вертикали, всё ещё оставались три отдельные комбинации, выходящих за выбранный стандарт. Три — это уже гораздо проще, чем сотни. Тут наши инженеры просто прописали отдельные операторы «if…» для каждого частного случая.

В итоге, вместо 30 артбордов под разные типы бесед в Yammer у нас получился один большой. Мы можем менять модули местами, по-разному соединять их для проверок, и всё будет стоять ровно по сетке. Получилось здорово — всего один артборд, который идеально соответствует коду. Не стоит и говорить, как были довольны наши Android-инженеры.

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

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

Присылайте свои колонки и интерфейсные кейсы на interface@vc.ru.

Нормально так бомбануло

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

Я не понял, а о какой дизайнерской корпоративной социальной сети идет речь?

0

И тут эта статья от школьников. Самое главное, что результат на выходе — просто ппц

0

Yammer - одни из последних людей, статьи от которых стоит воспринимать всерьез (разве что интересно было бы почитать откровения того гения, который смог его впарить за миллиард Microsoft-у)

0

Статья из загробного мира?
Яммер же давно продали и похоронили.

0

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

Прямой эфир
Приложение-плацебо скачали
больше миллиона раз
Подписаться на push-уведомления