Shopify
د نیمې شپې شنه خونه - سوداګریز نښې د ژور فیروزي پس منظر په وړاندې غوړېږي، چې د نعناع د یوې څراغ لخوا روښانه کیږي.
د Shopify ډیزاین سیسټم د سوداګرۍ لپاره د نیمې شپې ورکشاپ دی: یو نږدې تور کینوس چې د ژور فیروزي شنه سره رنګ شوی، یو پراخ، ډاډمن سینز سیریف ټایپفیس، او یو واحد متحرک نعناع تلفظ چې متقابل شیبې فعالوي. انٹرفیس د تیاره خونې سره ورته دی، چیرې چې محصولات او برانډونه د رڼا سرچینه ده — عکسونه او د پلورنځي مخونه د نږدې تور سطحو په وړاندې ځلیږي، پداسې حال کې چې د کروم عناصر بیرته راګرځي. اجزا جیومیټریک مګر نرم دي: د 12px-شعاع کارتونه د پتلو سرحدونو سره، د ګولۍ په شکل تڼۍ، او د 330 وزن ټایپفیس چې د چیغې پرځای پیمانه غږوي. یو واحد کروماتیک ټکي نښه (#36f4a4) په لینکونو، ټګونو، او تمرکز حالتونو کې په کمه توګه کارول کیږي، د فعال شیبو لپاره رنګ خوندي کوي ترڅو ډاډ ترلاسه شي چې د سوداګر کیسې د بصري مرکزي نقطه پاتې کیږي.
اعظمي عرض یې ~۱۲۸۰ پکسله دی، په مرکز کې، د بشپړ عرض سپلیش بلاکونو سره چې د عکس کانټینر هاخوا غځیدلي دي. د پاڼې تال بدیلونه: (۱) د بشپړ عرض تیاره سپلیش پاڼه چې د سرلیک او د عمل کولو لپاره زنګ وهلو تڼیو سره، (۲) آرامه تیاره برخې چې د اعظمي عرض متن او د عکس بلاکونه په ۲ ستنو یا د عکس ګریډونو په ۳ ستنو کې، (۳) متقابل نندارتون پینلونه (د محصول کارت، د بار وړلو کیلکولیټر، د نړۍ نقشه) د ژور کینوس کې د پورته شوي کارتونو په توګه ښودل شوي. نیویګیشن یو ثابت پورتنۍ بار دی چې لوګو + ۳ نیویګیشن عناصر + ثانوي لینکونه + د عمل کولو لپاره لومړني تڼۍ لري، ټول ښي خوا ته تنظیم شوي. عمودي تال د برخو ترمنځ ۸۰ پکسله تشې کاروي چې د اسانه لیږد سره - د تیاره برخو ترمنځ هیڅ ویشونکی نشته، یوازې د سطحې ټون کې بدلون.
بصري ډیزاین په عمده توګه په پرچون پلورونکي تمرکز کوي: د بشپړ اندازې محصول عکسونه او د برانډ پیښو عکسونه د بصري وزن لویه برخه لري، ډیری وختونه د لویو شالیدونو په بڼه چې سپین متن پوښل شوی وي. انځورونه په کلکه کراپ شوي، لوړ برعکس، او په طبیعت کې جشني دي (د نیسډاک زنګ غږول، د ګروپ سلامونه، په لاس کې د محصولاتو نږدې عکسونه). تیاره شالید دا تاثر رامینځته کوي چې دا عکسونه د سپاټ لایټونو لخوا روښانه شوي. انځورونه لږترلږه دي - اصلي توضیحي کار د محصول عکسونو او د پلورنځیو د سکرین شاټونو لخوا ترسره کیږي. عکسونه مونوکروم دي، د 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— اصلي متن، د تڼۍ ډکول، سرلیک، لوګو.
ټایپوګرافي
له ۱۲ څخه تر ۷۰ پکسله پورې · ۸ ګامونه
- Neue Haas Grotesk — بدیل: Inter · بڼې 330, 400, 500, 550, 600 · د ټایپوګرافیک اصلي سیسټم سرلیکونه دي چې د فونټ وزن یې ۷۰-۹۶ پکسلز (۳۳۰-۴۰۰) دی چې د لوړ غږ پر ځای نازک دي؛ د بدن کاپي د فونټ وزن یې ۱۶-۱۸ پکسلز (۴۰۰-۵۰۰) دی؛ او نیویګیشن او کارن انٹرفیس یې د فونټ وزن ۱۴-۱۶ پکسلز (۵۰۰-۵۵۰) دی. د لوی سکرین اندازو کې د ۳۳۰ الټرا سپک فونټ وزن یو ځانګړی ځانګړتیا ده: دا د ډیریدو پرځای د محدودیت له لارې باور څرګندوي.
- Inter Variable — بدیل: Inter · بڼې 400, 420, 450, 550 · د فونټ یو ثانوي ډول چې د نیویګیشنل انٹرفیس عناصرو، کوچنیو نوټونو، ټب کنټرولونو، او په فوټرونو کې مایکرو متن کې کارول کیږي. د دې یو څه لوی کوچني توري او د معیاري لیکونو ډیر واټن دا په کمپیکټ اندازو کې د لوستلو وړ کوي. دا د هغو شرایطو لپاره هم مناسب دی چیرې چې د 420 وزن فونټ د منظم او منځنۍ اندازې فونټ ترمنځ تشه ډکوي.
وقفې او بڼه
| موخه | معنی |
|---|---|
| کثافت | اوسط |
| اساسي ګام | 12px |
| د تڼۍ وړانګې | 9999px |
| د کارت وړانګې | 12px |
| سیوري | د سیوري پر ځای هیڅ سرحد نشته |
| د برخو ترمنځ | 80px |
| د پاڼې پلنوالی | 1280px |
AI به ستاسو ویب پاڼه په Shopify سټایل کې جوړه کړي او ډکه یې کړي
- د لینک له لارې محصولات او پوسټونه ډک کړئ - Instagram ، TikTok ، Facebook.
- له خپل زوړ سایټ څخه مواد انتقال کړئ — یوازې پته مشخص کړئ.
- په غوره انجن کې عصري ډیزاین: د سرور رینډرینګ او SEO اصلاح کولو سره React ( Next.js).
- د لټون پایلو او عصبي شبکې سپارښتنو لپاره په بشپړ ډول اتوماتیک SEO اصلاح کول.
ورته سټایلونه
- Retool — د اوبسیډین ګرم ورکشاپ - د دقیقو وسایلو لپاره یوه سطحه، د اور لګیدونکو انګورو لخوا روښانه کیږي، چیرې چې هرڅه رامینځته کیږي.
- Elektron — د نیمې شپې د تجهیزاتو کنټرول پینل تقریبا تور کینوس دی، چیرې چې د محصول عکسونه ځلیږي پداسې حال کې چې انٹرفیس تقریبا نه لیدل کیږي.
- REKKI — د عکس په لابراتوار کې د الوتنې کنټرول پینل
- OFFFICE : — د نیر ګالري چې په مونولیتیک فونټ کې ډوب ده
- Clyde — د نندارتون خونه، د خپل واحد سپاټ لایټ سره، نږدې تیاره ګالري ده چیرې چې په خونه کې یوازینی رنګ ګرم تدریجي بال دی.
- Channel Studio — د سټوډیو د عکسونو لابراتوار د یوې مرجاني څراغ سره
- Electronic Materials Office — په یوه ګالري کې چې د سکرو سره سینګار شوې ده، یو ځلیدونکی سکرو
- ORYZO AI — د تیاره خونې په اړه د عکس مقاله. یو واحد شی چې په ګرمه تیاره کې ګرځي، کریم فونټ یوازینی سینګار دی.
- Factory — د "جګړې خونې" ټرمینل په نیمه شپه کې. "فابریکه" یو تور کنټرول پینل دی چیرې چې یو سپین کارت د فلش لائټ په څیر ښکته کیږي - په خونه کې یوازینی شی پخپله کار دی.
- Hungry Tiger — د تندور په دیوال باندې د زردچوبه رنګ روښانه ګرافیتي. د سرو زرو او زنګ وهلي نسواري یو متحد رنګ، دومره لوی فونټ سره چې دا د ویب پاڼې په پرتله د مصالحو بازار نښه ښکاري.
- Bibliothèque — د رڼا لاندې د تورې مکعب په شکل ګالري - په یوه پراخه، تیاره تالار کې یوازینۍ روښانه تخته
- Apple (España) — تور تیاتر د روښانه شویو فټینګونو سره