Dub
لنڪ جو ميٽ رائس پيپر ڪنٽرول پينل
ڊب جي بصري نظام ۾ هڪ محدود، تقريبن ادارتي SaaS جمالياتي آهي: هڪ لڳ ڀڳ اڇو ڪينواس جيڪو ٻاهر نڪرندڙ عنصرن جي بدران پتلي سرحدن سان گڏ رکيل آهي، جنهن ۾ گهاٽو مونوڪروم ٽائيپوگرافي ساخت جي مدد فراهم ڪري ٿي ۽ هڪ روشن نيرو رنگ (#2563eb) هڪ بيان ڏئي ٿو. پهرين نظر ۾ مٿاڇريون فليٽ ۽ فريم کان سواءِ رهنديون آهن، پر هر ڪنٽينر ۾ 1px #e5e5e5 مارجن هوندو آهي، جيڪو هڪ ڇپيل دستاويز جو احساس پيدا ڪندو آهي. شخصيت رنگين "پِل" تلفظن جي هڪ ننڍڙي سيٽ (نارنگي، سائو، جامني) ذريعي حاصل ڪئي ويندي آهي جيڪي غير جانبدار پيليٽ جي مٿان ترندا آهن، ۽ هيڊر جيڪي چمڪندڙ هجڻ کان سواءِ اعتماد ۽ جديد محسوس ڪندا آهن. اجزاء ڪمپيڪٽ ۽ گھڻا آهن: 8px گٽر، 12px ڪارڊ ريڊيس، 9999px تي پِل جي شڪل جا ليبل، ۽ ڳري، ڀريل بٽڻن جي بدران پوشيده ڪنٽرول.
صفحو هڪ مرڪزي لي آئوٽ تي ٺهيل آهي جنهن جي وڌ ۾ وڌ ويڪر تقريبن 1200px آهي. مکيه عنصر هڪ مرڪزي ٽيڪسٽ بلاڪ آهي جنهن ۾ ٽي فلوٽنگ عنصر (ايليئيٽ پروگرام، ڪنورشن اينالائيٽڪس، شارٽ لنڪس) هڪ وڏي پراڊڪٽ لي آئوٽ جي مٿان افقي طور تي رکيل آهن. سيڪشن عمودي طور تي مسلسل 64px گٽرز سان ترتيب ڏنل آهن، اڇي ڪينواس ۽ #f5f5f5 پيپر هيز جي وچ ۾ ٽونل سيپريشن لاءِ متبادل طور تي. هيٺيون حصو Z-شڪل واري لي آئوٽ استعمال ڪري ٿو: ادارتي متن وچين ٽئين ۾ مرڪز آهي، ۽ فلوٽنگ UI ڪارڊ کاٻي ۽ ساڄي مارجن تي لنگر انداز آهن، هڪ غير متناسب، ميگزين جهڙو تال ٺاهي ٿو. لوگو ڪلائوڊ هڪ سادو 5x2 گرڊ آهي، جيڪو صفحي تي مرڪز آهي. نيويگيشن هڪ گهٽ ۾ گهٽ مٿي بار آهي - کاٻي پاسي لوگو، مرڪز ۾ نيويگيشن، ساڄي پاسي ٻن بٽڻن جو هڪ گروپ (هڪ گھوسٽ "لاگ ان" بٽڻ + هڪ ڀريل "رجسٽر" بٽڻ) بغير ڪنهن مقرر يا ميگا مينيو جي. مکيه ونڊو جو ڊيش بورڊ لي آئوٽ هڪ ڪلاسڪ ٻن ڪالمن واري ايپ لي آئوٽ کي ڏيکاري ٿو: هڪ مقرر ٿيل سائڊبار (240px وانگر) + هڪ مواد جو علائقو جيڪو سياحن لاءِ اسڪرولنگ شروع ڪرڻ کان اڳ پراڊڪٽ جي معلومات جي کثافت کي بيان ڪري ٿو.
بصري پراڊڪٽ تي ڌيان ڏنو ويو آهي، طرز زندگي تي ڌيان نه ڏنو ويو آهي. مکيه اسڪرين هڪ وڏي ڊيش بورڊ اسڪرين شاٽ تي مرڪز آهي، جيڪو سائڊبار نيويگيشن، ڊيٽا ٽيبل، ۽ فلوٽنگ UI عنصرن سان حقيقي دنيا جي پراڊڪٽ ميڪ اپ جي نمائندگي ڪري ٿو، جيڪو هڪ اڇي ڪينواس تي هڪ فليٽ پينل جي طور تي رکيل آهي. ڪلائنٽ لوگو هڪ غير محفوظ ٿيل گري اسڪيل گرڊ (بيهيو، سپر پاور، چيٽ بيس، وغيره) ۾ ڏيکاريا ويا آهن ته جيئن انهن جي سوشل ميڊيا ڪارڪردگي کي تسليم ڪيو وڃي، رنگ کي هٽايو ويو آهي ته جيئن صفحي جي واحد نيري تلفظ کي غالب رهڻ جي اجازت ڏني وڃي. فلوٽنگ پارٽنر ڪارڊ (ننڍا پروفائل ۽ آمدني/ادائيگي جي ڊيٽا سان ٽائلس) هيٺان ادارتي متن جي بلاڪن جي چوڌاري گھمندا آهن، متن تي پاڇن جي استعمال کان سواءِ کوٽائي جو احساس پيدا ڪندا آهن. ڊاٽ ٿيل گرڊ پس منظر جو نمونو هڪ دستخطي خاصيت آهي: تمام گهٽ اوپيسيٽي سان ننڍڙن نقطن جي هڪ پتلي قطار بناوت ۽ ڊيزائن سسٽم/ڊرائنگ سطح جو احساس پيدا ڪري ٿي، سائيٽ جي پوزيشن کي "جديد لنڪ انتساب پليٽ فارم" جي طور تي زور ڏئي ٿي. آئڪنوگرافي گهٽ ۾ گهٽ آهي، خاڪا ۽ فلز سان، ۽ فيچر ٽيگ لاءِ هڪ تلفظ پيليٽ (ٽينجرائن نارنگي، ليوينڊر جامني، پوديني سائو) استعمال ڪري ٿي. ڪابه تصوير، تصوير، يا 3D ماڊل استعمال نه ڪيا ويا آهن - پراڊڪٽ جو يوزر انٽرفيس پاڻ هڪ بصري ٻولي آهي.
پيليٽ
برانڊ
- Electric Blue
#2563eb— بنيادي برانڊ رنگ - لوگو، لنڪس، اهم ڪارڪردگي اشارا، فعال حالتون، ۽ آئڪن ايڪسينٽ - استعمال ڪيا ويا آهن. اڇي پس منظر تي هڪ امير نيرو سسٽم جي واحد بصري اپيل پيدا ڪري ٿو. - Deep Sapphire
#1e40af— ايڪشن بٽڻ جو مکيه پس منظر، ڪال ٽو ايڪشن جو بولڊ فل - ايڪشن کي ظاهر ڪندڙ واحد رنگ - ڌيان ڇڪائڻ لاءِ گهٽ استعمال ڪيو ويندو آهي.
غير جانبدار
- Canvas White
#ffffff— صفحي جو پس منظر، ڪارڊ جي مٿاڇري، پاپ اپ پينل هر اسڪرين جو مڪمل بنياد آهن. - Paper Mist
#f5f5f5— نيسٽڊ ڪارڊن، اضافي پينلن، ۽ هور تي فلز لاءِ مٿاڇري جي رنگ ۾ معمولي تبديليون. - Ash
#e5e5e5— ڪارڊن، ان پٽ ڪنيڪٽرن ۽ ڊويزنرن تي پتلي بارڊر اهي ساختي لڪير آهن جيڪي سسٽم کي گڏ رکن ٿيون. - Smoke
#d4d4d4— چونڊيل ڪنٽينرز ۽ اضافي بٽڻ آئوٽ لائنز لاءِ تيز بارڊر. - Pebble
#c8c8c8— بارڊر، ڪنٽرول آئوٽ لائن، ۽ وچولي برعڪس سان ساختي ورهائيندڙ. هن رنگ کي ڪال ٽو ايڪشن لاءِ بنيادي رنگ طور استعمال نه ڪيو وڃي. - Midnight Ink
#0a0a0a— بٽڻن جو مکيه متن، نمايان ٿيل بٽڻ، ۽ نيويگيشن ٽيڪسٽ وڌ ۾ وڌ برعڪس لاءِ لڳ ڀڳ ڪارا آهن.
ٽائپوگرافي
11 کان 48px تائين · 9 مرحلا
- Satoshi — متبادل: Inter (weight 500 · خاڪا 500 · ڊسپلي هيڊنگز - هيڊنگ ۽ سيڪشن جي عنوانن لاءِ صرف 36–48px لائينن ۾ استعمال ٿينديون آهن. فونٽ جو وزن - 500 (وچولي، بولڊ نه): هيڊنگز پراعتماد ۽ جديد نظر اچن ٿا، پر ڪڏهن به غالب نه ٿيندا آهن. ستوشيءَ جو جاميٽري تناسب ٽائيپ فيس کي ٿورو ادارتي، جديد احساس ڏئي ٿو جيڪو انٽر جي باڊي ڪاپي نقل نٿو ڪري سگهي.
- Inter — متبادل: Inter (native) · خاڪا 400, 500, 600 · باڊي ڪاپي، UI ليبل، نيويگيشن، ذيلي هيڊنگ، ۽ معمولي هيڊنگ. انٽر بنيادي ورڪ هارس آهي، جيڪو 11px مائڪرو-ليبل کان وٺي 30px سيڪنڊري هيڊنگ تائين هر شيءِ کي سنڀاليندو آهي. باڊي ڪاپي لاءِ 400 جو وزن ڊفالٽ آهي، نمايان ٿيل عنصرن ۽ بٽڻ ليبلن لاءِ 500، ۽ اهم UI ليبلن لاءِ 600 محفوظ آهي. 1.5 جي لائن جي اوچائي سان 16px سڀ کان وڌيڪ سامهون ايندڙ سنگل-اسٽيپ سائيز (1220 واقعا) آهي، تصديق ڪري ٿو ته 16px ڪيننيڪل باڊي ڪاپي سائيز آهي.
- Geist Mono — متبادل: JetBrains Mono or IBM Plex Mono · خاڪا 400, 500 · ڪوڊ اسنيپٽس، ٽيڪنيڪل ميٽا ڊيٽا، ۽ ايمبيڊڊ مونو اسپيسڊ ٽوڪن ڪوڊ بلاڪ ۾ 12-14px تي ۽ وڏي ڪوڊ ڊسپلي عنصرن ۾ 24px تي استعمال ڪيا ويندا آهن. هي ڊولپر ٽول جي اعتبار کي يقيني بڻائي ٿو، ڊب جي پراڊڪٽ پوزيشننگ سان مطابقت رکي ٿو.
وقفا ۽ شڪل
| مقصد | مطلب |
|---|---|
| کثافت | سراسري |
| بنيادي قدم | 8px |
| بٽڻ جو ريڊيس | 8px |
| ڪارڊ جو ريڊيس | 12px |
| پاڇا | پاڇن جي بدران ڪو به بارڊر نه |
| حصن جي وچ ۾ | 64px |
| صفحي جي ويڪر | 1200px |
AI توهان جي ويب سائيٽ Dub انداز ۾ ٺاهيندو ۽ ان کي ڀريندو.
- لنڪ ذريعي پراڊڪٽس ۽ پوسٽن سان ڀريو - Instagram ، TikTok ، Facebook.
- پنهنجي پراڻي سائيٽ تان مواد منتقل ڪريو - صرف پتو بيان ڪريو.
- بهترين انجن تي جديد ڊيزائن: سرور رينڊرنگ ۽ ايس اي او آپٽمائيزيشن سان React ( Next.js).
- ڳولا جي نتيجن ۽ نيورل نيٽ ورڪ سفارشن لاءِ مڪمل طور تي خودڪار SEO اصلاح.
هڪجهڙا انداز
- ElevenLabs — نرم سرخين سان گرم ڪريم ٽون ۾ هڪ تصويري مضمون. هڪ باهاؤس طرز جي نوٽ بڪ - انڊي شيل رنگ جو ڪاغذ، ڪارو مس، ۽ پراڊڪٽ ڊسپلي لاءِ هڪ واحد جامني ۽ نارنگي تلفظ.
- Awesomic — نارنگي اوقاف جي نشانين سان ايڊيٽوريل زنڪ ميش جيڪو ڪنفيٽي جي ياد ڏياري ٿو
- Monad — گرم پارچمينٽ تي ايڊيٽوريل ٽيڪنيڪل جرنل
- Seline Analytics — گرم ڪاغذ تي هڪ خاموش تجزياتي ٽيبل
- Notion — منجهند جي سج ۾ هڪ گرم ڪاغذ جي نوٽ بڪ
- Anthropic — گرم ويلم تي هڪ سائنسي فيلڊ جرنل - پرسڪون هٿي دانت جون مٿاڇريون، سيرف ٿيل ادارتي عنوان، ۽ هڪ واحد مٽيءَ جو تلفظ جيڪو صرف تڏهن ظاهر ٿئي ٿو جڏهن عمل جي ضرورت هجي.
- Calendly — ٿڌي سنگ مرمر تي ڳاڙهي نيري مس
- Augen Pro — ايپل جي اڇي پيشڪش ۾ هڪ مونوڪروم اسپيس ۾ واحد تلفظ جي طور تي هڪ ڪلينڪل، بي وزن، برقي نيرو رنگ شامل آهي.
- Antimetal — ڪريم پيپر تي هڪ ادارتي تاريخ - هڪ سائنسي جرنل ۾ هڪ خاموش صبح، جتي ضبط اعتماد جو اظهار ڪري ٿو ۽ سيريف ڳرو ڪم ڪن ٿا.
- Perk — گرم پارچمينٽ پيپر تي اليڪٽرڪ ليم
- Ditto — سج جي روشني ۾ جهنگلي گلن جا نمونا ٺاهيندڙ ورڪشاپ. گرم ڪريم مٿاڇريون، هڪ متحرڪ پيلو بنيادي رنگ، گہرے نيري رنگ جي مس، ٽڪري جي پويان ڦٽي رهيا نامياتي رنگ جون شڪلون.
- Officevibe — گرم ڪريم رنگ جي ڪاغذ تي هڪ ادارتي رسالو. تصور ڪريو HR مئنيجمينٽ تي هڪ سوچيندڙ مضمون، هڪ پراڊڪٽ جي طور تي پيش ڪيو ويو آهي - هڪ ڪرسيو سيريف فونٽ هڪ جديد نيرو انٽرفيس ذريعي سرگوشي ڪري رهيو آهي.