Как подружиться UI-дизайнеру и Frontend-разработчик
18 дней назад
Статьи
386
0

Сложно представить верстку Frontend-разработчика без созданного макета интерфейсов UI-дизайнером, как и ровным счетом наоборот. Без «оживления» кодом нарисованного дизайна макет остается просто макетом. Эти две IT-специальности взаимодополняют друг друга, и поэтому в идеале они должны работать в одной команде. Но на деле возникают по разным причинам конфликты и недопонимания.

Могут ли веб-дизайнер и фронтенд-разработчик «подружиться»? И как к этому прийти? В этой статье мы расскажем об их взаимодействии на одних из главных этапах разработки — прототипировании и верстки.

 

Решение проблем сотрудничества UI-дизайнера и Frontend-разработчика

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

 

Ошибка №1 

Дизайнер и верстальщик не понимают функционал друг друга

Дизайнер должен осознавать профессиональный уровень и рабочий потенциал верстальщика. Перед началом работы над проектом как UI-дизайнеру, так и Frontend-разработчику необходимо обсудить идею дизайна и возможности ее реализации. Таким образом можно избежать ненужных правок в дальнейшем.

Решение ошибки №1

Дизайнеру нужно освоить верстку на базовом уровне, чтобы объективно понимать, что можно сверстать, а что нет. Конечно, вникать в дебри Javascript не обязательно, но знать, как создается верстка — важно.

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

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

 

Ошибка № 2

UI-дизайнер и Frontend-разработчик работают на разных этажах

Если верстальщик с дизайнером находятся не в одном помещении, то им сложно работать продуктивно. Их творческий союз натыкается на кучу потраченного времени. Куда быстрее выяснить приоритетный вопрос тет-а-тет, чем писать и отправлять электронное письмо. Этот организационный недочет скорее касается HR-отдела. Тем не менее, советуем:

Решение ошибки №2

Если так вышло, что вы работаете в отдельных кабинетах или на разных этажах — попросите руководство или HR-менеджера посадить вас вместе с коллегой. Если вы сидите в open space, но физически находитесь по разным углам, то просто пересядьте ближе. С ситуацией на «удаленке» сложнее. Но и здесь нет ничего невозможного. Организуйте видео-чаты для решения срочных вопросов. Так будет быстрее, нежели писать e-mail.

 

Ошибка №3

Дизайнер и фронтенд-разработчик не определились с общими инструментами для работы

Часто верстальщикам приходится получать макет в неудобном формате. Им затруднительно посмотреть цвет, размеры, отступы и так далее. Например, для создания макетов Photoshop сложно использовать, но его до сих пор юзают. Хотя и возникают ошибки на стадии сохранения файла, затем при его передачи и распаковки. Что уже говорить о правках и повторных передачах файла друг другу.

Решение ошибки №3

Сейчас на рынке представлен огромный выбор графических редакторов. Все, что нужно — это согласовать программу, которая удобна и для веб-дизайнера, и для фронтенд-разработчика. Такие продукты, как Adobe (например Adobe XD), Sketch, Figma или Framer, наиболее просты, понятны и комфортны для работы. Изменения можно делать онлайн, файлы хранятся в облаке, также легко вытащить информацию при необходимости. Поэтому решите для себя вопрос, в какой программе вы будете создавать и править макеты, и процесс пойдет как по маслу.

 

Дополнительные рекомендации UI-дизайнеру и верстальщику для «перемирия»

Совет дизайнерам:

  1. Использовать сетку — базовый элемент в работе. Однако веб-дизайнеры его часто игнорируют.
  2. Показывать ховер-эффекты (состояния объектов при наведении или нажатии на них) верстальщику. В противном случае, он додумает и сделает по-своему.
  3. Типизируйте все объекты на макете. Если вы хотите сработаться с верстальщиком, изучите связку Атомарный дизайн + БЭМ.
  4. Называйте слои по смыслу и группируйте их.
  5. Комментируйте статичный макет дизайна.

 

Совет фронтенд-разработчикам:

  1. Создайте макет. Изучите базовые принципы работы с дизайном. Попробуйте понять проблемные точки в работе UI-дизайнера.
  2. Не пренебрегайте ненужными по-вашему мнению элементами. Никто не любит, когда его работу обесценивают. К тому же, какой-либо объект может иметь стратегическое значение.
  3. Обсудите с дизайнером все спорные моменты в макете, чтобы избежать дальнейших разногласий.
  4. Освойте один, а лучше несколько графических редакторов.

 

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

Оставить комментарий

Ваш комментарий будет отображаться только после прохождения модерации...
Комментариев нет
Лучшие материалы
Мы продолжаем рубрику English.PRO  от команды English For IT. В прошлой статье рассмотрели коммуникативный метод обучения студентов. С учетом всех перечисленных преимуществ, давайте ...
Большинство конфликтов между тестировщиками и разработчиками случаются из-за: непонимания функциональных задач друг друга и "дележки" зон ответственности. Каждый считает свою ...
Не секрет, что разработчикам, тестировщикам и другим техническим специалистам сферы информационных технологий необходимы не только профессиональные знания, но и в ...