Что если вёрсткой макетов и дизайном займётся один человек?

Сегодня разбираемся с такой темой как верстка макетов. Нужно ли пропускать этап дизайна верстая сразу разметку и где ставить запятую во фразе «Верстать нельзя дизайнить?».

⚡️ Важно: я не обесцениваю труд дизайнеров или верстальщиков, каждая профессия важна и сложна.

Ситуация

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

Какой путь мы можем предложить заказчику:

• поисследовать его запрос;
• спректировать пользовательские сценарии и wireframes;
• задизайнить продукт;
• отдать в верстку и ревьюить.

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

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

И в связи с этими пунктами встает интересная задача: давайте пропустим этапы исследования, проектирования, дизайна и сразу сверстаем наш проект.

Проблемы

Скажу сразу: такой подход плох. Далее мы разберем более подробно почему и посмотрим на три роли в таком подходе.

Верстальщик

Если задача прилетает верстальщику, он развернет gulp, достанет свои препроцессоры и начнет работу, параллельно смотря в ТЗ, уточняя у аналитика (если он есть) и заказчика детали.

В таком подходе есть ряд плюсов:

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

Но и есть ряд минусов:

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

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

Но надо заметить, что не все верстальщики такие: кто-то ушел в верстку из дизайна, кто-то обладает насмотренностью и вкусом, а кому-то просто не всё равно.

Дизайнер

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

В большинстве случаев дизайнеру все равно на код. Он не будет использовать препроцессоры, не будет собирать проекты через gulp / webpack и не будет использовать git.

Дизайнер развернет проект на локальной машине или арендованном хостинге и начнет верстать старым дедовским способом.

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

На практике, если дизайнер берется верстать, он просто не задумывается об этом: он берет за основу тяжелый фреймворк для верстки (например bootstrap) из которого он использует только сетки, картинки в проекте имеют оригинальный вес, а css код с каждым разом увеличивается, а стили переписываются поверх друг друга через !important.

Плюсы такие же, как и пунктом выше: заказчик доволен, все кликается, забиты демо-данные и верстку можно отдавать в разработку.

Но что будет, если придут новые вводные от заказчика? Или заказчику не понравится данный вариант? Или он может попросить сделать несколько вариантов для сравнения и принятия решения? Тогда сроки и трудозатраты увеличатся, ведь компоненты проще поправить в дизайне и спроектировать новый вариант в той же Figma, чем заново начинать верстать.

Так же ряд проблем возникает на этапах передачи проекта в разработку:

• тяжеловесный код может стать причиной долгого открытия страниц, 80% кода может просто не понадобиться в проекте;
• проект не использует препроцессоры и несконфигурирован под сборщики webpack / gulp / codekit;
• проект не лежит в git и не имеет версионности, а весь код передается через zip-файлы;
• если проект необходимо будет масштабировать или сменится команда — не останется артефактов, куда можно подглядеть: ui-kit / дизайн-система / документация.

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

Бизнес

И здесь накладывается еще один момент: деньги.

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

Когда мы пропускаем какие-то этапы — бизнес не продает эти услуги, а значит не зарабатывает.

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

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

А если посмотреть на исполнителя – с постоянными переделками сотрудник может просто устать и выгореть, как следствие сделать еще хуже свою работу и уволиться.

Что делать?

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

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

Таким образом, если заказчик вносит правки, то их можно безболезненно и быстро изменить в макете и прототипе.

👉 Прототипы в Figma // Usetech Meetup
👉 Большой обзор интерактивных компонентов Figma. Практика

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

Заключение

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

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

Таким образом продукт получится не до конца цельным и проработанным.

И отвечая на вопрос: Верстать нельзя дизайнить? – где же ставить тут запятую, ответ один — каждый ставит запятую там, где ему нравится.

И помните: все профессии важны и все этапы нужны, а каждый специалист должен заниматься своим ремеслом.