UX/UI brief nasıl hazırlanır?
UX/UI brief, tasarım ekibinin doğru kararları üretebilmesi için hedefi, kullanıcıyı, zorunlu ekranları ve başarı ölçütünü yazıya döken karar belgesidir. Beğendiğiniz renklerin koleksiyonu veya moodboard değildir. Brief zayıfsa her ekran tartışmaya açılır ve biraz daha modern olsun gibi uygulanamaz geri bildirimler artar. Hacer Topay gibi kişisel marka ve lead odaklı işlerde birincil hedef form tamamlamaktır. Mousavi Realty gibi emlak keşif işlerinde birincil hedef doğru ilana hızlı ulaşmaktır. Aynı şablonu her projeye yapıştırmak brief sayılmaz. Netlik uzunluktan önemlidir. On sayfa şart değildir. Hedef, kitle, ekran listesi ve onay mekanizması yazıldığında tasarım takvimi korunur. Brief’te birincil hedef ve tek karar verici yazıldığında revizyon turu kısalır. Moodboard ilham verir, brief karar verir. Tasarım sürecinde en pahalı gecikme belirsiz hedeftir. Karar belgesi olmadan piksel tartışması erken başlar.
Brief nedir, moodboard değildir
Brief’in işi karar vermektir. Moodboard ilham verir ama öncelik sırası koymaz. Hangi ekranın önce tasarlanacağı, hangi CTA’nın birincil olduğu ve hangi içeriğin taşınacağı brief’te yazılmalıdır. Siz bilirsiniz demek brief değildir. Sorumluluğu tamamen dışarı atmak sonuçtan memnun kalmama riskini artırır. Karar belgesi olmayan proje her turda sıfırdan konuşulur.
İyi brief kısa olabilir. Hacer Topay ve Mousavi Realty işlerinde odak farkı ilk paragrafta görünür: biri lead CTA’sı, diğeri ilan keşfi. Bu fark menü sırasını, ana sayfa hiyerarşisini ve mobil önceliği değiştirir. Brief’i tek seferlik dosya sanmayın. Wireframe sonrası netleşen kısıtları güncelleyin. Versiyon tarihi koymak karışıklığı önler.
Rakip analizi derinlemesine olmak zorunda değildir. Üç siteyi şunu iyi yapıyor, şunu istemiyoruz diye notlamak tasarım yönünü hızlandırır. On sayfa rakip raporu brief değil, araştırma projesidir. Anti-referans da değerlidir: şu kalabalık ana sayfayı istemiyoruz cümlesi sınır çizer. Anti-referans listesi istemediğiniz arayüzü netleştirir.
Brief ile moodboard’u aynı dosyada karıştırmayın. Moodboard görsel yön verir, brief hangi ekranın neden önce geleceğini söyler. Tasarım ekibi her ikisine de ihtiyaç duyar ama rolleri farklıdır. Brief onaylandıktan sonra moodboard referans olarak kullanılmalı, karar yerine geçmemelidir.
İş hedefi ve başarı ölçütü
İlk bölüme iş hedefini yazın. Daha güzel görünsün hedef değildir. Nitelikli teklif formunu artırmak, destek çağrılarını azaltmak, ilan filtreleriyle doğru mülke ulaşmayı hızlandırmak ölçülebilir hedeflerdir. Sayı veremiyorsanız yön verin: artırmak, azaltmak, hızlandırmak. Belirsiz hedef revizyon turunu uzatır.
Başarıyı nasıl ölçeceğinizi ekleyin. Form sayısı, tamamlanan kayıt, bounce oranı veya görev tamamlama süresi. Ölçüt yoksa tasarım tartışması zevk yarışına döner. Mevcut metrikleriniz varsa paylaşın. Yoksa yayın sonrası neyi izleyeceğinizi birlikte seçin. Ölçüt yazılı değilse proje bittiğinde tartışma kişisel tercihe kayar.
Birincil ve ikincil hedefi ayırın. Her ekranda iki hedefi aynı ağırlıkta kovalamak arayüzü kalabalıklaştırır. Mousavi Realty’de keşif, Hacer Topay’da form önceliklidir. Brief’te öncelik sırası yazılmalıdır. Kapsam dışı hedefleri de not edin. Bu fazda blog yok, mobil uygulama yok gibi cümleler sınır çizer.
Geç öğrenilen marka kısıtı pahalı revizyon demektir. Hedef bölümüne mevcut durumu da ekleyin: bugün aylık kaç form geliyor, hangi sayfadan çıkış yüksek. Başlangıç verisi olmasa bile hedef yönü yazılmalıdır. Wireframe onayından sonra birincil hedefi değiştirmek maliyeti katlar.
- Birincil iş hedefini tek cümleyle yazın
- Başarı metriğini sayı veya oran olarak tanımlayın
- Mevcut durumu varsa kısaca paylaşın
- Kapsam dışı hedefleri ayrıca not edin
Kullanıcı, bağlam ve kısıtlar
Kim kullanacak? İlk kez mi geliyor, uzman mı? Mobilde mi, ofis bilgisayarında mı? Acil bir işlem mi yapıyor, araştırma mı? Bu sorular bilgi yoğunluğunu ve CTA dilini değiştirir. Emlak sitesinde filtre ağırlığı, kişisel marka sitesinde hikâye anlatımı farklıdır. Kullanıcı profili tek paragraf bile olsa yazılmalıdır.
Kısıtları gizlemeyin. Marka renkleri sabit mi, erişilebilirlik beklentisi var mı, hukuki uyarı zorunlu mu, mevcut CMS bileşenleriyle mi çalışılacak? Geç öğrenilen kısıt pahalı revizyon demektir. Logo kullanım kılavuzu varsa ekleyin. Yasal metin alanı formun yanında sabit yer kaplıyorsa layout buna göre kurulmalıdır.
Rakip veya referans siteleri aynısını yapın diye değil, şu akışı seviyoruz veya şunu istemiyoruz diye işaretleyin. Üç referans ve bir anti-referans çoğu zaman yeterlidir. Cihaz ve bağlam notu ekleyin. Saha çalışanı tablet kullanıyorsa buton boyutu ve alan boşluğu farklı planlanır.
Mevcut analitik ekran görüntüsü brief’i güçlendirir. Hangi sayfadan çıkış yüksek, form hangi adımda terk ediliyor gibi veriler tasarım kararını destekler. Veri yoksa kullanıcı senaryosu yazın: sabah metroda ilan arayan kullanıcı, akşam masaüstünde form dolduran danışman gibi.
Zorunlu ekranlar ve kullanıcı akışları
Tasarlanacak ekranları listeleyin. Ana sayfa, hizmet, form, teşekkür, 404, boş durum, hata durumu gibi. Özel yazılımda rol bazlı panelleri ayrı yazın. Admin ile son kullanıcı aynı ekran değildir. Eksik ekran listesi teslimde sürpriz üretir. Landing page ayrı bir ekran olarak listelenmelidir.
Kritik akışı adım adım çıkarın. Örnek: reklam, landing, form, teşekkür, e-posta. Veya ilan listesi, filtre, detay, iletişim. Her adımda kullanıcının aklındaki soruyu not edin. Bu notlar mikro metinleri besler. Burada ne olacak boşluğu azalır. Hacer Topay akışında form alan sayısı her adımda sorgulanmalıdır.
İçerik örnekleri verin. Gerçek başlık uzunlukları layout’u değiştirir. Lorem ipsum ile onaylanan kart, gerçek metinde bozulabilir. En uzun hizmet başlığını brief’e ekleyin. Mousavi Realty brief’inde gerçek ilan başlığı uzunluğu kart yüksekliğini belirler.
Durum ekranlarını unutmayın: yükleme, boş liste, arama sonucu yok, form hatası, başarı mesajı. Yalnızca mutlu yol çizilirse teslimde eksik kalır. Durum ekranları unutulursa teslimde sürpriz çıkar. Her kritik akış için en az bir hata senaryosu yazın.
- Ekran envanteri çıkarın
- Kritik bir ila iki kullanıcı akışını adımlaştırın
- Boş, hata ve başarı durumlarını unutmayın
- Gerçekçi içerik örnekleri ekleyin
Marka, ton ve görsel sınırlar
Logo, renk, font ve görsel stil varsa paylaşın. Yoksa sıfatları örneklerle somutlaştırın. Sıfatlar tek başına yetmez. İki referans ve bir anti-referans çoğu zaman yeterlidir. Renk kodları ve font dosyaları gecikmeyi önler. Marka dosyası geç gelirse wireframe aşaması uzar.
Ton of voice’u kısa örnek cümlelerle sabitleyin. Buton metinleri, hata mesajları ve boş durumlar aynı dili konuşmalıdır. Resmi hitap mı, daha sade bir dil mi? Siz mi sen mi kullanılacak net olsun. Kararı brief’te verin. Ton of voice örnek cümleyle sabitlenmezse buton metinleri dağılır.
Erişilebilirlik beklentisini yazın. Kontrast, klavye ile gezinme, form etiketleri. Bunlar sonra bakarız işi değildir. Sonradan eklemek bileşenleri yeniden açtırır. Görsel stil sınırları koyun. Stok fotoğraf, illüstrasyon veya ürün fotoğrafı seçimini netleştirin.
Animasyon tercihini de yazın. Form gönderimi ve menü açılışı gibi kritik anlarda hafif geri bildirim yeterlidir. Aşırı hareket dikkat dağıtır. Marka tonu ile görsel stil brief’te aynı bölümde karışmasın, ayrı alt başlıklar okunabilirliği artırır. Görsel referans dosyasını brief ekinde paylaşmak renk tartışmasını kısaltır.
Karar süreci ve revizyon kuralları
Kim onaylayacak? Tek kişi mi, komite mi? Yorumlar nasıl toplanacak? Brief’e karar mekanizmasını eklemek tasarım takvimini korur. Herkese açık Figma linki kaos üretebilir. Konsolide geri bildirim daha sağlıklıdır. Tek sözcü belirleyin. Tek sözcü olmayan projede Figma yorumları takvimi uzatır.
Revizyon turlarını ve kilit noktalarını tanımlayın. Wireframe sonrası büyük yapı değişikliği ile renk ince ayarını ayırın. Kaç tur revizyon dahil olduğunu yazın. Teslim formatını belirtin: Figma linki, prototype, tasarım token’ları, export kuralları. Belirsiz teslim formatı geliştirme aşamasında sürtünme yaratır.
Geliştirme ekibi erken dahil olacaksa brief’te not edin. Tasarım geliştirme boşluğu pahalıdır. Toplantı ritmini yazın. Haftalık senkron mu, milestone bazlı mı? Paydaş listesini ekleyin. Pazarlama, satış, hukuk ve teknik ekip farklı öncelik getirir.
Erken paydaş görüşü bunu hiç düşünmemiştik cümlesini azaltır. Revizyon kuralı yazılı değilse her tur yeni kapsam gibi davranılır. Wireframe kilidinden sonra büyük yerleşim değişikliğini yeni tur sayın. Renk ve tipografi ince ayarı ayrı turda toplayın.
- Tek karar verici belirleyin
- Geri bildirimi tur bazında toplayın
- Wireframe ve UI kilitlerini ayırın
- Teslim formatını yazın
Brief maddesi ve proje odağı karşılaştırması
| Brief maddesi | Hacer Topay odaklı örnek | Mousavi Realty odaklı örnek | Eksik bırakılırsa risk |
|---|---|---|---|
| Birincil hedef | Nitelikli iletişim formu | İlan keşfi ve filtreyle doğru mülke ulaşma | Ana sayfa kalabalıklaşır |
| Kritik akış | Landing → form → teşekkür | Liste → filtre → detay → iletişim | Yanlış ekranlar önce tasarlanır |
| Başarı ölçütü | Form gönderimi | Detay sayfası ve iletişim tıklaması | Tasarım tartışması zevke döner |
| İçerik örneği | Gerçek hizmet başlığı uzunluğu | Gerçek ilan başlığı ve filtre etiketleri | Kart layout’u yayında bozulur |
| Onay mekanizması | Tek sözcü + tur limiti | Tek sözcü + tur limiti | Revizyon takvimi uzar |
Sık sorulanlar
UX/UI brief kaç sayfa olmalı?
Sayfa sayısı değil netlik önemlidir. Hedef, kitle, ekran listesi, kritik akış, kısıtlar ve onay mekanizması yazılıysa kısa brief yeterlidir. On sayfalık belirsiz metin revizyonu azaltmaz. Kısa ve net brief, uzun ve belirsiz metinden iyidir. Her bölüm tek bir karar sorusuna cevap vermelidir. Gereksiz rakip raporu brief’i şişirir.
Moodboard brief yerine geçer mi?
Geçmez. Moodboard görsel yön verir. Brief karar verir. CTA önceliği, ekran envanteri ve başarı ölçütü moodboard’da yoktur. İkisini birlikte kullanın, birini diğerinin yerine koymayın. Moodboard onaylandı diye brief tamamlandı sanmayın. Karar belgesi ayrı dosyada kalmalı ve wireframe öncesinde mutlaka onaylanmalıdır.
Brief olmadan tasarım başlar mı?
Başlayabilir ama maliyet artar. Her ekran yeniden tartışılır. En azından birincil hedef, zorunlu ekranlar ve tek karar verici yazılmalıdır. Yarım taslak varsa onu birlikte büyütmek mümkündür. En az hedef, ekran listesi ve karar verici yazılmalıdır. Wireframe onayından önce bu üç madde eksikse revizyon maliyeti yükselir.
Hacer Topay tipinde brief’te ne öne çıkmalı?
Lead odaklı işlerde form alanları, teşekkür sonrası iletişim vaadi ve mobil CTA görünürlüğü öne çıkar. Hikâye anlatımı ikincildir. Birincil hedef form tamamlamaksa ana sayfa buna hizmet etmelidir. Gereksiz menü maddeleri CTA’yı gölgelememelidir. Form alan sayısını minimumda tutmak mobil dönüşümü korur.
Mousavi Realty tipinde brief’te ne öne çıkmalı?
Keşif odaklı emlak işlerinde filtre, liste ve detay akışı öne çıkar. Kullanıcının doğru mülke ulaşma hızı başarı ölçütüdür. Form, detay sonrası ikincil adım olabilir. Filtre etiketlerinin gerçek dilini brief’e ekleyin. Filtre dilini gerçek ilan etiketleriyle brief’e ekleyin. Harita ve liste görünümü önceliği yazılmalıdır.
Revizyon turu nasıl sınırlanır?
Wireframe kilidi ile UI kilidini ayırın. Yapı onaylandıktan sonra büyük yerleşim değişikliğini yeni tur sayın. Tek sözcü konsolide geri bildirim getirsin. Sınırsız canlı Figma yorumu takvimi uzatır. Wireframe kilidinden sonra büyük yerleşim değişikliğini yeni tur sayın. Tur sayısı brief’te yazılı olmalıdır.
Uygulanabilir brief için minimum set
Uygulanabilir bir UX/UI brief’te birincil hedef, başarı ölçütü, kullanıcı bağlamı, ekran envanteri, kritik akış, marka sınırları ve onay mekanizması bulunur. Hacer Topay ile Mousavi Realty örnekleri, aynı brief şablonunun farklı odaklarla doldurulması gerektiğini gösterir. Lead ve keşif projelerinde menü sırası bile farklılaşır.
ovien tasarım işlerinde brief’i birlikte de netleştirebilir. Elinizde yarım taslak varsa onu büyütürüz. Amaç süslü doküman değil, uygulanabilir karardır. İyi brief, daha az sürtünmeli üretim demektir. Planı yazılı tutmak yayın sonrası panik müdahalesini azaltır. Hacer Topay ve Mousavi Realty farkı, brief’in ilk paragrafında görünmelidir.