Web Tasarım Prensipleri

Codeliva Blog > Web Tasarım Prensipleri
19 Ağustos 2021

Bu yazımızda estetik bir tasarım elde etmek isteyenlerin dikkat etmesi gereken prensipleri codeliva konya web tasarım ekibi olarak sizler için ele alacağız. Bir tasarımı hayata geçirmek elbette bir tasarımcı için kolaydır ancak burada önemli olan nokta, tasarımlarınıza estetik dokunuşlar ekleyerek harika sanat eserleri ortaya çıkarmaktır. Basitçe dikkat edeceğiniz 4 kural sayesinde kullanıcı gözüne hitap edecek organize bir yapı ortaya çıkarabilmeniz mümkün olacaktır.

Bahsettiğimiz ilkelere geçmeden önce estetiğin ne olduğundan bahsedeceğiz. Böylece bir web tasarım yada mobil tasarımda estetiğin ne kadar önemli olduğunu daha iyi kavramış olacaksınız.

Web/Mobil Tasarım İçin Estetik Nedir?
Estetik, tasarımın hoş görünmesi için kalitesini tanımlayan temel bir tasarım ilkesidir. Görsel güzellik; denge, renk, hareket, desen, orantı, şekil ve görsel ağırlık gibi CRAP desing faktörlerini içermektedir. Tasarımcılar, tasarımlarının kullanılabilirliğini tamamlamak için estetiği kullanır, böylece çekici düzenler aracılığıyla işlevsellik eklenmiş olur.

“Tasarım, biçim ve içeriği bir araya getirme yöntemidir. Tasarımın da sanat gibi birden fazla tanımı vardır; tek bir tanım yoktur. Tasarım sanat olabilir. Tasarım estetik olabilir. Tasarım çok basit, bu yüzden bu kadar karmaşık.”

— Paul Rand, IBM'in logosunu tasarlayan ve bunun gibi logolarla ünlü sanat yönetmeni ve grafik tasarımcı.

Tasarımda Estetik Kullanılabilirlik Etkisi
Estetik, güzelliğin özü ve insanların güzel şeyleri sevmesi gerçeği etrafında dönen eski bir ilkedir. Mimarinin, grafik tasarımın vb. merkezidir. Kullanıcı deneyimi (UX) tasarımı ve etkileşim tasarımının önemli bir parçası olan estetik, arayüzün UX kısmını birçok açıdan etkiler.

Kullanıcılar, görsel duyularına hitap eden donanımlara sahiptir. Görsel girdi yetkinliklerine sahip olan kullanıcılar, görmek istedikleri şeyleri genellikle 50 milisaniye içinde algılar. Çünkü kullanıcıların içgüdüsel tepkileri onları tasarımınızı/ürününüzü kullanmaya, devam etmeye veya ondan vazgeçmeye sevk edecektir. Buradaki güzellik, web sitesindeki ve web uygulamalarındaki çizgiler, renkler, boşluklar gibi hangi ögeleri seçtiğiniz ve bunları nasıl uygulayacağınız anlamına gelir. Örneğin; web siteniz için, kullanılabilirlik sorunlarına karşı kullanıcıları daha hoşgörülü hale getirmek istediğinizde, duyusal tasarımlar sayesinde site hızınız artar, daha fazla trafik alırsınız ve böylece daha düşük bütçe ile öne çıkma oranınızı artırabilirsiniz.

Günümüzde kullanıcıların büyük bir çoğunluğu, görsel çekiciliğe sahip tasarımları daha kullanışlı bulduğundan, kullanışlı siteleri tercih etmektedir. Bazen şık bir arayüz bazen de sade bir arayüz ortaya çıkarmak için içerikleri organize etmek ve ilgili olanları bir araya getirmek estetik tasarımlar ortaya çıkarmanıza yardımcı olacaktır.

