Shop

Гандлёвае гандлёвае сузор'е на белым мармуры

Інтэрнэт-крама працуе па мадэлі "белага палатна", дзе тавары адлюстроўваюцца ў выглядзе вялікіх, моцна закругленых картак з выявамі, а не ў выглядзе сетак з мініяцюрамі. Увесь інтэрфейс неверагодна мяккі: радыусы 20-28px паўсюль, элементы кіравання ў форме таблетак, кампактны корпус 16px GT Standard са шчыльным адмоўным трэкінгам, які робіць тэкст выразным і выразным. Адзіны насычаны акцэнт сістэмы - гэта яркі фіялетавы колер (#5433eb), які з'яўляецца ў лагатыпе, у кругавым полі для ўводу вынікаў пошуку і ў выглядзе таніраванага ценю на той жа кнопцы. Астатняя палітра - цёплая нейтральная: белыя паверхні, ледзь прыкметнае халоднае шэрае палатно, тонкія межы і амаль чорны тэкст. Шчыльнасць застаецца кампактнай з 12px прамежкамі, але палосы героя і катэгорый "дыхаюць" дзякуючы шчодраму вертыкальнаму рытму 64-80px, дзякуючы чаму камерцыя адчуваецца хутчэй як прагляд, чым як каталог.

Максімальная шырыня 1200px, цэнтраваная на напаўпразрыстым палатне #f2f4f5, з сталай бакавой панэллю шырынёй 64px злева, утрымоўвальнай толькі абразкі для навігацыі. Галоўны элемент уяўляе сабой паласу ва ўсю шырыню, дзе карткі тавараў размяшчаюцца над размешчаным па цэнтры фіялетавым лагатыпам «крама», а радок пошуку ў выглядзе таблетак знаходзіцца непасрэдна пад ім. Таблеткі катэгорый размешчаны ў адным цэнтраваным шэрагу пад пошукам. Часткі кантэнту (Жанчыны, Мужчыны, Прыгажосць, Хата, Тавары для дзяцей і малянят) вынікаюць у выглядзе пазначаных палос, кожная з якіх утрымоўвае сетку з 4 калонак з выявамі тавараў або кампазіцыю з 2 калонак «галоўны элемент і сетка». Вертыкальны рытм дастаткова вялікі: 64-80px паміж асноўнымі раздзеламі. Ніжні калантытул ўяўляе сабой цёмную паласу ўнізе старонкі з групамі спасылак у выглядзе калонак. Стрэлкі каруселі справа на гарызантальных панэлях тавараў паказваюць на які пракручваецца кантэнт без кропак пагінацыі.

Фатаграфія з'яўляецца дамінантным візуальным элементам: поўнаэкранныя фатаграфіі тавараў на белым фоне, кадраванне 1:1, а таксама выявы ў стылі лайфстайл з цёплымі землянымі тонамі (бэжавы, тэракотавы, шалфейны, слановая косць). Выявы тавараў маюць свой уласны колер - карыстацкі інтэрфейс застаецца ахраматычнай, таму адценні тавараў становяцца візуальнай разнастайнасцю. Лагатыпы брэнда адлюстроўваюцца ў выглядзе накладзенага тэксту на цёмных ці светлых галоўных выявах, а не ў выглядзе асобных значкоў. У галоўнай кампазіцыі карткі тавараў размяшчаюцца ў выглядзе плаваючага, злёгку перакрываецца сузор'і над слоўным знакам. Абразкі мінімалістычныя і манахромныя (чорныя контуры), за выключэннем абразкоў катэгорый, якія выкарыстоўваюць адзін фірменны колер. Ніякіх ілюстрацый, 3D-эфектаў, градыентаў на выявах тавараў.

Інтэрнэт-крама Мінімалізм

https://shop.app

Палітра

Брэнд

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 · Зарэзервавана для паведамленняў сістэмнага ўзроўню, такіх як банэр загрузкі прыкладання і тэкст згоды на выкарыстанне кукі-файлаў.

Інтэрвалы і форма

Прызначэнне	Значэнне
Шчыльнасць	сярэдняя
Базавы крок	12px
Радыус кнопак	9999px
Радыус картак	28px
Цені	мяккія цені
Паміж секцыямі	64px
Шырыня старонкі	1200px

ІІ збярэ ваш сайт у стылі Shop і напоўніць яго

Напоўніць таварамі і пастамі па спасылцы — Instagram, TikTok, Facebook.
Перанясе кантэнт са старога сайта - дастаткова пазначыць адрас.
Сучасны дызайн на лепшым рухавічку: React ( Next.js) з серверным рэндэрынгам і SEO-аптымізацыяй са скрынкі.
Поўная аўтаматычная SEO-аптымізацыя пад пошукавую выдачу і рэкамендацыі нейрасетак.

Стварыць сайт у гэтым стылі

Падобныя стылі

Apple iPhone Duo — Складаная прылада ў белай галерэі. У цэнтры – візуальныя рэндэры прадукта, а друкарка і сінія элементы кіравання наўмысна стрыманыя
AYOCIN — Сонечны татэм аздараўлення. Стварайце экраны, якія нагадваюць цёплую інтэр'ерную фатаграфію: манументальны шрыфт, мякка размытыя архітэктурныя цені і адзіны які свеціцца аб'ект, зняволены ў спакойную крэмавую прастору
Apple AirPods 5 — Apple - кіно на белым фоне. Велізарная белая прастора для мантажу змяняецца поўнафарматнымі рэкламнымі ролікамі, дзе сілуэты аб'ектаў, якія рухаюцца, і насычанае святло ствараюць візуальны драматызм.
Hopper — Акно Санторыні ў прыцемках. Змякчэлая фатаграфія месца прызначэння служыць атмасферным верхнім пластом, па-над якім размешчаны кампактныя белыя элементы кіравання навігацыяй і браніраваннем.
Bose — Гукавая сцэна на ўзбярэжжа. Кадр запаўняе рэкламны малюнак, які раздзімаецца на ветры, а выразныя чорна-белыя элементы кіравання рэкламнай кампаніяй размешчаны вакол яго, нібы высокадакладныя дэталі.
Bauhaus Clock — Гадзіны ў стылі Баухаус - бірузовае механічнае свячэнне. Апраўце спакойныя светлыя паверхні цёмнай, кінематаграфічнай выявай гадзін і выкарыстоўвайце бірузовы колер у якасці рэдкай дэталі, якая свеціцца.
Cursor — Утульная майстэрня з пергамента, асветленая якія тлеюць вуглямі
Slush — надзіманы сусвет налепак на пастэльнай паперы
MindMarket — Утульная кніжка-казка на крэмавай паперы - прыязнае рэдакцыйнае палатно, дзе буйныя загалоўкі Inter і выразаныя з паперы персанажы суседнічаюць на залітай сонцам, мяккай, як налепкі, паверхні
Airbnb — Ціхая белая сцяна галерэі з адной каралава-чырвонай закладкай
Superr — Цёплы школьны нататнік у мяккім пасляпаўдзённым святле. Крэмавая старонка, аранжавы маркер без каўпачка і чарка заламінаваных налепак з імёнамі, якія чакаюць адклейвання
Apple (España) — Музейная галерэя ў мяккім дзённым святле - гэта адзінае, захапляльнае, бязважкае белае памяшканне, дзе кожны экспанат падсветлены кропкавым промнем на фоне злёгку таніраванай сцяны.