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