Как наладить работу с дизайнером

О том как мы у себя на продукте «Эхо» внедрили инструмент Zeplin и подружили в нём почти всю команду

Дизайн в разработке

Кирилл Блюмин
Дизайнер интерфейсов в проекте «Эхо»

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

В команде дизайнеров мы построили работу по цепочке инструментов:
рисование мокапов в Balsamiq, дизайн в Sketch и Photoshop, прототипирование в Marvel и анимация микровзаимодействий во Framer.

От мокапа до анимации микровзаимодействия

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

Мы потестировали разные подходы, посмотрели на успешный опыт других компаний: от самарских коллег из Ecwid до Яндекса, Zendesk и Slack. Сравнивали Avocode и Zeplin, первый вызывал много вопросов и оказался дороже. В итоге мы остановились на Zeplin.

Как работать с макетом в «Цеплин»

Это инструмент совместной работы дизайнеров и разработчиков. Макеты из Sketch и Photoshop можно экспортировать в облачное хранилище «Цеплина», интерфейс которого напоминает урезанный «Скетч». Кликая по элементам макета, разработчик может сохранять графику, видеть применяемые шрифты, цвета и отступы. Стили генерируются в CSS или XML код.

Главный бонус Zeplin — комментарии прямо на макетах. Их можно скрывать в статусе resolved, а можно оставить для обсуждений.

«Цеплин» требует от дизайнера порядка в исходнике:

  • группируйте слои по модулям, разработчик сначала смотрит отступы между ними и уже потом между элементами в модуле;
  • выставляйте в «Скетче» настройку make exportable только для нужных разработчику элементов. Если они повторяются, то галочка должна стоять только на одном. Так вкладка all assets в «Цеплине» будет чище и позволит сохранить все иконки в один клик;
  • сознательно подбирайте межстрочный интервал — он влияет на отступы.

Зачем это нужно команде

Работа с макетами — локальная проблема дизайнера и разработчика. Оказалось, что до тестировщиков и аналитиков обсуждения деталей долетают не всегда. Начиналась путаница актуальности прикреплённых к задачам картинок, шли перекрёстные расспросы. Главное — не было единой базы макетов.

Время — наш самый ценный ресурс.

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

Анастасия Печкурова
Продакт менеджер «Эхо»

В «Эхо» мы делаем ставку на итеративный подход: прототипируем, обсуждаем в продуктовой команде, уточняем прототип, обсуждаем с разработкой и вносим новые правки. Всё это время нужно иметь доступ к актуальным экранам.

После первых экспериментов, мы подключили к «Цеплину» QA и продуктовую команду. Всем доступны комментарии и история версий — это удобно для тестирования и описания дизайна в задачах и документации. Интеграция со Slack позволяет постоянно следить за изменениями.

Теперь наши мобильные тестировщики ориентируются на макеты в облаке «Цеплина», а если есть несоответствия — смотрят историю правок. Аналитик обновляет функциональное описание экранов в своих задачах. Вопросы по UX/UI элементов остаются в «Цеплине», не засоряя основную задачу в «Джире».

Настоящий бонус «Цеплина» — комментарии на макете

Мы начали внедрять Sketch+Zeplin при брендировании мобильного приложения и веб-портала для новых клиентов. Теперь кастомизация вместе с экспортом занимает не больше пары часов плюс упростилась коммуникация с QA.

Что делать если экранов очень много:

  • заранее договоритесь об иерархии хранения экранов. «Цеплин» сортирует данные по проектам и позволяет назначать на отдельные артборды теги. Мы разбили проекты по платформам, теги по кейсам;
  • отправляйте команде не PNG, а ссылку на экран в «Цеплин». Макеты меняются, а старые картинки могут всплыть и всех запутать;
  • если для каждого нового клиента вы сохраняете одинаковый набор иконок, но других цветов — не заставляйте разработчика заниматься экспортом из «Цеплина». Посмотрите как он хранит иконки в своём проекте, настройте такой же экспорт в «Скетче» и отдавайте ему сразу архив.

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

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

Расшаривание макетов с командой перестало быть отдельной задачей — это делается в пару кликов. Мы ещё работаем над надёжной связкой обсуждений из «Цеплина» с задачами в «Джире», но главное что в это втянулась почти вся команда. К осени мы запускаем редизайн букингового портала и лучшее из наших экспериментов с «Цеплин» внедрим там.

Вакансии

Мы постоянно расширяемся, поэтому сейчас у нас открыто 9 вакансий.


Самара
Тольятти
9 ВАКАНСИЙ