BrandSled: сервис мониторинга репутации бренда

Дизайн и как искали концепт

Концепт искали дольше, чем писали сборщики. Ниже весь путь, включая то, что владелец отклонил.

Панель для человека без SEO (v01-v02). Первый внутренний монитор показывал таблицы: доли плохих страниц, частотности, рейтинги. Для сотрудника, который открывает его утром, это оказалось непонятно. Мы переписали бриф: только кто смотрит и какие данные есть, без цветов и раскладки. Модель сама предложила "утренний пульт репутации": вверху светофор и вывод одной фразой, ниже задачи с исполнителем и сроком, еще ниже карточки-доказательства. Индекс спокойствия считается прозрачно, раскладку баллов видно по ссылке "Как считается". Эта схема потом стала экраном Обзор в BrandSled.

Первая версия сервиса (v03-v05). Для кабинета модель прислала концепт "командный центр репутации": теплый светлый фон, акцент "сигнальный рубин", секторный радар, 14 готовых HTML-экранов. Сайт мы попросили сделать в той же системе, передав палитру кабинета и список запретов на типовые приемы. К утру работали сайт, кабинет в светлой и темной теме и 150 картинок блога в той же гамме.

Отказ: "кирпичи, а не дизайн". Владелец отклонил результат: модель получила наш стиль и рисовала внутри наших рамок, а он просил дать ей только блоки. Мы убрали из брифа все, кроме блоков, текстов и одного правила про первый экран.

Три направления (v06). Модель придумала и сверстала три разные главные: "Редакция расследований" с газетной антиквой, "Ночной центр управления риском" с лаймовым радаром на темном фоне и "Живая карта доверия" с изометрической картой. Владелец ответил: "все три мимо, видно, что это нейронка": пустые фоны, рубленые блоки, узнаваемые приемы генеративной верстки. Он попросил не пересказ идеи, а исходную картинку от модели.

Пять концептов картинкой (v07). Короткое ТЗ ушло прямо в модель изображений: что за сервис, девять блоков главной, картинка слева и форма справа, тарифы, "стиль выбирай сам". Пять генераций сохранили как есть: темно-синий hero с дашбордом, фиолетовый шар-радар, объемный прибор с портретами, светлый вариант со скриншотом кабинета и неоновая темная страница. Владелец выбрал первый. Свои причины он не записал.

UI-кит и 25 макетов (v08-v09). По концепту 1 модель за 11 минут нарисовала UI-кит, мобильную главную, посадочную, тарифы, проверку бренда, блог, статью, вход, 14 экранов кабинета, hero-иллюстрацию и лист 3D-иконок. Потом дорисовала вариации hero под тему каждой посадочной и людей для блоков ролей, а 150 картинок блога перерисовали в новой палитре.

Отказ: "вариацию на тему не приму" (v10-v11). Первая верстка по макетам разошлась с картинками: другие тексты, 12 карточек источников вместо 9, другой подвал. Владелец потребовал пиксель в пиксель. Мы записали правило: картинка равна ТЗ, масштаб 1440/1024, блоки совпадают до 8 px, тексты дословно. Сверку сделали скриптом: скриншот страницы рядом с макетом в одном масштабе, наложение 50% и карта разницы по каждой секции. Меняли только то, что модель выдумала: "12 400+ брендов", логотипы банков как клиентов, API и White Label. Их заменили правдой той же длины в том же элементе. В кабинете на месте демо-цифр встали реальные данные, а для элементов, которых не было в API, мы дописали расчеты: динамику к прошлому периоду, темы отзывов, долю голоса по месяцам.

Доводка (v12-v16). Модель рисовала главную без промежутков между блоками, поэтому мы добавили воздух: 104 px между секциями на компьютере и 60 px на телефоне, внутри блоков ничего не трогали. Когда владелец купил домен, модель нарисовала три листа логотипов, выбран знак-кольцо со следом в форме S и меткой, мы перерисовали его в SVG и переименовали продукт по всему сайту и кабинету. Еще две правки пришли из пробного использования: владелец не сразу нашел, как завести второй проект, и не понял поле "если у названия есть тезки". Модель нарисовала сайдбар с двумя уровнями (аккаунт и текущий проект), страницу "Мои проекты" и поле сфер тегами, мы сверстали по макетам. Последней стала страница проверки: пока идут 2 минуты проверки, рядом карточка входа и тарифы, после отчета можно сразу оплатить.

Итоговая система: темно-синий первый экран со светящимся дашбордом, светлые секции, коралловая главная кнопка, голубой акцент, рукописные пометки и 3D-иконки. Голубые кнопки мы затемнили относительно макета, чтобы белый текст проходил по контрасту AA.