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

Евгений Шевцов

Руководитель UX-направления компании Usetech

Привет! Меня зовут Евгений Шевцов, я руковожу отделом UX-направления в Usetech и ещё веду телеграм канал «Мамкин Дизайнер», где рассказываю о жизни дизайнера и о фишках в Figma. Сегодня разбираемся с такой темой, как вёрстка макетов. Нужно ли пропускать этап дизайна, верстая сразу разметку, и где ставить запятую во фразе «Верстать нельзя дизайнить?».

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

Ситуация

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

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

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

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

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

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

Проблемы

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

Верстальщик

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

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

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

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

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

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

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

Дизайнер

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

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

В век гигабитных скоростей разработка всё ещё уделяет большое внимание чистоте и легкости кода: сжатые картинки, минифицированный код, отложенная загрузка скриптов и так далее. На практике, если дизайнер берётся за вёрстку макетов, он просто не задумывается об этом. Он берёт за основу тяжёлый фреймворк для верстки (например bootstrap), из которого использует только сетки. Картинки в проекте имеют оригинальный вес, CSS-код с каждым разом увеличивается, а стили переписываются поверх друг друга через !important.

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

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

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

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

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

Бизнес

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

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

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

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

Что делать?

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

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

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

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

Заключение

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

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