Güzel Bir Web Tasarım İçin Estetikten Faydalanın
Çekici tasarımlar ortaya çıkarabilmeniz için dikkat edebileceğiniz bazı önemli noktalar:

  • Görsel çekicilik nesnellik ve öznellikte yatar; bazı estetik seçimler tüm kullanıcılarda yankılanırken diğerleri hemen hemen her yerdedir. Örneğin turkuaz bir arka plan üzerindeki kırmızı ögeler, kültürleri, yaşları ve eğitim düzeyleri de dahil olmak üzere kullanıcı özelliklerini etkiler. Kullanıcılar tasarımınızı nasıl algılar yada nasıl kabul ederler? Öncelikle bunu araştırmanız gerekir. Örneğin batı kültüründeki kırmızı tehlikeyi temsil ederken bu durum başka kültürlerde değişkenlik gösterebilir.
  • Formun işlevi takip etmesine izin verdiğinizde, klasik tasarımın konsepti, bir nesnenin formunun (estetik tasarımın) gerçekleştirdiği işlevden türetilmesi gerektiği anlamına gelir. Ünlü tasarımcı Charles Eames’in de dediği gibi “Tasarım belirli bir amaca ulaşmak için ögeleri en iyi şekilde düzenleyen bir plandır.” Bu nedenle özenle seçilmiş ögeler tutarlı ve iyi görsel bir hiyerarşi içinde tanımlanır. Sayfa ve ekran ögeleri esas konudur. Böylece, kullanıcının görüş alanı sayfa/ekran işlevine yönlenir yani daha sıradan web siteleri için sans-serif yazı tipleri gibi örnekleyebiliriz.
  • Kullanıcıların belirsizliğini gidermeye ve onlara doğru görsel ipuçlarını hızla sağlamaya yardımcı olmak için seçimlerinizi ve proje kullanımınızı optimize etmek için altın oran, üçte birler kuralı ve Gestalt ilkeleri gibi zamansız kurallar ve ilkeleri kullanabilirsiniz. Örnekleyecek olursak, Gestalt ilkesini kullanarak, insanların bir şeyleri nasıl gördüğüne dair evrensel gerçeğin avantajından faydalanabilir ve markanız hakkında doğru bilgiler verebilirsiniz. Bu, kullanıcı güveninin en üst düzeye çıkarmak için şeffaflığın korunmasını içerisinde barındırır.
  • Bağlamı hatırlayın. Kullanıcılar tasarımlara ve ürünlere erişi ve bunları kullanırlar. Hedeflerine ulaşmak ve hızlı bir şekilde sonuç almak isteyen kullanıcılar, kullanım kolaylığını en üst düzeye çıkaran ögeler içeren basit ve net düzenlere ihtiyaç duyarlar. Acil ihtiyaçlarına saygı duyduğunuzda ve bilişsel yüklerini azaltmak için yığınlamayı kullandığınızda, takdirleri tasarımınızın başarısına yansıyacaktır. Tasarımınızdaki en önemli özellikleri vurgulamak ve daha az önemli özellikleri kapatmak veya gizlemek için estetiği kullanabilirsiniz. Örneğin, Google iyi bir estetik çok basit olabilir düşüncesiyle kendini göstermektedir.

Her şeyden önce tasarım, kullanıcılarla bir diyalogdur. Bu nedenle estetik ve minimalist tasarım-sıfır dağınıklık- buluşsal değerlendirmede kullanılabilirlik sorunlarını kontrol etmek için kullanılan ilkelerdir. Ürün yerleşim seçenekleriniz, markanız hakkında yeni ve ilgi çekici bir hikaye anlatırken kullanıcılarınıza doğru içeriği göstermelidir. Her sayfadaki/ekrandaki genel etkileri de dahil olmak üzere tüm ögelerinizin bir amacı olmalı ve kullanıcıları hemen yapmak istediklerini yapmaya yönlendirmelidir. Temiz, güzel ve çok kullanışlı bir tasarım oluşturmak için genellikle ilgili içerikten öden vermeniz ve azaltmanız gerekir. Bununla birlikte işlevsel olarak tasarımın temelinde, kullanıcıları orijinal amaç için kullanmaya çeken, çekici bir ürün her zaman önce gelir. Sanattan farklı olarak, iyi bir tasarım estetiğinin anlaşılması kolay olmalıdır. Kullanıcıların, tasarımınızın ne anlama geldiğini tahmin etmesine gerek yoktur.

