От дизайнера к разработчику без потерь: как сделать путь дизайна успешным. Ч.3

15 October 2020

Перевод статьи из блога Plant. Часть 1; Часть 2

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

От дизайнера к разработчику без потерь: как сделать путь дизайна успешным. Ч.3
От дизайнера к разработчику без потерь: как сделать путь дизайна успешным. Ч.3

Гид по передаче дизайна

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

От дизайнера к разработчику без потерь: как сделать путь дизайна успешным. Ч.3
От дизайнера к разработчику без потерь: как сделать путь дизайна успешным. Ч.3

Мокапы и слои

Когда вы создаете дизайн, сделайте систему имен для экранов, в которой каждое имя описывает функцию: например, «Добавить в корзину». Не используйте в названиях номера версий, есть специальные инструменты для управления версиями (хороший пример — Plant). Каждый экран, компонент и стиль должны быть названы одинаково для дизайнеров и разработчиков. Так две команды будут иметь общее понимание, из каких частей состоит продукт и как он будет работать — а значит, смогут говорить на одном языке.

Логичная структура макетов делает работу дизайнера более простой для понимания.
Логичная структура макетов делает работу дизайнера более простой для понимания.

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

‍Для разработчиков управление версиями — основной рабочий процесс при создании кода. Это отличная практика, которую могут перенять и дизайнеры. Старые версии и пробные варианты должны всегда оставаться у дизайнеров, а к разработчикам должны попадать только новые и «чистовые» версии.

‍Инструменты: Sketch, Adobe XD, Plant

От ADDEO: Мы используем онлайн-редактор Figma, в котором также удобно управлять версиями. Подробнее о его плюсах мы писали здесь.

‍Компоненты и ресурсы

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

Система стилей и компонентов ускоряет разработку.
Система стилей и компонентов ускоряет разработку.

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

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

Инструменты: Invision DSM, Zeplin, Plant

‍Прототипы и взаимодействия

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

Интерактивная карта макета дополняет передачу дизайна
Интерактивная карта макета дополняет передачу дизайна

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

Инструменты: Sketch, Invision, Principle

Копии и контекст

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

И используйте реальный текст в макетах, не Lorem Ipsum. Имейте сострадание к разработчикам: у них столько головной боли, чтобы разобраться с текстами для дизайнеров!

Инструмент: Google Docs

Пустые экраны и крайние случаи

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

Разработчики не могут создать эти экраны без помощи дизайнера
Разработчики не могут создать эти экраны без помощи дизайнера

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

‍Create checklists that can be consulted during development. Add links to a specific layout and its status to the list to make it easier for developers to navigate. Пусть схема компоновки будет базисом, от которого разработчик не может отклоняться. Это поможет вам вместе понять, как продукт работает на уровне взаимодействия с пользователем.

Инструменты: MindNote, Miro

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

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