Dub
लिंकचे मॅट राईस पेपर कंट्रोल पॅनल
डबच्या व्हिज्युअल सिस्टीममध्ये एक संयमित, जवळजवळ संपादकीय SaaS सौंदर्यशास्त्र आहे: बाहेर डोकावणाऱ्या घटकांऐवजी पातळ बॉर्डरने एकत्र धरलेला जवळजवळ पांढरा कॅनव्हास, ज्याला दाट मोनोक्रोम टायपोग्राफी संरचनात्मक आधार देते आणि एकच तेजस्वी निळा रंग (#2563eb) आपले वेगळेपण दाखवतो. पृष्ठभाग पहिल्या दृष्टीक्षेपात सपाट आणि फ्रेमलेस दिसतात, परंतु प्रत्येक कंटेनरला 1px #e5e5e5 मार्जिन आहे, ज्यामुळे छापील दस्तऐवजाची अनुभूती येते. न्यूट्रल पॅलेटवर तरंगणाऱ्या रंगीत "पिल" ॲक्सेंटच्या (नारंगी, हिरवा, जांभळा) एका लहान संचाद्वारे आणि भडक न दिसता आत्मविश्वासपूर्ण व आधुनिक वाटणाऱ्या हेडर्सद्वारे व्यक्तिमत्त्व साधले जाते. घटक संक्षिप्त आणि दाट आहेत: 8px गटर्स, 12px कार्ड रेडियस, 9999px वर पिल-आकाराचे लेबल्स आणि जड, भरलेल्या बटणांऐवजी अदृश्य कंट्रोल्स.
हे पान मध्यभागी असलेल्या मांडणीवर (लेआउटवर) तयार केले आहे, ज्याची कमाल रुंदी अंदाजे १२०० पिक्सेल आहे. मुख्य घटक एक मध्यभागी असलेला मजकूर ब्लॉक आहे, ज्याच्या वर एका मोठ्या उत्पादन मांडणीवर (प्रोडक्ट लेआउटवर) तीन तरंगते घटक (अफिलिएट प्रोग्राम्स, कन्व्हर्जन ॲनालिटिक्स, शॉर्ट लिंक्स) आडव्या दिशेने ठेवलेले आहेत. विभाग उभ्या दिशेने मांडलेले असून, त्यात एकसारखे ६४ पिक्सेलचे गटर आहेत, आणि रंगांमधील फरकासाठी पांढरा कॅनव्हास व #f5f5f5 पेपर हेझ रंग एकाआड एक वापरले आहेत. खालच्या विभागात Z-आकाराची मांडणी वापरली आहे: संपादकीय मजकूर मधल्या तिसऱ्या भागात मध्यभागी ठेवलेला आहे, आणि तरंगती UI कार्डे (फ्लोटिंग UI कार्ड्स) डाव्या व उजव्या मार्जिनला जोडलेली आहेत, ज्यामुळे एक असममित, मासिकासारखी लय तयार होते. लोगो क्लाउड एक साधी ५x२ ग्रिड आहे, जी पानाच्या मध्यभागी आहे. नेव्हिगेशन एक किमानवादी (मिनिमलिस्ट) टॉप बार आहे—डावीकडे लोगो, मध्यभागी नेव्हिगेशन, आणि उजवीकडे दोन बटणांचा समूह (एक अस्पष्ट "लॉगिन" बटण + एक भरलेले "रजिस्टर" बटण)—यात कोणताही निश्चित (फिक्स्ड) किंवा मेगा-मेनू नाही. मुख्य विंडोच्या डॅशबोर्ड लेआउटमध्ये क्लासिक दोन-कॉलम ॲप लेआउट दिसून येतो: एक स्थिर साइडबार (सुमारे २४०px) + एक कंटेंट एरिया जो अभ्यागतांनी स्क्रोलिंग सुरू करण्यापूर्वी त्यांच्यासाठी उत्पादनाच्या माहितीची घनता निश्चित करतो.
व्हिज्युअल्स हे उत्पादनावर केंद्रित आहेत, जीवनशैलीवर नाही. मुख्य स्क्रीन एका मोठ्या डॅशबोर्ड स्क्रीनशॉटवर मध्यभागी आहे, जो एका पांढऱ्या कॅनव्हासवर फ्लॅट पॅनलच्या स्वरूपात मांडलेला असून, साइडबार नेव्हिगेशन, डेटा टेबल आणि फ्लोटिंग UI घटकांसह वास्तविक उत्पादन मॉकअपचे प्रतिनिधित्व करतो. क्लायंटचे लोगो (उदा. बीहाईव्ह, सुपरपॉवर, चॅटबेस, इत्यादी) त्यांच्या सोशल मीडियावरील कामगिरीला मान्यता देण्यासाठी फिकट ग्रेस्केल ग्रिडमध्ये प्रदर्शित केले आहेत आणि त्यातील रंग काढून टाकला आहे, जेणेकरून पेजवरील एकमेव निळा रंग प्रामुख्याने दिसेल. फ्लोटिंग पार्टनर कार्ड्स (महसूल/पेमेंट डेटा असलेली छोटी प्रोफाइल्स आणि टाइल्स) तळाशी असलेल्या संपादकीय मजकुराच्या ब्लॉक्स्भोवती फिरतात, ज्यामुळे मजकुरावर सावल्या न वापरता खोलीची भावना निर्माण होते. ठिपक्यांची ग्रिड पार्श्वभूमी रचना हे एक वैशिष्ट्यपूर्ण वैशिष्ट्य आहे: अत्यंत कमी अपारदर्शकतेच्या लहान ठिपक्यांची एक पातळ ओळ टेक्स्चर आणि डिझाइन सिस्टीम/ड्रॉइंग पृष्ठभागाची अनुभूती निर्माण करते, ज्यामुळे साइटचे "आधुनिक लिंक ॲट्रिब्युशन प्लॅटफॉर्म" म्हणून असलेले स्थान अधोरेखित होते. आयकॉनोग्राफी अत्यंत कमी असून, त्यात केवळ बाह्यरेषा आणि रंग भरलेले आहेत, आणि फीचर टॅग्जसाठी अॅक्सेंट पॅलेट (नारंगी, लॅव्हेंडर जांभळा, पुदिना हिरवा) वापरले आहे. यात कोणतीही छायाचित्रे, चित्रे किंवा ३डी मॉडेल्स वापरलेली नाहीत—उत्पादनाचा युझर इंटरफेस ही स्वतःच एक दृश्य भाषा आहे.
पॅलेट
ब्रँड
- Electric Blue
#2563eb— ब्रँडचा मुख्य रंग—लोगो, लिंक्स, प्रमुख कार्यप्रदर्शन निर्देशक, सक्रिय स्थिती आणि आयकॉन ॲक्सेंट—वापरला जातो. पांढऱ्या पार्श्वभूमीवरील गडद निळा रंग सिस्टीमचे एकमेव दृश्य आकर्षण निर्माण करतो. - Deep Sapphire
#1e40af— ॲक्शन बटणाची मुख्य पार्श्वभूमी, कृती दर्शवणाऱ्या कॉल टू ॲक्शनचा ठळक रंग—जो कृती दर्शवणारा एकमेव रंग आहे—लक्ष वेधण्यासाठी कमीत कमी प्रमाणात वापरला आहे.
तटस्थ
- Canvas White
#ffffff— पेजची पार्श्वभूमी, कार्डचा पृष्ठभाग आणि पॉप-अप पॅनेल्स हे प्रत्येक स्क्रीनचा मूलभूत पाया आहेत. - Paper Mist
#f5f5f5— नेस्टेड कार्ड्स, अतिरिक्त पॅनेल्स आणि फिल्ससाठी होव्हर केल्यावर रंगात होणारे सूक्ष्म बदल. - Ash
#e5e5e5— कार्ड्स, इनपुट कनेक्टर्स आणि डिव्हायडर्सवरील पातळ कडा ही प्रणालीला एकत्र बांधून ठेवणारी संरचनात्मक रेषा आहे. - Smoke
#d4d4d4— निवडलेल्या कंटेनर्ससाठी अधिक स्पष्ट कडा आणि अतिरिक्त बटणांची रूपरेषा. - Pebble
#c8c8c8— मध्यम कॉन्ट्रास्ट असलेल्या बॉर्डर्स, कंट्रोल आउटलाइन्स आणि स्ट्रक्चरल डिव्हायडर्स. हा रंग कॉल टू ॲक्शनसाठी प्राथमिक रंग म्हणून वापरला जाऊ नये. - Midnight Ink
#0a0a0a— जास्तीत जास्त कॉन्ट्रास्टसाठी बटणांचा मुख्य मजकूर, हायलाइट केलेली बटणे आणि नेव्हिगेशन मजकूर जवळजवळ काळ्या रंगात आहेत.
टायपोग्राफी
११ ते ४८ पिक्सेल · ९ पायऱ्या
- Satoshi — बदली: Inter (weight 500 · रूपरेषा 500 · डिस्प्ले हेडिंग्स – फक्त हेडिंग आणि सेक्शन टायटल्ससाठी ३६-४८px ओळींमध्ये वापरले जाते. फॉन्ट वेट – ५०० (मीडियम, बोल्ड नाही): हेडिंग्स आत्मविश्वासपूर्ण आणि आधुनिक दिसतात, पण कधीही प्रभावी वाटत नाहीत. सातोशीचे भौमितिक प्रमाण या टाइपफेसला एक किंचित संपादकीय, आधुनिक लुक देते, जो इंटरच्या बॉडी कॉपीमध्ये मिळू शकत नाही.
- Inter — बदली: Inter (native) · रूपरेषा 400, 500, 600 · मुख्य मजकूर, UI लेबल्स, नेव्हिगेशन, उपशीर्षके आणि लहान शीर्षके. 'इंटर' हे मुख्य साधन आहे, जे ११px मायक्रो-लेबल्सपासून ते ३०px दुय्यम शीर्षकांपर्यंत सर्व काही हाताळते. मुख्य मजकुरासाठी डिफॉल्ट वेट ४०० आहे, हायलाइट केलेल्या घटकांसाठी आणि बटण लेबल्ससाठी ५०० आहे, आणि महत्त्वाच्या UI लेबल्ससाठी ६०० राखीव आहे. १.५ लाइन हाइटसह १६px हा सर्वात जास्त वेळा आढळणारा सिंगल-स्टेप आकार आहे (१२२० वेळा), जे हे सिद्ध करते की १६px हा मुख्य मजकुराचा प्रमाणित आकार आहे.
- Geist Mono — बदली: JetBrains Mono or IBM Plex Mono · रूपरेषा 400, 500 · कोड स्निपेट्स, तांत्रिक मेटाडेटा आणि एम्बेडेड मोनोस्पेस्ड टोकन्स हे १२-१४px च्या कोड ब्लॉक्समध्ये आणि २४px च्या मोठ्या कोड डिस्प्ले घटकांमध्ये वापरले जातात. यामुळे डेव्हलपर टूलची विश्वासार्हता सुनिश्चित होते, जी डबच्या उत्पादन स्थितीशी सुसंगत आहे.
अंतर आणि स्वरूप
| उद्देश | अर्थ |
|---|---|
| घनता | सरासरी |
| मूलभूत पायरी | 8px |
| बटण त्रिज्या | 8px |
| कार्ड त्रिज्या | 12px |
| सावल्या | सावल्यांऐवजी सीमा नाहीत |
| विभागांच्या दरम्यान | 64px |
| पृष्ठाची रुंदी | 1200px |
एआय तुमची वेबसाईट Dub स्टाईलमध्ये तयार करेल आणि ती भरेल.
- लिंकद्वारे उत्पादने आणि पोस्ट्स भरा - Instagram, TikTok, Facebook.
- तुमच्या जुन्या साइटवरून सामग्री हस्तांतरित करा—फक्त पत्ता नमूद करा.
- सर्वोत्तम इंजिनवर आधुनिक डिझाइन: React ( Next.js) ज्यामध्ये सर्व्हर रेंडरिंग आणि एसईओ ऑप्टिमायझेशन अंगभूत आहेत.
- शोध परिणामांसाठी पूर्णपणे स्वयंचलित एसईओ ऑप्टिमायझेशन आणि न्यूरल नेटवर्क शिफारसी.
समान शैली
- ElevenLabs — उबदार क्रीम रंगांच्या छटा असलेला आणि सुस्पष्ट मथळे असलेला एक छायाचित्र-निबंध. बाऊहाउस-शैलीची एक वही—अंड्याच्या कवचाच्या रंगाचा कागद, काळी शाई, आणि उत्पादने प्रदर्शित करण्यासाठी जांभळ्या व नारंगी रंगाचा एकच ठळक वापर.
- Awesomic — कॉन्फेटीची आठवण करून देणाऱ्या नारंगी विरामचिन्हांसह संपादकीय झिंक जाळी
- Monad — उबदार चर्मपत्रावरील संपादकीय तांत्रिक नियतकालिक
- Seline Analytics — गरम कागदावर एक शांत विश्लेषणात्मक टेबल
- Notion — दुपारच्या उन्हात एक गरम कागदी वही
- Anthropic — उबदार वेल्लमवरील एक वैज्ञानिक क्षेत्रीय नियतकालिक—शांत हस्तिदंती पृष्ठभाग, सेरिफ अक्षरातील संपादकीय शीर्षके आणि केवळ आवश्यक कृतीच्या वेळी दिसणारा एकच चिकणमातीचा ठसा.
- Calendly — थंड संगमरवरावर गडद निळी शाई
- Augen Pro — ऍपलच्या पांढऱ्या प्रेझेंटेशनमध्ये, एकरंगी जागेत एकमेव ॲक्सेंट म्हणून स्वच्छ, वजनहीन, इलेक्ट्रिक निळ्या रंगाचा वापर करण्यात आला आहे.
- Antimetal — क्रीम रंगाच्या कागदावरील संपादकीय वृत्तांत—एका वैज्ञानिक नियतकालिकातील शांत सकाळ, जिथे संयम आत्मविश्वास दर्शवतो आणि सेरिफ्स (अक्षरांची विशिष्ट शैली) मुख्य कार्य करतात.
- Perk — गरम पार्चमेंट पेपरवर इलेक्ट्रिक लाईम
- Ditto — सूर्यप्रकाशित कार्यशाळेत रानफुलांचे नमुने तयार केले जात आहेत. उबदार क्रीम रंगाचा पृष्ठभाग, एक तेजस्वी पिवळा आधार रंग, गडद निळ्या रंगाची शाई आणि कलाकृतीच्या मागे फुलणारे नैसर्गिक रंगांचे आकार.
- Officevibe — उबदार क्रीम रंगाच्या कागदावरील एक संपादकीय मासिक. एचआर व्यवस्थापनावरील एका विचारप्रवर्तक निबंधाची कल्पना करा, जो एका उत्पादनाच्या रूपात सादर केला आहे—आधुनिक निळ्या इंटरफेसमधून हळूवारपणे येणारा एक वळणदार सेरिफ फॉन्ट.