Atmosferik bir Japon gizem hikayesi veya oyun web sitesi için duyarlı bir masaüstü ve mobil kullanıcı arayüzü taslağı oluşturur.
Amaç: 月蝕綺譚 başlıklı bir Japon gizem oyunu veya hikaye arşivi için, solda bir masaüstü tarayıcı penceresi ve sağda bir akıllı telefon ekranı içeren duyarlı bir tasarım önizlemesi şeklinde şık bir web sitesi taslağı oluşturun.
Tuval: Açık gri arka plan üzerinde 16:9 genişliğinde sunum görseli. Solda genişliğin yaklaşık %75'ini kaplayan büyük bir masaüstü tarayıcı taslağı ve sağda genişliğin yaklaşık %22'sini kaplayan uzun bir akıllı telefon taslağı yerleştirin. Hafif gölgelere sahip gerçekçi cihaz çerçeveleri kullanın.
Görsel stil: Zarif Japon edebi korku, sessiz gizem, arşiv belgeleri, ay ışığında karanlık. Fildişi kağıt, siyah mürekkep, koyu lacivert-siyah, mat gri ve tek bir güçlü vermilyon kırmızısı vurgu paleti kullanın. Serif Japon tipografisi, ince çizgiler, bilet benzeri kenarlıklar, hafif kağıt dokusu, eski el yazması görselleri ve silik hilal yörünge çizgisi grafikleri kullanın. Genel atmosfer, anlatısal bir oyun için birinci sınıf bir resmi web sitesi gibi hissettirmelidir.
Masaüstü düzeni: Koyu renkli bir üst çubuğa ve üç küçük pencere noktasına sahip bir tarayıcı penceresi gösterin. Sayfanın içinde, solda 月蝕綺譚 site başlığı, küçük bir kırmızı mühür ve tam olarak 5 yatay navigasyon öğesi içeren fildişi bir başlık kullanın: 「お知らせ」, 「開発記録」, 「ご意見箱」, 「アーカイブ」 ve 「メールで会員になる」 etiketli koyu lacivert bir buton. Altındaki ana bölüm, parlayan bir hilal/tutulma üzerinde ortalanmış dikey 「月蝕綺譚」 başlığına sahip geniş, karanlık bir ay tutulması görselidir. Üzerine eski Japon belgelerini içeren yarı saydam bir arşiv arayüz kartı yerleştirin ve bu katmanın altında tam olarak 5 küçük koleksiyon/belge kartı bulundurun. Ana görselin en altında, gece sokağı, plan benzeri bir oda, koyu renkli bir klasör veya nesne, eski el yazısı kağıtlar ve bir masa/çalışma alanı haritasını gösteren tam olarak 5 yatay küçük resim şeridi ekleyin.
Masaüstü sağ kayıt kartı: Ana görselin sağına, yarım daire çentikleri ve ince dekoratif kenarlığı olan krem rengi, bilet şeklinde büyük bir üyelik kartı yerleştirin. Kartta küçük 「入会札」 etiketi, bir damga amblemi, 「メールで会員になる」 başlığı, bir zarf simgesi, kısa açıklayıcı metin, 「メールアドレスを入力」 yer tutuculu bir e-posta giriş alanı ve sağ ok simgeli 「登録する」 etiketli kırmızı bir CTA butonu bulunur. Altına küçük gizlilik politikası metnini ekleyin.
Masaüstü alt içerik: Ana görselin altında, iki sütunlu bir bölüm oluşturun. Solda, ince dikey kırmızı bir çizgi ve küçük bir açıklayıcı paragraf ile birlikte büyük bir Japonca slogan yerleştirin: 物語の続きを、いちばん近くで。. Sağ tarafa yan yana tam olarak 3 makale kartı yerleştirin. Bu 3 kart şunlardır: 1) Ay görseli, küçük kırmızı NEW etiketi, 「大型アップデート『○○』を公開しました」 başlıklı ve 2024.05.20 tarihli 「月蝕綺譚 最新便」; 2) Defter ve kalem görseli, 「開発記録 #12:環境音の調整について」 başlıklı ve 2024.05.18 tarihli 「開発記録」; 3) Koyu renkli posta kutusu görseli, 「ご意見・ご感想をお聞かせください」 başlıklı ve 2024.05.16 tarihli 「ご意見箱」。 Her kartın ince bir kenarlığı, başlıkta küçük bir oku ve gri yer tutucu özet satırları vardır.
Masaüstü altbilgi: Alt kısımda tam olarak 6 altbilgi bağlantısı içeren koyu lacivert bir altbilgi ekleyin: 「お知らせ」, 「開発記録」, 「ご意見箱」, 「アーカイブ」, 「利用規約」, 「プライバシーポリシー」。 Sağ tarafa bir hilal simgesi ve 「© 2024 月蝕綺譚」 telif hakkı bilgisini ekleyin.
Mobil düzen: Sağdaki akıllı telefonda, aynı sitenin mobile uyarlanmış halini gösterin. Durum çubuğu saati 9:41'i göstermelidir. Başlıkta 「月蝕綺譚」 başlığı ve bir hamburger menü simgesi bulunur. Altında, tutulma görseli ve dikey başlık ile kompakt bir karanlık ana bölüm, ardından tam olarak 5 küçük yatay küçük resim gösterin. 「物語の続きを、いちばん近くで。」 sloganı, ardından aynı bilet şeklindeki e-posta kayıt kartı ve en son ay görseli ile kırmızı NEW etiketli ilk haber kartı olan 「月蝕綺譚 最新便」 ile devam edin. Mobil görünüm dikey olarak kaydırılabilir görünmeli ancak telefon ekranı içinde sınırlandırılmalıdır.
Kısıtlamalar: Belirtildiği gibi tüm görünür arayüz metinlerini Japonca tutun. Temiz, yüksek kaliteli UI taslağı oluşturma, net tipografi, hafif gölgeler kullanın ve fazladan logo veya filigran eklemeyin. Tasarım, uygulama planlaması için oluşturulmuş bitmiş bir web/uygulama taslağı gibi görünmelidir.