Wireframe, Mockups ve Prototipler

Wireframe

Bir işin sistematik ve düzenli olarak işlemesini istiyorsak; doğru bir algoritma üzerinde, planlı bir şekilde çalışmalıyız. WireFrame, UX tasarımcıları tarafından kullanılan ve bir web sitesi, uygulama veya ürün için tasarımlarının bilgi hiyerarşisini tanımlamalarına ve planlamalarına olanak tanıyan bir uygulamadır. Bu süreç, kullanıcı deneyimi tasarımcıları tarafından hâlihazırda gerçekleştirilen kullanıcı araştırmasına dayanarak, tasarımcının veya müşterinin kullanıcının bir sitedeki bilgileri nasıl işlemesini istediğine odaklanır.

WireFrame Hazırlamanın Avantajları

WireFrame tasarımın daha kolay bir şekilde anlaşılmasını sağlamaktadır. WireFrame geri dönüş almak için ve bu süreci hızlandırmak için kullanılmaktadır. WireFrame web sitesi üzerinde bulunması gereken özelliklerin belirlenmesinde kullanılmaktadır.

WireFrame Hazırlama Adımları

Wireframe bir tasarım aşamasında çok bir planlama aşaması olduğu için geliştirilecek web sitesi veya ürün için kapsamlı bir araştırma yapılması gerekiyor.

Web sitenizde üretilmesi gereken ekranların sayısı ve bu ekranların kullanıcılara hangi akış ile gösterileceğinin belirlenmesi gerekir. Akış, kullanıcıların nereden geleceği ve nereye gideceğini bilerler.

Wireframeler boş bir kâğıt üzerine kalemle de hazırlanabildiği gibi bazı tasarım araçları da kullanılabilir. Yöntem fark etmeksizin bu aşamada diğer aşamalarda belirlenen konular renk, yazı stili, ekran boyutu gibi tasarımı ilgilendiren konular dikkate alınmadan, sade bir şekilde ortaya konur.

Mock-up

Mock-up; web sitelerinden mobil uygulamalara tasarımın bir model çerçevesinde, uygulanacak alan ve yüzeyde nasıl görüneceğinin oluşturulması amacıyla kullanılır. Mock-up çalışmaları, başlangıçta kartvizit, broşür, katalog çalışmaları gibi ürünlerde kurumsal kimlik oluşturmak amacıyla kullanılırdı. Son yıllarda izi tüm dijital ortam ürünleri için kullanılmaktadır. Görseller, metin kullanımı, tipografi, renkler ve diğer grafik elemanları mock-up çalışmasında ele alınır. Görünümünü, temel fonksiyonları ve etkileşimleri ifade eder.

Mock-up Hazırlama Aşamaları

Kullanıcı deneyimleri üzerinde yapılan detaylı çalışmalar sonucunda bazı temel tasarım modelleri ortaya çıkmıştır. İçerik düzeni belirlenirken yeni kullanıcı deneyimi çalışmaları yapılarak yeni bir model oluşturulabileceği gibi, önceki çalışmalardan ortaya konulmuş olan tasarım modellerinden de faydalanılabilir.

Renk şeması, projenizde kullandığınız gölgeleri ve renkleri ifade eder. Farklı renkler kullanıcıda farklı duygular uyandırır. Renkler kullanıcı deneyimini ve davranışını etkileyebileceğinden, her biri renk dikkatlice seçilmelidir. Metninizin okunaklı olması ve öğelerin görünür olması için renk kontrastına da dikkat edilmelidir.

Tipografi, harf, sayı ve semboller kullanılarak ortaya çıkarılan yazı sanatıdır. Yazı türleri, boyutları, stilleri, metin aralığı, hizalama gibi konularla ilgilenir. Bir web sitesi üzerindeki metinlerin tipografisi doğru bir şekilde planlanmalıdır. Metinler için seçilen özellikler kullanıcıyı yormamalı ve dikkat dağıtıcı olmamalıdır.

Prototipler

Prototip, herhangi bir somut nesnenin veya olgunun, sürecin geri kalanı için bir örnek teşkil eden ilk ve en ilkel temsilidir. Bir web sitesi için prototip, web sitesinin yayınlanmadan önce neye benzeyeceğini, işlevlerini ve amacını gösteren, son hâlinin bir simülasyonudur.