Web Tasarımında Kompozisyon Elemanları – Şekil ve Alan

Tasarım Elemanları

 

Şekil – Alan

  • Çizgi veya açık koyu değerlerle sınırlanmış alanlara şekil diyoruz.
  • Bir tasarımın, yüzeyde kapladığı ve bunun arkasındaki sahanın hepsini alan olarak tanımlayabiliriz.

Şekiller, Alanlar ve Oranlar

  • Web sayfasının anatomisi:
  • Web sayfasının öğeleri organlar gibidir, estetik olarak göze hoş gelen ve düzgün işleyen bir web sayfası için hayati önem taşımaktadır. Bunlar bir web sayfasının ana elementleridir. bunları organize etmek için pek çok yöntem bulunmakla birlikte en sık kullanılan şablon Yukarıda görmüş olduğumuzdur.

Kapsayıcı (Container)

  • Tüm web sayfaları kapsayıcılar kullanır ve aynı amaca, sayfa elementlerini kapsama amacına hizmet etmek için de olsa kullanım şekli değişkendir. Örneğin body etiketi ya da div en sık kullanılan şeklidir. geçmişte tablolar bile bu amaçla kullanılmıştır (siz tabloyu sayfanızda kapsayıcı olarak kullanmayın, bu yöntemin değeri kayboldu). Kapsayıcıları, yatak odanızın, mutfağınızın, salonunuzun ve oturma odanızın içine döşendiği, evinizi kapsayan fazladan bir duvar olarak düşünün.

Kapsayıcı tipleri:

  • Likit (liquid): Tarayıcı penceresini dolduracak şekilde genişler.
  • Sabit (fixed): Seçtiğiniz genişliğe sahiptir ve tarayıcı pencere boyutuna göre değişkenlik göstermez.

Başlık (Header)

  • Başlıklar aslında bir elementi tanımlamazlar ancak, bazıları onu bu şekilde kullanabilir. Genellikle web sayfanızın logosunu, navigasyonunu, sloganını vs. kapsayan bölüm için kullanılır. Pek çok kişi bu elementleri daha kolay sayfa stillemek, element bölümlemek ve/veya sınırlamak için bir div içerisinde taşırlar. Başlıklar da birer taşıyıcı olarak algılanabilecekleri için önceden bahsettiğim gibi likit ya da sabit formda kullanılabilir.

Kimlik İşareti (Logo)

  • Logonuz kimliğiniz ve markanızdır. logonuz için en uygun yer başlık içerisinde sol kısımdır. Soldan sağa ve yukarıdan aşağı doğru okuruz, bu sebeple logonuzun ziyaretçilerinizin bakacağı ilk nesne olmasından dolayı yerini buna göre belirlemeliyiz.

Yönlendirme (Navigasyon)

  • Sayfa navigasyonu en önemli kısımlardan birisidir, ziyaretçilerinizin web sitenizi kullanabilmesi için gereklidir. Kullanması ve bulunması kolay olmalıdır, ki bu sebeple genellikle başlık bölümünde ya da sayfanın üst kısmına yakın bir yerde konumlandırılır. Bazen yoğun içeriğe sahip websitelerinde her iki tip navigasyonun kullanıldığı görülür.

Navigasyon tipleri:

  • Yatay: Birbiri ardına dizilmiş ve genelde “bağlantılar” diye tabir edilen bir dizi link.
  • Dikey: Alt alta dizilmiş ve genelde “menü” diye tabir edilen bir dizi link.

Ana İçerik (Main Content)

  • Herkesin bildiği sitenin varoluş sebebidir. Net anlaşılır ve algılanır olması gereklidir. İ̇nsanlar sitenizi ziyaret ettiklerinde genel olarak beklentilerini buna göre oluşturmuşlardır. Web sayfasının odak noktasında olmalı ki ziyaretçiler aradıklarını kolayca bulabilsinler.

Yan Bar (Sidebar)

  • Yan bar; reklam, site araması, abonelik bağlantıları (rss, twitter, elektronik posta vs.), iletişim yöntemleri gibi öğeleri içerebilecek bir öğedir. Bu öğeyi kullanmak her ne kadar gerekli olmasa da pek çok web sitesi bunu kullanır.
  • Genellikle sağa dayalı olarak kullanılsa da bazen sola dayalı, ya da ana içeriğin her iki yanında da kullanılabilir. Burada unutulmaması gereken ana içerikten daha baskın hale gelmemesi gerekliliğidir. Dikey ve yatay navigasyon kullanan websitelerinde yan bar genellikle dikey navigasyon elementi ile birlikte kullanılır.

