สร้างม็อกอัป UI เว็บไซต์แบบ Responsive ทั้งบนเดสก์ท็อปและมือถือ สำหรับเรื่องราวแนวลึกลับญี่ปุ่นหรือเว็บไซต์เกมที่มีบรรยากาศน่าค้นหา
เป้าหมาย: สร้างม็อกอัปเว็บไซต์ที่ดูเป็นมืออาชีพสำหรับเกมแนวลึกลับญี่ปุ่นหรือคลังเรื่องราวในชื่อ 月蝕綺譚 โดยแสดงตัวอย่างดีไซน์แบบ Responsive ที่มีหน้าต่างเบราว์เซอร์เดสก์ท็อปทางด้านซ้ายและหน้าจอมาร์ทโฟนทางด้านขวา
ผืนผ้าใบ: ภาพนำเสนอขนาด 16:9 บนพื้นหลังสีเทาอ่อน วางม็อกอัปเบราว์เซอร์เดสก์ท็อปขนาดใหญ่ไว้ทางซ้าย (ประมาณ 75% ของความกว้าง) และม็อกอัปสมาร์ทโฟนแนวตั้งทางขวา (ประมาณ 22% ของความกว้าง) ใช้กรอบอุปกรณ์ที่สมจริงพร้อมเงาซอฟต์ชิป
สไตล์ภาพ: สยองขวัญวรรณกรรมญี่ปุ่นที่สง่างาม, ความลึกลับที่เงียบงัน, เอกสารจดหมายเหตุ, ความมืดภายใต้แสงจันทร์ ใช้โทนสีงาช้าง, หมึกดำ, น้ำเงินเข้มเกือบดำ, เทาหม่น และสีแดงชาดเป็นจุดเด่น ใช้ฟอนต์แบบมีหัว (Serif) ภาษาญี่ปุ่น, เส้นขีดบาง, ขอบแบบตั๋ว, พื้นผิวสัมผัสแบบกระดาษ, ภาพต้นฉบับเก่า และกราฟิกเส้นวงโคจรพระจันทร์เสี้ยวจางๆ อารมณ์โดยรวมควรให้ความรู้สึกเหมือนเว็บไซต์ทางการระดับพรีเมียมสำหรับเกมแนวเล่าเรื่อง
เลย์เอาต์เดสก์ท็อป: แสดงหน้าต่างเบราว์เซอร์ที่มีแถบด้านบนสีเข้มและจุดหน้าต่างเล็กๆ 3 จุด ภายในหน้าเว็บ ให้ใช้ส่วนหัวสีงาช้างที่มีชื่อเว็บไซต์ 月蝕綺譚 อยู่ทางซ้าย, ตราประทับสีแดงเล็กๆ และรายการเมนูแนวนอน 5 รายการ ได้แก่ 「お知らせ」, 「開発記録」, 「ご意見箱」, 「アーカイブ」 และปุ่มสีน้ำเงินเข้มที่เขียนว่า 「メールで会員になる」 ส่วน Hero ด้านล่างเป็นภาพจันทรุปราคาโทนเข้มกว้างๆ พร้อมชื่อแนวตั้ง 「月蝕綺譚」 ที่จัดกึ่งกลางเหนือพระจันทร์เสี้ยว/คราสที่เรืองแสง ซ้อนทับด้วยการ์ด UI คลังข้อมูลโปร่งแสงที่มีเอกสารญี่ปุ่นเก่าๆ และการ์ดของสะสม/เอกสารเล็กๆ 5 ใบที่ด้านล่างของการซ้อนทับนั้น ที่ด้านล่างสุดของภาพ Hero ให้ใส่แถบภาพตัวอย่างแนวนอน 5 ภาพ ได้แก่ ถนนยามค่ำคืน, ห้องที่ดูเหมือนพิมพ์เขียว, โฟลเดอร์หรือวัตถุสีเข้ม, กระดาษเขียนด้วยลายมือเก่าๆ และแผนผังโต๊ะทำงาน
การ์ดสมัครสมาชิกด้านขวาของเดสก์ท็อป: ทางด้านขวาของ Hero ให้วางการ์ดสมาชิกทรงตั๋วสีครีมขนาดใหญ่ที่มีรอยบากครึ่งวงกลมและขอบตกแต่งบางๆ ประกอบด้วยป้ายเล็กๆ 「入会札」, ตราประทับ, หัวข้อ 「メールで会員になる」, ไอคอนซองจดหมาย, ข้อความอธิบายสั้นๆ, ช่องกรอกอีเมลพร้อมข้อความตัวอย่าง 「メールアドレスを入力」 และปุ่ม CTA สีแดงที่เขียนว่า 「登録する」 พร้อมลูกศรชี้ไปทางขวา รวมทั้งข้อความนโยบายความเป็นส่วนตัวเล็กๆ ไว้ด้านล่าง
เนื้อหาส่วนล่างของเดสก์ท็อป: ใต้ส่วน Hero ให้ทำส่วนที่ให้ความรู้สึกเหมือนมี 2 คอลัมน์ ทางซ้ายเป็นสโลแกนภาษาญี่ปุ่นขนาดใหญ่ 物語の続きを、いちばん近くで。 พร้อมเส้นสีแดงแนวตั้งบางๆ และย่อหน้าอธิบายสั้นๆ ทางขวาให้วางการ์ดบทความ 3 ใบเรียงกัน ได้แก่ 1) 「月蝕綺譚 最新便」 พร้อมภาพพระจันทร์, ป้าย NEW สีแดงเล็กๆ, หัวข้อ 「大型アップデート『○○』を公開しました」, วันที่ 2024.05.20; 2) 「開発記録」 พร้อมภาพสมุดโน้ตและปากกา, หัวข้อ 「開発記録 #12:環境音の調整について」, วันที่ 2024.05.18; 3) 「ご意見箱」 พร้อมภาพตู้ไปรษณีย์สีเข้ม, หัวข้อ 「ご意見・ご感想をお聞かせください」, วันที่ 2024.05.16 การ์ดแต่ละใบมีขอบบาง, ลูกศรเล็กๆ ในส่วนหัว และบรรทัดสรุปตัวอย่างสีเทา
ส่วนท้ายของเดสก์ท็อป: เพิ่มส่วนท้ายสีน้ำเงินเข้มที่ด้านล่างพร้อมลิงก์ 6 รายการ ได้แก่ 「お知らせ」, 「開発記録」, 「ご意見箱」, 「アーカイブ」, 「利用規約」, 「プライバシーポリシー」 รวมไอคอนพระจันทร์เสี้ยวและลิขสิทธิ์ 「© 2024 月蝕綺譚」 ไว้ทางขวา
เลย์เอาต์มือถือ: บนสมาร์ทโฟนทางขวา ให้แสดงเว็บไซต์เดียวกันที่ปรับให้เข้ากับมือถือ เวลาบนแถบสถานะคือ 9:41 ส่วนหัวประกอบด้วยชื่อ 「月蝕綺譚」 และไอคอนเมนูแฮมเบอร์เกอร์ ด้านล่างแสดงส่วน Hero สีเข้มขนาดกะทัดรัดพร้อมภาพคราสและชื่อแนวตั้ง ตามด้วยภาพตัวอย่างแนวนอน 5 ภาพ ต่อด้วยสโลแกน 「物語の続きを、いちばん近くで。」, ตามด้วยการ์ดสมัครอีเมลทรงตั๋วใบเดิม, แล้วตามด้วยการ์ดข่าวใบแรก 「月蝕綺譚 最新便」 พร้อมภาพพระจันทร์และป้าย NEW สีแดง มุมมองมือถือควรดูเหมือนเลื่อนแนวตั้งได้แต่ถูกจำกัดอยู่ภายในหน้าจอโทรศัพท์
ข้อจำกัด: เก็บข้อความอินเทอร์เฟซที่มองเห็นได้ทั้งหมดเป็นภาษาญี่ปุ่นตามที่ระบุ ใช้การเรนเดอร์ม็อกอัป UI ที่สะอาดตาและมีความละเอียดสูง, ตัวอักษรที่คมชัด, เงาที่ละเอียดอ่อน และไม่มีโลโก้หรือลายน้ำเพิ่มเติม ดีไซน์ควรดูเหมือนม็อกอัปเว็บ/แอปที่เสร็จสมบูรณ์ซึ่งสร้างขึ้นเพื่อการวางแผนการใช้งาน