Prototipleme ve Wireframe Oluşturma

Prototipleme ve wireframe oluşturmak, arayüz tasarımının temel süreçlerindendir. Bir ürünün pratikte nasıl görüneceğini ve işleyişinin nasıl olacağı hakkında fikir sahibi olmamızı sağlayan süreçtir.

Prototip Nedir?

Tasarım sürecinin erken aşamasında hazırlanan prototipler, ürünün tamamen geliştirilmeden önce pratikte test edilebilmesi ve deneyimlenmesi için oldukça önemli bir süreçtir.

Nihai ürünün estetik, teknik ve fiziksel özellikleri ile işlevselliğini test edebilmenizin en pratik yolu prototipler oluşturmak ve bunu son kullanıcılara test ettirmektir.

Kavram Kanıtı: Prototip, fikrin ya da kavramın uygulanabilirliğini görmek için kullanılır. Özellikle yenilikçi denemelerin yapılacağı projelerde fikirlerin teoride göründüğü gibi olup olmadığını pratikte test etmenin tek yolu prototiplemedir. Kullanıcıların etkileşimleri bu şekilde ölçülebilir olur.

Geri Bildirimlerin Alınması ve İyileştirmeler: Kullanıcılarla henüz proje süreci bitmeden buluşmanın en iyi ve maliyetsiz yolu prototip hazırlamaktır. Kullanıcının deneyimlerini ölçerek ve geri bildirimlerini alarak projenizi daha eksiksiz ve hatasız hale getirebilir, kullanıcı deneyimini (UX) artırabilirsiniz.

Disiplinlerarası İşbirliği: Tasarım, mühendislik ve pazarlama/üretim gibi farklı alanlarda çalışan kişilerin işbirliği içinde çalışmasını ve ürünü ortak olarak çıkarmayı kolaylaştırır.

Prototipleme Nedir?

Prototipleme; bir ürünün işlevsel bir modelini hazırlama sürecidir. Yapılan tasarımın nasıl görüneceğini ve etkileşiml öğelerin nasıl çalışacağını öngörmenin en pratik ve maliyetsiz yönüdür.

Düşük detaylı prototipleme ve yüksek detaylı prototipleme olarak ikiye ayırabiliriz.

Düşük Detaylı Prototipleme: kağıt üzerine ya da dijital ekranlara çizilen basit yapılardan bahsedebiliriz. Arayüzün düzenini ve konumlandırmasını bu adımda yapabilirsiniz.

Yüksek Detaylı Prototipleme: daha gelişmiş araç ve yöntemleri kullanarak tasarımı son çıktıya en yakın şekilde tasarlamak, işlevsel hale getirmek, kullanılacak renk, font, komponent gibi materyalleri belirlemek ile tanımlanabilecek süreçtir.

Prototipleme Araçları

Önceki yazılarımızda da detaylandırdığımız üzere prototipleme için birçok araç var. İlgili yazıya buradan ulaşabilirsiniz. İlgili uygulamalardan bazıları;

• Adobe XD
• Figma
• Sketch
• Invision
• Axure RP

Wireframe Nedir?

Web sitesi, mobil uygulama gibi dijital arayüzlerin iskeletsel çerçevesini basit görsel kılavuza wireframe denir. Ana hatlarıyla tasarımın düzenini ve içereceği elementlerin yerleşimlerini gösterir. Bu aşamada estetik unsurlar dikkate alınmaz.

• Yapı ve Düzen Belirleme: sayfanın temel yapısını ve içeriğin hiyerarşisini belirlemek için bu adımdan faydalanılır. Bir web sitesinde başlık, ana navigasyon çubuğu, içerik alanları ve alt bilgilerin nerede yer alacağı gibi temel sorular bu adımda cevaplandırılır.
• İletişimi Kolaylaştırır: Wireframing, projenin tüm paydaşarına hitap edebilecek basitlikte olduğu için iletişimi hızlandırır ve kolaylaştırır. Böylece henüz kompleksleşmeden birçok hatanın ve sorunun önüne geçebilir, hedefe yönelik tasarımları hazırlayabilirsiniz.
• Odaklanmayı Kolaylaştırır: İşlevsel yönlere odaklanmayı sağlar. Wireframe olmayan projelerin başlarında detaylarda boğulmanız muhtemelken wireframe süreci geçirmiş bir projede estetik detaylardan önce UX gereksinimlerini tespit edebilir ve bunların üzerine gidebilirsiniz.

Wireframing Aşamaları

1. İhtiyaç Analizi: Projenin hedeflerinin ve gereksinimlerinin listelenerek başlangıcın yapıldığı adımdır.
2. Tasarım Kararları: Sayfalarda kullanılacak komponentlerin belirlenmesi ve bunların temel işlevlerine karar verildiği adımdır.
3. Çizim: Gelişme sürecidir. Kağıt kalem basitliğinde çizimler hazırlanarak çerçevenin oluşturulması aşamasıdır. İsteğe göre dijital ortamda da çizilebilir.
4. Geri Bildirim Alma: Önceki adımda yapılan çizimlerin müşteri ya da product owner tarafına gösterilerek geri bildirimlerin toplanması ve gerekiyorsa iyileştirmelerin yapılmasını içeren süreçtir.

Wireframe Çizim Araçları

• Balsamiq Mockups – (2008)
  Yeni başlayanların tercih edebileceği, sezgisel ve basit bir arayüze sahip olan mockup uygulamasıdır. Sürükle bırak şeklinde tasarımlarınızın taslağını hazırlayabilir, hazır komponentleri kullanarak zamandan tasarruf edebilirsiniz. Aylık abonelik ödeme yöntemi ile çalışmaktadır. Kısa süreli bir deneme sürümü de mevcuttur.
• Sketch – (2010)
  Mac cihazları kullananların daha sık tercih ettiği bir uygulamadır. Detaylı Wireframeler hazırlamak için kullanılır ve ücretlidir. Kullanımı Balsamiq’e kıyasla daha zordur fakat sektörde kendini kanıtlamış ve profesyonel UI/UX geliştiricilerin tercih ettiği bir araçtır. Eklenti kütüphanesi geniştir. Kullanımı ücretlidir, öğrenci ve eğitmenler için indirimler mevcuttur.
• Adobe XD – (2016)
  Arayüzü diğer Creative Cloud uygulamalarında benzediği için ekosistemdeki tasarımcıların rahatlıkla adapte olabileceği kolaylığa sahiptir. Amatör ve Profesyonel kullanıcılara da hitap edebilen bu uygulama ile hem basit hem de detaylı işler çıkarmanız mümkündür.
• Figma – (2016)
  Bulut tabanlı çalışan bir uygulamadır. Hem masaüstü uygulamasından hem de browser üzerinden tasarımlarınıza erişebilir ve geliştirmeyi sürdürebilirsiniz. Birden fazla kullanıcın aynı projede çalışmasına eşzamanlı izin özelliği vardır. Profesyone UI ve UX tasarımcılarına daha uygun olduğu söylenebilir. Temel paketi ücretsizdir ve sıfırdan prototiplemeye kadar ürün çıkarırken bu paket size yetecektir.
• Wireframe.cc – (2012)
  Minimalist ve basit arayüze sahip olan bir web uygulamasıdır. Hızlı bir şekilde temel mockup hazırlamanıza yardımcı olur. Fikirleri hızlıca görsele dönüştürmek isteyen kişiler tercih edebilir. Temel sürümü ücretsizdir.