Shop
Торгове сузір'я на білому мармурі.
Інтернет-магазин працює за моделлю «білого полотна», де товари відображаються у вигляді великих, сильно закруглених карток із зображеннями, а не у вигляді сіток із мініатюрами. Весь інтерфейс неймовірно м'який: радіуси 20-28px всюди, елементи керування у формі таблеток, компактний корпус 16px GT Standard із щільним негативним трекінгом, який робить текст чітким та виразним. Єдиний насичений акцент системи – це яскравий фіолетовий колір (#5433eb), який з'являється в логотипі, у круговому полі для введення результатів пошуку та у вигляді тонованої тіні на тій самій кнопці. Решта палітри — тепла нейтральна: білі поверхні, ледь помітне холодне сіре полотно, тонкі межі та майже чорний текст. Щільність залишається компактною з 12px проміжками, але смуги героя та категорій «дихають» завдяки щедрому вертикальному ритму 64-80px, завдяки чому комерція відчувається швидше як перегляд, ніж каталог.
Максимальна ширина 1200px, центрована на напівпрозорому полотні #f2f4f5 з постійною бічною панеллю шириною 64px зліва, що містить тільки іконки для навігації. Головний елемент є смугою на всю ширину, де картки товарів розташовуються над розташованим по центру фіолетовим логотипом «магазин», а рядок пошуку у вигляді таблеток знаходиться безпосередньо під ним. Пігулки категорій розташовані в одному центрованому ряду під пошуком. Розділи контенту (Жінки, Чоловіки, Краса, Дім, Товари для дітей та малюків) слідують у вигляді позначених смуг, кожна з яких містить сітку із 4 колонок із зображеннями товарів або композицію із 2 колонок «головний елемент і сітка». Вертикальний ритм досить великий: 64-80px між основними розділами. Нижній колонтитул є темною смугою внизу сторінки з групами посилань у вигляді колонок. Стрілки каруселі праворуч на горизонтальних панелях товарів вказують на контент, що прокручується, без точок пагінації.
Фотографія є домінуючим візуальним елементом: повноекранні фотографії товарів на білому тлі, кадрування 1:1, а також зображення в стилі лайфстайл із теплими земляними тонами (бежевий, теракотовий, шавлієвий, слонова кістка). Зображення товарів мають свій власний колір — інтерфейс користувача залишається ахроматичним, тому відтінки товарів стають візуальною різноманітністю. Логотипи бренду відображаються у вигляді тексту на темних або світлих головних зображеннях, а не у вигляді окремих значків. У головній композиції картки товарів розташовуються у вигляді плаваючого сузір'я, що злегка перекривається, над словесним знаком. Мінімалістичні і монохромні іконки (чорні контури), за винятком іконок категорій, які використовують один фірмовий колір. Жодних ілюстрацій, 3D-ефектів, градієнтів на зображеннях товарів.
Палітра
Бренд
- Shop Violet
#5433eb— Кнопка відправлення, точковий текстовий знак, логотип бренду – єдиний акцент, який вирізняє дію та індивідуальність на білому тлі. - Violet Wash
#c0b5f3— Напівпрозорий ореол за фіолетовою кнопкою відправлення, що зберігає своє свічення без зміни відтінку.
Нейтральні
- Canvas Mist
#f2f4f5— Фон сторінки та додаткова обробка поверхні за піднятими картками. - Pure White
#ffffff— Основна поверхня для карток, полів уведення, плаваючих рекламних вивісок та кнопок у вигляді таблеток. - Ink Black
#000000— Основний текст, заголовки, значки, символи навігації та картки товарів у темному режимі. - Faint Border
#ebebeb— Тонкі розділові лінії на картках, контури полів уведення та рамки у вигляді кнопок-таблеток. - Muted Gray
#787574— Другий текст, мітки навігації, обведення значків у неактивному стані - Cool Stone
#cccccc— Заповнювачі, вимкнені стани та фони неактивних значків
Друкарня
від 11 до 16px · 4 ступенів
- GT Standard — заміна: Inter · зображення 400 · Основний шрифт всіх розмірів як для основного тексту, так і для заголовків. GTStandard-MRegular у розмірах 16px/-0.031em – це основний шрифт для основного тексту, кнопок та підписів. GTStandard-MSemibold у розмірах 20px/-0.05em використовується для декількох заголовків великого розміру; GTStandard-MMedium у розмірах 11-12px - для мікропідписів. Кожен варіант шрифту відображається з оптичною вагою 400 - ієрархія шрифтів досягається за рахунок тонких градієнтів та щільної негативної міжлітерної відстані, а не за рахунок жирного розмаїття. Це фірмовий стиль: Shop не кричить жирним шрифтом, а формує текст за допомогою міжлітерної відстані.
- Shopify Sans — заміна: Inter · зображення 400, 700 · Зарезервовано для повідомлень системного рівня, таких як банер завантаження програми та текст згоди на використання файлів cookie.
Інтервали та форма
| Призначення | Значення |
|---|---|
| Щільність | середня |
| Базовий крок | 12px |
| Радіус кнопок | 9999px |
| Радіус карток | 28px |
| Тіні | м'які тіні |
| Між секціями | 64px |
| Ширина сторінки | 1200px |
ІІ збере ваш сайт у стилі Shop і наповнить його
- Наповнить товарами та постами за посиланням - Instagram, TikTok, Facebook.
- Перенесе контент зі старого сайту – достатньо вказати адресу.
- Сучасний дизайн на кращому движку: React ( Next.js) з серверним рендерингом та SEO-оптимізацією з коробки.
- Повна автоматична SEO-оптимізація під пошукову видачу та рекомендації нейромереж.
Схожі стилі
- Cursor — Затишна майстерня з пергаменту, освітлена тліючим вугіллям
- Slush — надувний всесвіт наклейок на пастельному папері
- MindMarket — Затишна книжка-казка на кремовому папері — доброзичливе редакційне полотно, де великі заголовки Inter та вирізані з паперу персонажі сусідять на залитій сонцем, м'якій, як наклейки, поверхні
- Airbnb — Тиха біла стіна галереї з однією коралово-червоною закладкою
- Superr — Теплий шкільний блокнот у м'якому післяполудневому світлі. Кремова сторінка, помаранчевий маркер без ковпачка та стопка ламінованих наклейок з іменами, що очікують відклеювання
- Apple (España) — Музейна галерея в м'якому денному світлі - це єдине, захоплююче, невагоме біле приміщення, де кожен експонат підсвічений точковим променем на тлі злегка тонованої стіни.
- Lamborghini — Чорний колір кузова у виставковому залі, під світлом прожекторів – один жовтий автомобіль
- Amplemarket — Залите сонцем робоче місце, посипане конфетті
- Getharvest — Робочий стіл у «золоту годину» — полотно теплого кремового кольору, білі листівки, розвішані на полотні, та одне яскраве помаранчеве полум'я
- Agence Foudre — Головна сторінка журналу, виконана в ніжно-рожевому кольорі, що нагадує колір губної помади
- Drive Capital — Ретро-постер для подорожі на теплому папері
- Apple (España) — біла вітрина галереї