FRANKY'S
एक स्केट शॉप के काउंटर पर एक रेट्रो गेमिंग कियोस्क
फ्रेंकी की विज़ुअल शैली रेट्रो आर्केड और स्केटबोर्ड शॉप का मिश्रण है: एक गर्म क्रीम रंग का कैनवास (#f3e5df) जिसके चारों ओर पिक्सेल बॉर्डर हैं, एक सर्वव्यापी काला-सफेद चेकरबोर्ड पैटर्न, और वेबसाइट के हर शब्द के लिए एक ही पिक्सेल का फ़ॉन्ट, आर्केड, इस्तेमाल किया गया है। रंगों का चयन जानबूझकर सीमित रखा गया है—केवल दो ही रंग हैं (साइन के लिए नारंगी रंग #faa21f और बाय बटन के लिए हरा रंग #128e44), और पूरी संरचना को आर्केड फ़ॉन्ट का वज़न 400 से बढ़ाकर 700 करके और क्रीम रंग की पृष्ठभूमि पर काले रंग का उपयोग करके दर्शाया गया है। सतहें सपाट और एकसमान हैं; गहराई केवल बटनों पर डाली गई 1 पिक्सेल की क्रीम लाइन और चेकरबोर्ड पैटर्न के रंगों के मेल से ही प्राप्त होती है। इसके घटक 1990 के दशक के स्टोरफ्रंट स्प्राइट्स की याद दिलाते हैं: मोटी काली बॉर्डर, 6-12px की संकीर्ण बॉर्डर त्रिज्या, 4-8px की कॉम्पैक्ट पैडिंग, और 3D/AR टॉगल जो क्रोम तत्वों के बजाय पिक्सेलेटेड आइकन की तरह दिखते हैं। नए पेज आर्केड जैसे माहौल को बनाए रखने के लिए डिज़ाइन किए गए हैं: नारंगी स्क्रॉलिंग टेक्स्ट के अलावा कोई ग्रेडिएंट नहीं, कोई हल्की छाया नहीं, कोई सजावटी टाइपोग्राफी नहीं—केवल क्रीम रंग का कागज, काली पिक्सेलेटेड लाइनें और एक गर्म नारंगी रंग।
डेस्कटॉप पर, उत्पाद पृष्ठ पूरी चौड़ाई में, केंद्र में स्थित लेआउट में प्रदर्शित होता है, जिसकी अधिकतम चौड़ाई 1200px है। ऊपर से नीचे का क्रम इस प्रकार है: नारंगी रंग का स्क्रॉलिंग टेक्स्ट → काली रेखा वाला क्रीम रंग का हेडर → दो-कॉलम विभाजन (होमपेज पर 55% चेकरबोर्ड / उत्पाद कार्डों का 45% दो-कॉलम ग्रिड) → फ़ूटर में क्रीम रंग की पट्टी। मोबाइल पर, होमपेज पूरी चौड़ाई वाले चेकरबोर्ड में सिमट जाता है, और ग्रिड एक-कॉलम लेआउट बन जाता है। कार्ड दो-कॉलम ग्रिड में समान रूप से वितरित होते हैं, जिनके बीच ग्रे पिक्सेल (#e5e7eb) विभाजक होते हैं। अनुभागों के बीच की दूरी न्यूनतम (43–61px) है, और इंटरफ़ेस कभी भी पृष्ठ की पूरी चौड़ाई में फैली हुई गहरी पट्टियों का उपयोग नहीं करता है—क्रीम कैनवास बिना किसी रुकावट के प्रदर्शित होता है।
साफ़ क्रीम रंग की पृष्ठभूमि पर रखी टोपियों की एक तस्वीर, बीच में केंद्रित और बारीकी से क्रॉप की गई, जिसके नीचे हल्की, गहरे काले रंग की छाया है। कोई जीवनशैली नहीं, कोई मॉडल नहीं, कोई संदर्भ नहीं—टोपी ही मुख्य आकर्षण है। मुख्य तत्व के पीछे बना चेकरबोर्ड पैटर्न ग्राफिक सतह का काम करता है। कोई चित्र नहीं, ऑगमेंटेड रियलिटी टॉगल को छोड़कर कोई 3डी रेंडर नहीं, लोगो में पिक्सेलेटेड क्रॉस को छोड़कर कोई सजावटी आइकन नहीं।
पैलेट
ब्रांड
- Marquee Orange
#faa21f— स्क्रीन के शीर्ष पर नोटिफिकेशन बार, एक्सेंट एलिमेंट्स, ब्रांडिंग। - Buy Green
#128e44— "कार्ट में जोड़ें" बटन भरा हुआ है - हरे रंग में चिह्नित एकमात्र खरीदारी क्रिया।
तटस्थ
- Arcade Cream
#f3e5df— पेज की पृष्ठभूमि, उत्पाद कार्ड की सतहें, बटन के अंदरूनी भाग। - Ink Black
#000000— मुख्य पाठ, चेकरबोर्ड लेआउट, सभी यूआई बॉर्डर, कार्ड की रूपरेखा, आइकन बॉर्डर। - Pixel Gray
#e5e7eb— पतली सीमाएँ, कार्ड विभाजक, ग्रिड सेल के बीच संरचनात्मक नियम। - Charcoal
#333333— द्वितीयक सतह टोन, चेकरबोर्ड छाया वर्ग, छाया रंग - Carbon
#151515— चित्रों को भरने और सबसे घनी चेकरबोर्ड टाइलों के लिए समृद्ध तटस्थ रंग। - Muted Gray
#737373— बटनों और बॉडी टेक्स्ट में टेक्स्ट को अक्षम/म्यूट किया गया है
टाइपोग्राफी
10 से 18px तक · 4 चरण
- Arcade — प्रतिस्थापन: VT323 · रूपरेखा 400, 700 · पूरे इंटरफ़ेस में एक ही फ़ॉन्ट का उपयोग किया गया है—सभी शीर्षक, लेबल, कीमतें, बटन, मुख्य टेक्स्ट और आइकन आर्केड फ़ॉन्ट में हैं। 400 से 700 में बदलाव ही पदानुक्रम बनाने का एकमात्र साधन है; दूसरे फ़ॉन्ट का उपयोग करने से कियोस्क का भ्रम बिगड़ जाएगा।
अंतराल और रूप
| उद्देश्य | अर्थ |
|---|---|
| घनत्व | घना |
| बुनियादी कदम | 4-8px |
| बटन त्रिज्या | 6px |
| कार्ड त्रिज्या | 12px |
| छैया छैया | नहीं - छाया के बजाय बॉर्डर |
| अनुभागों के बीच | 43-61px |
| पृष्ठ की चौड़ाई | 1200px |
एआई आपकी वेबसाइट को FRANKY'S शैली में बनाएगा और उसमें डेटा भरेगा।
- इन लिंक के माध्यम से उत्पादों और पोस्ट से भरें - Instagram, TikTok, Facebook ।
- अपनी पुरानी वेबसाइट से सामग्री स्थानांतरित करें—बस पता निर्दिष्ट करें।
- सर्वश्रेष्ठ इंजन पर आधुनिक डिजाइन: React ( Next.js) जिसमें सर्वर रेंडरिंग और एसईओ अनुकूलन की सुविधा अंतर्निहित है।
- खोज परिणामों और न्यूरल नेटवर्क अनुशंसाओं के लिए पूरी तरह से स्वचालित एसईओ अनुकूलन।
समान शैलियाँ
- 099 SUPPLY — एक गैलरी की दीवार जो काले और सफेद रंग की वस्तुओं से भरी हुई है
- teenage engineering — स्टूडियो लाइटिंग में औद्योगिक कैटलॉग - पृष्ठ पर उत्पाद ही एकमात्र महत्वपूर्ण वस्तु है, और बाकी सब कुछ इसके इर्द-गिर्द ही चर्चा की जाती है।
- Custo — गहरे लाल रंग की गैलरी जिसमें एक ही अक्षर का बड़ा फॉन्ट इस्तेमाल किया गया है। एक शोरूम जिसमें हल्के भूरे-हरे रंग के शेड्स हैं, जहां एक ही गहरे रंग की वस्तु और 57px का फॉन्ट खुद ही अपनी कहानी बयां करते हैं।
- Walden — वनभूमि की खामोशी - हर वस्तु एक पत्थर है, हर पिक्सेल काई और खामोशी है।
- Fiverr — डिजिटल बाज़ार का मुख्य आकर्षण गहरे रंग के थिएटर स्टेज के बीच चमकीला हरा रंग है। एक चमकीला हरा बिंदु लोगो के आधार के रूप में कार्य करता है; बाकी सब मोनोक्रोम है, जिसे दी जाने वाली सेवाओं के आकर्षण को उजागर करने के लिए डिज़ाइन किया गया है।
- Peloton — एक गहरे काले रनवे पर एक लाल बत्ती। एक फिटनेस शोरूम जहां एक चमकीला लाल CTA साइन विशाल, अंधेरे प्रदर्शनी क्षेत्र को चीरता हुआ साफ-सुथरे, सफेद उत्पाद कक्षों की ओर ले जाता है।
- HOUSEPLANT — लिनन के कागज पर छपे मेवों वाली एक किताबों की दुकान
- Adam Lippes — क्रीम रंग के कागज पर एक मोनोक्रोम संपादकीय स्टूडियो - वोग का एक ऐसा स्प्रेड जहां एकमात्र सजावट लेआउट ग्रिड है, न कि रंग पैलेट।
- Elektron — आधी रात के समय उपकरण नियंत्रण पैनल लगभग एक काले कैनवास जैसा दिखता है, जहां उत्पाद की तस्वीरें चमकती हैं जबकि इंटरफ़ेस लगभग अदृश्य रहता है।
- Sigmaphoto — मोनोक्रोम गैलरी ऑफ प्रेसिजन इंस्ट्रूमेंट्स एक शांत सफेद कमरा है जहां केवल वही रंग मायने रखता है जो आपको कार्रवाई करने के लिए प्रेरित करता है।
- Channel Studio — एक स्टूडियो फोटो लैब जिसमें एक मूंगे का लैंपशेड है
- Specht Studio — एक गैलरी की दीवार जो सूक्ष्म जिज्ञासा से भरी हुई है। स्टूडियो की अपनी क्रोम फिनिश एक सफेद सतह और काले अक्षरों वाली है; दृश्य चकाचौंध पूरी तरह से परियोजना के टाइलवर्क में केंद्रित है।