HARİKA BİR WEB TASARIM İÇİN 4 TASARIM PRENSİBİ (CRAP DESIGN)
Etkili bir görsel tasarım, ilk bakışta kullanıcının dikkatini çekmelidir. Bunu yapabilmesi için kolay ancak temel olan prensipler, amatörce olmayan ve dikkat çeken grafik tasarımlar yapabilmenize yardımcı olacaktır. Öncelikle CRAP tasarımın 4 ögesini codeliva web tasarım olarak aşağıda tanımladık:

  1. Yakınlık/Gruplama (Proximity): Tasarıma başlamadan önce tüm bilgilerin alaka düzeylerine göre bir araya getirilerek tasarımda kullanılması demektir. Bu ögeler bloklar halinde organize olarak, dağınık görüntüyü ortadan kaldırırlar.
  2. Hizalama (Alignment): Rasgele bir araya getirilmiş bilgileri, birbirleriyle bağlantılı olacak şekilde düzenleyip estetik bir görüntü elde etmektir.
  3. Yineleme (Repetition): Görsellerin (metin, çizgi, renk gibi) tekrar edilerek güçlü bir perspektif oluşturmasıdır.
  4. Zıtlık (Contrast): Web sayfasının tasarımında elemanların farklılaştırılarak daha belirgin olmasına yardımcı olur.

Harika web tasarımların ortaya çıkabilmesi için;

  • İlk adım olarak bu 4 temel prensibi öğrenmek gerekir.
  • İkinci adımda mevcut bir tasarımdaki problemleri belirlemek ve sorunların farkına varmak gerekir.
  • Üçüncü adımda ise tüm bu elde edilen verileri tasarıma uyarlamaktır.

Görüldüğü gibi yalnızca bir şeyleri öğrenmekle de kalmayıp bunları pekiştirmek için pratikler yapmanız gerekir. Şimdi 4 temel CRAP tasarım prensiplerine geçebilirsiniz.

1. Yakınlık/Gruplama Kullanmak
Yakınlaştırma, web sayfalarında gezinen kullanıcıların birbiriyle ilişkili olan ögeleri bir arada görmesini sağlar. Bu sayede kullanıcılar nesnelerin birbirleri ile olan ilişkilerini arama çabasına girip zaman kaybetmez ve bilgilere daha hızlı ulaşırlar.

Bir e ticaret sayfasında kullanıcılar gezinirken tasarımcıların ilişkilendirilmiş ögeleri bir araya getirmiş olması satın alma işlemlerini hızlandırır. Ürünler ve diğer birçok ögenin tasarımda bir arada olması kullanıcıyı yormaz ve ona inceleme fırsatı bırakır. Böylece e ticaret mağazasının sadık müşterilerini de kazandırmış olursunuz.

Yakınlık prensibi, birbirleriyle alakalı nesnelerin, birbirine yakın yerleştirilerek gruplanmasıdır. Bu sayede dağınık bir yapıdan ziyade organize bir tasarım elde edilir.

Kullanıcıların web sayfasına ilk baktığında gözünün nereden başlayacağı, nereye doğru gideceği, nerede duracağı mantıksal bir bağlantı kurularak belirlenmelidir. Başlangıç ve son durak noktaları için mantıksal bir yön belirlenmelidir.

Birbiriyle ilişkili ögeleri yakınlaştırdığımızda, otomatik olarak bir gruplaşmaya ortaya çıkar. Organize edilmiş bilgileri ise okuyup anlamak kolay olur ve daha kolay hatırlanır. Burada tasarımcı deyimiyle “beyaz boşluk” kullanmakta bu etkilerin artmasına yardımcı olur.

Tüm bunları nasıl yaparız?

Görsellerin göz hareketleri önceden hesaplanır. Birkaç nesne varsa bunlar göz hareketlerine engel olmayacak şekilde yakından uzağa doğru sıralanarak bir araya getirilir. Böylece tek bir görsel öge ortaya çıkmış olur.

