Apple
एक निळे स्विच असलेली पांढरी खोली
ॲपलची रचना संयमाचा एक आदर्श नमुना आहे: जवळजवळ पांढरा कॅनव्हास, भरपूर मोकळी जागा आणि एकच, तेजस्वी निळा रंग, ज्यामुळे प्रत्येक कृती हेतुपुरस्सर वाटते. मुख्य लक्ष टायपोग्राफीवर आहे—एसएफ प्रो (SF Pro), ज्यात अक्षरांमधील अंतर आकारानुसार कमी होत जाते, ज्यामुळे मथळ्यांना जास्त जड न वाटता एक वास्तुशिल्पीय स्पष्टता मिळते. उत्पादन हेच रचना आहे: उत्पादनाचे मोठे फोटो आणि जीवनशैलीची चित्रे प्रामुख्याने दिसतात, तर क्रोमचे घटक पातळ फ्रेम्स, अर्धपारदर्शक नेव्हिगेशन आणि सूक्ष्म रेषांमध्ये विलीन होतात. हलक्या राखाडी पार्श्वभूमीवर विभाग आणि प्रचारात्मक साहित्यासाठी पूर्ण-रंगीत ब्लॉक्स एकाआड एक येतात, ज्यामुळे सजावटीच्या घटकांऐवजी आकारातील बदलांद्वारे लय निर्माण होते.
पेज लेआउट हे पूर्ण-रुंदीचे पेज आहे, ज्यामध्ये कंटेनरची कोणतीही निश्चित कमाल रुंदी नाही—सेक्शन्स एका कडेपासून दुसऱ्या कडेपर्यंत पसरलेले आहेत, आणि त्यातील टेक्स्ट ब्लॉक्स अंदाजे ९८०px वर मध्यभागी ठेवलेले आहेत. नेव्हिगेशन ही एकच, निश्चित ग्लोबल बार आहे, ज्यामध्ये स्क्रोल केल्यावर दिसणाऱ्या प्रत्येक उत्पादनासाठी एक अतिरिक्त सबफोल्डर आहे. मुख्य लेआउट नेहमी मध्यभागी असतो: उत्पादनाचे मोठे नाव, एक-ओळीची टॅगलाइन, दोन पिल बटन्स, आणि त्यानंतर उर्वरित व्ह्यूपोर्ट व्यापणारी उत्पादनाची प्रतिमा. सेक्शन्स उभ्या दिशेने रचलेले आहेत, ज्यात एक चांगली उभी लय (सेक्शन्समध्ये ६४px+ पेक्षा जास्त अंतर) आहे, आणि #f5f5f7 व रंगीत बॅकग्राउंड्स एकाआड एक वापरलेले आहेत. पेजच्या तळाशी पूर्ण-रुंदीच्या सर्व्हिस कार्ड्सची (Apple TV+, Fitness+, Music, Arcade) एकच आडवी ओळ आहे, ज्यातील प्रत्येक कार्ड हा ओव्हरले टेक्स्ट आणि एका पिल बटणासह असलेला एक फोटो ब्लॉक आहे. यात कोणतेही साइडबार नाहीत, बहु-स्तंभीय मजकूर लेआउट नाहीत, किंवा कोणतीही असममित रचना नाही—सर्व काही मध्यभागी, रचलेले आणि सममित आहे.
फोटोग्राफी ही प्रमुख दृश्य भाषा आहे. उत्पादनांचे फोटो कोणत्याही संदर्भाशिवाय, पूर्णपणे पांढऱ्या किंवा फिकट राखाडी पार्श्वभूमीवर घेतले जातात—त्यात डिव्हाइस हेच मुख्य आकर्षण असते, जे वेगळे आणि प्रकाशित केलेले असते. जीवनशैलीचे फोटो पूर्ण-रुंदीच्या बॅनरमध्ये प्रदर्शित केले जातात, ज्यात अनेकदा वस्तू अगदी जवळून कापलेल्या (cropped) असतात. रंगांचे ग्रेडियंट्स (फिकट निळा, गुलाबी, हिरवा) हे उत्पादन विभागांसाठी पार्श्वभूमी म्हणून वापरले जातात, सजावट म्हणून नाही. आयकॉनोग्राफी किमान आणि रेषांवर आधारित आहे, १-२ पिक्सेल जाडीची असून, मजकुराप्रमाणेच त्याच ग्रेस्केलमध्ये आहे. उत्पादनांच्या फोटोंव्यतिरिक्त इतर कोणतीही चित्रे, अमूर्त ग्राफिक्स किंवा ३डी रेंडरिंग नाहीत.
पॅलेट
ब्रँड
- Apple Blue
#0071e3— भरलेली ॲक्शन बटणे, निवडलेल्या अवस्था - प्रत्येक दिसण्याला अर्थपूर्ण बनवण्यासाठी क्वचितच वापरलेला एकमेव इंटरॲक्टिव्ह क्रोमॅटिक रंग. - Link Blue
#0066cc— ठळक केलेल्या ॲक्शन बॉर्डर्स, एम्बेडेड लिंक्स - जिथे भरलेला टॅब्लेट खूप भडक दिसेल, तिथे ॲपल ब्लू पेक्षा अधिक गडद रंगाचा वापर केला आहे. - Signal Blue
#2997ff— सजावटीच्या चौकटी, चित्रांच्या बाह्यरेखा, आयकॉनच्या कडा - सिस्टीममधील सर्वात फिकट निळा रंग, जो वापरकर्त्याच्या परस्परसंवादाऐवजी वातावरण निर्मितीसाठी वापरला जातो.
तटस्थ
- Carbon
#1d1d1f— मुख्य मजकूर, शीर्षकांच्या कडा, नेव्हिगेशन रेषा, कार्डच्या कडा - यामध्ये शाईचा प्रमुख रंग जवळपास काळा असून त्यात उबदारपणाची किंचित छटा आहे. - Frost
#f5f5f7— पेज कॅनव्हास, मुख्य मजकुराची पार्श्वभूमी आणि फुटरचा पृष्ठभाग हे ॲपलच्या वैशिष्ट्यपूर्ण फिकट राखाडी रंगाचे आहेत, जो पूर्ण पांढऱ्या रंगापेक्षा किंचित अधिक सौम्य आहे. - Ice
#f4f8fb— भावपूर्ण पृष्ठभागावरील भरणा, सौम्य रंगछटा, गडद पार्श्वभूमीवरील बटणावरील मजकूर—एक सौम्य निळी छटा जी त्या भागाला उठून न दाखवता जिवंतपणा देते. - Smoke
#333333— दुय्यम मजकूर, नेव्हिगेशन फिल, बटण बॉर्डर्स - बॉर्डर्स आणि आयकॉन्ससाठी एक बहुउपयोगी न्यूट्रल रंग, ज्यांना मध्यम राखाडी रंगापेक्षा अधिक उठावदारपणाची गरज असते. - Graphite
#474747— नेव्हिगेशन मजकूर, नेव्हिगेशन बॉर्डर्स, लिंक बॉर्डर्स - एलिमेंट पदानुक्रमात कार्बन आणि स्मोक यांच्या दरम्यानचे स्थान व्यापतात. - Ash
#707070— फुटर मजकूर, सूचीच्या कडा, नॅव्हिगेशनच्या कडा, फिकट मुख्य मजकूर - जो मजकूर दिसणे आवश्यक आहे परंतु ठळक नसावा, अशा मजकुरासाठी मध्यम राखाडी रंग.
टायपोग्राफी
१२ ते ५६ पिक्सेल · ८ टप्पे
- SF Pro Display — बदली: Inter · रूपरेषा 400, 600, 700 · शीर्षके आणि मोठा मजकूर—40px+ आकार अरुंद ॲपर्चर आणि अधिक मजबूत निगेटिव्ह ट्रॅकिंगसाठी डिस्प्ले फॉरमॅट वापरतात; 700 जाहिरात लेआउटसाठी राखीव आहे, आणि 400 संपादकीय मजकुरातील उत्पादनांच्या नावासाठी आहे.
- SF Pro Text — बदली: Inter · रूपरेषा 300, 400, 600 · मुख्य मजकूर, नेव्हिगेशन, बटणे, उपशीर्षके — कार्यरत फॉन्ट; मुख्य मजकुरासाठी ४००, उपशीर्षके आणि क्वालिफाइड लेबल्ससाठी ३००, नेव्हिगेशन घटक आणि बटण मजकुरासाठी ६००; नकारात्मक अक्षर अंतर आकारानुसार प्रमाणात कमी होते (-०.०२२em ते १२px ते -०.०१em ते ४४px पर्यंत).
अंतर आणि स्वरूप
| उद्देश | अर्थ |
|---|---|
| घनता | सरासरी |
| मूलभूत पायरी | 12px |
| बटण त्रिज्या | 980px |
| कार्ड त्रिज्या | 8px |
| सावल्या | सावल्यांऐवजी सीमा नाहीत |
| विभागांच्या दरम्यान | 64px |
| पृष्ठाची रुंदी | 1440px |
एआय तुमची वेबसाईट Apple स्टाईलमध्ये तयार करेल आणि ती भरेल.
- लिंकद्वारे उत्पादने आणि पोस्ट्स भरा - Instagram, TikTok, Facebook.
- तुमच्या जुन्या साइटवरून सामग्री हस्तांतरित करा—फक्त पत्ता नमूद करा.
- सर्वोत्तम इंजिनवर आधुनिक डिझाइन: React ( Next.js) ज्यामध्ये सर्व्हर रेंडरिंग आणि एसईओ ऑप्टिमायझेशन अंगभूत आहेत.
- शोध परिणामांसाठी पूर्णपणे स्वयंचलित एसईओ ऑप्टिमायझेशन आणि न्यूरल नेटवर्क शिफारसी.
समान शैली
- Studio — गतिमान गॅलरीची भिंत. प्रत्येक स्क्रीन एका शांत, राखाडी प्रदर्शन पृष्ठभागाचे प्रतिनिधित्व करते, जिथे टायपोग्राफिक साहित्य आणि एकमेकांवर आलेली सर्जनशील कामे लक्ष वेधण्यासाठी स्पर्धा करतात.
- Mollie — एक कॅशमिअरचे काउंटर, एक गडद रंगाचे खातेवही. काळ्या मजकुराभोवती संपादकीय डिझाइनसाठी पुरेशी पांढरी जागा सोडा, आणि नंतर उबदार क्रीम, एस्प्रेसो ब्राऊन रंग आणि प्रत्यक्ष पेमेंट पद्धतींच्या स्पर्शानुभवी फोटोंच्या साहाय्याने उत्पादनाशी संबंधित मुद्दे अधिक प्रभावी करा.
- Basis Theory — डिझाइन स्टुडिओमधील पेमेंट टर्मिनल्स. पांढरा टेक्निकल पेपर, एकमेकांवर आलेले अर्धपारदर्शक व्यवहाराचे थर आणि एकच फिरोजी रंगाचा कंट्रोल घटक दृश्यात्मक दिशा निश्चित करतात.
- CleanShot X — निळ्या प्रकाशाने उजळलेला डेस्कटॉप असलेला एक स्टुडिओ. सुटसुटीत काळ्या मजकुराभोवती एक शांत पांढरी जागा तयार करा, आणि मग गडद निळ्या रंगाची नियंत्रणे व एकावर एक रचलेल्या मॅक उत्पादनांच्या प्रतिमांना केंद्रस्थानी येऊ द्या.
- Modern Treasury — ग्राफ पेपरवरील ट्रेझरी लेजर. एका शांत, कोऱ्या ऑपरेटिंग शीटसारखी दिसणारी पृष्ठे तयार करा, जिथे रोख प्रवाह बारीक रेषा, नावे दिलेले नोड्स आणि अचूक, लपवलेल्या नियंत्रणांसह दर्शविलेले असतील.
- Basha-Franklin — पांढऱ्या तुळईखाली एक गॅलरी ग्रिड. उबदार #f4ede6 रंगछटा, एक सूक्ष्म काळी रचना आणि छापलेल्या आर्किटेक्चरल पोर्टफोलिओसारख्या दिसणाऱ्या छायाचित्रांवर आधारित असममित स्तंभांचा वापर करा.
- Bajgart Office — संपादकीय गॅलरी वॉल. एका मोठ्या पांढऱ्या जागेचा वापर करा, जिथे चकचकीत इंटरफेस घटकांपेक्षा नाजूक सेरिफ फॉन्ट आणि पोर्टफोलिओच्या भागांना अधिक दृश्य महत्त्व असेल.
- Heptabase — सूर्यप्रकाशित डेस्क. उबदार, कागदासारखे पृष्ठभाग, कोळशाच्या रंगाची नियंत्रके आणि संशोधनासाठी असलेल्या तरंगत्या खिडक्यांमुळे, एखाद्या सॉफ्टवेअर कंट्रोल पॅनलऐवजी एका सुव्यवस्थित कार्यक्षेत्राची भावना निर्माण होते.
- Bejamas — पायजमा—काळ्या काचेतून दिसणारा आम्ल-चुना. शांत, फिकट-राखाडी संपादकीय पृष्ठे तयार करा, जी मनमोहक काळ्या पॅनल्समुळे खंडित होतात, जिथे प्रकाशाच्या अस्पष्ट हिरव्या रेषा पृष्ठभागाला छेदतात.
- Baba — लाल सूर्यप्रकाशातील काळजीच्या नोंदी. लोकांच्या छायाचित्रांना भावनिक केंद्र बनवून, पांढऱ्या, गुलाबी आणि क्रीम रंगाच्या वैयक्तिक माहितीच्या पृष्ठभागांभोवती रुंद लाल कथनात्मक पट्टे तयार करा.
- Grafana Labs — सनराईज सिग्नल स्टेशनचा नियंत्रण कक्ष. शांत राखाडी-पांढऱ्या रंगाच्या कार्यक्षेत्रात विस्तृत, चार-रंगी क्षितिज प्रवणता आणि अचूक निळे इंटरफेस सिग्नल यांचा मिलाफ आहे.
- Kagi — एक स्वतंत्र वाचन कक्ष. ठळक ग्राफाइट मजकुराभोवती एक मोकळी पांढरी जागा तयार करा, आणि शांततेत भंग करण्यासाठी हलक्या जांभळ्या रंगाच्या छटा व उबदार पेस्टल रंगांचा वापर करा.