Что отдать разработчику вместе с макетом, чтобы он не выдумывал экраны

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

1. О чём сборка спрашивает в первый день

Счастливый путь — нужный кадр и плохая спецификация. Продукт почти всю жизнь проводит рядом с ним. Список пуст, потому что аккаунт новый. Запрос падает, потому что поле не приняли. Экран ждёт, потому что где-то медленно. Имя, должность или адрес не влезают в блок, который вы мерили двумя короткими словами. Человеку без права всё равно нужно куда-то попасть, хотя бы на спокойный отказ.

Если этих кадров нет, это не «детали на потом». Это первые вопросы: счастливый путь нельзя отдать в прод, не выбрав остальные в коде. Выбор в коде невидим до сдачи. Вы его бракуете, это справедливо, календарь едет, это чувствует клиент. Кадры в файле переносят брак на картинку, где он дешёвый. Бэкенд решать не нужно. Нужно показать, что видит человек: пусто, не сохранилось, ждём, не влезло, нельзя. Пять кадров рядом со счастливым, на каждый экран, который правда собираетесь отдать в сборку. Экран, который в эту сборку не входит, пометьте как направление. Не оставляйте его в файле с видом обязательства.

• Пусто: нет строк, новый аккаунт, поиск ничего не нашёл.
• Не сохранилось: человек понимает, что поправить.
• Ждём: экран уже попросили что-то сделать, и это ещё не кончилось.
• Не влезло: имя, должность, цена той длины, которую продукт правда хранит.
• Нельзя: куда попадает человек, которому этот экран не положен.

2. Рыба прячет место, где вёрстка порвётся

Латинская простыня не показывает перенос. Карточка в CRM, корзина и справочник сотрудников рвутся в разных местах. Карточка — на названии компании и заметке. Корзина — на длинном названии товара и валюте. Справочник — на имени с отчеством или на пустом телефоне. Рамку мерили по «Иван Иванов» и круглой цене. Продукт таким не будет.

Положите в файл один обезличенный пример из живого продукта. Длинное имя. Пустой телефон. Цена в той валюте, которой магазин правда пользуется. Срез базы не нужен, и чужую строку в общий файл класть не надо. Нужна строка, на которой рамке станет тесно. Живого примера нет — так и напишите и возьмите самые длинные значения, которые поля позволяют. Молчание читают как «короткий текст нормален». И отдельно пометьте, что в кадре настоящее содержимое, а что ещё хром. Разработчик соберёт хром как контент или пропустит подпись, которую вы считали финальной, в зависимости от того, как был устроен прошлый файл. Пометки на полях хватает: «заголовок финальный, таблица пример, иллюстрации в файле нет». Иллюстрация, которой нет, иначе станет серым прямоугольником, и ассет попросят в день сдачи.

3. Этот экран уже живёт в продукте или его ещё нет

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

Напишите на рамке. «Это правка отчёта, который уже открывают». «Это новое». И напишите, что перерисовывать нельзя: шаг оплаты, способ, которым вторая компания не видит строки первой, кнопку, которая создаёт заявку. Макет, который эти вещи подменяет между делом, — другой проект. Клиент услышит о нём как о задержке, не как о решении, которое вы приняли вместе. Живой экран вы ещё не видели — попросите его до отправки файла. Скриншот с настоящим пустым состоянием полезнее ещё одного выдуманного первого экрана. Менять его можно. Делать вид, что его нет, себе дороже: разработчик будет смотреть на него всё время сборки.

• На каждом кадре «правка» или «новое».
• Список того, что эта картинка не должна подменить.
• Один скриншот экрана, как он работает сегодня, если он сегодня работает.
• Направления не для этой сборки подписаны как направления.

4. Чего этот файл не заменяет

Маркетолог, или вы, всё ещё должен одной фразой сказать результат: что человек сможет сделать, чего не мог, и как мы это поймём. Этот пакет, включая то, чего не кладут в чат: что приложить до старта разработки. Не прячьте результат внутрь файла и не ждите, что его прочитают. Кадр — не проверка приёмки.

Доступы — снова другой пакет. Если работа сидит на чужом Laravel клиента, агентство должно принести место, где изменение можно попробовать, и поимённый список шагов, которые могут задеть. Это как агентство отдаёт проект. Макет его не заменяет. Красивый файл на продукте, который запускается только на боевом сайте, — способ познакомить первую ошибку с клиентом. Фреймворк, запрос и очередь выбирать не нужно. Если кадр обещает поведение, которого в этом месяце не будет, напишите, что человек должен увидеть вместо него, и пусть это будет разговор до оценки. Выключенный контрол с фразой — дизайн. Контрол, который выглядит готовым и падает в коде, — баг, и на сдаче рядом будет ваше имя.

5. На сдаче ходят по состояниям, не по одному красивому скрину

Маршрут сдачи договаривают до сборки, чтобы разговор не свалился во вкус. Разработчик открывает пустой экран, сорванное сохранение, длинное имя, ожидание и отказ. Вы смотрите на них, потому что вы их нарисовали. Счастливый путь — один пункт списка, не вся встреча. Состояние, которое сознательно выкинули, — письменное «не в этой сборке», не пустое место. Пустое место заполнят. Письменное исключение оценят как позднюю работу, и это как раз то, чего вы хотели, когда резали объём.

Обезличенный пример верните на сдачу. Длинное имя влезло — кадр держался. Не влезло — вы смотрите на настоящий промах, не на спор о сером. Клиента держите на том же списке. Ему стоит увидеть пустой аккаунт и сорванное сохранение, не только первый экран. Это экраны, которые встретит его персонал. Клиент, который видел только счастливый путь, назовёт пустое состояние багом. Показать раньше — часть передачи, не любезность.

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

Когда звать разработчика до сборки

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

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