Tạo bản thiết kế giao diện (UI) đáp ứng cho máy tính và di động dành cho một trang web kể chuyện hoặc trò chơi mang màu sắc bí ẩn Nhật Bản.
Mục tiêu: Tạo một bản thiết kế trang web chỉn chu cho một trò chơi hoặc kho lưu trữ câu chuyện bí ẩn Nhật Bản có tiêu đề 月蝕綺譚, hiển thị dưới dạng xem trước thiết kế đáp ứng với một cửa sổ trình duyệt máy tính ở bên trái và một màn hình điện thoại thông minh ở bên phải.
Khung hình: Hình ảnh trình bày tỷ lệ 16:9 trên nền xám nhạt. Đặt bản thiết kế trình duyệt máy tính lớn chiếm khoảng 75% chiều rộng ở bên trái và bản thiết kế điện thoại thông minh cao chiếm khoảng 22% chiều rộng ở bên phải. Sử dụng khung thiết bị thực tế với đổ bóng nhẹ.
Phong cách hình ảnh: Kinh dị văn học Nhật Bản thanh lịch, bí ẩn tĩnh lặng, tài liệu lưu trữ, bóng đêm dưới ánh trăng. Bảng màu gồm giấy ngà, mực đen, xanh navy đậm, xám trầm và một điểm nhấn màu đỏ son mạnh mẽ. Sử dụng kiểu chữ serif Nhật Bản, các đường kẻ mảnh, đường viền dạng vé, kết cấu giấy tinh tế, hình ảnh bản thảo cũ và đồ họa đường quỹ đạo trăng khuyết mờ. Tâm trạng tổng thể nên mang cảm giác như một trang web chính thức cao cấp cho một trò chơi kể chuyện.
Bố cục máy tính: Hiển thị cửa sổ trình duyệt với thanh trên cùng màu tối và ba dấu chấm cửa sổ nhỏ. Bên trong trang, sử dụng tiêu đề màu ngà với tiêu đề trang web 月蝕綺譚 ở bên trái, một dấu triện đỏ nhỏ và chính xác 5 mục điều hướng ngang: 「お知らせ」, 「開発記録」, 「ご意見箱」, 「アーカイブ」 và một nút màu xanh navy đậm có nhãn 「メールで会員になる」. Phần hero bên dưới là hình ảnh nhật thực mặt trăng tối rộng với tiêu đề dọc 「月蝕綺譚」 được căn giữa trên hình trăng khuyết/nhật thực phát sáng. Phủ lên trên một thẻ UI lưu trữ trong suốt với các tài liệu Nhật Bản cũ và chính xác 5 thẻ sưu tầm/tài liệu nhỏ dọc theo đáy của lớp phủ đó. Dọc theo đáy của hình ảnh hero, bao gồm chính xác 5 dải hình thu nhỏ ngang hiển thị: một con phố đêm, một căn phòng giống bản thiết kế, một thư mục hoặc vật thể tối, giấy viết tay cũ và bản đồ bàn làm việc.
Thẻ đăng ký bên phải máy tính: Ở bên phải của phần hero, đặt một thẻ thành viên lớn hình vé màu kem với các vết cắt hình bán nguyệt và đường viền trang trí mảnh. Nó bao gồm nhãn nhỏ 「入会札」, biểu tượng con dấu, tiêu đề 「メールで会員になる」, biểu tượng phong bì, văn bản giải thích ngắn, một trường nhập email với văn bản giữ chỗ 「メールアドレスを入力」 và nút CTA màu đỏ có nhãn 「登録する」 với mũi tên hướng sang phải. Bao gồm văn bản chính sách bảo mật nhỏ bên dưới.
Nội dung bên dưới máy tính: Bên dưới phần hero, tạo một phần có cảm giác hai cột. Ở bên trái, một câu khẩu hiệu Nhật Bản lớn 物語の続きを、いちばん近くで。 với một đường kẻ dọc màu đỏ mảnh và một đoạn mô tả ngắn. Ở bên phải, đặt chính xác 3 thẻ bài viết theo hàng. 3 thẻ đó là: 1) 「月蝕綺譚 最新便」 với hình ảnh mặt trăng, nhãn NEW màu đỏ nhỏ, tiêu đề 「大型アップデート『○○』を公開しました」, ngày 2024.05.20; 2) 「開発記録」 với hình ảnh sổ tay và bút, tiêu đề 「開発記録 #12:環境音の調整について」, ngày 2024.05.18; 3) 「ご意見箱」 với hình ảnh hộp thư tối, tiêu đề 「ご意見・ご感想をお聞かせください」, ngày 2024.05.16. Mỗi thẻ có đường viền mảnh, một mũi tên nhỏ ở tiêu đề và các dòng tóm tắt giữ chỗ màu xám.
Chân trang máy tính: Thêm chân trang màu xanh navy đậm trải dài ở phía dưới với chính xác 6 liên kết chân trang: 「お知らせ」, 「開発記録」, 「ご意見箱」, 「アーカイブ」, 「利用規約」, 「プライバシーポリシー」. Bao gồm biểu tượng trăng khuyết và bản quyền 「© 2024 月蝕綺譚」 ở bên phải.
Bố cục di động: Trên điện thoại thông minh bên phải, hiển thị cùng một trang web đã được điều chỉnh cho di động. Thời gian trên thanh trạng thái là 9:41. Tiêu đề chứa tiêu đề 「月蝕綺譚」 và biểu tượng menu hamburger. Bên dưới đó, hiển thị phần hero tối nhỏ gọn với nhật thực và tiêu đề dọc, sau đó là chính xác 5 hình thu nhỏ ngang nhỏ. Tiếp tục với câu khẩu hiệu 「物語の続きを、いちばん近くで。」, sau đó là cùng thẻ đăng ký email hình vé, rồi thẻ tin tức đầu tiên 「月蝕綺譚 最新便」 với hình ảnh mặt trăng và nhãn NEW màu đỏ. Chế độ xem di động nên trông có thể cuộn dọc nhưng nằm gọn trong màn hình điện thoại.
Các ràng buộc: Giữ tất cả văn bản giao diện hiển thị bằng tiếng Nhật như đã chỉ định. Sử dụng kết xuất bản thiết kế UI sạch, độ trung thực cao, kiểu chữ sắc nét, đổ bóng tinh tế và không có logo hoặc hình mờ thừa. Thiết kế nên trông giống như một bản thiết kế web/ứng dụng hoàn chỉnh được tạo ra cho việc lập kế hoạch triển khai.