Yeni başlayanlar ne yapmalıdır?

Yapılacak ilk iş, tasarım alanının tamamını doldurmak için, (başlık, detay metni, logo, grafik ögeler vs.) tüm elemanların sayfanın tamamına sığdırılması gerekir. Sayfanın tamamına sığdırma yaparken boşluklardan iyi yararlanılmalı ve boşluklar kaldığında alakasız bilgiler eklenmemelidir.

Yakınlık prensibini uygularken şöyle yapmalıyız:

  • Birbiri ile bağlantılı olan elemanlar aralarında gruplanır.
  • Fiziksel olarak alakalı olanlar birbirlerine yakınlaştırılır.

Karmaşık bilgilerin olduğu tasarımlarda öncelikle nelerin birbiriyle yakın olduğu belirlenir sonra aralarında gruplama yapılır. Bu tutumla yapılan gruplanmış ögeler, bloklar halinde okunmayı kolaylaştırır. Bir bilgi verilmek istendiğinde bu bilgi daha organize olarak kullanıcıya iletilir.

Aynı türde elemanlar gruplandığında;

  • Sayfa organize olur.
  • Verilen mesajın nerden başlayıp nerden bittiği daha belirgin olur.
  • Kullanılan beyaz boşluklar ile blokların anlaşılır olması kolaylaşır.

Web sayfası örneği olarak bir restoranın grafik tasarımını yapacak olalım ve menülerini grafik olarak gruplandırdığımızı düşürsek,

Aynı bilgiler birbirine yakın hale getirilir. Farklı bilgiler ayrıştırılarak birbirinden uzaklaştırılır. Ana menü başlıkları ve onların alt kategorileri belirlenir ve bunlar birbirlerine yakınlaştırılarak daha anlaşılır bir görüntü elde edilir. Başlıklar birbirlerinden ayrıştırıldığında estetik bir görüntü yakalamaya yardımcı olur. Bunu yapmaktaki amaç, aynı ögelerin gücünü kullanarak mesajı net bir şekilde iletmektir. Farklı bilgiler ise belirgin bir şekilde uzaklaştırılarak anlamsal kargaşayı önlemeye yardımcı olur. Menüde ücretsiz ya da indirimli olan kısımlar yine aynı gruplama içine alınarak daha belirgin olması sağlanır. Böylece tasarım güzelleştirilir.

Burada sakınmamız gereken bir sayfa üzerinde çok fazla ayrı eleman oluşturmamaktır. Gruplar sayfanın kenarında, ortasında, sağında ya da solunda sergilendiğinde bunlar birbirlerine yaklaştırılarak, eşit şekilde boşluklar verilmelidir. Mutlaka birlikte olmaması gereken ögelerin arasında yakınlık ile bağlantı kurmaktan kaçınmak gerekir.

2. Hizalama (Alignment)

Hizalama (Alignment) Prensibi: Özet

Hizalama, web sayfasında yer alan tüm bilgilerin kullanıcıya temiz bir görüntü olarak aktarılması için yapılan düzenlemelerdir. Kullanıcıların gezindiği düzenli sayfalarda gezinmeleri kolay olur ve sıkılmazlar. Web tasarımı yapılırken, kullanıcılara bilgi içeren metinleri daha kolay ve anlaşılır aktarabilmek için hizalamalara ihtiyaç vardır.

Bir web sayfası tasarımında nesneleri hizaya katmak dağınıklıkları önleyerek sayfanın estetik görünmesini sağlar. Bunu yapabilmek için her bir öge bir diğeriyle ilişkili olmalıdır. Bilgi karmaşasını önleyecek ilişkilerin sonrasında nesneleri hizalamaya geçebilirsiniz.

