Интерфейс

Интерфейс разрабатывался параллельно с названием и логотипом, поэтому поначалу всё рисовалось в сером нейтральном стиле.

Перед началом работы идём изучать, какие бывают заявки клиентов на покупку кабелей. И что же видим — у них нет никакого стандарта. Каждый пишет, как ему удобно. Кто‑то разделяет марку от размеров в разные столбцы, кто‑то пишет в сплошном тексте, кто‑то добавляет несущественные детали.

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

Поскольку большинство менеджеров работают в Экселе, приходим к выводу — надо сделать похожий интерфейс. Конектр должен казаться им знакомым и привычным. Делаем первый подход:

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

Определяемся с видом и рисуем основные состояния. Показываем арт‑директору:

Арт‑директор вспоминает Hортон Командер и предлагает разделить страницу на две части. Слева будет заявка клиента, справа — предложение завода; менеджеру будет удобнее их сопоставлять:

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

Сокращаем название колонок, пробуем разные кегли. Вспоминаем, что у Бюросайна есть узкое начертание. Подставляем его, и — ура! — всё поместилось. Показываем клиенту:

Клиент принимает направление. Две половинки ему сразу напомнили Нортон Командер :‑)

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

Определяемся с цветами, продумываем и рисуем всевозможные состояния. Показываем клиенту и утверждаем:

Всё нарисованное за 30 рабочих дней. Фигма рулит :‑)

Проверяем вёрстку, тестируем и правим баги: