Web Sitesi Wireframe Nedir?
Bir web sitesi tasarımına doğrudan renk ve görsel seçerek başlamak, çoğu zaman sonradan büyük değişiklikler gerektirir. Önce sayfada hangi bilginin nerede duracağının netleşmesi gerekir. Web sitesi wireframe, tam da bu iskeleti gösteren basit bir taslaktır. Renkten ve görsel detaydan arındırılmış bu taslak, yapıyı tartışmayı kolaylaştırır. Bu yazıda konuyu tüm yönleriyle ele alıyoruz.
Peki web sitesi wireframe nedir ve nasıl hazırlanır? Konuyu inceliyoruz. Planlı bir tasarım süreci için Weblike dijital ajansı ile çalışabilirsiniz.
Neyi Gösterir?
Bu taslak, sayfada hangi bölümlerin bulunacağını ve bunların nasıl sıralanacağını gösterir. Başlıkların, metin alanlarının, görsel yerleşimlerinin ve yönlendirmelerin konumu bu aşamada belirlenir. Renk, yazı tipi ve görsel içerik ise bilinçli olarak dışarıda bırakılır. Böylece tartışma görünümde değil yapıda yoğunlaşır. Bilgi mimarisi bu taslağın temelini oluşturur. Neyi gösterdiğini kavramak, ondan doğru beklentiyi kurmayı sağlar.
Neden Renksiz Hazırlanır?
Taslağın sade tutulmasının bir nedeni vardır: renk ve görsel eklendiğinde dikkat kaçınılmaz biçimde görünüme kayar. Oysa bu aşamada karar verilmesi gereken şey, bilginin sırası ve önceliğidir. Sade bir taslak, herkesin aynı konuya odaklanmasını sağlar. Ayrıca değişiklik yapmak da çok daha kolaydır. Renksiz hazırlamak, doğru soruyu doğru zamanda sormayı sağlar. Görünüm, yapıdan sonra gelir.
Önceliği Belirlemek
Bir sayfada her bilgi aynı öneme sahip değildir. Ziyaretçinin ilk görmesi gereken şeyin ne olduğu bu aşamada kararlaştırılır. En önemli mesajın ve yönlendirmenin üst bölümde yer alması, alt sıralara inmeyen ziyaretçilere de ulaşmayı sağlar. Mevcut bir siteniz varsa hangi sayfaların hangi aramalarla ziyaret edildiğini Google Search Console üzerinden görmek, bu önceliği belirlemeye yardımcı olur. Açılış sayfası optimizasyonu bu önceliklendirmeye dayanır. Önceliği baştan belirlemek, sayfanın amacına hizmet etmesini sağlar. Her şeyi öne çıkarmak, hiçbirini öne çıkarmamaktır.
Mobil Görünümü Düşünmek
Ziyaretçilerin büyük bölümü siteye telefondan ulaştığı için, taslağın mobil görünümünün de hazırlanması gerekir. Masaüstünde yan yana duran bölümler mobilde alt alta sıralanır ve bu sıralamanın anlamlı olması önemlidir. Yalnızca masaüstü üzerinden düşünülen bir yapı, mobilde dağınık bir sonuç verir. Mobil öncelikli tasarım bu aşamada devreye girer. Mobili baştan düşünmek, sonradan yapılacak düzeltmeleri ortadan kaldırır.
Ekip İçinde Ortak Dil
Bir sayfanın nasıl olacağını sözle anlatmak zordur; herkesin zihninde farklı bir görüntü oluşur. Basit bir taslak, bu farklı görüntüleri tek bir görünür şeyde buluşturur. Böylece geri bildirimler somutlaşır ve tartışma verimli hale gelir. Onay süreci de bu sayede hızlanır. Proje süreç yönetimi bu adımı içerir. Ortak bir dil kurmak, yanlış anlaşılmaları baştan önler. Gösterilen bir şey, anlatılandan nettir.
Değişikliğin Maliyeti
Bu aşamada yapılan bir değişiklik birkaç dakikada tamamlanır; aynı değişiklik tasarım tamamlandıktan sonra çok daha uzun sürer. Kodlama aşamasına geçildiğinde ise maliyet daha da artar. Bu nedenle yapısal kararların bu erken aşamada verilmesi ekonomik açıdan da doğrudur. Taslak üzerinde denemeler yapmak serbesttir ve teşvik edilmelidir. Erken karar vermek, sonradan doğacak maliyeti ortadan kaldırır. Ucuz hata, erken hatadır.
İçerikle Birlikte Düşünmek
Taslak hazırlanırken sayfada yer alacak içeriğin de kabaca bilinmesi gerekir. Metnin uzunluğu, kaç görsel kullanılacağı ve hangi bilgilerin verileceği yerleşimi doğrudan etkiler. İçerik belirsizken hazırlanan bir taslak, gerçek metin geldiğinde bozulabilir. Kurumsal içerik planı bu aşamayla birlikte ilerlemelidir. İçerikle birlikte düşünmek, taslağın gerçekçi olmasını sağlar. Boş kutular, gerçek içeriği temsil etmez.
Tasarıma Geçiş
Taslak onaylandıktan sonra görsel tasarım aşamasına geçilir. Bu aşamada renk, yazı tipi ve görseller devreye girer; ancak yapı büyük ölçüde sabit kalır. Sağlam bir taslak, tasarım aşamasının çok daha hızlı ilerlemesini sağlar. Taslaksız başlanan bir tasarım ise sürekli geri dönüş gerektirir. Prototipleme bu geçişi kolaylaştırır. Taslaktan tasarıma geçmek, sürecin doğal akışıdır.
Gerçekçi Alan Bırakmak
Taslakta bir bölüme ayrılan alanın, gerçek içeriği taşıyabilecek büyüklükte olması gerekir. Kısa bir örnek metne göre planlanan bir alan, gerçek metin geldiğinde taşabilir ve düzeni bozar. Aynı şekilde uzun başlıkların iki satıra inebileceği de hesaba katılmalıdır. Farklı uzunluklarda içeriklerin nasıl görüneceğini önceden düşünmek faydalıdır. Gerçekçi alan bırakmak, taslağın uygulamada da işlemesini sağlar. Dar planlanan bir alan, sonradan sorun üretir.
Tekrar Eden Bölümler
Bir sitede üst menü, alt bölüm ve yan alanlar gibi birçok sayfada tekrar eden kısımlar bulunur. Bu bölümlerin bir kez doğru kurgulanması, tüm sayfalarda tutarlılık sağlar. Her sayfa için ayrı ayrı düşünülen bir yapı ise dağınık bir sonuç verir. Tekrar eden bölümlerin taslakta net biçimde tanımlanması, tasarım aşamasını da hızlandırır. Header tasarımı bu bölümlerden biridir. Tekrar edenleri bir kez çözmek, her sayfada kazanç sağlar.
Weblike ile Planlı Tasarım
Weblike, tasarıma başlamadan önce sayfa yapısını netleştirir. Hangi bilginin nerede duracağını birlikte kararlaştırır, sonra görsel tasarıma geçeriz. Profesyonel web sitesi tasarımı anlayışımızla, süreci baştan planlarız. Sonradan sürpriz yaşamazsınız.
Sayfada hangi bilginin nerede duracağını gösteren, renkten ve görsel detaydan arındırılmış basit bir taslaktır; yapıyı tartışmayı kolaylaştırır ve tasarıma sağlam bir zemin hazırlar.
Renk ve görsel eklendiğinde dikkat görünüme kayar; oysa bu aşamada karar verilmesi gereken şey bilginin sırası ve önceliğidir. Sade bir taslak üzerinde değişiklik yapmak da çok daha kolaydır.
Evet. Masaüstünde yan yana duran bölümler mobilde alt alta sıralanır ve bu sıralamanın anlamlı olması gerekir; yalnızca masaüstü üzerinden düşünülen bir yapı mobilde dağınık kalır.
Bir sayfayı sözle anlatmak zordur ve herkesin zihninde farklı bir görüntü oluşur; taslak bu görüntüleri tek bir görünür şeyde buluşturur. Böylece geri bildirimler somutlaşır ve onay süreci hızlanır.
Bu aşamada bir değişiklik birkaç dakika sürer; aynı değişiklik tasarım veya kodlama aşamasında çok daha maliyetli hale gelir. Taslak üzerinde denemeler yapmak serbesttir ve teşvik edilmelidir.
Kabaca bilinmelidir. Metnin uzunluğu ve görsel sayısı yerleşimi doğrudan etkiler; içerik belirsizken hazırlanan taslak sonradan bozulabilir.
Gerçek içeriği taşıyabilecek büyüklükte. Kısa bir örnek metne göre planlanan alan, gerçek metin geldiğinde taşar ve düzeni bozar; uzun başlıkların iki satıra ineceği de hesaba katılmalıdır.
Üst menü ve alt bölüm gibi kısımlar bir kez doğru kurgulanmalıdır; her sayfa için ayrı düşünülen bir yapı dağınık bir sonuç verir ve tutarlılığı bozar.
Web sitesi wireframe; sayfa yapısını renkten bağımsız biçimde netleştiren, önceliği belirleyen ve ekip içinde ortak bir dil kuran bir adımdır. Mobili baştan düşünmek, gerçekçi alanlar bırakmak ve içerikle birlikte ilerlemek, taslağın uygulamada da işlemesini sağlar. Tekrar eden bölümleri bir kez doğru kurgulamak ise her sayfada kazanç getirir. Konuyu tamamlayan web sitesi bilgi mimarisi yazımıza da göz atabilirsiniz.
BİZE ULAŞIN
Bizimle iletişime geçerek projeniz için hemen ücretsiz teklif alabilirsiniz.
