लक्ष्य: 月蝕綺譚 नामक जापानी मिस्ट्री / हॉरर गेम समुदाय के लिए एक बेहतरीन रिस्पॉन्सिव वेबसाइट मॉकअप बनाएं, जिसे डेस्कटॉप ब्राउज़र विंडो और स्मार्टफोन स्क्रीन के साथ-साथ दिखाया गया हो।
कैनवास: हल्के भूरे रंग की पृष्ठभूमि पर 16:9 प्रेजेंटेशन इमेज। बाईं ओर एक बड़ा डेस्कटॉप ब्राउज़र मॉकअप रखें, जो चौड़ाई का लगभग 75% हिस्सा ले, और दाईं ओर एक लंबा स्मार्टफोन मॉकअप रखें। सॉफ्ट शैडो, राउंडेड डिवाइस कॉर्नर और यथार्थवादी UI फ्रेमिंग का उपयोग करें।
विजुअल स्टाइल: सुरुचिपूर्ण जापानी गॉथिक मिस्ट्री एस्थेटिक, ऑफ-व्हाइट वाशी-पेपर टेक्सचर बैकग्राउंड, गहरे नेवी-ब्लैक पैनल, पतले ग्रे बॉर्डर, म्यूट रेड एक्सेंट, रिफाइंड सेरिफ जापानी टाइपोग्राफी, सूक्ष्म स्याही जैसी रेखाएं, अर्धचंद्र (crescent moon) मोटिफ, पुरालेख दस्तावेज, पुराने नक्शे, अंधेरे जंगल/रात की इमेजरी, और संयमित प्रीमियम वेब-डिज़ाइन स्पेसिंग।
डेस्कटॉप लेआउट: एक ब्राउज़र विंडो जिसमें डार्क टॉप क्रोम बार और तीन छोटे गोलाकार विंडो बटन हों। हेडर में बाईं ओर साइट टाइटल लोगो 「月蝕綺譚」 हो, जिसके साथ एक पतला अर्धचंद्र आर्क और लाल सील मार्क हो, केंद्र में 4 नेविगेशन लिंक हों जिन्हें 「お知らせ」, 「開発記録」, 「ご意見箱」, 「アーカイブ」 के रूप में लेबल किया गया हो, और दाईं ओर एक गहरा नेवी कॉल-टू-एक्शन बटन हो जिसे 「メールで会員になる」 लेबल किया गया हो। नीचे, एक हीरो सेक्शन बनाएं जिसे बाईं ओर एक बड़े डार्क इमेज एरिया और दाईं ओर एक साइनअप कार्ड में विभाजित किया गया हो। हीरो इमेज में एक बादलों वाली रात का आकाश और चमकता हुआ ग्रहण लगा अर्धचंद्र हो, साथ ही वर्टिकल टाइटल टेक्स्ट 「月蝕綺譚」, बारीक गोलाकार ऑर्बिट लाइनें और छोटे वर्टिकल एनोटेशन हों। एक पारभासी (translucent) आर्काइव-स्टाइल पैनल ओवरले करें जिसमें पुराने जापानी दस्तावेज और 5 छोटे थंबनेल कार्ड हों; हीरो इमेज के नीचे ठीक 5 क्षैतिज थंबनेल इमेज शामिल करें: रात में एक पुरानी इमारत, ब्लूप्रिंट जैसा कमरा, एक गहरा प्रतीकात्मक विवरण, हस्तलिखित दस्तावेज, और नक्शों/स्क्रीन वाला एक डेस्क।
साइनअप कार्ड: डेस्कटॉप हीरो के दाईं ओर, एक क्रीम रंग का टिकट के आकार का कार्ड बनाएं जिसके किनारे कटे हुए हों, पतला बॉर्डर हो, छोटा लाल लेबल 「入会札」 हो, हेडलाइन 「メールで会員になる」 हो, एक लिफाफा आइकन हो, संक्षिप्त व्याख्यात्मक कॉपी हो, एक ईमेल इनपुट फील्ड हो जिसमें प्लेसहोल्डर 「メールアドレスを入力」 हो, और एक लाल बटन हो जिसे 「登録する」 लेबल किया गया हो और साथ में दाईं ओर एक तीर हो। नीचे प्राइवेसी-पॉलिसी जैसा छोटा टेक्स्ट जोड़ें।
डेस्कटॉप निचली सामग्री: हीरो के नीचे, बाईं ओर एक वर्टिकल लाल रेखा और हेडलाइन 物語の続きを、いちばん近くで。 के साथ एक बड़ा इंट्रो मैसेज रखें, साथ ही छोटा ग्रे बॉडी कॉपी रखें। दाईं ओर, एक पंक्ति में ठीक 3 आर्टिकल कार्ड रखें। कार्ड 1 टाइटल सेक्शन 「月蝕綺譚 最新便」 जिसमें चंद्रमा की इमेज, लाल NEW टैग, हेडलाइन 「大型アップデート『〇〇』を公開しました」, तारीख 2024.05.20 हो। कार्ड 2 टाइटल सेक्शन 「開発記録」 जिसमें नोटबुक और पेन की इमेज, हेडलाइन 「開発記録 #12:環境演出の調整について」, तारीख 2024.05.18 हो। कार्ड 3 टाइटल सेक्शन 「ご意見箱」 जिसमें एक डार्क मेलबॉक्स इमेज, हेडलाइन 「ご意見・ご感想をお聞かせください」, तारीख 2024.05.16 हो। प्रत्येक कार्ड के हेडर में एक छोटा दाईं ओर का तीर और ग्रे टीज़र लाइनें हों।
फुटर: डेस्कटॉप की चौड़ाई में फैला हुआ गहरा नेवी फुटर जिसमें ठीक 6 लिंक हों: 「お知らせ」, 「開発記録」, 「ご意見箱」, 「アーカイブ」, 「利用規約」, 「プライバシーポリシー」。 दाईं ओर एक अर्धचंद्र आइकन और कॉपीराइट टेक्स्ट 「© 2024 月蝕綺譚」 जोड़ें।
मोबाइल लेआउट: उसी साइट का स्मार्टफोन प्रीव्यू दिखाएं। टॉप स्टेटस बार में 9:41 लिखा हो, उसके बाद 「月蝕綺譚」 लोगो और हैमबर्गर मेनू आइकन के साथ एक कॉम्पैक्ट हेडर हो। मोबाइल पेज वर्टिकली स्टैक हो: हीरो मून इमेज टाइटल के साथ, क्षैतिज पट्टी में ठीक 5 छोटे थंबनेल, इंट्रो हेडलाइन 「物語の続きを、いちばん近くで。」, वही टिकट-स्टाइल ईमेल साइनअप कार्ड, फिर पहला न्यूज़ कार्ड 「月蝕綺譚 最新便」 मून इमेज और NEW टैग के साथ। सुनिश्चित करें कि सभी तत्व डेस्कटॉप लेआउट के मोबाइल-रिस्पॉन्सिव संस्करण की तरह महसूस हों।
सीमाएं: जहां निर्दिष्ट हो वहां केवल जापानी टेक्स्ट का उपयोग करें, टाइपोग्राफी को स्पष्ट और पठनीय रखें, वर्णित अनुभागों के अलावा अतिरिक्त अनुभागों से बचें, 4 डेस्कटॉप नेव लिंक, 5 हीरो थंबनेल, 3 डेस्कटॉप आर्टिकल कार्ड, 6 फुटर लिंक और 1 मोबाइल हैमबर्गर मेनू की सटीक संख्या बनाए रखें।