
Apple
एक सफेद कमरा जिसमें एक नीला स्विच लगा है
एप्पल का डिज़ाइन संयम का एक आदर्श उदाहरण है: लगभग सफ़ेद कैनवास, पर्याप्त खाली जगह और एक चमकीला नीला रंग, जो हर गतिविधि को सोच-समझकर किया गया प्रतीत कराता है। मुख्य ध्यान टाइपोग्राफी पर है—SF Pro फॉन्ट, जिसमें अक्षरों के बीच की दूरी आकार बढ़ने के साथ घटती जाती है, जिससे हेडलाइंस को अत्यधिक भारी हुए बिना एक वास्तुशिल्पीय स्पष्टता मिलती है। उत्पाद ही डिज़ाइन है: उत्पाद की बड़ी तस्वीरें और जीवनशैली से जुड़ी छवियां हावी हैं, जबकि क्रोम तत्व पतले फ्रेम, पारदर्शी नेविगेशन और सूक्ष्म रेखाओं में सिमट जाते हैं। प्रचार सामग्री के लिए रंगीन ब्लॉकों के साथ हल्के भूरे रंग की पृष्ठभूमि पर अनुभाग बारी-बारी से आते हैं, जिससे सजावटी तत्वों के बजाय आकार में बदलाव के माध्यम से एक लय बनती है।
पेज लेआउट पूरी चौड़ाई वाला है और इसमें कंटेनर की कोई निश्चित अधिकतम चौड़ाई नहीं है—सेक्शन किनारों से किनारों तक फैले हुए हैं, और टेक्स्ट ब्लॉक लगभग 980px पर बीच में स्थित हैं। नेविगेशन एक सिंगल, फिक्स्ड ग्लोबल बार है जिसमें स्क्रॉल करने पर दिखाई देने वाले प्रत्येक प्रोडक्ट के लिए एक अतिरिक्त सबफ़ोल्डर है। मुख्य लेआउट हमेशा बीच में रहता है: एक बड़ा प्रोडक्ट नाम, एक सिंगल-लाइन टैगलाइन, दो पिल बटन, और फिर एक प्रोडक्ट इमेज जो बाकी व्यूपोर्ट को भर देती है। सेक्शन एक उदार वर्टिकल रिदम (सेक्शन के बीच 64px+) के साथ लंबवत रूप से स्टैक किए गए हैं, जिसमें #f5f5f7 और रंगीन बैकग्राउंड बारी-बारी से उपयोग किए गए हैं। पेज के निचले भाग में पूरी चौड़ाई वाले सर्विस कार्ड (Apple TV+, Fitness+, Music, Arcade) की एक सिंगल हॉरिजॉन्टल पंक्ति है, जिनमें से प्रत्येक में ओवरले टेक्स्ट और एक पिल बटन के साथ एक फोटो ब्लॉक है। कोई साइडबार नहीं, कोई मल्टी-कॉलम कंटेंट लेआउट नहीं, कोई असममित कंपोजिशन नहीं—सब कुछ बीच में, स्टैक किया हुआ और सममित है।
फोटोग्राफी प्रमुख दृश्य भाषा है। उत्पाद की तस्वीरें शुद्ध सफेद या हल्के भूरे रंग की पृष्ठभूमि पर ली जाती हैं, बिना किसी संदर्भ के—डिवाइस ही मुख्य आकर्षण होता है, अलग-थलग और रोशन। लाइफस्टाइल तस्वीरें पूरी चौड़ाई वाले बैनर में प्रदर्शित होती हैं, जिनमें अक्सर वस्तुओं को बारीकी से क्रॉप किया जाता है। रंग ग्रेडिएंट (हल्का नीला, गुलाबी, हरा) उत्पाद अनुभागों के लिए पृष्ठभूमि का काम करते हैं, सजावट के रूप में नहीं। आइकनोग्राफी न्यूनतम और रेखा-आधारित है, 1-2 पिक्सेल मोटी, टेक्स्ट के समान ग्रेस्केल में। उत्पाद की तस्वीरों के अलावा कोई चित्र, कोई अमूर्त ग्राफिक्स, कोई 3डी रेंडरिंग नहीं है।
पैलेट
ब्रांड
- Apple Blue
#0071e3— एक्शन बटनों को भरा गया है, चयनित अवस्थाओं का उपयोग किया गया है - प्रत्येक उपस्थिति को सार्थक बनाने के लिए केवल कुछ ही इंटरैक्टिव क्रोमैटिक रंगों का उपयोग किया गया है। - Link Blue
#0066cc— हाइलाइट किए गए एक्शन बॉर्डर, एम्बेडेड लिंक - जहां भरा हुआ टैबलेट बहुत भड़कीला लगेगा, वहां एप्पल ब्लू की तुलना में अधिक संतृप्त रंग का उपयोग किया गया है। - Signal Blue
#2997ff— सजावटी फ्रेम, छवि की रूपरेखा, आइकन बॉर्डर - सिस्टम में सबसे हल्का नीला रंग, जिसका उपयोग उपयोगकर्ता के साथ बातचीत के बजाय वातावरण बनाने के लिए किया जाता है।
तटस्थ
- Carbon
#1d1d1f— मुख्य पाठ, शीर्षक बॉर्डर, नेविगेशन लाइनें, कार्ड बॉर्डर - इन सभी में इस्तेमाल किया गया स्याही का रंग लगभग काला है जिसमें हल्की सी गर्माहट का आभास है। - Frost
#f5f5f7— पेज कैनवास, मुख्य टेक्स्ट बैकग्राउंड और फुटर सतह एप्पल के सिग्नेचर हल्के ग्रे रंग के हैं, जो शुद्ध सफेद रंग से थोड़ा ठंडा होता है। - Ice
#f4f8fb— भावपूर्ण सतह भराव, सूक्ष्म रंग, गहरे रंग की पृष्ठभूमि पर बटन टेक्स्ट—एक सूक्ष्म नीला रंग जो अनुभाग को अलग से उभारे बिना उसे जीवंत बनाता है। - Smoke
#333333— सेकेंडरी टेक्स्ट, नेविगेशन फिल, बटन बॉर्डर - बॉर्डर और आइकन के लिए एक बहुमुखी तटस्थ रंग, जिन्हें मध्यम ग्रे की तुलना में अधिक प्रभाव की आवश्यकता होती है। - Graphite
#474747— नेविगेशन टेक्स्ट, नेविगेशन बॉर्डर, लिंक बॉर्डर - एलिमेंट पदानुक्रम में कार्बन और स्मोक के बीच एक मध्यवर्ती स्थिति रखते हैं। - Ash
#707070— फ़ूटर टेक्स्ट, सूची बॉर्डर, नेविगेशन बॉर्डर, म्यूटेड बॉडी टेक्स्ट - ऐसी सामग्री के लिए मध्यम ग्रे रंग का उपयोग किया जाता है जो मौजूद तो होनी चाहिए लेकिन प्रमुखता से दिखाई नहीं देनी चाहिए।
टाइपोग्राफी
12 से 56px तक · 8 चरण
- SF Pro Display — प्रतिस्थापन: Inter · रूपरेखा 400, 600, 700 · हेडलाइन और बड़े टेक्स्ट—40px+ आकार के लिए एक डिस्प्ले फॉर्मेट का उपयोग किया जाता है, जिसमें संकीर्ण एपर्चर और बेहतर नेगेटिव ट्रैकिंग होती है; 700 विज्ञापन लेआउट के लिए आरक्षित है, और 400 संपादकीय सामग्री में उत्पाद नामों के लिए है।
- SF Pro Text — प्रतिस्थापन: Inter · रूपरेखा 300, 400, 600 · मुख्य पाठ, नेविगेशन, बटन, उपशीर्षक — कार्यशील फ़ॉन्ट; मुख्य पाठ के लिए 400, उपशीर्षकों और योग्य लेबलों के लिए 300, नेविगेशन तत्वों और बटन पाठ के लिए 600; ऋणात्मक अक्षर रिक्ति आकार के अनुपात में घटती है (-0.022em से 12px से -0.01em से 44px तक)।
अंतराल और रूप
| उद्देश्य | अर्थ |
|---|---|
| घनत्व | औसत |
| बुनियादी कदम | 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 — एक अलग पठन कक्ष। गहरे भूरे रंग के अक्षरों के चारों ओर एक खुला सफेद स्थान बनाएं, शांति को भंग करने के लिए हल्के बैंगनी रंग के स्पर्श और गर्म पेस्टल सतहों का उपयोग करें।