Перевод статьи из блога Plant. Часть 1; Часть 2
В этой части — практические советы, как сделать работу дизайнеров и разработчиков общей и продуктивной. И подборки инструментов, которые можно для этого использовать.
Гид по передаче дизайна
Ниже мы собрали способы, чтобы организовать процесс передачи дизайна, при котором все участники команды смогут работать сообща. Вы можете применить не все советы, а лишь один или два: надеемся, это поможет.
Мокапы и слои
Когда вы создаете дизайн, сделайте систему имен для экранов, в которой каждое имя описывает функцию: например, «Добавить в корзину». Не используйте в названиях номера версий, есть специальные инструменты для управления версиями (хороший пример — 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 изнутри!
