Телеграм, WhatsApp +380637610482
Валерий Данюк
Валерий ДанюкразработчикРазработка ИИ‑инструментов для бизнеса. Качественно. Недорого.Написать в Telegram
INO — превью сайта в этом стиле

INO

Музейная витрина в тишине — каждый экспонат парит в белом пространстве, словно единый объект за стеклом, обрамленный почти черным едва слышным шрифтом

INO функционирует как почти монохромная ювелирная галерея: белоснежный холст, один теплый, почти черный цвет чернил и практически полное отсутствие цветовых выражений. Визуальная система рассматривает каждое кольцо как музейный экспонат — клинические фотографии продукции, парящие в обширном негативном пространстве, с иерархией, построенной за счет положения, межбуквенного расстояния и объема белого цвета, а не за счет масштаба шрифта или цвета. Навигация расположена внизу страницы в виде четырех точек с подписями (заполненных или пустых), что является намеренным переворотом по сравнению с традиционной верхней панелью в электронной коммерции. Сам фирменный знак представляет собой набор концентрических контуров колец, повторяющих форму продукта и выступающих в качестве типографической скульптуры, а не логотипа.

Полноэкранный холст без ограничения максимальной ширины контента. Главный экран занимает всю ширину страницы, при этом фотография и графика разделены поровну (50/50). Сетки товаров отображаются в виде трехколоночных строк с большим горизонтальным отступом от края области просмотра. Нижняя навигация центрирована и прикреплена к нижнему колонтитулу страницы, а не закреплена. Разрывы разделов используют либо полноэкранную редакционную фотографию, либо чистое пустое пространство — никогда не цветную полосу, разделительную линию или градиент. Вертикальный ритм свободный: 80/1/1 между основными разделами, страница «дышит», а не «наполняется» контентом. Нет боковой панели, нет мега-меню, нет верхней панели заголовка — логотип «INO» расположен только в верхнем левом углу главного экрана.

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

Палитра

Нейтральные

  • Obsidian Ink #212123 — Нейтральные состояния формы, текст значка и сдержанная обратная связь пользовательского интерфейса, где цветовая гамма должна оставаться ненавязчивой.
  • Bone #ffffff — Холст страницы, картонные поверхности, инвертированный текст на темном фоне. Доминирующая поверхность; почти весь сайт расположен здесь.
  • Carbon #000000 — Заливка иконок, декоративные графические обводки, заливка активного состояния для индикатора навигационной точки. Используется экономно для максимального тонального контраста с цветом «костяной кости».
  • Ash #999999 — Границы со средним контрастом, контрольные контуры и структурные разделители.
  • Pebble #a6a6a7 — Приглушенный вспомогательный текст, тонкие разделители основного текста, вторичные метаданные. Самый светлый функциональный серый цвет — используется для ценников и сопроводительного текста, который должен отступать на задний план.

Типографика

от 11 до 18px · 4 ступеней

  • Sequel100Wide — замена: Jost (400 · начертания 400 · Единственный фирменный шрифт, используемый только в начертании 400 во всех контекстах — навигация, основной текст, заголовки, заголовок, цены, подписи. Широко расставленный геометрический символ с большим межбуквенным расстоянием отражает весь фирменный стиль. Отсутствие жирного начертания — намеренное решение: иерархия достигается за счет регистра заглавных букв, межбуквенного расстояния и положения, а не за счет изменения толщины шрифта.
  • Arial — замена: system-ui · начертания 400 · Системный резервный вариант для отрисовки кнопок в устаревших контекстах. Не является частью фирменного стиля — появляется только в случае, если Sequel100Wide не загружается.

Интервалы и форма

НазначениеЗначение
Плотностьплотная
Базовый шаг23px
Радиус кнопок50px
Радиус карточек8px
Тенинет — границы вместо теней
Между секциями80-120px

ИИ соберёт ваш сайт в стиле INO и наполнит его

  • Наполнит товарами и постами по ссылке — Instagram, TikTok, Facebook.
  • Перенесёт контент со старого сайта — достаточно указать адрес.
  • Современный дизайн на лучшем движке: React (Next.js) с серверным рендерингом и SEO-оптимизацией из коробки.
  • Полная автоматическая SEO-оптимизация под поисковую выдачу и рекомендации нейросетей.

Похожие стили

  • Airbnb — Тихая белая стена галереи с одной кораллово-красной закладкой
  • Peak Design — Стена галереи, частично освещенная
  • 099 SUPPLY — Стена галереи, заполненная черно-белыми объектами
  • Apple (España) — белая витрина галереи
  • Apple (España) — Галерейная витрина в утреннем тумане
  • Custo — Галерея цвета оружейной стали с монолитным шрифтом. Выставочный зал в приглушенных серо-зеленых тонах, где е…
  • Silencio — Белая комната с парящими артефактами. Галерейная витрина из теплой бумаги, где каждый элемент занимает свое …
  • Oakâme — Залитая солнцем провансальская мастерская, высеченная из теплого камня
  • Nike — Монохромная галерея спортивных достижений — белые стены, продукт как произведение искусства, хром, растворен…
  • Sociotype — Типовой образец музейного образца на белой бумаге
  • Arc — индустриальная белая галерея над полуночной водой
  • Rivian — Электрический монолит на бетонной стене галереи. Rivian представляет каждый автомобиль как скульптуру на фон…