Bu İçerikte Yer Alan Ana Başlıklar:
• Wireframe'leri Oluştururken Dikkat Etmemiz Gerekenler
• Wireframe Yapmak İçin Kullanabileceğimiz Araçlar
Bu içerik ile; proje düzeninin önce ana yapısını sonra parçalarını oluşturmanızı sağlayan ve tasarım süreçlerimizi kolaylaştıran “wireframe”in temelde ne olduğunu ve nasıl yapıldığını öğreneceksiniz. Ayrıca wireframe yaparken dikkat etmeniz gereken önemli ipuçlarını da keşfedeceksiniz.
Userspots'tan wireframe servisi alabilir ayrıca Userspots Akademi'de online olarak devam eden; UX Eğitimi, UI Eğitimi ve Design Sprint ile UI/UX Eğitimi'ne katılarak "wireframe" çalışmasını uygulamalı olarak deneyimleyebilirsiniz.
Bir mobil uygulama projesi üzerinde çalıştığımızı düşünelim. Bu proje için kullanıcı araştırmalarınızı yaptınız, benchmark çalışmanızı tamamladınız, elde ettiğiniz verilerin analizini yaptınız ve fonksiyon listeleriniz çıktı. Şimdi tasarımınız için alternatifler üretmeye, tasarım kararları almaya hazırsınız. İşte burada devreye wireframe'ler girmeli.
Tasarım sürecinde elde ettiğiniz verilerinizi, fonksiyonlarınızı çok farklı akışlarda kullanıcıya sunabilirsiniz. Bu akışların basit, hızlı ancak anlaşılır biçimde somut görsellere dönüştürülmesinde wireframe'ler kullanılmaktadır. Kısaca wireframe'leri, üreteceğiniz tasarım alternatiflerinin eskizleri olarak tanımlayabiliriz.
Her tasarım sürecinde olduğu gibi eskizler -bizim bağlamımızda wireframe'ler- en basit haliyle ortaya çıkar ve biz tasarımımız üzerinde kararlar aldıkça, kararlarımızı test ettikçe gelişir ve en sonunda tasarımın son halini oluşturmamıza yardımcı olur.
1. En doğru tasarım akışını bulmanızı sağlar.
Wireframe'ler, tasarımın kullanıcıya en doğru şekilde nasıl aktarılacağını bulmak için yapılır. Sayfanın şeması, verilecek olan bilgilerin hiyerarşik sıralaması, sayfalar arası farklılıkların nasıl anlatılacağı wireframe'ler kullanılarak görselleştirilir ve bu görselleştirmeler oldukça hızlı ve alternatifleri olacak şekilde yapılır. Tüm bu alternatifleri, test ettiğinizde, birbirleriyle karşılaştığınızda ve itere ettiğinizde olabilecek en doğru tasarım akışını bulabilirsiniz.
2. Daha doğru iletişim kurmanızı sağlar.
Bir proje üzerinde çalışırken fikirlerinizi ekip arkadaşlarınıza, patronlarınıza, müşterilerinize sunmanız, onların geri bildirimlerini almanız ve projeyi ona göre ilerletmeniz gerekecek. Böyle durumlarda wireframe'ler, ortaya koyduğunuz tasarım fikirlerini karşı tarafa net bir şekilde anlatır.
Karşınızdaki insanlar sizinle aynı disiplinden gelmeyebilir ve terminolojik farklılıklara sahip olabilir, ancak elinizde görsel bir çıktı olacağı için iletişim daha doğru sağlanır.
3. Fikirlerinizi hızlıca test etmenizi sağlar.
Wireframe'ler, tasarımınızın ana planını oluşturur. Bu özelliği sebebiyle kullanıcının kurguladığınız yapı üzerinde nasıl hareket edeceğini, nasıl tepki vereceğini görmek için test aracı olarak kullanılabilir. Kağıtlar üzerine çizdiğiniz birkaç ana ekranı yakınınızdaki aile ve arkadaşlarınıza göstermek ve onlara temel endişelerinizi yansıtan kısa sorular sormak bile tasarımınızı hızlıca bir üst noktaya taşımanıza yardımcı olur.
4. Zamandan ve efordan tasarruf etmenizi sağlar.
Wireframe'ler üzerinde çalışırken renk ve font gibi unsurları ön planda tutmayız, dikdörtgen, daire gibi en temel şekiller kullanarak ekranlarımızı oluştururuz. Lego parçalarıyla oynamak gibi düşünebilirsiniz. Birbirine benzer dikdörtgen parçalarının yerlerini anlamlı bir şeyler inşa edene kadar değiştiririz. Bu yüzden çeşitli alternatifler üretmek, alternatifler üzerinde değişiklik yapmak kolay ve hızlıdır.
Wireframe'leri hep eskiz olarak tanımladık. Ancak eskiz kelimesi sizi yanıltmasın, aslında wireframe'ler tasarladığınız uygulamanın iskeleti. Yapıyı, kurguladığınız sistemin ilk kopyaları. Kişilerin tasarımınızla doğru etkileşime geçebilmesi için dikkat etmeniz gereken bazı şeyler var.
1. Önce deneyim!
Wireframe'leri oluştururken öncelikli olan kullanıcının bizim sunduğumuz bilgiyi nasıl bir akışta alacağı, ekranda neler göreceği, kısacası deneyimidir. Bu nedenle wireframe'leri oluştururken kullanıcının alması gereken temel bilgilere akışta sunduğumuzdan ve kullanıcının sayfa üzerinde hareket edebilmesi için gerekli olan temel bileşenleri yer verdiğimizden emin olmalıyız. Bu bileşenlere, navigasyon barı, çeşitli butonlar butonlar (geri dön, kaydet, satın al vb.), arama kutucukları örnek olarak verilebilir.
2. Stil bağımsız olmalı!
Wireframe'lerimizi oluştururken renklere, fontlara, kullanılacak görsellere takılmamak önemli. Tasarımımızın görsel dilini oluşturmak, bambaşka bir iş! Bu yüzden oldukça genel fontları kullanmalı, sayfadaki elementleri ayrıştırmak için renk olarak sadece siyah, beyaz ve gri tonlarını tercih etmeliyiz.
3. Doldurma değil, gerçek!
Hepimiz az ya da çok doldurma metinlere aşinayız, “lorem ipsum dolor sit amed” diye başlayan ve sayfalarca giden metinleri ya kullandık ya da kullanıldığını gördük. Wireframe'ler üzerinde çalışırken bu doldurma metinleri kullanmak bizim için yanıltıcı olabilir. Bunun sebebi wireframe'leri çalışırken okunabilirlik ilkelerini doldurma metinlere göre ayarlıyor olmamızdır. Gerçek metinler geldiğinde kelimeler, kelime uzunlukları ve satırlar eşleşmeyebilir ve tasarımımızda değişikliklere sebep olabilir.
Yalnız uyaralım, bahsettiğimiz gibi wireframe'ler en ilkel halinden en gelişmiş haline doğru evrilir. İlk wireframe aşamalarında doldurma metinler kullanılabilir ancak çok geçmeden yerine gerçek hallerini koymakta fayda var!
Wireframe'ler üzerinde çalışmak için bizim listelediklerimizden çok daha fazla araç var. Adobe ürünleri (illustrator, photoshop, xd) Balsamiq, Moqups, Sketch bunlardan yalnızca bazıları. Ancak biz en sık kullandığımız ve en yararlı olabilecekleri listeledik.
1. Kağıt - Kalem!
Aklımıza bir anda gelen fikirleri not etme ve kaydetme konusunda tabiki kağıttan ve kalemden daha iyisi yok! Herhangi bir kağıtta ya da defter üzerinde wireframe oluşturmak için yalnızca ekran boyutunu ifade edecek bir çerçeve çizmeniz yeterli. Sonrasında bu çerçeve içerisinde yine kareler, dikdörtgenler ve basit çizgiler kullanarak fikrinizi yansıtabilirsiniz.
2. Miro
Miro, ekipler arası çalışmaya imkan sağlayan online bir beyaz tahta uygulaması. Pandemi sürecinde evden çalıştığımız bu dönemde hepimizin eli ayağı haline gelmiş bu uygulama kendi içerisinde bir wireframe kütüphanesi de sunuyor. Bu kütüphane sayesinde isterseniz ekip arkadaşlarınızla, isterseniz bireysel çalışmayla sınırsız wireframe'ler ortaya çıkartabilirsiniz. Miro prototip desteği sunmuyor ancak kullanıcılarınızı ya da müşterilerinizi Miro’ya davet ederek oluşturduğunuz ekranlar hakkında onların fikrini almanız, ve basit testler uygulamanız da mümkün.
Minik bir dipnot: Eğer öğrenci iseniz ve henüz Miro üyeliğinizi oluşturmadıysanız edu uzantılı okul hesabınızla kaydolmanızı tavsiye ediyoruz. Böylece 1 sene boyunca Miro’yu premium olarak kullanabilirsiniz.
3. Figma
Figma, ekip arkadaşlarınızla eş zamanlı olarak çalışmanıza imkan veren web tabanlı bir tasarım programı. Figma ile wireframe'lerinizi kolayca oluşturabilir, prototipleyebilir ve sadece bir link aracılığıyla kullanıcılarınız ile tasarımlarınızı test edebilirsiniz.
Üstelik Figma kendi kütüphanesinden çeşitli wireframe kitleri de sunuyor. Eğer UX alanında yeniyseniz, daha önce hiç wireframe'ler ile çalışmadıysanız örnek kitleri indirerek inceleyebilir, üzerinde değişiklikler yaparak kendi çalışmalarınızı oluşturabilirsiniz.
Figma tam donanımlı bir tasarım aracı, tüm süreci sağlıklı olarak yaşamanızı sağlayacak birçok avantajı var. Bu nedenle yakın zamanda Figma hakkında yazdığımız rehber yazımızı okuyarak Figma bilginizi derinleştirmenizi tavsiye ediyoruz.
4. Wireframe.cc
Wireframe.cc, adından da anlaşılabileceği gibi wireframe yapmak için özelleşmiş web tabanlı bir program. Uygulamaya girdiğinizde sizi ilk olarak grid yapısı karşılıyor ve bu grid yapısı üzerine çizmeye başladığınızda çizebileceğiniz şekilleri, kullanabileceğiniz renkleri size sunmaya başlıyor.
Uygulamanın en güzel özelliği herhangi bir kayıt sürecinden geçmeden wireframe'lerinizi çizmeye başlayabilmeniz ve yine bir link aracılığıyla farklı kişilerle paylaşabilmeniz.
Yalnız uyarmakta fayda var, ücretsiz versiyonda yalnızca tek sayfalık bir wireframe oluşturabiliyorsunuz.
5. Invision Freehand
Invision Freehand, Invision ürünlerine dahil web tabanlı bir beyaz tahta uygulaması. Freehand, ekip arkadaşlarınızla beraber çalışmaya olanak sağlaması ve beyaz tahta uygulaması olarak iş yapması yönünden Miro ile benzer.
Uygulama içerisinde çizdiğiniz wireframe'ler, bilgisayar çıktılarındansa el çizimine daha çok benziyor. Bunun sebebi programın gerçekten serbest şekilde çalışıyor olması, kalem aracını alarak istediğiniz şekli çizebiliyor, istediğiniz yazıyı yazabiliyorsunuz. Ancak tabii ki, temel şekilleri ve temel fontları da içerisinde barındırıyor.
Özetlemek Gerekirse
Wireframe'ler:
• Tasarımınızın iskeletini ve kullanıcının etkileşimini planladığınız eskizlerdir.
• Basit halde başlar ve gelişerek ilerler.
• Hızlı ortaya çıkar.
• Zaman tasarrufu ve iletişim kolaylığı sağlar.
• Renk, font, illüstrasyonlar gibi görsel elementler geri planda bırakılarak hazırlanır.
• Kullanıcı testlerinde kullanılabilir durumdadırlar.
• Çok çeşitli araçlar ile hazırlanabilirler.
-min.jpg)
