Bir tasarımın etkisi olabilir. Tarzına sahip olabilir. Ama bunlara sahip olmak yeterli değil.

İyi çalışmak için, bir tasarımın birbirinin güçlü yanlarını oynayan unsurlara sahip olması gerekir. Neyse ki, her içerik parçasının kendine özgü yönergeleri var.

Bir web sayfasındaki düzen veya içerik düzenlemesi, bir tasarımın başarısı için kritik öneme sahiptir. Diğer şeylerin yanı sıra, düzen insanları bir öğeden diğerine yönlendirmek için içeriği önceliklendirir.

Doğru yapılırsa, insanlar başka hiçbir şey fark etmeyecekleri içerikle çok ilgilenirler.

Tasarımlarınızda çalışan düzenler oluşturmak için daha fazla ayrıntı ve ipucu için okumaya devam edin.

Aşağıdaki örnekte, çoğu kişi fotoğrafı veya önce başlığı, sonra metni ve sonunda bağlantıları görecektir.

Başlığın, metnin ve modelin yüzünün sırasıyla üçte iki ve üçte ikilik (üçüncülüğün üstünlüğünü onurlandıran) olduğunu veya başlığın ve bağlantıların modelin dudaklarından örneklenen renklerle yazıldığını veya omzunun eğrisi göze çarpan harekete geçiyor.

Metin, fotoğraf ve başlık bir kompozisyon oluşturur. Biri yerinden düşerse, bütün parça başarısız olur.

metin, fotoğraf ve başlık ile sayfa düzeni

Karşılıklı Saygıya Dayalı Düzenleme

Bir şeyler nereye koyarız? Bize anlatsınlar. Bir sayfada karşılaştıklarında grafik, fotoğraf ve metin parçalarının tuhaflıkları ortaya çıkıyor. Bazıları diğerlerinden daha iyi çalışır ve bazıları sadece belirli bir şekilde yerleştirildiğinde çalışır. Örneğin, düzenimiz teknik olarak iki şekilde çalışır:

sayfa düzeni diyagramları

Şekil 1 , yukarıdaki örneğimizde kullanılan düzeni göstermektedir. Gri bloklar başlığı, fotoğrafı ve metni temsil eder.

Şekil 2 , aynı prensiplerin tersine çevrilmesi için nasıl uygulanacağını göstermektedir: iki küçük eleman tarafından dengelenmiş büyük bir eleman. Bu fotoğrafta sağ tarafta daha iyi görünüyor.

sayfa düzenleri, tersine çevrildi

Modelimiz sola bakıyor. Şekil 1'de metne bakıyor. Şekil 2'de, metinden uzak görünüyor. Kameraya bakmış olsaydı işe yarayabilirdi, ama baktığı için biraz etki kaybeder. Çok fazla değil ama maddeye yeter.

sayfa düzenindeki yönergeler

Model, dönüşümlü olarak metne ilgi gösterir ve ters çevrildiğinde onu yok sayar. Unsurların düzenlenmesi ya olumlu ya da olumsuz bir tutum oluşturur.

Merkezi Yerler Üzerine Hizalama

Bazen elementleri belli bir şekilde işleyen şey, uzay ve hizalama hakkında da ipuçları verir. Modelin gözlerinin solu nasıl işaret ettiğine dikkat ettik ancak fotoğraf ve metin diğer görsel ipuçlarını içeriyordu.

tasarımda hizalama ve alan nasıl çalışır

Tipografideki işaretler ile bu kompozisyonda yer alan resim arasında ima edilen çizgiler:

  • Modelin gözü ve dudakları ve burnunun kenarı sağdaki metin sütununun kenarına denk geliyor.
  • Soldaki metin sütunu, başlığın sol kenarına uygundur. Neredeyse modelin saçının kenarına ulaşır, ancak sağdaki sütunla tutarlı kalmak için kısa kalır.
  • Modelin yüzü (özellikle gözler ve ağız), başlığın dikey alanını tanımlar.
  • Fotoğrafın alt kısmı kompozisyonun alt üçte birini (üçüncül kurallarda) işaretler.
  • Modelin gözleri kompozisyonun tepesinden üçte biri.
  • Modelin yüzünün merkezi ve başlığın sağ kenarı, bileşenin genişliğinin üçte iki üçte birinde buluşuyor.

Bazı simge yapılar diğerlerinden daha fazla güce sahiptir. Tasarımcılar ve fotoğrafçılar, örneğin, modelin gözlerinin siluetinden daha etkili olup olmadığını tartışabilirdi. Ancak, herhangi bir yer işaretine dayalı bir düzen, onları yok sayan bir düzenden daha iyidir.

Uyum Oluşturmak için Özellikleri Kullanma

Ellerini düzenlerde deneyen tasarımcılar bazen sayfaya nasıl uydurabileceklerine göre elemanlar düzenlerler. Mekana saygı gösterilmeli, ancak her zaman en iyi tasarıma yol açmaz.

Düzen öncesi ve sonrası örnekleri

Şekil 5 , öğeleri sayfanın alanına hizalar ve tuvalin sınırları üzerindeki her şeyi temel alır.

Şekil 6 , düzenini fotoğraftaki odak noktalarına dayandırır. Sonuç daha akıcı bir görünüm.

düzenlerde akış yönü

Şekil 5 , izleyicilerin odak noktaları arasında sıçrama yapması nedeniyle verimsizdir: başlığa, yüze kadar, metne kadar. En basit çizgi düzdür. Bu nedenle şekil 6 , izleyicinin bakış açısını, bir elemandan diğerine kolayca, soldan sağa doğru yönlendirir. İkinci düzenin pruvası, başlık-yüz metin hizalaması boyunca uzanan dar bir banttır.

alan ve hizalama bir arada daha iyi çalışır

Bu görüntülerde, okuyucular modelin yüzüne, başlığa ve metne çizilir - genellikle bu sırayla. Bakmak için üç farklı alan var. Onları hizalamak düzen odağını verir.

Doğru cevap

Aşağıdaki üç düzende aynı başlık, fotoğraf ve metin öğeleri kullanılmaktadır:

üç düzeni karşılaştırarak

İlk düzende en çok “solunum odası” bulunur. İkincisi, metne saygı duyar. Üçüncü düzen, dengeyi sağlamak için negatif alan kullanır. Her üç simge de farklı şekillerde kullanılır. En iyisi mi?

Bir cevap için avlanma bizi belli ki kör edebilir: unsurlar birlikte çalıştığı zaman çoklu çözümler eşit olarak geçerli olabilir. Görsel işaretler kural değil, fırsattır. İlk tasarıma bir bakın.

kasten kurallara aykırı

Unsurlar ima edilen çizgilere ne kadar çok uyuyorsa, uyumsuz bir unsur daha fazla dikkat çeker. Burada tasarımcı, diğer metnin dikey hizalamasından “Simgesel” kelimesini kırar, böylece anahtar kelimeyi vurgular.

Sayfanın tanıtımıyla ilgili hiç şüphe yok. Başarı, tasarımın prensiplerine ne kadar sıkı bir şekilde uyulduğu, ancak sayfanın mesajını ne kadar iyi ilettiği ile ölçülmez.


Ben Gremillion tarafından Webdesigner Deposu için özel olarak yazılmıştır. Ben bir serbest yazar ve tasarımcı iletişim problemlerini daha iyi tasarımla çözer.

Tasarımlarınızdaki yer işaretlerini nasıl takip ediyorsunuz? Sizin için en iyi olan şey nedir?