Bu, ürün tasarımı vitrinleri, mağaza konseptleri ve kullanıcı arayüzü (UI) taslakları için uygun, premium bir mekanik klavyeye yönelik şık bir masaüstü e-ticaret ürün sayfası oluşturur.
KeyForge adlı premium bir mekanik klavye markası için, beyaz arka plan üzerinde hafif gri ayırıcılar ve geniş boşluklarla sunulan, yüksek kaliteli bir masaüstü web sitesi taslağı şeklinde modern ve temiz bir e-ticaret ürün detay sayfası oluşturun. Düzen; üst gezinme çubuğu, sol tarafta ürün küçük resim şeridi, ortada büyük bir ürün görseli ve sağ tarafta satın alma bilgileri paneli bulunan tek bir birleşik mağaza vitrini sahnesidir. Başlıkta, en solda kalın bir logo yazısı, ardından "Keyboards", "Switches", "Keycaps", "Accessories", "Sale", "Blog" ve "Support" yazılı 7 gezinme öğesi; en sağda ise arama, hesap ve sepet için 3 simge yerleştirin; sepet simgesinin üzerinde "1" yazan küçük siyah bir bildirim rozeti olsun. Merkezde gösterilen ana ürün, açık gri bir zemin üzerinde hafif yüksek bir ön açıdan fotoğraflanmış, gümüş alüminyum kasalı, beyaz ve gri tuş takımlı, lavanta moru vurgulu tuşlara sahip ve sağ üst köşesinde gümüş bir ses düğmesi bulunan kompakt %75'lik bir mekanik klavyedir. Soldaki dikey galeri tam olarak 5 küçük resim içerir: 1 seçili ön ürün çekimi, 1 açılı klavye görünümü, 1 mekanik anahtar yakın çekimi, 1 tuş takımı doku yakın çekimi ve dairesel oynat simgeli 1 koyu renkli video küçük resmi. Sağdaki ürün paneli şunları içerir: "NEW" yazılı küçük bir rozet, büyük ve kalın puntolarla KeyForge K75 Pro ürün adı, "75% Mechanical Keyboard" alt başlığı, 4.8 puanlı 5 yıldızlı bir derecelendirme satırı ve "(126 reviews)" ibaresi, büyük ve kalın puntolarla $129.99 fiyatı, ardından yeşil bir "In Stock" durumu ve premium performans, conta montajlı tasarım, QMK/VIA desteği ve RGB hakkında iki cümlelik kısa bir açıklama. Bunun altında, ilki seçili olacak şekilde "Cherry MX Red", "Gateron Brown", "Gateron Blue" ve "TTC Gold Pink" etiketli 4 adet hap düğmeden oluşan bir "Switch Type" seçici; ilki seçili olacak şekilde "White / Purple", "Black / Gray" ve "Navy / Blue" etiketli 3 adet hap düğmeden oluşan bir "Color" seçici; "1" olarak ayarlanmış bir "Quantity" açılır menüsü; sepet simgeli "Add to Cart" yazılı büyük siyah bir birincil düğme ve kalp simgeli "Add to Wishlist" yazılı ana hatlı bir ikincil düğme ekleyin. Düğmelerin altında, küçük simgelerle 3 adet yatay hizmet vurgusu gösterin: "On orders over $99" alt metniyle "Free Shipping", "Hassle-free returns" alt metniyle "30-Day Returns" ve "Peace of mind" alt metniyle "2-Year Warranty". Alt içerik alanında, ince çizgilerle ayrılmış iki sütunlu bir bölüm oluşturun. Solda, "Overview" seçili olacak şekilde 5 öğelik dikey bir sekme listesi yerleştirin: "Specifications", "What’s in the Box", "Shipping & Returns" ve "Reviews (126)". Sekmelerin sağına, her biri basit bir çizgi simgesi, kalın başlık ve kısa açıklayıcı metin içeren, 2 satır ve 3 sütun halinde 6 özellik bloğundan oluşan yuvarlatılmış beyaz bir özellik kartı ızgarası yerleştirin: "75% Layout", "Gasket-Mounted", "QMK/VIA Support", "Hot-Swappable", "RGB Backlighting" ve "Premium Build". Bu alt alanın en sağına, tam olarak 7 maddeden oluşan bir teknik özellik listesi ekleyin: "Layout: 75% (82 Keys)", "Switch Type: Cherry MX Red", "Mounting: Gasket-Mounted", "Connectivity: USB-C (Wired)", "Backlight: RGB, South-facing", "Material: Aluminum Case" ve "Dimensions: 322 x 135 x 42 mm", artı son bir madde olarak "Weight: 1.25 kg". Rafine ve minimalist bir ürün tasarımı estetiği, gerçekçi kullanıcı arayüzü boşlukları, Inter veya SF Pro'ya benzer temiz bir sans-serif tipografi, yumuşak gölgeler, hafif yuvarlatılmış köşeler, monokrom simgeler ve şık bir startup tarzı tüketici elektroniği sunumu kullanın.
