Ücretsiz Wireframing Araçları: Hangisi Hangi İşte Yürür
Wireframe'in işi güzel görünmek değil, bir ekranın neyi nereye koyduğunu tartışmaya açmak. Ücretsiz araçların hepsi bunu yapacak kadar iyi. Ayrıldıkları yer aracın kendisi değil, ücretsiz planın nerede bittiği.
Wireframe neyi çözer, mockup neyi
Wireframe bir ekranın iskeletidir: hangi bilgi nerede duruyor, kullanıcı hangi düğmeyle nereye gidiyor. Renk yok, tipografi yok, gerçek görsel yok. Amaç tartışmayı yerleşim ve akış üzerinde tutmak. Müşteriye renkli bir ekran gösterdiğiniz anda konuşma maviye kayar ve yerleşimdeki asıl hatayı kimse fark etmez.
Mockup bir sonraki duraktır, detay oraya girer. İkisini aynı dosyada karıştırmak wireframe'in tek avantajını, ucuz ve atılabilir olmasını, öldürür. Wireframe'i kalıcı bir tasarım varlığı gibi saklamam; kararı verdirdikten sonra işi biter, geliştirme boyunca güncel tutmaya çalışmak boşa emektir.
"Ücretsiz" listelerin atladığı yer
Bu listelerdeki araçların çoğu ücretsiz değil, ücretsiz planı olan araçlar. Önemli olan sınırın nereye konduğu. Bulut tabanlı araçlar genelde proje sayısını ya da bir sayfadaki nesne sayısını kısar.
Sorun şurada: wireframe en çok tek ekranda değil, bir akışın tamamı yan yana dizildiğinde işe yarar. Tek bir kayıt olma akışı rahat on ekran tutar; hata durumlarını, boş listeleri ve yükleniyor ekranlarını eklediğinizde sayı ikiye katlanır. Yani ücretsiz planın sınırı, tam da aracın faydalı olmaya başladığı noktada devreye giriyor. Bunu bilerek seçim yapın.
Masaüstünde çalışan ve dosyayı diskinizde tutan araçların böyle bir sınırı yoktur, buna karşılık iş birliği zayıftır. Bulut araçları tam tersi. Kararı belirleyen şey özellik listesi değil, tek başınıza mı yoksa müşteriyle aynı ekrana bakarak mı çizdiğiniz.
Araçlar
Pencil Project
Pencil Project açık kaynak bir masaüstü aracı. Windows ve macOS'ta çalışır, hazır arayüz elemanı kütüphaneleri gelir, çıktıyı PNG, SVG ya da PDF olarak alırsınız. Proje sayısında sınır yok, dosya sizin diskinizde. Buna karşılık geliştirmesi yıllardır fiilen durmuş durumda, dolayısıyla yeni işletim sistemi sürümlerinde kurulum sıkıntısı çıkabiliyor. Tek başına çalışan biri için hâlâ en pürüzsüz ücretsiz seçenek.
Moqups
Moqups tarayıcıda çalışır, bir şey kurmanız gerekmez, bağlantıyı gönderip müşteriden aynı ekran üzerinde yorum alırsınız. Ücretsiz planı deneme ve küçük işler için yeterli, orta boy bir akışın tamamını tek projeye sığdırmaya çalıştığınızda sınıra çarparsınız. Ekip içinde birkaç ekranı hızlıca tartışmak için iyi, otuz ekranlık bir uygulamayı belgelemek için değil.
wireframe.cc
wireframe.cc bu listedeki en sade araç ve sadeliği kusur değil, tasarım kararı. Kutu çizersiniz, ne tür bir eleman olduğunu seçersiniz, biter. Hazırlanan taslağı bağlantıyla paylaşırsınız. Toplantı sırasında akla gelen fikri otuz saniyede kabaca çizmek için elimin gittiği araç bu.
MockFlow
MockFlow daha kurumsal tarafta duruyor: masaüstü, tablet ve telefon şablonları, yorum akışı, sayfalar arası bağlantı. Ücretsiz planı dar ama araç, wireframe'in ötesine geçip basit bir tıklanabilir prototip üretmek istediğinizde tıkanmıyor.
Google Çizimler
Wireframe aracı değil, ama Google Çizimler ile çizilmiş taslakları gerçek projelerde çokça gördüm. Avantajı tek: karşı taraf zaten Google hesabı kullanıyor, ekstra kayıt yok. Dezavantajı hizalama ve arayüz elemanı desteğinin yokluğu, her kutuyu elle çizersiniz. Müşteri başka hiçbir araca girmeye yanaşmıyorsa kabul edilebilir bir taviz.
Çizerken
Araç seçimi wireframe'in kalitesini belirlemez, aşağıdakiler belirler.
- Gerçek metin uzunluğuyla çalışın. "Lorem ipsum" ile çizilen her başlık tek satıra sığar, gerçek ürün adları üç satıra taşar ve yerleşim orada bozulur.
- Ekranı değil akışı çizin. Tek bir ekranın doğru görünmesi bir şey ifade etmez, önemli olan ondan önceki ve sonraki adımın tutması.
- Boş ve hatalı durumları da koyun. Bir listenin dolu hali kolay, sıfır kayıtlı hali gerçek tasarım kararıdır.
- Griden çıkmayın. Renk girdiği anda geri bildirim renk hakkında gelmeye başlar.
Bir de vazgeçme eşiği koyun. Wireframe iki üç turda kararı verdirmiyorsa sorun taslakta değil, tartışılan gereksinimdedir; daha fazla kutu çizmek onu çözmez.
Kaynaklar