Фронтенд разработчик и дизайнер: коммуникация в команде

Содержание:

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

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

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

Хотите освоить перспективную IT-профессию? Регистрируйтесь на курсы от DevEducation.

Понимание предыстории UX-дизайнеров

Большинство веб-дизайнеров сделали свои первые шаги в мире дизайна с помощью таких программ, как Photoshop и Illustrator. Они начинали с графики: создавали логотипы, банеры, макеты для журналов, рекламные постеры, инфографику.

Это означает, что многие UX-дизайнеры в первые годы своей карьеры занимались дизайном для печати, что представляет собой совершенно другую парадигму, нежели ту, в которой существуют сайты и приложения. Работая с полиграфией, они заботились о выравнивании пикселей, но на фиксированной области. Им не приходилось бороться с динамической компоновкой. Думать о разрыве текста или состояниях взаимодействия не было частью их работы. Дизайнеры имели полную свободу в выборе цвета, изображений и типографики без ограничений производительности.

Понимание образа мышления дизайнера

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

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

Запишитесь на онлайн-курс дизайна для разработчиков или прочтите соответствующую книгу, например, «Реорганизация пользовательского интерфейса». Это не только поможет найти общий язык при общении с дизайнером, но и научит разрабатывать UI с вниманием к деталям.

Фронтенд разработчик и дизайнер: коммуникация в команде

Повышение осведомленности дизайнеров

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

Можно столкнуться с двумя сторонами этой проблемы. Есть дизайнеры, которые думают, что можно создать что угодно (например, сложные фильтры, новое поведение прокрутки или настраиваемые поля ввода форм), не задумываясь о совместимости с браузером. Кроме того, существуют специалисты, которые думают, что возможности разработки чересчур ограничены. Чтобы коммуникация в команде была налаженной, программисту следует показать истинные возможности веб-дизайна и не позволять ограничениям сдерживать их навыки.

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

Научите дизайнера понимать код

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

Сядьте рядом с дизайнером, с которым вы работаете, и объясните ему все на практике.

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

Попросите дизайнера включить вас в процесс дизайна

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

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

Давайте фидбек вовремя

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

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

Не принимайте самостоятельные решения

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

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

Читайте больше интересных статей в блоге DevEducation.

Присоединяйся к DevEducation — стань востребованным специалистом и построй карьеру в IT!