Shopify
آدھی رات کا گرین ہاؤس - ٹریڈ مارکس گہرے فیروزی پس منظر میں کھلتے ہیں، جو پودینے کی ایک چنگاری سے روشن ہوتے ہیں
Shopify کا ڈیزائن سسٹم کامرس کے لیے آدھی رات کی ورکشاپ ہے: گہرے فیروزی سبز رنگ کے قریب سیاہ کینوس، ایک وسیع، پراعتماد سانس سیرف ٹائپ فیس، اور ایک متحرک ٹکسال لہجہ جو انٹرایکٹو لمحات کو متحرک کرتا ہے۔ انٹرفیس ایک تاریک کمرے سے مشابہت رکھتا ہے، جہاں پروڈکٹس اور برانڈز روشنی کا ذریعہ ہیں— فوٹوز اور اسٹور فرنٹ قریب سیاہ سطحوں کے خلاف چمکتے ہیں، جبکہ کروم عناصر پیچھے ہٹ جاتے ہیں۔ اجزاء ہندسی لیکن نرم ہیں: پتلی سرحدوں کے ساتھ 12px-ریڈیس کارڈز، گولی کے سائز کے بٹن، اور 330 وزنی ٹائپ فیس جو چیخنے کی بجائے سرگوشیاں کرتے ہیں۔ ایک واحد رنگین اوقاف کا نشان (#36f4a4) لنکس، ٹیگز اور فوکس سٹیٹس پر تھوڑا سا استعمال کیا جاتا ہے، اس بات کو یقینی بنانے کے لیے کہ تجارتی کہانیاں بصری فوکل پوائنٹ رہیں۔
زیادہ سے زیادہ چوڑائی ~1280px ہے، مرکز میں، مکمل چوڑائی کے سپلیش بلاکس فوٹو کنٹینر سے آگے بڑھے ہوئے ہیں۔ صفحہ کی ردھم بدلتی ہے: (1) ایک مکمل چوڑائی والا سیاہ سپلیش صفحہ جس میں اوورلیڈ ہیڈ لائن اور کال ٹو ایکشن بٹن ہیں، (2) 2 کالموں میں زیادہ سے زیادہ چوڑائی والے متن اور تصویری بلاکس کے ساتھ آرام دہ سیاہ حصے یا 3 کالموں میں تصویری گرڈز، (3) انٹرایکٹو شوکیس پینلز (پروڈکٹ ڈسپلے کارڈ، گہرے نقشے کے کارڈ کے طور پر اٹھائے گئے پروڈکٹ کارڈ، شپنگ ورلڈ) کینوس نیویگیشن ایک فکسڈ ٹاپ بار ہے جس میں لوگو + 3 نیویگیشن عناصر + ثانوی لنکس + بنیادی کال ٹو ایکشن بٹن ہے، سبھی دائیں طرف منسلک ہیں۔ عمودی تال ایک ہموار منتقلی کے ساتھ حصوں کے درمیان 80px وقفے کا استعمال کرتا ہے — تاریک حصوں کے درمیان کوئی تقسیم نہیں، صرف سطح کے لہجے میں تبدیلی۔
بصری ڈیزائن بنیادی طور پر خوردہ فروش پر مرکوز ہے: مکمل سائز کی مصنوعات کی تصاویر اور برانڈ ایونٹس کی تصاویر میں بصری وزن کا بڑا حصہ ہوتا ہے، اکثر بڑے پس منظر کی شکل میں سفید متن کے ساتھ۔ تصاویر مضبوطی سے تراشی گئی ہیں، اعلیٰ کنٹراسٹ، اور فطرت میں تہوار ہیں (نیس ڈیک کی گھنٹی بجنا، گروپ مبارکباد، ہاتھ میں موجود مصنوعات کے کلوز اپ)۔ سیاہ پس منظر یہ تاثر پیدا کرتا ہے کہ یہ تصاویر اسپاٹ لائٹس سے روشن ہیں۔ مثالیں کم سے کم ہیں — بنیادی وضاحتی کام سرایت شدہ مصنوعات کی تصاویر اور اسٹور فرنٹ کے اسکرین شاٹس کے ذریعے انجام دیا جاتا ہے۔ شبیہیں مونوکروم ہیں، جس کی لائن چوڑائی 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 |
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) — روشن سامان کے ساتھ سیاہ تھیٹر