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

MAKR

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

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

Макет от края до края без ограничения максимальной ширины контента — изображения заполняют всю область просмотра. Верхний баннер с объявлением занимает всю ширину, за ним следует навигация в заголовке, также во всю ширину. Основная область контента использует многоколоночную сетку изображений (2–3 колонки для настольных компьютеров) с нулевыми или минимальными промежутками, позволяя фотографиям создавать собственную визуальную структуру. Текст и ссылки располагаются в белых полях под изображениями, никогда не накладываясь друг на друга. Редакционные разделы чередуются между сетками товаров и полноформатными фотографиями в стиле лайфстайл. Вертикальный ритм достаточно щедрый (80–1,5 промежутков между разделами), создавая ощущение прогулки по галерее. Модальное окно подписки на новостную рассылку представляет собой фиксированную нижнюю левую панель; закрываемая панель подписки находится в самом низу области просмотра. Общее впечатление — это музейный каталог или редакционный разворот, а не типичный макет интернет-магазина.

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

Палитра

Нейтральные

  • Obsidian Ink #1c1717 — Основной текст, все текстовые ссылки, основной текст, заголовки, обводка значков, тонкие линии границ по всему пользовательскому интерфейсу. Это основной цвет — 17,7:1 на белом фоне, используемый более чем в 5000 экземплярах. Его очень лёгкий тёплый оттенок (не чисто чёрный) придаёт всему интерфейсу ощущение печатного каталога, а не экрана.
  • Paper #ffffff — Тонкие границы, разделители, контуры полей ввода и края карточек на светлых поверхностях. Не используйте этот цвет в качестве основного цвета кнопки призыва к действию.
  • Bone #f0f0f0 — Вторичная поверхность для чередования секций, создания ненавязчивых фонов панелей и внутренних границ/разделителей. Создает едва заметный теплый серый оттенок между белым цветом бумаги и светло-зеленой полосой объявления.
  • Eucalyptus Mist #a9aea9 — Фон баннера объявления в верхней части страницы, приглушенные цветовые переходы между разделами, третичная рамка. Сам по себе выглядит почти серым, но при использовании на всю ширину приобретает едва заметный оттенок шалфея — единственный цветовой акцент в монохромной системе.

Типографика

от 11 до 32px · 5 ступеней

  • Sohne Web — замена: Inter · начертания 400 · Весь стиль интерфейса — основной текст, навигация, ссылки, заголовки, кнопки, поля ввода, значки, подписи к изображениям. Шрифт Sohne толщиной всего 400 (жирные варианты не обнаружены) придает MAKR его тихую, но уверенную выразительность: информация передается через размер и межбуквенное расстояние, а не через контрастность толщины. Варианты замены: Inter, Söhne или Untitled Sans.
  • CircularXXMonoWeb — замена: JetBrains Mono · начертания 400 · Используется только для редких технических указаний или спецификаций продукта — моноширинный шепот, нарушающий неогротескный ритм. Используйте экономно: код продукта, спецификация материала, не более того. Замените на: JetBrains Mono или IBM Plex Mono.

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

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

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

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

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

  • FARFETCH España — Модная галерея в стиле «белого куба». Представьте себе элитное торговое пространство, где стены, полы и обор…
  • Franco Maria Ricci Editore — Каталог галереи в стиле ар-деко — полированные золотые линии на белоснежном пергаменте
  • Laura Monin — Стена редакционной галереи, белый мрамор, чернильный штамп
  • OhDada — Стена редакционной галереи
  • Cursor — Уютная мастерская из пергамента, освещенная тлеющими углями
  • Structured — Галерея эпохи Возрождения на бумаге, напоминающей пластилин
  • MindMarket — Уютная книжка-сказка на кремовой бумаге — дружелюбное редакционное полотно, где крупные заголовки Inter и вы…
  • Airbnb — Тихая белая стена галереи с одной кораллово-красной закладкой
  • Apple (España) — Музейная галерея в мягком дневном свете — это единое, захватывающее, невесомое белое помещение, где каждый э…
  • Lamborghini — Черный цвет кузова в выставочном зале, под светом прожекторов — один желтый автомобиль
  • Amplemarket — Залитое солнцем рабочее место, усыпанное конфетти
  • Getharvest — Рабочий стол в «золотой час» — холст теплого кремового цвета, белые открытки, развешанные на холсте, и одно …