Сайты, которые сами собирают заказ

Проблема

Цель

Решения

1. Метроном как основаПодписка — это ритм: обжарка, помол, доставка, повтор. На этом построена вся структура: четыре главы фильма названы четырьмя тактами, конструктор называется «ритм».
2. Скролл-фильм вместо галереиПрокрутка проматывает непрерывный ролик. Смонтирован как одна съёмка, разрезанная по точным кадрам, поэтому на стыках глав нет рывка. Человек видит путь зерна, а не читает о нём.
3. Палитра против клише нишиКофейные сайты рефлекторно уходят в бежевый и крафт. Здесь — чернильно-синий, костяной белый и один сигнальный красный.
4. Цена считается на сервереКонструктор показывает цену в браузере, но при отправке сервер пересчитывает её заново по каталогу и игнорирует присланное клиентом. Подменить сумму через инструменты разработчика нельзя.

Решения

1. Сайт и есть менюНазвание взято буквально: table d'hôte, стол хозяина с фиксированным набором перемен. Первый экран не рассказывает о заведении, а показывает карту сегодняшнего дня.
2. Состояние считается по петербургскому времениСервер отдаёт «открыто до 00:00» или «понедельник, выходной», а за час до закрытия переключается на «кухня закрывается через N минут». Чистая функция от времени, поэтому серверная разметка и браузер не расходятся.
3. Один источник правдыСтол дня меняется по дню недели, состав берётся из той же карты, что и страница меню. Поменяли блюдо в карте — оно поменялось и на главной, и в подтверждении брони.
4. Часы проверяются дваждыФорма подставляет слоты по полчаса для выбранной даты и блокирует понедельник. Сервер проверяет то же самое повторно, чтобы бронь нельзя было протолкнуть в обход формы.
5. Движение служебное, а не украшениеШесть видов, все привязаны к прокрутке, без видео. Бокал нарисован вектором, уровень поднимается по мере прокрутки. В состоянии покоя бокал налит, поэтому при отключённой анимации страница просто статична.

Замеренные цифры

Решения

1. Подбор от задачи, а не от категорииРабота, учёба, игры, съёмка. Категория остаётся вторым фильтром. На каждой плитке задачи стоит цена «от», посчитанная из каталога, — человек сразу понимает, попадает ли в бюджет.
2. Фильтры живут в адресе страницыВыбор переписывает адрес: ?category=laptops&band=under60. Подборку можно отправить ссылкой, она откроется у получателя в том же виде, и кнопка «назад» возвращает предыдущий набор. Для магазина, где ссылками делятся постоянно, это прямые продажи.
3. Цену считает серверВ заявку попадает название и сумма из каталога, а не то, что прислал браузер. Подменить цену через инструменты разработчика нельзя.
4. Светлая тема выбрана осознанноДля техники светлый фон честнее: товар видно, а не тонет в подсветке.

Замеренные цифры

Решения

1. Смысловой стержень: видно, что чинятИз него выросло всё остальное, включая главную анимацию. Сайт показывает процесс: что смотрят, за сколько, в каком порядке и где сейчас машина.
2. Сталь с лаймом вместо графита с оранжевымГрафит с оранжевым — самый частый штамп для «технично и брутально». Лайм взят из цеха: так красят суппорты и метят инструмент. И он не совпадает ни с красным, ни с золотым, ни с кобальтом трёх предыдущих работ.
3. Первый экран — векторная сцена, а не фотографияМашина заезжает на двухстоечный подъёмник и поднимается по мере прокрутки. Сцена нарисована вручную в SVG, без библиотек и без видео.
4. Статус ремонта закрыт вторым полемПо одному номеру заказ-наряда чужой заказ открывался бы перебором, поэтому спрашиваю ещё четыре последние цифры телефона владельца. С неверными цифрами сайт отвечает «такого заказ-наряда не нашли» — проверено.
5. Цену считает серверВ заявку попадает название работы, нормо-часы и сумма из прайса по идентификатору, а не то, что прислал браузер.
6. Выбранная работа живёт в адресеСсылка вида ?work=struts открывает форму с уже подставленной строкой — из прайса можно отправить человеку ссылку на конкретную работу.

Замеренные цифры