В больших командах дизайнеры мало общаются с разработчиками и совсем не работают над эффективностью их взаимодействий. Теряется много времени и, в итоге, из-за череды исправлений и переделок, поставленная задача выполняется в 2–3 раза дольше, чем могла бы. В этой статье я поделюсь своим опытом развития взаимодействий дизайнер-разработчик.
🤓 Изучите предметную область
-Рома, надо увеличить интерлиньяж
-Ты имел ввиду line_height?
“Интерлиньяж” — определение в дизайне, которое означает расстояние между строками текста. “Line-height” — то же самое, но на языке разработки и CSS стилей. Чтобы говорить на одном языке и понимать коллег с полуслова, изучите специфику их работы. Если вы дизайнер, то изучите основы HTML, CSS и JavaScript, в этом вам поможет HTML Academy. Если вы разработчик, то узнайте больше о сетках, типографике и дизайн-системах, на bang bang education вы найдете онлайн-лекции и интервью с именитыми дизайнерами. Общаться будет проще, а количество глупых вопросов уменьшится, если вы будете понимать как работают ваши товарищи.
✏️ Пишите гайды
-В каком формате скидывать иконки?
-*ссылка на гайд*
Вы когда-нибудь замечали, что 1/3 рабочего дня вы отвечаете на вопросы коллег: “Как выглядит кнопка в определенном состоянии” или “В каком размере скидывать иконки”? Избавиться от большинства вопросов помогут гайды. Начните с малого: договоритесь о том, в каком формате и размере нужно передавать иконки и кнопки и запишите это в Google Docs или базу знаний компании. Учтите также такие вещи:
- Цвета
- Шрифты
- Разные состояния элементов(normal, hover, action, disabled)
- Названия файлов
- Выравнивание
- Оптимизация изображение
- Экспорт из редакторов
💬 Обсуждайте макет с разработчиками
-Посмотрите какая классная анимация!
-Кажется, на реализацию уйдет 2 недели…
Дизайнеры обсуждают макет с аналитиком, продукт оунером, маркетологом, но реже всего с разработчиками. Возможность увидеть макет у команды разработки появляется лишь на этапе передачи готового макета. Обсуждайте макет с разработчиками начиная с этапа прототипирования. Так, вы раньше узнаете о том, что сделать будет невозможно, а на что уйдет неоправданно много времени. Вы не потратите лишнее время на отрисовку и анимацию, а команда разработки на верстку и тестирование. Макет отправится в продакшен гораздо быстрее.
💾 Храните файлы с умом
Хранение файлов и то, как вы их называете, напрямую влияют на то, как вы работаете. Беспорядок в папках и названиях файлов порождает беспорядок в вашей голове. Придите к общей структуре папок и стандарту названия файлов, это поможет сократить количество переименований файлов и перекладываний их в разные папки.
Например, кнопки складывайте в папку “project/interface/elements/buttons” и называйте по шаблону “проект_платформа_версия”. Поможет хорошо прописанный гайд.
Пример хорошо прописанной структуры папок и названий файлов.
📊 SCRUM активности
Даже если вы находитесь с разработчиками не в одной SCRUM команде, полезно присутствовать на активностях команды разработки и тестирования.
На планировании можно заранее обсудить макеты, которые пойдут в разработку и избавить себя от вопросов во время работы, на ретроспективе понять как улучшить взаимодействия (какой гайд добавить, что поменять в структуре папок и т.д.), на стендапах вы поймете кто чем занят и синхронизируетесь с коллегами.
Вывод
На самом деле, будет работа становиться эффективнее или нет, зависит только от вашего желания. В этой статье описаны лишь основные советы по улучшению взаимодействий, вы можете развивать работу между отделами непрерывно, придумывая новые способы оптимизации процессов. Самое главное, у всех нас, и дизайнеров, и разработчиков есть общая цель — сделать отличный продукт!