Birlik ve organize olmak, bir web tasarımın sayfasındaki hizalamanın en temel amaçlarından biridir. Hoşumuza giden bir tasarıma bu yaklaşımla baktığımızda aslında her ögenin birlik içinde düzenli ve bağlantılı olarak dizayn edildiğini görebiliriz. İşte bu estetik dokunuşlar aslında bir alışveriş sepetini doldurmaya benzetilebilir. Birbirinden farklı raflarda, birbirinden farklı ürünleri tek sepete katarken onları gelişi güzel atmadığımız gibi web sayfasındaki hizalamaları da dağınık yerleştirmeyiz. Hizalama yaparken tasarımı güçlü gösteren fontlarda doğru bir şekilde kullanıldığında amaca göre, daha hoş ve estetik bir görüntü ya da daha ciddi bir izlenim sergilenmiş olur.

Hizalamayı yaparken sayfa elemanlarının nereye konulduğunun farkında olmak gerekir. Mutlaka sayfada nesneleri hizalayacak başka nesneler bulunmalıdır. Hatta bunlar birbirlerinden uzak olsalar bile yine de hizaya konulmalıdır.

Hizalama yapılırken bunun da çok abartılmaması gerekir. Bir web sayfasında birden fazla hizalama yapılacaksa (sağ, sol ya da orta) gerekmediğinde hepsi bir arada kullanılmamalıdır. Tasarım ögelerine göre hizalanacak yer belirlenmeli sürekli orta hizalama yapmamaya ve monoton olmamaya dikkat etmek gerekir. Bilinçli yapılan hizalamalar standart tasarımlar ortaya çıkarmadan yenilikçi yaklaşımlar edinmenizi sağlar.

Tasarıma yeni başlayanların en çok yaptıkları hata, sayfada boşluk gördükleri yeri bir şeylerle doldurma çabasına girmeleridir. Çünkü boşluk bırakmak yeni tasarımcılara korkutucu görünür. Yapılan bu hatalar, sayfa elemanlarının karmaşık, kirli ve estetikten uzak görünmesine neden olur. Oysa web sayfasındaki hiçbir şey karmaşık ve düzensiz olmamalı ve elemanlar arasında bir sebepten ötürü bağlantı olmalıdır.

Sayfadaki nesneler birbirine hizalandığında güçlü bir görsel düzen oluşturur. Fiziksel olarak birbirinden çok uzak olan nesneler hizalandığında bile, göz ve beyin aralarında görünmeyen bir çizgi ile bu nesneleri birbirine bağlar.

Tasarıma yeni başlayanların yaptıkları bir diğer hata ise, her şeyi ortalama eğiliminde olmalarıdır. Ancak merkezden hizalamak durgun sıradan tekdüze bir görüntü oluşturur. Soldan, sağdan, merkezden ya da iki yana hizalama gibi türleri de göz ardı etmemek gerekir.

Karmaşık bilgiler içeren (metinleri olan) bir tasarımı düzenlediğimizde sağ veya soldan hizalamak gerekebilir. Grafik elemanlarının kenarlarınıda diğerlerine göre hizalamak gerekebilir. Yine de önceden belirttiğimiz gibi hizalamalar yapılmak istendiğinde ögelerin gruplamaları göz önünde bulundurularak yapılmalı ve web sayfasındaki hiçbir şey rasgele olmamalıdır. Böylece düzenli ve organize bir görüntü kullanıcıya aktarılmış olur.

Hizalama yaparken bazen sert çizgilerden faydalanmayı gerektiren durumlarda oluşabilir. Bu çizgileri kullanmak belki bir önceki ile hiçbir fark olmadığı hissi yaratabilir. Ancak tasarım sonunda nasıl bir estetik ortaya çıkardığı fark edilecektir.

3. Yineleme/Tekrar (Repetition) Prensibi
Yineleme prensibi görsel bir elemanın tekrarlanması yolu ile sayfadaki bilginin organize edilmesi ve kullanıcının bu bilgileri kolay anlamasını sağlar. Tek web sayfa tasarımında, önemli bir prensip olmakla beraber çok sayfalı tasarımların olmazsa olmazıdır.

