Wireframeler Nedir, Neden Önemlidir?
Wireframeler tasarladığınız ekranların birbiri ile bağlantıları, bu ekranlara bilgilerinizi nasıl yerleştirdiğiniz ve ekranlara hangi bilgileri koyacağınıza dair farklı fikirler denemenize imkan sunan bir metoddur.
- İlk olarak fikrinizin strüktür olarak nasıl gözükeceğini müşterinize sunarken, renk veya stilden ziyade sitenizin nasıl çalıştığını anlaması bunun doğrultusunda yorum yapması açısından önemlidir. Bu sayede ilk aşamalarda probleminizi görebilir bunun doğrultusunda kararlar almaya başlayabilir, UI elementlerini eklemeye başlamadan önce son düzenlemelerinizi yapabilirsiniz.
- İkinci olarak ise tasarımınızı yaparken UI’ın içinde kaybolmaktansa, fikrinizin nasıl çalıştığı konusunda size genel bir görüntü sunarak fonksiyona odaklanmanızda yardımcı olur. Belli bir amacınız olması ekranlarınızı bu amaç doğrultusunda oluşturmanız sonraki adımlarda UI elementlerini yerleştirir, uygulama/sitenizi oluştururken size kolaylık sağlar.
4 adımda Wireframe Oluşturma
1. Amacı Belirleme ve Fikir Üretme
Wireframeleri oluştururken ilk olarak probleminizin ne olduğundan başlayın. Bu probleme ana ekranda neler sunacağınız, ekranları nasıl konumlandırcağınız, birbiriyle ilişkilerinin nasıl olacağı ve her bir ekranda nasıl bilgiler sunarak bu problemlere çözüm getireceğinizi düşünün ve elinize kağıt kalem alarak birden çok fikir üretmeye, taslak ekranlar çizmeye başlayın.
2. Ana Sütrüktürü Oluşturma
İkinci olarak çizdiğiniz wireframelerin arasından en efektif gördüklerinizi, fikrinizi en çok yansıtanları seçin. Bu aşamada taslak olarak fikir üretmek için çizdiğiniz wireframlerinizi eleyerek seçebilir veya birleştirip yeni wireframeler oluşturabilirsiniz. Amaç uygulamanızdaki ekranları, bu ekranlarınızın birbiriyle olan ilişkilerini ve bu ekranlarda da ne sunacağınıza dair taslak bilgilerin olduğu wireframeler oluşturmak.
3. Wireframleri Çizmek
Üçüncü olarak seçtiğiniz wireframelerinizi bilgisayar ortamında düzenleyin. Bilgisayara aktarmanın bize sağladığı üç avantaj vardır.
- İlk olarak dijitalin sağladığı grid sistemleri ve hazır ekran boyutları sayesinde daha düzenli temiz ekranlar oluştururken çalışma hızımız da artar
- İkinci olarak dijital ortamdaki çoğu uygulama prototipleme yapmanıza elverişli olup, wireframlerinizi telefonunuzda denemeniz veya kullanıcıya sunmanızı mümkün kılar.
- Son olarak ise dijital ortamda başka tasarımcılar ile birlikte fikir üretip tasarlayabilirsiniz.
4. Son Düzenlemeleri Yapmak
Son olarak ise çizdiğiniz low-fidelity wireframeleri daha da detaylandırmaya gidebilirsiniz. Bu içeriği gerçekçi kılmak için metin, grafik ekleme olabileceği gibi grinin diğer tonlarını eklemek veya bazı kısımlara tek bir renk atamak olabilir.
Wireframe Oluştururken Dikkat Edilmesi Gerekenler
Basit tutun: Wireframleriniz çizerken görsel elementleri en basit şekilde kullanın. Bu fontlarda siyah Helvetica kullanmanız, arka planlarda grinin iki veya üç renk tonunu göstermeniz ve önemli kısımlarda mavi, yeşil,kırmızı gibi tek bir renk tonu kullanmanız anlamına gelmektedir. Bunun için webden ulaşabileceğiniz birçok wireframe kitini de kullanabilirsiniz.
Etkileşimler Net Olmalıdır: Genel olarak grinin tonları tercih edilsede tek bir rengi etkileşimlerinizin olduğu butonlarda veya ilgiyi toplamak istediğiniz kısımlarda kullanabilirsiniz. Bunu yapmaktaki amacınız ise wireframeleriniz test ettiğinizde ilgiyi toplamak istediğiniz kısımların nasıl çalıştığı veya kullanıcının bu kısımlara nasıl reaksiyon verdiğini ölçmek olabilir.
İçeriği Gerçekçi Kılın: Wireframeleriniz basit tutmanız gerekse de içerik bakımından gerçekçi yazılar kullanmanız bitime daha yakın prototipler oluşturmanızda yardımıcı olur. Örneğin veri gösterimi uygulamanız için kritik önem taşıyorsa wireframelerinizde basitleştirilmiş grafiklere yar verebilirsiniz.
Kullanabileceğiniz Kaynaklar
Adobe XD
Ekranlarınızı kolayca hazır boyutlara yerleştirebilceğiniz, aynı zamanda collabrative bir şekilde başkalarıyla çalışabileceğiniz bir uygulamadır. Wireframelerinizden basit bir şekilde prototipleme yapmanıza da elverişlidir.
Sketch (macOS)
Sketch kolaylaştırlışmış bir arayüz yardımı ile wireframleriniz oluşturabileceğiniz bir kaynak olup aynı azmanda bir çok plug-in seçeneği ile iş yükünüzü hafifletebilir. Örneğin Platforma gibi sitelerden indirdiğiniz wireframe kitlerinin yardımı ile hazır ikonlar ve grafikleri kopyalayarak veya düzenleyerek kendi wireframelerinizi oluşturabilirsiniz.
Figma
Sketch ve AdobeXD’ye benzer şekilde wireframeler oluşturabilirsiniz. Diğerlerine göre ise collabrative bir şekilde çalışmayı, birçok kişi tarfından yorum alıp bırakabilceğiniz özellikleri ile birlikte çalışıp fikir yürütmek için en ideal uygulama olabilir.
Marvel
Daha önceden dijital olarak veya kağıt kullanarak çizdiğiniz wireframleri çok hızlı bir şekilde prototipleme yapmanıza elverişli bir uygulamadır. Aynı zamanda yazılımcılara prototiplerinizi aktarma konusunda da diğer uygulamalara göre kolaylık sağlar.
InVision Freehand (Web)
Collabrative bir şekilde, sınırsız bir beyaz ekran üzerinde başka tasarımcılar ile birlikte çalışabiliceğiniz, sunulan kitler sayesinde wireframe oluşturmanın brainstorming, ideation gibi kısımlarında efektif olarak kullanabilceğiniz bir uygulamadır.
Wireframe Örnekleri
Farklı UX tasarımcıları wireframelerini çizerken komplekslik ve sergileniş açısından farklı tutumlar sergilemektedirler. Bu kısımda mobil veya web tasarımında farklı komplekslik seviyesindeki 5 wireframe örneğini inceleyeceğiz.
1. Para yönetimi uygulama ekranları
Platform: Mobil
Komplekslik: Orta
Basitlik ve şeffaflık para yönetiminde önemli olabilecek iki konudur.Ryszard Cz’s uygulamasında wireframe çizerken bu iki konu üzerinde durulduğu, yatırım ve veri gösterilen kısımlarda wireframelerin kompleksleştiği diğer kısımlarda ise sade gözüktüğü, genel olarak ise orta derecede başarılı bir wireframe oluşturudğu gözlemlenebilir.
2. Servis tasarımı için açılış sayfası
Platform: Web
Komplekslik: Orta
Genel olarak açılış sayfaları kullanıcının hızlı taraması için optimize edilmelidir. Servis tasarımında ise en önemli noktalardan biri sunulan servisi hızlı ve net bir şekilde anlamaktır. Bu örneğimizde Piotr Kaźmierczak açılış sayfasında kompleks bir örnek göstererek, daha sonrasında ise bundan yola çıkan basit sayfalarla servis sisteminin wireframelerini çizmiştir. Genel amacının hızlı tarama, konuyu anlama olduğu gözlemlenebilmektedir.
3. Akıllı Evler için mobil uygulama
Platform: Mobil
Komplekslik: Düşük
Villi R, asıl amacı olan minimalist, kullanıcı dostu arayüzünde gereksiz birçok özelliği çıkararak wireframlerini en basit haline indirgemiştir. Genel olarak uygulamanın görünümünü düzenlemiş daha sonra ise bunu kompleksleştirmiştir.
4. Web uygulaması veri tablosu
Platform: Web
Fidelity: High
Veri görselleştirmesi projelerde kritik önem taşıyabilmektedir. Bu örnekte Agnieszka Korber dataların anlaşılması açısından kompleks bir wireframe örneği sunarken F biçimide tarama patternini kullanarak wireframei basit ve anlaşılır kılmada iyi bir örnek oluşturmaktadır.
