Телеграм, 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 — Робочий стіл у «золоту годину» — полотно теплого кремового кольору, білі листівки, розвішані на полотні, та одне яскраве помаранчеве полум'я