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 اصلاح.
هڪجهڙا انداز
- Apple iPhone Duo — اڇي گيلري ۾ هڪ فولڊ ڪرڻ وارو ڊوائيس. پراڊڪٽ جا بصري رينڊرنگ مرڪز ۾ آهن، جڏهن ته ٽائپوگرافي ۽ نيرو ڪنٽرول جان بوجھ ڪري گهٽ ڪيا ويا آهن.
- AYOCIN — تندرستي جو هڪ شمسي ٽوٽم. هڪ گرم اندروني تصوير جي ياد ڏياريندڙ اسڪرينون ٺاهيو: يادگار ٽائيپ فيس، نرمي سان ڌنڌلي تعميراتي پاڇا، ۽ هڪ واحد روشن شيءِ هڪ پرسکون، ڪريمي جڳهه ۾ سيٽ ڪئي وئي آهي.
- Apple AirPods 5 — ايپل — سفيد پس منظر تي سينيما. ايڊيٽنگ لاءِ هڪ وسيع سفيد جاءِ مڪمل ڊگھائي اشتهارن کي رستو ڏئي ٿي، جتي هلندڙ شين جا سلائيٽ ۽ سير ٿيل روشني بصري ڊراما ٺاهي ٿي.
- Hopper — شام جي وقت سينٽوريني جي مٿان هڪ دري. منزل جي هڪ نرم تصوير هڪ فضائي اوورلي طور ڪم ڪري ٿي، جنهن جي مٿان ڪمپيڪٽ سفيد نيويگيشن ۽ بڪنگ ڪنٽرول آهن.
- Bose — ساحل تي هڪ آواز وارو اسٽيج. هڪ هوا سان اڏامندڙ اشتهاري تصوير فريم کي ڀريندي آهي، جڏهن ته صاف ڪارو ۽ اڇو مهم ڪنٽرول ان جي چوڌاري صحيح تفصيلن وانگر ترتيب ڏنل آهن.
- Bauhaus Clock — باؤهاؤس کان متاثر ٿيل گھڙيون - فيروزي ميڪيڪل روشني. هڪ اونداهي، سينيما واري گھڙي جي تصوير سان پرسکون، هلڪي مٿاڇري کي فريم ڪريو ۽ فيروزي کي هڪ نادر چمڪندڙ تفصيل طور استعمال ڪريو.
- Cursor — هڪ آرامده پارچمينٽ ورڪشاپ، ٻرندڙ ڪوئلن سان روشن
- Slush — پيسٽل پيپر تي اسٽيڪرن جي انفلٽيبل ڪائنات
- MindMarket — ڪريم پيپر تي هڪ آرامده افسانوي ڪتاب - هڪ دوستانه ادارتي ڪينواس جتي وڏيون انٽر هيڊ لائنون ۽ ڪٽيل پيپر ڪردار سج سان ڀريل، اسٽيڪر نرم مٿاڇري تي گڏ رهن ٿا.
- Airbnb — هڪ خاموش اڇي گيلري واري ڀت جنهن ۾ هڪ واحد مرجان ڳاڙهي بُڪ مارڪ آهي.
- Superr — منجهند جي نرم روشنيءَ ۾ هڪ گرم اسڪول نوٽ بڪ. هڪ ڪريم رنگ جو صفحو، ٽوپي کان سواءِ نارنگي مارڪر، ۽ ليمينيٽ ٿيل نالي جي اسٽيڪرن جو هڪ ڍير جيڪو ڇلڻ جي انتظار ۾ آهي.
- Apple (España) — ميوزيم گيلري، نرم ڏينهن جي روشنيءَ ۾، هڪ واحد، دلڪش، بي وزن سفيد جاءِ آهي، جنهن ۾ هر نمائش هڪ هلڪي رنگ واري ڀت جي سامهون اسپاٽ لائٽ سان روشن ٿيل آهي.