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 کان 70 پکسلز تائين · 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.
- پنهنجي پراڻي سائيٽ تان مواد منتقل ڪريو - صرف پتو بيان ڪريو.
- بهترين انجن تي جديد ڊيزائن: سرور رينڊرنگ ۽ ايس اي او آپٽمائيزيشن سان React ( Next.js).
- ڳولا جي نتيجن ۽ نيورل نيٽ ورڪ سفارشن لاءِ مڪمل طور تي خودڪار SEO اصلاح.
هڪجهڙا انداز
- Retool — هڪ گرم اوبسيڊين ورڪشاپ - درست اوزارن لاءِ هڪ مٿاڇري، جيڪا ٻرندڙ انگارن سان روشن ٿئي ٿي، جتي هر شيءِ ٺاهي ويندي آهي.
- Elektron — اڌ رات جو سامان ڪنٽرول پينل تقريبن ڪارو ڪينواس آهي، جتي پراڊڪٽ جون تصويرون چمڪنديون آهن جڏهن ته انٽرفيس عملي طور تي پوشيده رهندو آهي.
- REKKI — فوٽو ليب ۾ فلائيٽ ڪنٽرول پينل
- OFFFICE : — هڪ نائر گيلري جيڪا مونولٿڪ فونٽ ۾ ڀريل آهي.
- Clyde — شو روم، پنهنجي سنگل اسپاٽ لائيٽ سان، هڪ تقريبن اونداهي گيلري آهي جتي ڪمري ۾ واحد رنگ هڪ گرم گريڊينٽ بال آهي.
- Channel Studio — هڪ ڪورل ليمپ شيڊ سان هڪ اسٽوڊيو فوٽو ليب
- Electronic Materials Office — ڪوئلي سان سينگاريل گيلري ۾ هڪ چمڪندڙ انگارو
- ORYZO AI — هڪ اونداهي ڪمري بابت هڪ تصويري مضمون. گرم اونداهي ۾ هڪ اڪيلي شيءِ لڙڪندي، ڪريم فونٽ واحد سينگار آهي.
- Factory — اڌ رات جو "جنگي ڪمرو" ٽرمينل. "ڪارخانو" هڪ ڪارو ڪنٽرول پينل آهي جتي هڪ اڇو ڪارڊ ٽارچ جي روشني وانگر لهي ٿو - ڪمري ۾ واحد شيءِ ڪم پاڻ آهي.
- Hungry Tiger — تندور جي ڀت تي هلڪي روشن گرافيٽي. سون ۽ زنگ آلود ناسي رنگ جو هڪ گڏيل پيليٽ، فونٽ سان ايترو وڏو اهو ويب سائيٽ کان وڌيڪ مصالحن جي مارڪيٽ جي نشاني وانگر نظر اچي ٿو.
- Bibliothèque — اسپاٽ لائيٽ هيٺ هڪ ڪاري ڪيوب شڪل واري گيلري - هڪ وسيع، اونداهي هال ۾ هڪ اڪيلو روشن ٿيل پليٽ
- Apple (España) — روشن ٿيل سامان سان ڪارو ٿيٽر