Wireframe Nasıl Hazırlanır? Sadakat Seviyesi ve Araç Seçimi
Wireframe, bir ekranın renk ve tipografi kararları verilmeden önceki iskeleti. İşe yaraması için tek şart var: hangi detayın bilerek dışarıda bırakıldığı belli olsun. Aşağıda sadakat seviyeleri, hazırlama sırası ve ekran sayısının nerede kontrolden çıktığı var.
Wireframe hangi soruyu cevaplar
Bir wireframe yerleşim ve öncelik sorusunu cevaplar. Sayfada ilk ne görünüyor, kullanıcı bir sonraki adıma hangi düğmeyle gidiyor, hangi bilgi ekranın altına düşmeyi göze alacak kadar ikincil. Logo, navigasyon, arama alanı, metin blokları, düğmeler ve medya yer tutucuları bu iskelette birer kutu olarak durur; kutunun içindeki yazı tipi tartışması bu aşamada gürültüdür ve tartışmayı asıl konudan uzaklaştırır.
Üç sadakat seviyesi, iki gerçek karar
Kâğıt üzerindeki kabataslak çizim en ucuzu. On dakikada beş alternatif çıkarır, dördünü atarsınız; atmanın maliyeti sıfır olduğu için de gerçekten atarsınız.
Dijital ama renksiz orta seviye, ekiple ve müşteriyle konuşurken kullanılan asıl seviyedir. İçerik hiyerarşisi görünür hale gelir, geri bildirim yerleşime odaklanır.
Yüksek sadakatli wireframe'i ayrı bir aşama olarak çizmem. Oraya geldiğinizde maketin kendisi kadar emek isteyen bir HTML iskeleti kurulabiliyor, üstelik gerçek metinle ve gerçek taşma davranışıyla. Uzun bir ürün adının iki satıra düşüp kartı bozmasını statik maket saklar, tarayıcı saklamaz.
Hazırlama sırası
Adımların hiçbiri tek başına uzun sürmez. Uzun süren tek şey, atlanan adımın üç hafta sonra geri gelmesidir.
- Kimin için çizdiğinizi ve hangi somut sorunu çözdüğünüzü yazın. Kullanıcı araştırması yöntemleri bu adımı tahmin olmaktan çıkarır.
- Ekranın taşıması gereken işleri listeleyin, sonra listeyi ikiye bölün: bu olmadan iş yürümez, bu iyi olur. İkinci grup wireframe'e girmez.
- Akışı çizin. Hangi ekrandan, hangi eylemle, nereye. Hata ve boş durum ekranlarını da akışa koyun; sonradan eklenen boş durum her zaman kötü konumlanır.
- Kâğıtta eskiz yapın. Bir ekran için tek çizim değil, üç çizim.
- Seçtiğiniz çizimi dijitale aktarın ve tekrar eden parçaları bileşene çevirin.
- Gösterin, izleyin, düzeltin. Sunmak yerine küçük bir görev verip sessiz kalmak daha çok şey söyler.
Akış sayısı ekranı çarparak büyütür
Altı akışınız var ve her birini üç breakpoint'te çizmeye karar verdiniz: elinizde on sekiz ekran var. Navigasyonda tek bir değişiklik on sekiz yerde güncellenmek ister. Wireframe setlerinin bakımsız kalıp gerçeği yansıtmaz hale gelmesi genelde tam burada başlar, çünkü güncelleme maliyeti bir eşiği geçtiği anda ekip çizimi değil kodu doğru kabul etmeye başlar.
Çözüm breakpoint sayısını azaltmak değil, ayrı çizim gerektiren yeri ayırmak. Çoğu arayüzde düzen yalnızca bir noktada gerçekten değişir, örneğin yan menünün alt bara dönüştüğü yerde. Kalan varyantlar aynı çizimin dar hali; onlar için ekran açmak yerine çizimin üstüne not düşün. Tekrar eden başlık, kart ve form parçalarını bileşen olarak tanımlarsanız on sekiz ekranın güncellenmesi tek bir düzenlemeye iner.
Araç seçimi
Araç, sadakat seviyesine göre değişir. Orta seviyede Figma ekip için makul varsayılan: bileşen kütüphanesi yukarıdaki çarpım sorununu doğrudan hafifletir. Miro akışla eskizi aynı tahtada tutmakta iyi, tartışma toplantısı için uygun. Lucidchart akış şemasında güçlüdür, ekran çiziminde değil. Mockflow hazır bileşen setiyle hızlı başlatır. Balsamiq'in kasten elde çizilmiş görünen stili ise hâlâ bir işe yarıyor: izleyici renk ve font yorumu yapamadığı için yerleşimi konuşuyor.
Wireframe ne zaman biter
Toplantıda gelen sorular yerleşimle ilgili olmaktan çıkıp içerikle ilgili olmaya başladığında. "Bu düğme neden burada" sorusu bittiyse ve yerini "bu metinde ne yazacak" sorusu aldıysa iskelet işini görmüştür. O noktadan sonra wireframe üzerinde çalışmaya devam etmek, arayüzü tarayıcıda görmeyi geciktirmekten başka bir şey yapmaz.
Kaynak