Тэлеграм, WhatsApp  +380637610482
Валерый Данюк
Валерый ДанюкраспрацоўшчыкРаспрацоўка ІІ-інструментаў для бізнесу. Якасна. Нядорага.Напісаць у Telegram
Shopify - папярэдні прагляд сайта ў гэтым стылі

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