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