Tekrar kullanmak, web sitesinin kullanılabilirliği açısından önemlidir. Örneğin bir web sitesinin blog sayfasındaki maddeleme işaretleri, numaralandırmalar gibi tekrarlar metnin içerisinde verilen mesajın daha net anlaşılmasına yardımcı olur. Böylece metin kullanıcıyı sıkmaz. Burada madde işaretlerini önemli noktalarda vermek ise kullanıcıyı asıl bilgiye götüreceğinden kullanıcı, yazıların arasında kaybolmaz. Metniniz ne kadar uzun olursa olsun yapılacak maddelemeler ile kullanıcılar metnin tamamını okumak ister.

Tekrar ögelerinin kullanılması, web sitesine yönelmiş ziyaretçilerin olup bitenler için nasıl etkileşim kurması gerektiğini anlamasını sağlar. Yenilemede yapılan bazı hataları örneklersek, bir e ticaret sitenizi tasarladığınızda ‘sepete at’ butonunun her üründe farklı tasarlandığını düşünün ne kadar kafa karıştırıcı olurdu. Kullanıcı her seferinde nasıl bir butona bastığını kontrol etmek zorunda kalır ve e ticaret mağazasına güven duymayabilir. Ancak birbiriyle tutarlı butonlar tasarlayarak, kullanıcıların otomatik eylemlerde bulunmasını sağlamak durumu tam tersine çevirir. Bu durumda satışlarınız kar marjı olarak bütçenize yansır.

Yineleme yaparken tutarlı olma ilkesini mutlaka göz ardı etmemek gerekir. Tutarlı yapılan tekrarlamaları kullanıcıların karşısına çıkarmak tanınabilirliğe katkı sağlar. Bu marka bilinirliğini de beraberinde getirir. Marka bilinirliği oluşturmanın yapı taşı olarak bilinen yineleme prensibini yaparken tutarlı olmanın yanında doğal olmak gerekir. Abartıdan uzak durmalı, ziyaretçileri sıkacak tekrarlamalar yapılmamalıdır. Örneğin markanızın logosunu belli yerlerde ayarında ve doğru yerlerde kullanmak gerekir. Web sayfası açılışında logoyu kullanıcının göz hareketinin başladığı yere yerleştirip devamındaki ögeleri tutarlı olacak şekilde dizayn etmek doğal bir görüntü elde etmenizi sağlar. Markanız açısından doğru bir algı yaratmış olursunuz.

Yineleme prensibinin temel amacı birlik, tutarlılık sağlamak ve görsel ilgiyi artırmaktır. Bunu yaparken, tekrar edilebilecek, yinelenebilecek görsel ögeler tespit edilmelidir. Yinelenecek ögeler belirlendikten sonra tasarıma yansıtıldığında güçlü bir ve odaklanabilir bir yapı oluşturmuş olursunuz.

Yineleme yaparken monotonluktan kaçınmak ve genel düzeni bozmamak gerekir. Daha öncede bahsettiğimiz gibi yineleme abartılı olarak yapılmamalıdır. Tasarımda belli parçalar tekrar edebilir ancak bu doğal bir görüntü oluşturmalıdır.

Yinelenen nesneler, kalın (bold) bir font, ince bir çizgi (rule) belirli bir madde imi, renk, şekil, tasarım elemanı, bir düzen parçası (format) vb. olabilir. Tasarıma eklenen bu yinelemeler okuyucunun bilgileri tanımlayabilmesine yardımcı olur.

Çoklu sayfalarda yinelemeler yaparken tutarlı olmak okuyucuyu bir şeyleri arama çabasına itmez. Göz hareketlerine uyumlu yapılan yinelemelerle kullanıcı başlangıç ve bitiş noktalarını bilir. Tasarımda kullanılacak yineleme ögeleri hem içeriklerin belirleyici olmasına katkı sağlar hem de estetik bir görüntü oluşturur.

Birden fazla tasarım elemanın olduğu durumlarda kurumsalı yansıtmak istediğinizde bunu tutarlı bir şekilde yapmak, kurumsal kimliği olumlu etkiler. Web sayfalarınızı gezen kullanıcılar bir rehber eşliğinde hareket etme fırsatı yakalar. Web sayfanızın metin kısımlarında yapacağınız, kalın/ince fontlar, kare madde imi (bullet), girintiler (indents), boşluklar, hizalamalar gibi yinelemeler zengin bir görsel etki oluşturur.

