3 подхода во заимодействии программист-дизайнер
Привет, я Вадим, продуктовый UX/UI дизайнер. В этой истории расскажу к каким практикам я пришел при передаче макетов девелоперам.
Впервые столкнулся с вопросом передачи макетов в 2018, изучал HTML, CSS, общался с программистами на работе и в баре. Мой подход продиктован исключительно собственным опытом работы и не претендует на абсолютную истину.
В зависимости от сложности проекта и вовлеченности дизайнера я выделил 3 подхода, о них и расскажу ниже.
Базовый подход
После завершения работы над макетами и необходимыми компонентами поместите их отдельно — на отдельную вкладку в файле или в отдельный файл. Так вы создадите базовый MVP UI-kit.
Покажите программисту макеты в Figma: проведите обзор интерфейса, компонентов и оставленных пометок (если они есть). Решите, что лучше для взаимодействия — провести созвон или оформить все в письменном виде.
Объясните, где искать стили и как экспортировать элементы. Важно: следите за правильным неймингом слоёв в макете, иначе программисту будет сложно разобраться.
Когда подходит
Небольшой проект (landing page, небольшой e‐commerce…)
У вас нет прямого доступа к разработчикам
Не прописаны требования к дизайн спецификации
Дизайнер имеет слабое влияние на проект и команду (аргументы далеко не всегда услышаны другими членами команды)
Медиум подход
Перед началом создания UI свяжитесь с программистами. Уточните технические ограничения, обсудите, какие компоненты проще и быстрее реализовать. Возможно, разработчики смогут переиспользовать готовые библиотеки (например, для сложных в реализации drag&drop) вместо разработки с нуля.
При создании компонентов распишите, в каких случаях используется каждое состояние. Оформите эти данные в отдельный файл или на вкладку в Figma. И вот мы создали MVP Design guidelines.
Если программисты не знакомы с Figma dev-mode, объясните его основные возможности, отправьте обучающие ссылки и уточните, потребуется ли он им в работе.
Если сроки реализации ограничены, обсудите с командой альтернативные дизайн-решения. Либо договоритесь о создании MVP-реализации с участием дизайнера, программиста и менеджера, с условием доработки в будущем.
Когда подходит
Среднего размера проект.
Есть прямой доступ к программистам, у вас есть периодические звонки.
Вся кросс-функциональная команда синхронизирована, есть общие дейлики, ретроспективы.
Дизайнер погружен в процессы, может немного на них влиять.
Продвинутый подход
Попросите разработчиков предоставить доступ к фреймворкам (папкам с кодом, где прописаны компоненты, соответствующие дизайну). Если это невозможно, назначьте звонок, чтобы они показали визуализацию кода компонентов.
Договоритесь о создании страницы, где будет отображаться визуализация компонентов из библиотек, обновляющаяся при изменении кода. Проверьте, чтобы стили и состояния этих компонентов соответствовали тому, что задизайнено в фигме. Так вы получите MVP Design system.
Свяжите ваш файл фигма ссайтом-фреймворком для удобного перехода и проверки соответствия дизайна и кода. Совместно с разработчиками обсудите, какие элементы нужно дополнить в Figma или фреймворке для полного соответствия первого и второго.
Когда подходит
Крупный долгосрочный проект
Есть прямой доступ к программистам, есть регулярные звонки, общие чаты, вы познакомились с тех‐лидами.
К дизайнеру прислушиваются, он имеет голос в команде, дизайнер может влиять на процессы в команде.
Заключение
Эффективное взаимодействие между дизайнером и программистом зависит от масштаба проекта, уровня вовлеченности дизайнера в проект, отношений внутри команды.
Как вы уже поняли, UI-kit, Design guidelines, Design System помогают в коммуникации с разработчиками, отслеживании всех несостыковок в реализации фичей.
Вы можете строить свои процессы/фреймворки, которые помогут взаимодействать. Главная цель — наладить взаимопонимание с командой разработчиков и реализовать макеты в точности как было задумано.
Спасибо что дочитали!
Надеюсь, материал был полезным!)
По вопросам сотрудничества мы можем поговорить в Linkedin или в телеграм.
Комментарии
Войдите, чтобы оставить комментарий.