Shop
اڇي سنگ مرمر تي هڪ ترندڙ واپاري برج
آن لائن اسٽور هڪ "اڇو ڪينواس" ماڊل تي ڪم ڪري ٿو، جنهن ۾ پراڊڪٽس ٿمب نيلز جي گرڊ جي بدران وڏي، ڳري وکر واري تصوير ڪارڊ جي طور تي ڏيکاريل آهن. سڄو انٽرفيس ناقابل يقين حد تائين هموار آهي: 20-28px ريڊي پوري، گولي جي شڪل وارا ڪنٽرول، ۽ هڪ ڪمپيڪٽ 16px GT معياري جسم تنگ منفي ٽريڪنگ سان جيڪو ٽيڪسٽ کي ڪرپٽ ۽ بولڊ بڻائي ٿو. سسٽم جو واحد بولڊ تلفظ هڪ متحرڪ جامني (#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 جي آپٽيڪل وزن سان ڏيکاريل آهي - فونٽ جي درجه بندي نفيس گريڊينٽ ۽ گهاٽي منفي اکر جي فاصلي ذريعي حاصل ڪئي ويندي آهي، بولڊ ڪنٽراسٽ جي بدران. هي هڪ دستخطي انداز آهي: دڪان بولڊ فونٽس سان شور نٿو ڪري، پر اکر جي فاصلي ذريعي متن کي شڪل ڏئي ٿو.
- Shopify Sans — متبادل: Inter · خاڪا 400, 700 · سسٽم-سطح جي پيغامن لاءِ محفوظ آهي جهڙوڪ ايپ لوڊنگ بينر ۽ ڪوڪي رضامندي متن.
وقفا ۽ شڪل
| مقصد | مطلب |
|---|---|
| کثافت | سراسري |
| بنيادي قدم | 12px |
| بٽڻ جو ريڊيس | 9999px |
| ڪارڊ جو ريڊيس | 28px |
| پاڇا | نرم پاڇا |
| حصن جي وچ ۾ | 64px |
| صفحي جي ويڪر | 1200px |
AI توهان جي ويب سائيٽ Shop انداز ۾ ٺاهيندو ۽ ان کي ڀريندو.
- لنڪ ذريعي پراڊڪٽس ۽ پوسٽن سان ڀريو - Instagram ، TikTok ، Facebook.
- پنهنجي پراڻي سائيٽ تان مواد منتقل ڪريو - صرف پتو بيان ڪريو.
- بهترين انجن تي جديد ڊيزائن: سرور رينڊرنگ ۽ ايس اي او آپٽمائيزيشن سان React ( Next.js).
- ڳولا جي نتيجن ۽ نيورل نيٽ ورڪ سفارشن لاءِ مڪمل طور تي خودڪار SEO اصلاح.
هڪجهڙا انداز
- Cursor — هڪ آرامده پارچمينٽ ورڪشاپ، ٻرندڙ ڪوئلن سان روشن
- Slush — پيسٽل پيپر تي اسٽيڪرن جي انفلٽيبل ڪائنات
- MindMarket — ڪريم پيپر تي هڪ آرامده افسانوي ڪتاب - هڪ دوستانه ادارتي ڪينواس جتي وڏيون انٽر هيڊ لائنون ۽ ڪٽيل پيپر ڪردار سج سان ڀريل، اسٽيڪر نرم مٿاڇري تي گڏ رهن ٿا.
- Airbnb — هڪ خاموش اڇي گيلري واري ڀت جنهن ۾ هڪ واحد مرجان ڳاڙهي بُڪ مارڪ آهي.
- Superr — منجهند جي نرم روشنيءَ ۾ هڪ گرم اسڪول نوٽ بڪ. هڪ ڪريم رنگ جو صفحو، ٽوپي کان سواءِ نارنگي مارڪر، ۽ ليمينيٽ ٿيل نالي جي اسٽيڪرن جو هڪ ڍير جيڪو ڇلڻ جي انتظار ۾ آهي.
- Apple (España) — ميوزيم گيلري، نرم ڏينهن جي روشنيءَ ۾، هڪ واحد، دلڪش، بي وزن سفيد جاءِ آهي، جنهن ۾ هر نمائش هڪ هلڪي رنگ واري ڀت جي سامهون اسپاٽ لائٽ سان روشن ٿيل آهي.
- Lamborghini — شو روم ۾ ڪارو جسم جو رنگ، اسپاٽ لائيٽن هيٺ - هڪ پيلي ڪار
- Amplemarket — هڪ سج سان ڀريل ڪم واري جاءِ جيڪا ڪنفيٽي سان ڀريل آهي
- Getharvest — گولڊن آور تي هڪ ڊيسڪ - هڪ گرم ڪريم ڪينواس، ڪينواس تي اڇا پوسٽ ڪارڊ لٽڪيل، ۽ هڪ روشن نارنگي شعلو.
- Agence Foudre — ميگزين جو ڪور پيج هڪ نرم گلابي رنگ جو آهي جيڪو لپ اسٽڪ جي ياد ڏياري ٿو.
- Drive Capital — گرم ڪاغذ تي ريٽرو روڊ ٽرپ پوسٽر
- Apple (España) — اڇو گيلري ڊسپلي ڪيس