Dijital bir projenin temel iskeletini oluşturan wireframe (şema tasarımı), karmaşık fikirleri sade ve anlaşılır görsel yapılara dönüştürür. Estetik detaylardan arındırılmış bu ilk taslaklar; kullanıcı deneyimini (UX) optimize etmek, sayfa yerleşimini belirlemek ve yazılım sürecine hatasız başlamak için rehberlik eden en kritik stratejik haritadır.

Wireframe Nedir?

Meydana getireceğiniz proje için müşteriden brief alınır. Alınan brieflere göre Analizler yapılır, fikirler üretilir ve belli yol haritaları oluşturulur. Wireframe bu proje sürecindeki yoğun kargaşayı önlemek ve yol sürecinde kaybedilecek emek israfını önlemek için oluşturulan ön tasarım sürecidir; bir nevi yapacak olduğumuz projenin plan ve tasarım karalamasıdır.

Wireframe Neden kulllanılır?

Wireframe yapacak olduğumuz projenin aşamalarını belirlediğimiz tasarımdır. Bu sayede zaman yönetimine katkı sağlar ve sürecin hızlandırır. Ayrıca brief doğrultusunda çizilen yol haritasındaki eksiklikler ve israfın giderilmesini sağlar.

Wireframe şema tasarımı demektir. Yapılacak projenin bir nevi karalamasıdır. Projede ilk etapta yol gösterici olarak kullanılabilir. Wireframeler sayesinde bir projede Atılacak adımlar yappılacak değişikler eklenip çıkarılabilir. Wireframe olabilieceği en basit düzeyde temel şema tasarımı ekipmanları kullanılarak tasarlanır. Wireframeleri kendi içinde High-fidelity ve Low-Fidelity olarak ikiye ayırabiliriz.

Wireframe Örnekleri

Wireframelerin kendi içerisinde seviyeleri bulunur. Meydana çıkarılacak ürüne yakınlığı(fidelity) üzerinden Low-fidelity ve High-fidelity olarak ikiye ayırabiliriz.

Low-Fidelity

Tam anlamıyla karalamaya benzetilebilecek tasarımdır. Detaylandırma oldukça düşüktür. Yeni fikirler geldikçe karalamaya dahil olan ve çıkarılan detaylar olabilir. Ana taslağa bağımlı kalınmaz.

High-fidelity

En son meydana çıkarılacak ürüne en yakın görünümdür. Detaylandırılan ürüne bağlı olduğundan ortaya çıkması oldukça zaman alır.

Wireframe Nasıl hazırlanır?

Şema tasarımına başlarken dikkat edilmesi gereken ilk konu ölçektir. Sunulacağı kişi, hangi amaçla sunum yapılacağı, tüm fikirlerin netleşmesi ve ihtiyaçların belirlenmesi için Low-fidelity en uygun seçimdir.

Öncelikle web sitesinin ana iskeleti oluşturulur. İskelet için bu üç bieleşen iyi bilinmelidir:

Bu bileşenler sayfa düzeninde (page layout) bir araya getirilir. Wireframeler ise bu bileşenlerin arasındaki ilişkidir.

En Çok Kullanılan Wireframe Araçları

Bu içerik ilk olarak Wireframe (Şema tasarımı) Nedir? Nerelerde Kullanılır? adresinde, GecBunlari üzerinde yayınlanmıştır.