Şema (Wireframe) Tasarımı Nedir?

Şema (Wireframe) tasarımı, potansiyel web sitesinin iskeleti için geçici görsel klavuz oluşturma sürecidir. Unutmayın, özel bir web sitesi geliştirmek, çok aşamalı bir süreçtir. Web site şeması hazırlamak da, bu tasarım sürecinin ilk aşamasıdır.

Şema tasarımının amacı, ziyaretçilere bilgilerin nasıl sunulacağını ve nelere öncelik verileceğini, web sitesinin fonksiyonelliği için elemanların nasıl yerleştirileceğini ve ziyaretçilerin isteklerini ve/veya beklentilerini takip edip edemeyeceğini saptamaktır.

Şema Tasarımları Nasıl Oluşturulur?

Şema tasarımcıları, bilgilere yalnızca geribildirimler yoluyla ulaşabilirler. Bunun kazan-kazan durumu olduğunu aklımızdan çıkarmamalıyız. Bütün bunlardan sonra, müşterinizin basitleştireceği bu bilgilerle; web arayüz tasarımcısının, fikirleri etkili bir şekilde gerçekleştirmesi çok daha basit olacaktır.

Aradığınız bilgiler birkaç yolla toplanabilir; teklif edilen projenin varolan belgeleri, bire-bir toplantılar, konferanslar vb. Web sitesi uzmanlarının da, müşteriyle kurulan iletişimi, tutarlılık sağlamak adına, projeye dahil etmesi gerekir.

Kavramsal olarak, şema tasarımını bir grafik yazılım uygulamasında oluşturmak, bir kağıda bir şeyler karalamak kadar kolaydır.

Çok sık olmasa da, tasarımcılar bazen şemanın gelecekteki durumunun daha iyi bir şekilde algılanmasına olanak vermek adına, şemayı direkt olarak tarayıcıda sunuyorlar.

Şemaların Tasarımlardaki Rolü Nedir?

Tasarımcının, web sitesinin fonksiyonelliğini ve tasarımını gözlemlemesi için oluşturulan iskelet yapı olmasının dışında şemalar, aynı yolda olunduğunu garantilemek adına müşteriye sunulan parçalardır. Şemaların, web sitesinin gerçek sunumundan çoğu değerin uzaklaştırılmış hali olduğunu ve bu yapıyı müşteriye sunma amacınızı; net bir şekilde müşterilerinize açıklamanız gerekir.

İşleri basitleştirmek adına, web sitesi şemaları için bir evin taban planlarını düşünelim. Yeni bir evin mutfağı için oluşturulmuş taban planını hayal edin. Tabii ki taban planı buzdolabının, ocağın ve dolapların nerede olacağını gösterecek. Ancak buzdolabının markasını veya rengini burada bulamazsınız.

Bunun yerine plan, ocağın nerde olması veya olmaması gerektiğini veya fırının nereye konulması gerektiğini gösterecek. Hatta bu plan, mutfak kapısının ne tarafa doğu açılması gerektiği hakkında da bilgi verebilir. Bu noktada mutfağın görsel parçalarından bağımsız olacak şekilde, mutfağın yerleşimini anlamak için; plan çok etkili bir parça.

Mutfak benzetmemizdeki buzdolabı ve ocak örneklerini web sitenizin fonksiyonelliği gibi düşünebilirsiniz. Şema tasarımının yapılması için, öncelikle tasarımcının projede bulunması gereken özel elemanları ve ihtiyaç duyulan fonksiyonellikleri anlaması gerekir.

Örneğin, web sitesinin "buzdolabına" ihtiyacı var mı? Eğer varsa bu "mutfakta" mı bulunmalı? Web sitesi iki kapılı bir buzdolabına mı ihityaç duyuyor, yoksa tek kapılı bir buzdolabına mı? Belki de web sitesinin mutfakta bulunacak bir buzdolabına ihtiyacı yoktur çünkü bodrum katında yer vardır. Bunlar tasarımcının şema tasarımı sürecinde düşünmesi gereken noktalar.

Müşterilerinize Göstereceğiniz Şema Tasarımı

