Shopify
मिडनाईट ग्रीनहाऊस - गडद फिरोजी रंगाच्या पार्श्वभूमीवर, पुदिन्याच्या एकाच ठिणगीने उजळून निघालेली ट्रेडमार्क्स.
शॉपिफायची डिझाइन सिस्टीम ही व्यापारासाठीची एक मध्यरात्रीची कार्यशाळा आहे: गडद फिरोजी हिरव्या रंगाची छटा असलेला जवळजवळ काळा कॅनव्हास, एक रुंद, आत्मविश्वासपूर्ण सँस-सेरिफ फॉन्ट आणि संवादात्मक क्षणांना सक्रिय करणारा एकच तेजस्वी पुदिना रंगाचा अॅक्सेंट. हा इंटरफेस एका डार्करूमसारखा आहे, जिथे उत्पादने आणि ब्रँड्स हे प्रकाशाचे स्रोत आहेत—फोटो आणि दुकानांचे दर्शनी भाग जवळजवळ काळ्या पृष्ठभागांवर चमकतात, तर क्रोमचे घटक मागे सरकतात. घटक भौमितिक असूनही मृदू आहेत: पातळ कडा असलेली १२px-त्रिज्येची कार्डे, गोळीच्या आकाराची बटणे आणि ३३०-वेटचा फॉन्ट जो भव्यतेचा गवगवा करण्याऐवजी हळूच सूचित करतो. लिंक्स, टॅग्ज आणि फोकस स्टेट्सवर एकाच रंगीत विरामचिन्हाचा (#36f4a4) क्वचितच वापर केला जातो, आणि रंग केवळ कार्यात्मक क्षणांसाठी राखून ठेवला जातो, जेणेकरून व्यापाऱ्यांच्या कथाच दृश्यात्मक केंद्रबिंदू राहतील.
कमाल रुंदी सुमारे १२८० पिक्सेल असून, ती मध्यभागी आहे आणि फोटो कंटेनरच्या पलीकडे पसरलेले पूर्ण-रुंदीचे स्प्लॅश ब्लॉक्स आहेत. पानाची लय एकाआड एक अशी आहे: (१) एक पूर्ण-रुंदीचे गडद स्प्लॅश पेज, ज्यावर एक हेडलाइन आणि कॉल-टू-ॲक्शन बटणे आच्छादित आहेत, (२) आरामदायक गडद विभाग, ज्यात २ स्तंभांमध्ये कमाल-रुंदीचे मजकूर आणि प्रतिमा ब्लॉक्स किंवा ३ स्तंभांमध्ये प्रतिमा ग्रिड आहेत, (३) एका खोल कॅनव्हासवर उठावदार कार्ड्सच्या स्वरूपात प्रदर्शित केलेले परस्परसंवादी शोकेस पॅनेल्स (उत्पादन कार्ड, शिपिंग कॅल्क्युलेटर, जगाचा नकाशा). नेव्हिगेशन ही एक स्थिर टॉप बार आहे, ज्यात लोगो + ३ नेव्हिगेशन घटक + दुय्यम लिंक्स + मुख्य कॉल-टू-ॲक्शन बटण असून, हे सर्व उजवीकडे संरेखित केलेले आहे. उभ्या लयीमध्ये विभागांमध्ये ८० पिक्सेलचे अंतर वापरले आहे, ज्यात एक सहज संक्रमण आहे—गडद विभागांमध्ये कोणतेही विभाजक नाहीत, केवळ पृष्ठभागाच्या रंगात बदल आहे.
व्हिज्युअल डिझाइन प्रामुख्याने रिटेलरवर केंद्रित आहे: पूर्ण-आकाराचे उत्पादन फोटो आणि ब्रँड इव्हेंट्समधील फोटो व्हिज्युअल डिझाइनचा मोठा भाग व्यापतात, जे अनेकदा मोठ्या पार्श्वभूमीवर पांढऱ्या मजकुरासह येतात. प्रतिमा अगदी जवळून क्रॉप केलेल्या, उच्च-कॉन्ट्रास्ट आणि उत्सवी स्वरूपाच्या आहेत (नॅसडॅक घंटेचा आवाज, सामूहिक शुभेच्छा, हातात असलेल्या उत्पादनांचे क्लोज-अप). गडद पार्श्वभूमीमुळे हे फोटो स्पॉटलाइट्सने प्रकाशित झाल्याचा आभास निर्माण होतो. चित्रे मिनिमलिस्ट आहेत—मुख्य स्पष्टीकरणाचे काम एम्बेड केलेल्या उत्पादन प्रतिमा आणि स्टोअरफ्रंटच्या स्क्रीनशॉट्सद्वारे केले जाते. आयकॉन्स मोनोक्रोम आहेत, ज्यांची लाइन रुंदी १.५–२px आहे, आणि सक्रिय स्थितींसाठी ते सामान्यतः पांढरे किंवा #36f4a4 रंगाचे असतात.
पॅलेट
ब्रँड
- Shopify Mint
#36f4a4— गडद पार्श्वभूमीवर, सक्रिय नॅव्हिगेशन इंडिकेटर्स, फोकस रिंग्स, टॅग हायलाइट्स आणि लिंक्सवरील होव्हर हायलाइट्स हीच एकमेव रंगीत चमक आहे, जी इंटरॅक्टिव्हिटी सक्षम असल्याची भावना निर्माण करते.
तटस्थ
- Midnight Forest
#02090a— पेज कॅनव्हास, हेडर पार्श्वभूमी प्रतिमा, विभाग पार्श्वभूमी प्रतिमा - Deep Lichen
#061a1c— कार्डाचे मुख्य पृष्ठभाग, उठावदार पॅनेल, मजकुराचे ब्लॉक. - Shaded Fern
#072720— नेव्हिगेशन पॅनल, अतिरिक्त कार्डे, पॅनल किंचित वर उचलले जाणे. - Spruce Border
#1e2c31— कार्डांसाठी पातळ कडा, विभाजक रेषा, इनपुट फील्डच्या बाह्यरेखा. - Abyss Indigo
#000a1e— उत्पादने/प्रात्यक्षिके, कार्यांचे वर्णन असलेले फलक बसवण्यासाठी अतिरिक्त पृष्ठभाग. - Pure White
#ffffff— मुख्य मजकूर, बटनाचा रंग, शीर्षक, लोगो.
टायपोग्राफी
१२ ते ७० पिक्सेल · ८ टप्पे
- Neue Haas Grotesk — बदली: Inter · रूपरेषा 330, 400, 500, 550, 600 · मुख्य टायपोग्राफिक प्रणालीमध्ये ७०-९६px (३३०-४००) फॉन्ट वेट असलेल्या हेडलाइन्सचा समावेश आहे, ज्या भडक न दिसता सुस्पष्ट आहेत; मुख्य मजकुरासाठी १६-१८px (४००-५००) फॉन्ट वेट; आणि नेव्हिगेशन व युझर इंटरफेससाठी १४-१६px (५००-५५०) फॉन्ट वेट आहे. मोठ्या स्क्रीन आकारांवर ३३० चा अत्यंत हलका फॉन्ट वेट हे एक वैशिष्ट्यपूर्ण गुणधर्म आहे: तो जडपणाऐवजी संयमातून आत्मविश्वास व्यक्त करतो.
- Inter Variable — बदली: Inter · रूपरेषा 400, 420, 450, 550 · नेव्हिगेशनल इंटरफेस घटक, लहान नोट्स, टॅब कंट्रोल्स आणि फुटरमधील मायक्रोटेक्स्टमध्ये वापरला जाणारा एक दुय्यम फॉन्ट प्रकार. याची किंचित मोठी लहान अक्षरे आणि अधिक प्रमाणित अक्षर-अंतरामुळे तो लहान आकारातही अधिक वाचनीय ठरतो. तसेच, जिथे 420-वेट फॉन्ट नियमित आणि मध्यम आकाराच्या फॉन्टमधील अंतर भरून काढतो, अशा परिस्थितींसाठीही तो योग्य आहे.
अंतर आणि स्वरूप
| उद्देश | अर्थ |
|---|---|
| घनता | सरासरी |
| मूलभूत पायरी | 12px |
| बटण त्रिज्या | 9999px |
| कार्ड त्रिज्या | 12px |
| सावल्या | सावल्यांऐवजी सीमा नाहीत |
| विभागांच्या दरम्यान | 80px |
| पृष्ठाची रुंदी | 1280px |
एआय तुमची वेबसाईट Shopify स्टाईलमध्ये तयार करेल आणि ती भरेल.
- लिंकद्वारे उत्पादने आणि पोस्ट्स भरा - Instagram, TikTok, Facebook.
- तुमच्या जुन्या साइटवरून सामग्री हस्तांतरित करा—फक्त पत्ता नमूद करा.
- सर्वोत्तम इंजिनवर आधुनिक डिझाइन: React ( Next.js) ज्यामध्ये सर्व्हर रेंडरिंग आणि एसईओ ऑप्टिमायझेशन अंगभूत आहेत.
- शोध परिणामांसाठी पूर्णपणे स्वयंचलित एसईओ ऑप्टिमायझेशन आणि न्यूरल नेटवर्क शिफारसी.
समान शैली
- Retool — एक उबदार ऑब्सिडियन कार्यशाळा - धगधगत्या निखाऱ्यांच्या प्रकाशाने उजळलेली, अचूक अवजारांसाठीची एक पृष्ठभूमी, जिथे प्रत्येक गोष्टीची निर्मिती होते.
- Elektron — मध्यरात्री उपकरणाचे नियंत्रण पॅनेल हे जवळजवळ एका काळ्या कॅनव्हाससारखे असते, जिथे उत्पादनांचे फोटो उठून दिसतात, तर इंटरफेस मात्र अक्षरशः अदृश्य राहतो.
- REKKI — फोटो लॅबमधील उड्डाण नियंत्रण पॅनेल
- OFFFICE : — एकसंध फॉन्टमध्ये वेढलेली एक नॉयर गॅलरी
- Clyde — एकाच स्पॉटलाइटमुळे, तो शोरूम जवळजवळ एका अंधाऱ्या गॅलरीसारखा वाटतो, जिथे खोलीतील एकमेव रंग म्हणजे उबदार रंगांच्या छटा असलेला एक गोल आहे.
- Channel Studio — एक प्रवाळी रंगाचा लॅम्पशेड असलेला स्टुडिओ फोटो लॅब
- Electronic Materials Office — कोळशाने सजवलेल्या दालनातील एक धगधगता निखारा
- ORYZO AI — डार्करूमबद्दलचा एक छायाचित्र-निबंध. उबदार अंधारात तरंगणारी एक एकाकी वस्तू, ज्यावर क्रीम रंगाचे फॉन्ट हेच एकमेव सजावटीचे साहित्य आहे.
- Factory — मध्यरात्रीचे 'वॉर रूम'मधील टर्मिनल. 'फॅक्टरी' म्हणजे एक भयाण काळे कंट्रोल पॅनल, जिथे टॉर्चच्या प्रकाशात एखादा संदेश पडावा तसे एक पांढरे कार्ड पडते—त्या खोलीतील एकमेव वस्तू म्हणजे ते काम स्वतःच असते.
- Hungry Tiger — तंदूरच्या भिंतीवर हळदीच्या रंगासारखे चमकदार ग्राफिटी. सोनेरी आणि गंजलेल्या तपकिरी रंगांची एकसंध रंगसंगती, आणि अक्षरं इतकी मोठी की ती वेबसाईटपेक्षा मसाल्यांच्या बाजाराच्या पाटीसारखी जास्त वाटतात.
- Bibliothèque — स्पॉटलाइटच्या प्रकाशात एक काळ्या रंगाची घनाकृती गॅलरी – एका विशाल, अंधाऱ्या हॉलमधील एकटा प्रकाशित फलक.
- Apple (España) — प्रकाशमान उपकरणांसह काळे थिएटर