Altlık (Footer)

  • Web sayfasının altı genellikle altlık öğesini kullanır ve bu öğe ziyaretçilerinizin sayfanın tamamlandığını anlamasını sağlar.
  • Tıpkı başlık öğesinde olduğu gibi altlık öğesi de kullanması zorunluluk olmamakla birlikte, daha çok bir kapsayıcı özelliktedir.
  • Altlık içerisinde telif bilgileri, yasal uyarılar ve iletişim bilgilerinin kullanıldığı sık görülür. Web sitenizin ana sayfası, iletişim bilgilerinin yer aldığı sayfa gibi önemli sayfalara birkaç bağlantı içermesi de tercih edilebilir. Bazı web siteleri bu alanı sayfanın içeriği ile ilişkili başka içeriklerden ya da diğer önemli içeriklerden bahsetmek amacı ile de kullanırlar.

Boş Alanlar (Whitespace)

  • Web sayfasının bu alanı Yazı (tipografi) ya da diğer içerikle doldurulmayan tüm alanlara verilen genel addır. Bazen her boşluğu doldurmak zorunda hissedebilirsiniz kendiniz ama bunun olmasına izin vermeyin.
  • Boş alanlar iyi web tasarımının tıpkı içerik gibi önemli bir alanıdır.
  • Sıklıkla gezindiğiniz web sitesinde beyaz alanların kullanıcıların içerik arasında yolunu bulabilmeleri için zekice kullanıldığını, sayfa espası oluşturduğunu ve içerik bölümlemesini sağladığını görmeye çalışabilirsiniz.

Altın Oran (Golden Ratio)

  • Altın Oran ve Izgara kullanımı
    Bu konu hakkında son yıllarda bir çok yazıya, görsele denk gelmiş olmalısınız. Görsel hazzın temelinde altın oran yatıyor. Binlerce yıldır sanatçılar, tasarımcılar, mimarlar vb. bilerek ya da bilmeyerek göze hoş gelen eserlerin ortak bir oran kullanarak oluşturdular. Bu oranı veren sayısal bir gerçekliğe de bilgi olarak sahibiz. Peki bu sihirli rakkam nedir? 1.62 (aslında 1.618 0339 887..) Bu numaranın kökenine değinelim.
  • Fibonacci Serisi (Golden Ratio)
  • Sayı serilerine dayanan bir analiz tekniğinin adıdır. Fibonacci sayıları serisi (1, 2, 3, 5, 8, 13, 21, 34, 55, 144…), üçüncü sayıyı bulmak için, ilk iki sayı toplanarak oluşturulur. Bu seride bir sayının kendinden sonra gelen sayıya oranı % 62’dir ki bu da yaygın bir Fibonacci düzenleme sayısıdır. % 62’nin tersi olan % 38’dir ki bu da yaygın bir Fibonacci düzenleme sayısıdır.
  • Bunun estetik görüntüye ulaşmadaki kullanımlarını incelemeya çalışalım.

Altın oranı kullanmak çok kolaydır. Diyelim ana içerik ve yan bar sütunlarınızın genişliğini buldunuz. i̇çerik alanınızın toplam genişliğini aldınız (örneğimizde 900 px kullanacağız) ve onu 1.62’ye böldünüz. 900 px’i 1.62’ye bölerseniz 555.55 px elde edersiniz. sayının tam olmasına gerek yok, o yüzden biz 555 px diyelim. Şimdi ana içerik elementinin 555 px olacağını, yan barın da 345 px olacağını biliyorsunuz.

Kolay değil mi?

Hepsi bu kadar değil. Altın oranı şekillerin yüksekliği ile oranlayarak da kullanabilirsiniz. Bu, altın oran hesaplamaları ile estetik olarak göze hoş gelen alanların oluşması ile sonuçlanacaktır.

  • Kareden Yola Çıkan Orantılama

  • Ergonomik Kullanımlarda Altın Oran

  • İnsan Anotomisinde Altın Oran

  • Alan / Şekil Oluşumu

  • Alan / Şekil Oluşumu

  • Alan / Şekil Oluşumu

İlgi Merkezi Oluşumu

İlgi Merkezi Oluşumu

İlgi Merkezi Oluşumu

İlgi Merkezi Oluşumu

İlgi Merkezi Oluşumu

İlgi Merkezi Oluşumu

İlgi Merkezi Oluşumu

İlgi Merkezi Oluşumu

İlgi Merkezi Oluşumu

İlgi Merkezi Oluşumu

İlgi Merkezi Oluşumu

İlgi Merkezi Oluşumu

Bir önceki yazımız olan Web Tasarımında Kompozisyon Elemanları – Renk ve Tipografi başlıklı makalemizde renk, tasarım ve tasarım elemanları hakkında bilgiler verilmektedir.

Arama Terimleri:

  • tasarım elemanları şekil
  • tasrım elemanları şekil

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir