Şema (Wireframe) Tasarımı Nedir?

web tasarım Şema (Wireframe) Tasarımı Nedir?

Şema (wireframe) tasarımı, potansiyel web tasarımının 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 adımı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 web tasarımcıları 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 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 tasarımı 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 Web Tasarımlarındaki Rolü Nedir?

müşteri ve tasarımcı

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. Web tasarımın bu aşamasının gerçek bir kopyasını kimseye sunmayacaksınız. Gerçek içerik yerine filler kullanmalısınız ki; içerik, şema tasarımını geliştirmenizi engellemesin. Lorem ipsum metni bu iş için çok uygundur.
  • 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 web tasarımcı hem de müşteri için fonksiyonel elemanların konumunu etkili bir biçimde belirlemektir.

wireframe şema tasarımı

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 web 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 Web Tasarımcının Dikkat Ettiği Noktalar Nelerdir?

tasarımcı

Ş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.

Tarih: 2018-02-14 16:50 - 5 ay 8 gün önce

Sosyal Medya Duruşunuzla SEO Geliştirmenin 5 Yolu

Sosyal Medya Duruşunuzla SEO Geliştirmenin 5 Yolu

Amaç Odaklı Yolla Web Sitenizi Geliştirmek İçin 4 Adım

Amaç Odaklı Yolla Web Sitenizi Geliştirmek İçin 4 Adım