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) — черен театър с осветени елементи