4. Zıtlık (Contrast) Prensibi
Kontrast, görseli inceleyen kullanıcının çeşitli grafik tasarımlarını ayırt etmesine yardımcı olur. Ayrıca web sayfası içerisindeki önemli nesnelerin göze çarparak daha belirgin bir hale getirir. Örneğin, web sitenizin açılış sayfasını tasarladığınızda, CTA butonu, ana başlık ve önemli mesajları içerdiğinde bunları daha ilgi uyandıran bir hale getirmek için kontrast ayarından faydalanabilirsiniz. Örneğin, bir markanız ve sloganınız olsun. Bunları web sayfasının girişinde diğer içeriklerden daha farklı boyutlarda yazmak kullanıcının onlara odaklanmasını sağlar.

Bu ilke ile kullanıcıda ne yapması gerektiği konusunda bilgiler aktarırken, hangi eylemlerde bulunması gerektiğine de yardımcı olursunuz. Çünkü bazen kullanıcılar arama motorlarına arattığı şeyleri bulmak için gezinirler. Aradıkları şeyin sayfanızda olup olmadığını göstermek sayfa performansınız açısından da olumlu olacaktır.

Kullanıcıların göz gezdirdiği durumlarda kontrast ayarları hoş karşılanır. Web sayfanızda birbirinden farklı olarak belirlediğiniz iki eleman belirlediğinizde bunların yazı fontu, rengi vs. farklı olmalıdır. Tasarımda zıtlık yapılmasındaki temel amaç, sayfayı daha ilgi çekici hale getirmek ve bilginin organize edilmesini sağlamaktır.

Peki bu kontrast ayarını, kullanıcıyı kaçırmadan nasıl yapabiliriz?

Font seçimlerine zıtlık ögeleri olan, renk, boyut, çizgi kalınlığı, boşluklar vs. eklenmelidir.

Kontrast ayarının çeşitlerini ele alırsak;

  • Renk Kontrastı: Renk skalalarının, aralarındaki etkileşimler sonucunda ortaya çıkarılan ayarlamadır. Bizler renkleri bazen gruplandırırız. Mesela sıcak-soğuk renkler, açık-koyu renkler, mat-parlak renkler gibi yaptığımız renk gruplamalarına kontrast ayarlarında başvurabiliriz.
  • Şekil Kontrastı: Web sayfasında bulunan ögelerin nasıl görünmesi gerektiği konusunda onları yeni biçimlere sokmaktır. Şekilleri, kare, dikdörtgen, daire, üçgen, gibi farklı şekillere katarak zıtlık oluşturulur.
  • Miktar Kontrastı: Fiziksel olarak web sayfasında görülen nesnelerin tasarıma aktarılırken, büyük-küçük, az-çok gibi ölçütler verilerek yeniden oluşturulmasıdır. Bu ayarlamalar genellikle bir olumlu bir olumsuz durumlarda kullanılır. Örneğin web sayfanızı sabun ve deterjan tasarımı isteyen bir firma için oluşturuyorsunuz. Deterjanın gücünü gösterebilmek için küçük ve büyük lekeler bir tşörte eklediğinizde ve deterjanın bu lekeleri çıkardığını gösterdiğinizde, orada kullandığınızı büyük-küçük kontrastı deterjanın gücünü ortaya çıkaracaktır.
  • Yön Kontrastı: Web sayfasındaki ögelerin tasarlandığı aşamada birbirlerinden farklı yönlerde görünmesinden kaynaklanan zıtlık ayarıdır.
  • Aralık Kontrastı: Web sayfasındaki elemanlar arasındaki uzaklığın bariz bir şekilde aralıklı olmasıdır. Aralıklar birbirinden önemli düzeyde farklı olur ve ya belli bir düzene bağlı kalmadan gezinme sırasındaki ani artış ve azalışlardan kaynaklanan ayardır.
  • Çizgi Kontrastı: Farklı ince ve kalınlıktaki çizgilerin bir arada kullanılmasıdır. Bunlar ögelerin durumlarına göre bir web sayfasında, sert çizgilerler yumuşak çizgiler, hareketli çizgilerle hareketsiz çizgiler, koyu çizgilerle açık çizgiler olarak oluşturulabilir.
  • Üslup Kontrastı: Ters özelliklere sahip ögelerin web sayfası içerisinde bir araya getirilerek oluşturulan zıtlık ayarıdır.

