Shopify
Оранжерея півночі — торгові марки розквітають на тлі глибокого бірюзового кольору, освітлені єдиною іскрою м'яти.
Дизайн-система Shopify - це північна майстерня для комерції: майже чорне полотно, пофарбоване глибоким бірюзово-зеленим кольором, широкий, впевнений шрифт без засічок і один яскравий акцент, що активує інтерактивні моменти. Інтерфейс нагадує фотолабораторію, де джерелом світла є товари та бренди – фотографії та вітрини магазинів світяться на тлі майже чорних поверхонь, а хромовані елементи відступають. Компоненти геометричні, але м'які: картки радіусом 12px з тонкими рамками, кнопки у формі таблеток та шрифт завтовшки 330, який скоріше шепоче про масштаб, ніж кричить. Єдиний хроматичний розділовий знак (#36f4a4) використовується економно на посиланнях, тегах і станах фокусу, залишаючи колір для функціональних моментів, щоб історії продавців залишалися візуальним фокусом.
Максимальна ширина ~1280px, центрована по центру, з повноекранними блоками-заставками, що виходять за межі контейнера для фотографій. Ритм сторінки чергується: (1) повноекранна темна заставка з накладеним заголовком і кнопками заклику до дії, (2) комфортні темні секції з блоками тексту та зображень максимальної ширини у 2 колонки або сітками зображень у 3 колонки, (3) інтерактивні демонстраційні панелі (картка товару, піднятих карток на глибшому полотні. Навігація є фіксованою верхньою панеллю з логотипом + 3 елементами навігації + допоміжними посиланнями + основною кнопкою заклику до дії, вирівняними по правому краю. Вертикальний ритм використовує 80px проміжки між секціями з плавним переходом без роздільників між темними секціями, тільки зміна тональності поверхні.
Візуальне оформлення орієнтоване насамперед на продавця: повноформатні фотографії товарів та фотографії з заходів бренду несуть на собі основне візуальне навантаження, часто у вигляді масштабних фонів із накладеним білим текстом. Знімки мають щільне кадрування, високий контраст і мають святковий характер (дзвін дзвін Nasdaq, групові вітання, великі плани товару в руках). Темне тло створює відчуття, ніби ці фотографії освітлені прожекторами. Ілюстрації мінімалістичні - основну пояснювальну роботу виконують вбудовані зображення товарів та скріншоти вітрин магазинів. Монохромні іконки, з товщиною лінії 1,5–2px, зазвичай білі або #36f4a4 для активних станів.
Палітра
Бренд
- Shopify Mint
#36f4a4— Активні навігаційні індикатори, кільця фокусування, підсвічування тегів, акценти при наведенні курсору на посилання – єдина хроматична іскра, яка створює відчуття включеної інтерактивності на темному тлі.
Нейтральні
- Midnight Forest
#02090a— Полотно сторінки, фонові зображення для заголовка, фонові зображення для розділів - Deep Lichen
#061a1c— Основні поверхні карток, підняті панелі, блоки контенту. - Shaded Fern
#072720— Панель навігації, додаткові картки, ледве помітне підняття панелі. - Spruce Border
#1e2c31— Тонкі рамки для карток, розділові лінії, контури поля введення. - Abyss Indigo
#000a1e— Додаткова поверхня для вбудовування продуктів/демонстрацій, панелей із описом функцій. - Pure White
#ffffff— Основний текст, заливки кнопок, заголовок, логотипи.
Друкарня
від 12 до 70px · 8 ступенів
- Neue Haas Grotesk — заміна: Inter · зображення 330, 400, 500, 550, 600 · Основна друкарська система - заголовки з щільністю шрифту 70-96px (330-400) носять тихий, а не кричущий характер; основний текст із щільністю 16–18px (400–500); навігація та інтерфейс користувача з щільністю 14-16px (500-550). Надлегкий шрифт щільністю 330 при великих розмірах екрану - це відмінна риса: він висловлює впевненість через стриманість, а не обсяг.
- Inter Variable — заміна: Inter · зображення 400, 420, 450, 550 · Вторинний тип шрифту - використовується в навігаційних елементах інтерфейсу, для невеликих нотаток, елементів керування вкладками, мікротексту в нижньому колонтитулі. Трохи більша висота малих літер і більш стандартний міжлітерний інтервал роблять його більш читабельним при компактних розмірах. Також підходить для випадків, коли шрифт із зображенням 420 заповнює пробіл між звичайним і середнім шрифтом.
Інтервали та форма
| Призначення | Значення |
|---|---|
| Щільність | середня |
| Базовий крок | 12px |
| Радіус кнопок | 9999px |
| Радіус карток | 12px |
| Тіні | ні — межі замість тіней |
| Між секціями | 80px |
| Ширина сторінки | 1280px |
ІІ збере ваш сайт у стилі Shopify і наповнить його
- Наповнить товарами та постами за посиланням - Instagram, TikTok, Facebook.
- Перенесе контент зі старого сайту – достатньо вказати адресу.
- Сучасний дизайн на кращому движку: React ( Next.js) з серверним рендерингом та SEO-оптимізацією з коробки.
- Повна автоматична SEO-оптимізація під пошукову видачу та рекомендації нейромереж.
Схожі стилі
- Retool — Тепла обсидіанова майстерня - поверхня для прецизійних інструментів, освітлена тліючим вугіллям, де створюється все
- Elektron — Панель управління обладнанням опівночі — майже чорне полотно, на якому фотографії продукту сяють, а інтерфейс залишається практично невидимим.
- REKKI — Панель керування польотом у фотолабораторії
- OFFFICE : — галерея нуар, поглинена монолітним шрифтом
- Clyde — Демонстраційна зала з єдиним прожектором — майже темна галерея, де єдиний колір у приміщенні — це тепла градієнтна куля.
- Channel Studio — Студійна фотолабораторія з одним кораловим плафоном
- Electronic Materials Office — Розпечений куточок у галереї, оформленій вугіллям
- ORYZO AI — Фоторепортаж про фотолабораторію. Самотній об'єкт, що ширяє в теплій темряві, кремовий шрифт — єдина прикраса
- Factory — Термінал «військова кімната» опівночі. «Завод» - це строга чорна панель управління, де єдина біла карта приземляється, немов освітлене ліхтариком повідомлення - єдиний об'єкт у кімнаті - це сама робота
- Hungry Tiger — Яскраві, як куркума, графіті на стіні тандира. Єдина палітра із золотистого та іржаво-коричневого кольорів із таким великим шрифтом, що він більше схожий на вивіску ринку спецій, ніж на веб-сторінку
- Bibliothèque — Галерея у формі чорного куба під світлом прожектора - самотня підсвічена пластина у величезному темному залі
- Apple (España) — чорний театр зі фурнітурою, що світиться