Как разработчикам работать с дизайнерами
easy

Как разработчикам работать с дизайнерами

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

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

Изучите основные концепции дизайна

Знание базовых дизайн-принципов помогает лучше понимать дизайнеров и хотя бы немного говорить на одном языке. Мы не призываем вас учиться дизайну, но понимание основ точно не помешает. Что сюда входит:

  • понятия цветовой теории;
  • правила композиции;
  • правила применения шрифтов;
  • принципы UX/UI-дизайна;
  • концепция дизайн-системы.

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

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

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

Соблюдение принципов UX/UI-дизайна может сделать продукт привлекательнее и успешнее. Когда проработано большинство сценариев поведения пользователя и для них созданы гармоничные и понятные пользовательские интерфейсы, продукт требует меньше доработок и исправлений.

Дизайн-система — это единая база стилей, компонентов и стандартов для дизайна и разработки, и, если её придерживаться, работа идёт проще и быстрее. Большинство продуктов должны соответствовать определённым правилам брендинга, которые установлены в компании. Не думайте, что это что-то «косметическое» или «незначительное».

Поймите роль дизайна в вашем проекте

Разные проекты требуют разного подхода к дизайну. Если дизайн важен для решения задач проекта, вам придётся тесно работать с графическими дизайнерами и UX/UI-дизайнерами, вместе придумывать идеи и быстро перебирать прототипы. Если же дизайн — это просто красивая обёртка, вам, скорее всего, дадут уже готовый дизайн и скажут сделать так, чтобы он работал. Понимание того, как дизайн вписывается в ваш проект, поможет вам избежать проблем или научиться с ними справляться.

Постарайтесь включиться в проектирование на ранних этапах

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

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

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

Изучите данные по проекту

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

Сделайте понятным свой рабочий процесс

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

Объясняя, как вы будете работать, дизайнерам и всем, кто участвует в проекте, вы с самого начала делаете ясными правила и ожидания от вас. Так вы определяете, как будет проходить работа и как вы будете реагировать на изменения.

Сразу обозначайте и объясняйте ограничения

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

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

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

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

Задавайте вопросы и будьте готовы отвечать

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

  • Какая цель у данного дизайна?
  • Как он должен взаимодействовать с пользователем или решать определённые задачи?
  • Какие технические ограничения или требования могут повлиять на макет или интерфейс?
  • Как дизайн будет адаптироваться к разным экранам и устройствам?
  • Какие визуальные эффекты или анимации предполагается использовать и как они будут реализованы?

При этом дизайнеры могут задавать свои вопросы вам. Вы всегда должны быть готовы приложить дополнительные усилия и объяснить контекст своей работы (технический или какой-то ещё). Это может быть тяжело, когда вы пытаетесь сосредоточиться на решении проблемы, но неспособность сделать это может ухудшить командный результат. Не обязательно проводить семинары, но важно разъяснять технические вопросы так, чтобы это способствовало более глубокому пониманию. Взамен ожидайте такой же помощи от любого дизайнера, с которым вы работаете.

Что дальше

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

Обложка:

Алексей Сухов

Корректор:

Ирина Михеева

Вёрстка:

Маша Климентьева

Соцсети:

Юлия Зубарева

Получите ИТ-профессию
В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.
Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию
Вам может быть интересно
easy