Zıtlıkta her şey büyük yazılmaz. Normal cümle düzeni kullanılır. Yakınlık prensibi ile beraber gruplanması gerekenler belirlenir. Boşluklar ile ayrılması gerekenler birbirinden ayırılır. Hizalamalarla da düzen oluşturulur.

Zıtlık bazı durumlarda tekrar eder ama logoda her zaman olumlu olmaz. Bu nedenle bir web sayfasını açtığımızda, sol üstte ilk olarak logo bizi karşılar. Yani logoyu sayfanın her yerinde farklı tiplerde göremeyiz. Tasarımda zıtlık oluşturduğumuzda bunu logoda dikkatli uygulamalak gerekir.

Zıtlık genellikle şu şekilde olur; küçük ve büyük puntolarla yazılar arasında zıtlık yapılarak odaklanma sağlanır böylece mesaj daha belirgin olur. Daha sonra gereksiz olan nesnelerden kurtularak sade bir görüntü elde edilir.

Tasarıma yeni başlayanların genellikle korkuları küçük puntolar olur. Ayrıntılı bilgilerin olduğu metinleri, küçük puntolarla yazmaktan korkarlar. Bu her zaman korkulacak bir şey değildir. Büyük puntolarda doğru yönlendirmeler yaptıysanız okuyucu devamını da merak edeceğinden, vereceğiniz küçük mesajlarla da ilgilenecektir. İlk yönlendirmede ilgiyi uyandıramadıysanız diğer her şeyin büyük olması da bir şey ifade etmeyecektir.

Sonuç olarak;

Yakınlık, hizalama, yineleme ve zıtlık prensiplerinin de bir arada bulunması, toplandığında büyük bir etki yaratacaktır. Bir tek prensibe bağlı kalarak ortaya çıkan tasarımlar genellikle çok nadiren yapılır ve bunlar da ilgi uyandırmaz. Bu 4 prensip birlikte kullanıldığında tasarımda ya bağırmış ya da fısıldamış oluruz. Doğru yapıldığında ise bağırmakta fısıldamakta antipatik bir etki uyandırmayacaktır. Yeter ki cesur olun ve tasarımda bağırmaktan ya da fısıldamaktan korkmayın.

Web tasarımında kullanılan 4 prensipte, odak olmalı, hiyerarşi olmalı, gözün durduğu yerler olmalı, font seçilmeli, beyaz boşluk olmalıdır. Asimetrik yapıları yerine göre oluşturmak merkezi olmayan güçlü tasarımlar oluşturacaktır. Tasarım hayata geçmeden önce bu kriterleri bilmek, problemleri tespit etmek ve bu prensipleri uygulamak harika tasarımlar ortaya çıkarmanızı sağlayacaktır.

Aşağıdaki örnekte uygulanan 4 temel tasarım prensibine bakalım:

Diyelim ki bir kapak tasarımı yapmamız gerekiyor. Tasarımımız aşağıdaki gibi olsun ve bunu daha ilgi çekici bir hale getirelim:



1. Önce gruplama ile ilgili bilgiler bir araya getirilmiş ve ilgisizler ayrıştırılmış.



2. Sonra hizalama ile güçlü bir tasarım ortaya çıkartılmış.



3. Sonra yineleme ile ufak bazı grafik ögeleri ve fontlar tekrarlanmış.



4. Ve son olarak zıtlık kullanılarak tasarım bambaşka bir hale getirilmiş.