• Bilgi Mimarisi: Şema tasarımınızda, en önemlisinden en önemsizine kadar olan bilgi akışını listeleyin.
• Bilginin Önemi: Kullanılacak bilgi, değerine göre tam olarak nerede konumlanmalı?
• İçerik Stratejisi: İçeriklerin tutumu, web sitesinin teklifleriyle uyum içerisinde mi? İçerik alanlarınızın boşlukları ve yerleşimi gibi elemanları düşünün. Unutmayın, bu tamamen yapı perspektifiniz için. Tasarımın bu aşamasının gerçek bir kopyasını kimseye sunmayacaksınız. Gerçek içerik yerine doldurma metin kullanmalısınız ki; içerik, şema tasarımını geliştirmenizi engellemesin.
• Sayfa Yapısı: Sayfalarınız, teklifte size tarif edilen yapıyla uyuşuyor mu? Öyle olsa bile yine de yapının mantıklı olup olmadığını tekrar tekrar kendinize sorun. Teklifin, projeyle %100 uyumlu olması nadiren yakalanan bir şeydir. Şema tasarımı bu uyumluluğu olabildiğince arttırmanın en güzel yoludur.
• Fonksiyonellik: Web sitenizde yer alan bütün fonksiyonel elemanlar istenilen yerde konumlandı mı? Mutfağınızda bulunacak bulaşık makinesinin yeri lavaboya yakın mı? Belki de web siteniz aslında mutfakta değil de, oturma odasında bulunacak bir bulaşık makinesine ihtiyaç duyuyordur. Özel bir fonksiyonel elemanın nerede bulunması gerektiğini, şema tasarımı sürecinde değerlendirin. Bunun gerçek özellikleri içermeyeceğini ve fonksiyonel elemanların ayrıntılarıyla görüneceği yerin web sitenizin final hali olacağını unutmayın.

Şema Tasarımından Neleri Beklememelisiniz?

Şema tasarımının amacı, hem satıcı hem de müşteri için fonksiyonel elemanların konumunu etkili bir biçimde belirlemektir.

Bazı şeyler için endişelenmeyin:

• Renk: Şema tasarımları genel olarak, web sitenizin renk paletinden uzakta, gri tonlarda oluşturulacak bir sunumdur. Bu gerçekten tasarımınızın temel taşlarındandır ancak çoğu görsel tasarım elemanlarının son halini web sitenizin tasarımı tamamlandığında görebileceksiniz.
• Spesifik Tasarım: Kutuların şekilleri veya verilen boşluklar gibi konularla kafanızı meşgul etmeyin. Yazılarıla ilgili de endişe duymayın, daha önce de belirttiğim gibi bunlar tasarımın tamamlanması için gerekli küçük dokunuşlar. Web sitenizin şeması bunu içermeyecektir.

Şema Tasarımı Sunumu Sırasında Dikkat Etmeniz Gereken Noktalar Nelerdir?

Şema tasarımını yaparken, tasarım ekibinin aradığı cevapları da dikkate alın.

• Elemanların yerleşimi teklifle uyumlu mu?
• Kullanıcıların davranışları kullanıcılara kolay ve anlaşılabilir gelecek mi?
• Herhangi bir elemanın çıkarılması, gözden geçirilmesi, önem sırasının düzenlenmesi veya amacının değiştirilmesi gerekiyor mu?

Hem müşterilerin hem de tasarımcıların şema tasarımının önemini anlaması gerekiyor. Bu süreç web sitesinin iskeletini kontrol etmemizi sağladığı kadar, müşterilerle tasarımcılar arasında iletişimin de artmasına yardımcı oluyor.

Wireframe Şema Tasarımları İle Daha Başarılı Sonuçlar Alın

Şemalar (wireframes) web tasarım süreçlerinin önemli bir parçasıdır. İnternet ve uygulama projelerinin detaylı planları gibidirler ve tasarımda neyin çalışıp neyin çalışmadığını anlamanıza, içeriği inşa etmenize ve dikkat dağınıklığı olmadan etkili bir tasarım yapmaya odaklanmanıza yardımcı olur.

İyi yapıldıkları takdirde şemalar; düşüncelerinizin daha iyi anlaşılmasını sağlarlar. Tabii aynı şekilde iyi yapılmazsa da projenizin yoldan çıkmasına sebep olabilirler. Bunu aklınızdan çıkarmayın ve şema yapma şeklinizi geliştirebilecek birkaç prensibi takip etmeye çalışın. Bu prensipleri takip etmek, asıl önemli olan noktaya odaklanmanıza yardımcı olacaktır: Ürününüzün fonksiyonelliğinden ve kullanışlılığından emin olmak.

1. Şema Tasarımınıza Taslak Hazırlayarak Başlayın

