Bir ekran görüntüsü, uzun bir tasarım açıklamasını birkaç saniyede anlaşılır hale getirebilir. Fakat görüntü tek başına bütün davranışı anlatmaz. Açılır menünün nasıl kapanacağı, klavye odağının nereye gideceği veya dar ekranda düzenin nasıl değişeceği görünmeyebilir. Codex’e görsel referans verirken bu boşlukları işin amacına göre tamamlamak gerekir.
Görselde neyin örnek olduğunu belirtin
Referans olarak beğendiğiniz bir forum mesajı görüntüsünü düşünün. İstediğiniz şey soldaki yazar sütunu ve sağdaki okuma alanı olabilir; renkleri, kullanıcı rozetlerini veya bütün araç düğmelerini kopyalamak istemeyebilirsiniz. Promptta bu ayrımı belirtmek, görselin yanlış yorumlanmasını azaltır.
Bir blog için şöyle tarif edebilirsiniz: “Yazar bilgisini dar bir yan sütunda, makale metnini geniş ana alanda göster. Mevcut mor ve sarı tema renkleri, Poppins yazı tipi ve içerik korunmalı.” Böylece referans yerleşime yön verirken proje kimliği kaybolmaz. Başka platformlarda görünen fakat sitenizde bulunmayan işlevler de gereksiz yere eklenmez.
Ekran görüntüsünün hangi genişlikte alındığını biliyorsanız paylaşın. Bilmediğiniz durumda bunu tahmin edilmiş bir ölçüye dönüştürmeyin. Önceliği hiyerarşi, hizalama ve boşluk ilişkileri gibi daha sağlam görsel ipuçlarına verin. Kesin piksel eşleşmesi gerçekten gerekiyorsa uygun referans ölçüleri ayrıca belirlenmelidir.
İlk uygulamayı gözlenebilir ölçütlere bağlayın
“Daha estetik” yerine kontrol edilebilir ayrıntılar seçin: yazar sütunu metni sıkıştırmasın, başlık iki kenardan tutarlı boşluk alsın, makale görseli kapsayıcıyı aşmasın ve araç ikonları sağ üstte kalsın. Bu ölçütler hem uygulamayı hem sonraki geri bildirimi kolaylaştırır.
Eklediğim görüntüdeki iki sütunlu okuma düzenini mevcut yazı sayfasına uyarla. Yazar alanı solda, makale sağda olsun; içerik ve mevcut tema renkleri korunsun. Dar ekranda yazar bilgisi metnin üstüne geçsin. Olmayan sosyal işlevler ekleme. Masaüstü ve mobil görünümü tarayıcıda inceleyip taşma ve okunabilirliği kontrol et.
Resmî OpenAI arayüz kullanım örneği de görsel referansları mevcut tasarım sistemiyle birleştirerek tarayıcıda karşılaştırmayı ele alır. Buradaki kritik nokta, ilk kod çıktısını son sonuç kabul etmemektir. Gerçek içerik uzunluğu, referansta bulunmayan durumları ortaya çıkarabilir.
Görsel değişikliğin ortak bir bileşene uygulanması halinde yalnızca referans sayfayı kontrol etmeyin. Aynı başlık bileşenini kullanan kategori veya arama ekranı farklı uzunluklarla çalışabilir. Hangi ekranların etkilendiğini kısa bir listeyle belirlemek, tasarımın tutarlılığını korur. Bir yerde hoş görünen boşluğun başka yerde gereksiz büyümesi gibi sorunlar, bu karşılaştırmada genellikle daha kolay fark edilir ve dar bir düzeltmeyle giderilebilir.
Kenar durumlarını gerçek içerikle deneyin
Kısa bir başlıkla iyi görünen düzen, uzun bir Türkçe başlıkta bozulabilir. Uzun kategori adı, görselsiz makale veya çok satırlı alıntı gibi örnekleri kontrol edin. Yalnızca referansa benzeyen tek bir içerikle doğrulama yapmak, tasarımın günlük kullanımını yeterince göstermez.
Geri bildirimi ekran üzerinde konumlandırın. “Sağ üstteki ikonlar başlıkla aynı hizada olmalı” ifadesi, genel bir memnuniyetsizlikten çok daha uygulanabilirdir. Her turda tek veya birkaç ilişkili ayrıntıyı düzeltmek, tasarımın yönünü takip etmeyi kolaylaştırır.
Son kontrolü etkileşimle tamamlayın: menüyü açın, arama alanını kullanın, temayı değiştirin ve sayfayı daraltın. Görsel benzerlik ile kullanılabilirlik birlikte değerlendirilmelidir. Böylece referans görüntü, yalnızca güzel duran bir şablona değil, sitenin gerçek içeriğini taşıyan çalışan bir arayüze dönüşür.
Kaynak: Duyarlı arayüz tasarımları oluşturma.
