3 подхода во заимодействии программист-дизайнер.

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 или в телеграм.3 подхода во заимодействии программист-дизайнер. was originally published in Дизайн-кабак on Medium, where people are continuing the conversation by highlighting and responding to this story.

Jan 19, 2025 - 19:16

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 или в телеграм.

3 подхода во заимодействии программист-дизайнер. was originally published in Дизайн-кабак on Medium, where people are continuing the conversation by highlighting and responding to this story.