Direkt olarak en sevdiğiniz tasarım araçlarını kullanmak size çekici gelebilir ama kalem ve kâğıtla hazırlayacağınız taslaklar sizi çok daha iyi sonuçlara götürebilir. Bu süreç çok vaktinizi almamalı ve genel planınızla ilgili size daha net fikirler vermesi için uygulanmalıdır.

2. Renkleri Atlayın

Şema tasarımının amacı sayfaları,içeriği ve görsel elemanları düzenlemek ve web sitenizin fonksiyonelliğini belirlemektir. Tasarıma renkler gibi bir elemanı dahil etmek, sizi asıl amaçtan saptırabilir. Modelleme aşamasında renkleri atlayın ve onları şema tasarımınızdan uzak tutun.

3. Şemalarınızı Basit Tutun

Şema tasarımı yaparken işleri fazla karmaşıklaştırmayın. Dikkat dağıtıcı etmenlerden uzak durmak ve büyük resme odaklanmak için tasarımınızı basit tutun. Şemalar web sitesi tasarımınızın kullanışlılığını ve fonksiyonelliğini tanımlamalıdır. Tasarımınıza eklenecek detayları bu aşamada görmenin size bir faydası olmaz.

4. Daha İyi Örnek Veriler Kullanın

Örnek verilerle ilgili zayıf seçimler bir şema tasarımını öldürebilir. Tabii ki şemalarınızı verilerle doldurmak için fazla zaman harcamanıza gerek yok. Yalnızca kullandığınız verilerin tasarımınızla ilgili olduğundan emin olun.

5. Gerekirse Açıklayıcı Notlar Ekleyin

Şemalar, doğaları gereği detaylı planlardır; geliştiriciler ve tasarımcılar için web sitesi tasarlama sürecinde kılavuz görevi görürler. Eğer şemalarınızın kolaylıkla okunabilir ve anlaşılabilir olmasını istiyorsanız, ihtiyaç olduğu zaman uygun yerlere açıklamalar eklemekten çekinmeyin.

6. Grid Sistemini ve Düzenleyici Kutuları Kullanın

Grid sistemi ve düzenleyici kutular kullanmak, şema tasarımı için ilginç bir tekniktir. Bu yaklaşımı uygulayarak, basit ve yapılandırılmış bir yolla farklı birimleri hızlıca düzenleyebilir ve gruplayabilirsiniz.

7. Yeniden Kullanılabilir Stiller ve Semboller Oluşturun

Şema tasarımları için kullanılan çoğu tasarım, size stilleri ve sembolleri oluşturma ve yeniden kullanma imkânı verir. Bu, yalnızca sürecinizi hızlandırmakla kalmaz, aynı zamanda şemalarınızın tutarlı olmasını sağlar.

8. Doğru Araçları Kullanın

Yazılımdan bahsetmişken, şema tasarımı yapmak için kullanabileceğiniz birçok araç vardır. Bazıları yalnızca şema tasarımı yapmak için yaratılmıştır, bazıları başka görevler/uygulamalar için de kullanılabilir.

9. Şema Tipinizi Bilin

Uygunluk derecesi (fidelity) kelimesi size tanıdık gelmiyorsa, bu terim detay seviyesini ifade eder. Şema tasarımlarının dünyasında seçenekleriniz yalnızca ikiyle sınırlıdır: Uygunluk derecesi düşük şema ve uygunluk derecesi yüksek şema. İkisine de ihtiyaç vardır ama ikisi de farklı amaçlara hizmet eder.

Uygunluk derecesi düşük şema her şeyin başladığı noktadır. Gösterişten uzak ve kısa sürede oluşturulan şemalardır. Temel amacı bir şeylere başlamanızı sağlamaktır. Uygunluk derecesi yüksek şemalar ise daha çok detay ister. Asıl tasarımın renk detaylarını yansıtan ve genellikle basit renklerle oluşturulmuş, siyah-beyaz veya tek renkli şemalardır.

10. Sıklıkla Geribildirim Alın

Şema tasarımı yapmanın en güzel yanlarından biri hızlı oluşturulabilmeleridir. Tasarım sürecinin henüz başlarındayken bile takımla paylaşılabilir. Bu sayede sorunları erkenden tespit edebilir ve genel yapıyı kısa zamanda şekillendirebilirsiniz. Şemalarınız için erkenden ve sıklıkla geribildirim alın.

Şema tasarımları sizi yavaşlatmaz. Yalnızca kullanıcılarınıza daha iyi bir kullanıcı deneyimi (UX) ve kullanıcı arayüzü (UI) tasarımı sunabilmeniz konusunda size yardımcı olurlar.