Shopify
Полноќна стаклена градина - Трговските марки цветаат на длабока тиркизна позадина, осветлени од една искра нане
Дизајнерскиот систем на Shopify е полноќна работилница за трговија: речиси црно платно обоено со длабока тиркизна зелена боја, широк, самоуверен фонт sans-serif и еден жив акцент во боја на мента што ги активира интерактивните моменти. Интерфејсот наликува на темна соба, каде што производите и брендовите се извор на светлина - фотографиите и излозите светат на речиси црни површини, додека хромираните елементи се повлекуваат. Компонентите се геометриски, но меки: картички со радиус од 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–96 пиксели (330–400) кои се суптилни, а не гласни; текст на телото со тежина на фонт од 16–18 пиксели (400–500); и навигација и кориснички интерфејс со тежина на фонт од 14–16 пиксели (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) — црн театар со осветлени фитинзи