Сложно представить верстку 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-дизайнеру и верстальщику для «перемирия»
Совет дизайнерам:
- Использовать сетку — базовый элемент в работе. Однако веб-дизайнеры его часто игнорируют.
- Показывать ховер-эффекты (состояния объектов при наведении или нажатии на них) верстальщику. В противном случае, он додумает и сделает по-своему.
- Типизируйте все объекты на макете. Если вы хотите сработаться с верстальщиком, изучите связку Атомарный дизайн + БЭМ.
- Называйте слои по смыслу и группируйте их.
- Комментируйте статичный макет дизайна.
Совет фронтенд-разработчикам:
- Создайте макет. Изучите базовые принципы работы с дизайном. Попробуйте понять проблемные точки в работе UI-дизайнера.
- Не пренебрегайте ненужными по-вашему мнению элементами. Никто не любит, когда его работу обесценивают. К тому же, какой-либо объект может иметь стратегическое значение.
- Обсудите с дизайнером все спорные моменты в макете, чтобы избежать дальнейших разногласий.
- Освойте один, а лучше несколько графических редакторов.
В заключение скажем, что работа UI-дизайнера и фронтенд-разработчика — это отлаженный механизм, который основан на правильно выстроенной коммуникации, а также на глубоком понимании не только своих задач, но и задач коллеги. Крайне важно оценивать возможности друга друга, знать слабые стороны и согласовывать все идеи еще до момента их реализации. Тогда работа будет показывать высокие результаты и приносить удовольствие.
