Wireframe (Şema Tasarımı) Nedir?

Kübra YILDIZ 31 Mayıs 2022

Wireframe (Şema Tasarımı) Nedir?

Wireframe, belirlenen cihazda projemizin fiziksel olarak görünümünü oluşturduğumuz önemli aşamalardan birisidir. Projenin işlevselliği ve kurgusu hakkında yazılımcı ve kullanıcının fikir sahibi olmasını sağlayan proje ön hazırlık aşaması da denebilir. Son kullanıcılar, müşteri, tasarım ve geliştirici ekibi, karar vericiler… ürünün gelişim aşamasını gözden geçirebilir ve geri bildirimlerde bulunabilirler.

Feedback (geri bildirim) döngüsü sayesinde sürece erkenden müdahale edilebilir ve kaynaklar daha etkili şekilde yönetilebilir.

Bir kâğıda hangi buton nerede olacak, ilgili görseller nerede konumlanacak gibi yapıtaşları çizilir. Renk hiyerarşisini belirlemek ve dijitale aktarırken tasarım olarak kolaylık sağlaması açısından çizimi yaparken farklı tonlarda kalemler kullanılabilir. Koyu renk kalemle yazdığımız başlığı dijitale aktarırken koyu ve daha kalın bir font ile, alt başlıkları ise daha ince bir font ile yazılacağını belirlemiş oluruz.

İlk olarak el çizimleri ile başlayan low fidelity wireframeler, high fidelity wireframeler, ardından son tasarıma doğru giden bir yol izler. Örneğin bir uygulamaya giriş yapma yolculuğunda nasıl bir yol izleneceğini bu şekilde belirlemek hem müşteri açısından hem de tasarlayan kişiler tarafından büyük bir kolaylık sağlar. Bu sayede müşteri, görünüş dışında daha çok sitesinin nasıl işlediğine odaklanır ve sitesinin işleyişini daha iyi anlar.

Taslaklar müşteri ile de paylaşılır, elemeler olduysa revize edilir kaç ekran kullanılacak, ekranların birbirleriyle ilişkileri ve geçişleri nasıl olacak belirlenir ve ürünün temelleri sağlamlaştırılır. Bu aşamadan sonra wireframe’leri dijital programlara aktarıp gerekli düzenlemeler sağlanır. Kullanıcı tarafından tekrar test edilir, olumlu sonuç alındıktan sonra UI (User Interface) elementleri kullanılarak tasarıma başlanır ve böylelikle son görünümün nasıl olacağına dair somut bir çalışma elde edilir.

Low – Fidelity Wireframe için bir örnek;

En basit grafiklerle ifade edilir ve sürecin başlangıç aşamasında değişiklikler, hem zaman hem de maddi açıdan bir kayıp vermeden yapılır.

Low – Fidelity Wireframe

High – Fidelity Wireframe için bir örnek;

Nihai ürünü (web sayfası, web veya mobil uygulama) profesyonel şekilde temsil eden detaylı şemayı yansıtır. Yapımı diğer süreçlerden daha uzun sürer ve şemaya bağlı kalma zorunluluğu yüksektir.

High – Fidelity Wireframe

Projeye başlarken ihtiyaç olan konuyla ilgili analizler, alınan geri bildirimler ile yapılan revizeler ve “wireframeler” sonrasında tasarımcı ve yazılım geliştirici tarafından asıl görünüm elde edilir.

Bu yazımda “Wireframe” (Şema Tasarımı) hakkında hızlı bilgiler edindik. Wireframe tasarlamak için kullanılabilecek kaynakları bırakıyorum.

•   Adobe XD
•   Sketch
•   Figma
•   Invision Free
•   Marvel
•   Moqups

İyi okumalar dilerim.