Superhuman
गोल्डन अवर संपादकीय पॅनेल
सुपरह्युमन हे संपादकीय छायाचित्रण आणि सॉफ्टवेअर UI यांच्या संगमावर वसलेले आहे—एक उबदार, चर्मपत्रासारखा कॅनव्हास (जो कधीही पूर्णपणे पांढरा नसतो) मरून रंगाचे ब्रँडिंग घटक आणि तेजस्वी जांभळ्या रंगाच्या छटांना फ्रेम करतो. ४६० फॉन्टमध्ये लिहिलेली शीर्षके ओरडण्याऐवजी कुजबुजतात, ज्यामुळे संपूर्ण पानावरील सिनेमॅटिक छायाचित्रणाला मुख्य काम करण्याची संधी मिळते, तर अर्धपारदर्शक उत्पादन UI कार्ड्स चित्रांवर काचेप्रमाणे तरंगतात. रंगसंगती बहुतेक वेळा शांत आणि संपादकीय राहते: क्रीम रंगाचे पृष्ठभाग, कोळशाच्या रंगाचा मजकूर, हलक्या उबदार-राखाडी रंगाच्या कडा आणि घटकांमध्ये भरपूर जागा, ज्यात रंगांचा वापर हेतुपुरस्सर ब्रँड विरामचिन्हांसाठी केला जातो—एक मरून रंगाचा कॉल-टू-ॲक्शन, जांभळ्या रंगाच्या लिंक्स, एक फिकट लिलाक रंगाचे ॲड-ऑन बटण. ही प्रणाली UI पृष्ठभागांवर गडद सावल्या आणि ग्रेडियंट्स हेतुपुरस्सर टाळते; स्टॅकिंग इफेक्टऐवजी, स्तरित छायाचित्रण आणि शीर्षकातील पार्श्वभूमीच्या हलक्या धूसरतेद्वारे खोली साधली जाते.
मुख्य घटक हा एक पूर्ण-रुंदीचा फोटो आहे, ज्यामध्ये मध्यभागी एक मथळा (४८-६४px/४६०) आणि वाइनच्या प्रतिमेने भरलेला एकच 'कॉल टू ॲक्शन' आहे, ज्याच्या डाव्या आणि उजव्या कडांवर तरंगणारे अर्धपारदर्शक उत्पादन UI कार्ड्स आच्छादित आहेत. मुख्य घटकाच्या खाली एक पांढऱ्या पट्ट्यांची लोगो पट्टी आहे (प्रत्येक ओळीत ६ सेल्स, कमाल रुंदी मर्यादित), त्यानंतर पार्चमेंट कॅनव्हासवर पांढऱ्या कार्ड पृष्ठभागांसह एक टॅब विभाग आहे. पानाच्या सुमारे दोन-तृतीयांश भागावर एक गडद फिरोजी रंगाची पट्टी लय खंडित करते—पूर्ण-रुंदीची, दोन स्तंभांमध्ये (डावीकडे प्रतिमा, उजवीकडे मजकूर)—जी तुम्ही स्क्रोल करता तेव्हा एकमेव टोनल कॉन्ट्रास्ट तयार करते. त्यानंतर एक ग्रेडियंट वातावरणीय पट्टी येते. विभागांमधील उभे अंतर ६४-९६px आहे. मध्यभागी कमाल मजकूर रुंदी सुमारे १२००px आहे, ज्यात मुख्य घटक आणि गडद पट्टी व्ह्यूपोर्टची संपूर्ण रुंदी व्यापतात. नेव्हिगेशन हे अस्पष्ट पार्श्वभूमी असलेले एकच स्थिर हेडर आहे; यात साइडबार किंवा मेगा मेनू नाही. फुटर हे लिंक्सच्या बहु-स्तंभीय मांडणीसह एक पूर्ण-रुंदीचे बरगंडी रंगाचे पान आहे. एकूण लय अशी आहे: मुख्य फ्रेम → शांत पांढरा/क्रीम रंगातील मजकूर → मुख्य प्रतिमेसह गडद पट्टा → वातावरणीय ग्रेडियंट → बरगंडी रंगाचा फुटर, संपादकीय लय निर्माण करण्यासाठी एकाआड एक फिकट आणि गडद पट्टे वापरले आहेत.
मुख्य दृश्य घटक म्हणजे सिनेमॅटिक फोटोग्राफी: मोकळ्या आकाशाच्या पार्श्वभूमीवर असलेले पूर्ण-रुंदीचे पोर्ट्रेट हे केंद्रबिंदू आहे, आणि दुसरी वातावरणीय पट्टी पानावर खाली ठेवलेली आहे. ही प्रतिमा उबदार रंगांची, सूक्ष्मपणे मंद आणि बाजूने (प्रोफाईलमध्ये) काढलेली आहे, जी 'गोल्डन अवर'ची आठवण करून देते, ज्यामुळे कॉर्पोरेटपेक्षा अधिक संपादकीय स्वरूप तयार होते. विचारात गढलेल्या माणसाच्या छायाचित्रावर अर्धपारदर्शक भौमितिक आयत आणि हस्तलिखित मजकूर असलेली एक गडद पट्टी आच्छादित केली आहे—ही एकाच प्रतिमेऐवजी पृष्ठभागांची एक कोलाज आहे. युझर इंटरफेस स्वतंत्र स्क्रीनशॉटऐवजी, थेट छायाचित्रावर आच्छादित केलेल्या तरंगत्या काचेच्या कार्डांच्या स्वरूपात सादर केला आहे. ग्रेडियंट वातावरणीय पट्टी वगळता, यात कोणतीही स्टॉक इलस्ट्रेशन्स, 3D रेंडर्स किंवा अमूर्त सजावटीचे आकार नाहीत. आयकॉन्स हे किमान एकरंगी रेखीय आयकॉन्स आहेत, जे सुमारे १६-२० पिक्सेल रुंद असून, त्यांची एकच रुंदी ४६० पॉइंट टेक्स्ट वेटशी जुळते.
पॅलेट
ब्रँड
- Midnight Wine
#421d24— मुख्य ॲक्शन बटन्स, बॅनर ॲड आणि फुटर हे उबदार, जवळजवळ काळ्या बरगंडी रंगाचे आहेत, जो लाल रंगापेक्षा शाईसारखा अधिक वाटतो आणि रंगसंगतीवर हावी न होता तिला आधार देतो. - Royal Violet
#714cb6— जांभळा रंग लिंक्स, टॅग्ज आणि लहान वाक्ये ठळक करण्यासाठी वापरला जातो. कृतीसाठीच्या आवाहनांकरिता (calls to action) तो मुख्य रंग म्हणून वापरला जाऊ नये.
तटस्थ
- Lilac Mist
#d4c7ff— दुय्यम पृष्ठभागाचा रंग, हलके आयकॉन्स आणि घोस्ट बटणांची पार्श्वभूमी या सर्वांमध्ये एक मंद जांभळा रंग वापरला आहे, जो स्वतःकडे अनावश्यक लक्ष वेधून न घेता ब्रँडच्या शैलीची झलक देतो. - Deep Lagoon
#0c4243— मुख्य कथानक घटक म्हणून वापरलेल्या पट्टीची गडद पार्श्वभूमी ही प्रणालीतील एकमेव गडद पृष्ठभाग असून, त्यावर एक भौमितिक नमुना आच्छादित केलेला आहे. - Warm Parchment
#f2f0eb— पानाचा कार्यरत पृष्ठभाग हा प्रमुख घटक आहे; आधार म्हणून पांढऱ्या रंगाऐवजी उबदार क्रीम रंगाचा वापर केला आहे, ज्यामुळे संपूर्ण प्रणालीला एक संपादकीय उबदारपणा मिळतो. - Soft Mist
#e3e3e2— बारीक कडा, कार्डाच्या बाह्यरेषा, विभाजक रेषा—एक उबदार, फिकट राखाडी रंग जो चर्मपत्रात मिसळून जातो पण कडा स्पष्टपणे दर्शवतो. - Ink Charcoal
#292827— मुख्य मजकूर, शीर्षके, आयकॉनच्या बाह्यरेषा - कागदावरील शाईसारखा अनुभव देणारा, पुरेसा तपकिरी रंग असलेला एक उबदार, जवळजवळ काळा रंग, जो कधीही थंड वाटत नाही #000 - Stone Gray
#666666— दुय्यम मुख्य मजकूर, पूरक मजकूर, सुस्पष्ट वर्णने - एकच मध्यम राखाडी रंग, जो मुख्य मजकुराशी स्पर्धा करणार नाही अशा प्रकारे क्वचितच वापरला जातो.
टायपोग्राफी
१२ ते ६४ पिक्सेल · ८ टप्पे
- Super Sans VF — बदली: Inter (closest open equivalent for variable weight range) · रूपरेषा 460, 500, 540, 600, 700 · संपूर्ण सिस्टीममध्ये एकच फॉन्ट. अॅक्सिस व्हेरिएबल्सची श्रेणी ४६० (सर्व मोठ्या शीर्षकांसाठी एक वैशिष्ट्यपूर्ण, किंचित कापलेला फॉन्ट), ५४० (ठळक केलेला मुख्य मजकूर) आणि ७०० (लहान, ठळक मथळे) पर्यंत आहे. खास डिझाइन केलेल्या VF मुळे ४६०-वेटची शीर्षके अव्यवस्थित न वाटता अधिक विचारपूर्वक लिहिलेली दिसतात—४८-६४px आकारात आणि अक्षरांमधील कमी अंतरामुळे, हा "किंचित कापलेला" परिणाम अव्यवस्थित न वाटता आत्मविश्वासपूर्ण वाटतो.
अंतर आणि स्वरूप
| उद्देश | अर्थ |
|---|---|
| घनता | दाट |
| मूलभूत पायरी | 8px |
| बटण त्रिज्या | 16px |
| कार्ड त्रिज्या | 16px |
| सावल्या | सावल्यांऐवजी सीमा नाहीत |
| विभागांच्या दरम्यान | 64-96px |
| पृष्ठाची रुंदी | 1200px |
एआय तुमची वेबसाईट Superhuman स्टाईलमध्ये तयार करेल आणि ती भरेल.
- लिंकद्वारे उत्पादने आणि पोस्ट्स भरा - Instagram, TikTok, Facebook.
- तुमच्या जुन्या साइटवरून सामग्री हस्तांतरित करा—फक्त पत्ता नमूद करा.
- सर्वोत्तम इंजिनवर आधुनिक डिझाइन: React ( Next.js) ज्यामध्ये सर्व्हर रेंडरिंग आणि एसईओ ऑप्टिमायझेशन अंगभूत आहेत.
- शोध परिणामांसाठी पूर्णपणे स्वयंचलित एसईओ ऑप्टिमायझेशन आणि न्यूरल नेटवर्क शिफारसी.
समान शैली
- AI for Business — उबदार राखाडी रंगछटांमधील ब्रुटॅलिस्ट संपादकीय शोरूम
- Jeton — उबदार संगमरवरावरील फिनटेकबद्दलचा एक संपादकीय लेख
- Airtable — वेगवेगळ्या रंगांनी अध्याय चिन्हांकित केलेला एक आरामदायक सेमिनार
- Osmo — ग्रे काँक्रीटवरील विकासकांचे संग्रहालय
- Linktr — संपादकीय पोस्टर्स मिठाईप्रमाणे एकावर एक रचलेली आहेत. वेबसाइट रंगीत ठोकळ्यांमध्ये डिझाइन केली आहे, ज्यात गडद निळ्या रंगाच्या पार्श्वभूमीवर चमकदार हिरव्या रंगाची शीर्षके आहेत आणि वाईन रेड रंगाच्या पार्श्वभूमीवर पांढऱ्या रंगाचे गोळीच्या आकाराचे नेव्हिगेशन घटक तरंगत आहेत.
- Outsource Consultants — बोन पेपरवरील एक मोठ्या आकाराची वास्तुशास्त्रीय शीट. एक मोनोग्राफिक सौंदर्यशास्त्र, जिथे इंडिगो रंगाचा एकच तेजस्वी ठिपका एरवी उबदार, टायपोग्राफिकली मॅक्सिमलिस्ट ग्रिडमध्ये व्यत्यय आणतो.
- Streamtime — स्पर्शानुभवी क्रिएटिव्ह मूड बोर्ड - डिझायनर स्क्रॅपबुकिंग टेबल
- Switch-Lit — क्रीम रंगाच्या कागदावर शाईने छापलेली संपादकीय चौकट
- HubSpot — उबदार क्रीम रंगाचा कागद, ज्यावर नारंगी रंगाचा एकच ठळक ठसा आहे. हबस्पॉट हे जाड कागदावर छापलेल्या डिझायनर मासिकासारखे दिसते—सेरिफ हेडलाइन्स, उबदार क्रीम रंगाची पाने आणि केवळ सर्वात महत्त्वाचे मुद्दे अधोरेखित करणारा नारंगी रंगाचा एकच ठळक ठसा.
- Granola — उबदार वेल्लमवरील फील्ड नोट्स—ग्रॅनोला वाचताना एखाद्या उन्हात ठेवलेल्या, जुन्या मोल्सकिन नोटबुकची आठवण येते: सेरिफ शीर्षकांमुळे एक प्रकारचा भक्कमपणा येतो, वनस्पतीजन्य शाईप्रमाणे नैसर्गिक हिरव्या रंगाचे ठिपके आणि हाताने लिहिलेल्या नोंदींसारख्या दिसणाऱ्या कार्डांच्या कडेवरील बारीक रेषा.
- Secure — युरोपियन कॅफेमध्ये मंद सूर्यप्रकाशात होणारे संभाषण म्हणजे व्हिडिओ कॉलिंगचा एक उबदार आणि आकर्षक प्रकार आहे, जिथे सेरिफ अक्षरांतील मथळे एखाद्या टेक उत्पादनाच्या पानाऐवजी एखाद्या विचारप्रवर्तक मासिकातील लेखासारखे वाचले जातात.
- Mockups made easy — श्वेतपत्रिकेवरील संपादकीय डिझाइन स्टुडिओ