«Морская лавка»: фирменный стиль и магазин, собранные из одного разбора

Работа настоящая, магазин выдуман. «Морская лавка» — имя, придуманное студией: так не бывает совпадений с живой компанией. Адреса, телефоны и цены здесь не настоящие, и об этом написано на самой странице, а не мелким шрифтом внизу.

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

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

Значит, задача сайта здесь не «показать ассортимент». Задача — заменить продавца и витрину теми средствами, которые есть на экране: датой завоза, честным описанием, ценой за килограмм и понятным следующим шагом.

Они одинаковые у всех, кто торгует свежим: у рыбного, у мясной лавки, у фермерского молока. Мы их и разбирали.

«А оно свежее?»

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

«Я не знаю, сколько это будет стоить»

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

«Я закажу, а мне привезут не то»

Страх подмены. Лечится не обещаниями, а конкретностью описания: вес, обработка, происхождение, «на коже» или без. Общие слова вроде «премиальное качество» этот страх усиливают — их можно написать про любой товар, и покупатель это чувствует.

Путь короткий, и это главное требование к такому магазину: человек решает у витрины за минуту, и в интернете у него терпения не больше.

1. Смотрит завоз. Дата стоит выше цены — на неё он смотрит первой, даже если сам этого не осознаёт.
2. Выбирает отдел. Вкладки переключают витрину, страница не перезагружается: сравнение не сбивает место.
3. Кладёт в корзину. Кнопка отвечает «Добавлено ✓» и возвращается сама. Счётчик растёт — значит, засчиталось.
4. Видит сумму. До того, как назвал имя и телефон. Порядок обратный убивает заказы: человек не отдаёт контакт, не зная, во сколько ему это встанет.
5. Оформляет в окне. Три поля, окно закрывается крестиком, фоном и клавишей Escape.

Шагов пять, и ни один нельзя выбросить. Проверяется это не спором, а прохождением: приёмка нажимает их по очереди.

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

Корзина, которая считает при каждом нажатии. Счётчик растёт, кнопка отвечает «Добавлено ✓» и возвращается сама — человек видит, что действие засчиталось, и не жмёт второй раз.

Заказ в одно окно. Не отдельная страница, не длинная форма: окно открывается поверх витрины и закрывается тремя способами — крестиком, нажатием по фону и клавишей Escape. Человек не должен чувствовать себя запертым в форме.

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

Ни одного запроса на чужой домен. Шрифты, стили и графика лежат у нас. Причины три: страница не ждёт чужой сервер, IP посетителя не уезжает третьей стороне до всякого согласия, и работа не сломается в день, когда чужой сервис закроется.

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

Ловушка, которую поймала именно приёмка. Окно заказа с виду было закрыто, а на деле лежало прозрачным слоем поверх всей страницы и перехватывало нажатия. Глазами это не видно — фон окна прозрачный. Человек нажимал бы на товар и ничего не получал, а мы бы искали ошибку в корзине. Нашла проверка, за минуту.

Первый вариант палитры был зелёный — «свежесть, натуральность». Владелица его отклонила и была права: зелёный в еде читается как овощи и травы, а здесь холод. Взяли арктическую гамму — глубокий синий #0E3355 и #2C6E9B, ледяной светлый #CBE4F2, и один тёплый акцент #B85F1E на действие: кнопку надо видеть.

Цвет здесь не украшение, а обещание. Холод в рыбной лавке означает «товар не лежал» — то же самое, что дата завоза, только без слов.

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

Форма не отправляет заказ. Сознательно. Заказ, который некому исполнить, — это обманутый человек, а не красивая демонстрация.

Оплаты в показе нет. Принимать деньги от имени выдуманного магазина нельзя ни в каком виде, даже понарошку.

Фотографий товара нет. Их место занимает линейная графика, и это честно названо на странице. Чужие снимки рыбы мы не берём: фотография — такая же чужая работа, как текст. Появятся свои кадры — встанут на те же места.

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

В чужих кейсах на этом месте стоят проценты: «продажи выросли на 40 %». Здесь их не будет, и вот почему: магазин выдуман, продавать в нём некому и нечего. Написать цифру означало бы её придумать.

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

Ту же строгость мы применяем и к чужим работам. Разбирая кейс прачечной с Behance, мы первым делом нашли, чего в нём нет: ни одной цифры про деньги, ни панели владельца, ни одного состояния ошибки. Красивый рассказ — не то же самое, что работающее дело.