Полба: сайт D2C-марки круп

Шестая из шести. Единственная тёмная сборка в серии — и единственная, где на странице стоит корзина, а не форма заявки.

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

Поэтому сборка начинается с крупной съёмки — `MediaStack` — и почти сразу переходит к `Gallery` и `Summary`. Дальше `FeatureRows` про состав и `MillChart`: график помола, единственное место на странице, где производство объясняется цифрой, а не словом. Для крупы это и есть отличие от соседа по полке.

`PricingOffer` и `OfferCopy` заканчивают страницу предложением: цена, объём, что входит. `FieldDiagram` перед ними показывает путь зерна от поля до пакета — короткая цепочка, которую как раз и покупают в D2C.

Полба: запись прокрутки главной, сверху донизу

Тёмный сайт делается темой, а не подменой цветов

Эта сборка тёмная целиком, и делается это одной строкой: тема принудительно тёмная. Соблазн был другой — поменять местами цвет фона и цвет чернил, оставив тему светлой. Так делать нельзя, и это стоило нам четырёх подряд «сломанных» секций.

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

Что видно на этой сборке

Салатовый праймери на почти чёрном фоне — цвет, который на тёмном наконец работает как акцент, а не как ошибка. Дисплейная гарнитура плотная, текстовая округлая.

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

Freshness is not an adjective on a packet, it is a date you can check on it
Five items, and we are not planning to multiply them
Where the grain sits between harvest and your shelf
Two boxes, bought once
What people say after their second order
02Читать дальше

Ещё в блоге

Две, не больше. Более длинная лента превращает конец статьи во вторую индексную страницу, а читатель уже сделал выбор один раз.