
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) — чорны тэатр са святлівай фурнітурай