Tasarımda Kontrastın Tam Olarak Anlaşılması
Genellikle kontrast konusu yeni başlayanlar için ayrılmıştır. Kitaplar “siyah beyazın kontrastı var, kırmızı ve turuncu değil” diyorlar - ama çok daha fazlası var.
Yeni başlayanlar kitaplarında genellikle sadece renk kontrastına değinilir, ancak boyut ve şekil kontrastı ne olur? Çoğu zaman amatör bir tasarımcıya profesyonel birinden söylemenin en kolay yolu kontrast kullanımlarına bakmaktır.
Büyüklüğü, şekli ve rengi kullanarak bir yapı yapısı oluşturmak, okuyucuya bir sayfa etkisi ve okunabilirlik kazandıran şeydir.
Bu yazıda, kontrastı ayrıntılı olarak ele alacağız, büyük tipografiyi, korkak şekilleri, net bölünmeleri, görüntüleri ve iyi bir kullanıcı deneyimi için karşıtlığı kullanarak düzgün bir şekilde nasıl birbirine uyduğunu inceliyoruz.
Kontrasta Giriş
Kontrast olabilir tanımlanmış “bir nesnenin (veya bir görüntüdeki temsilinin) diğer nesnelerden ve arka plandan ayırt edilebilmesini sağlayan görsel özelliklerdeki farklılık” . Düz İngilizce'de, en temel seviyesinde “birbirinden farklı şeyler” olarak tanımlanabilecek . ”
Alıştırmanın her alanında yer alan tasarımcılar için, özellikle de web tasarımcıları için, karşıtlık hemen hemen her şeyin köküdür. Sürekli olarak hiyerarşileri kurmaya çalışıyor, insanları bir sayfanın belirli alanlarına çekiyor ve işimizin tam merkezinde açık ve özlü bir mesaj veriyoruz. Bir tasarımın farklı unsurları arasındaki ilişkileri yaratmak, yapabileceğiniz en önemli şey hakkındadır. Muhtemelen, bilinçli olarak ya da değil, büyük bir anlaşma yaptınız.
Açıkça görülen kontrast örnekleri siyah beyaz, büyük ve küçük, hızlı ve yavaş, kalın ve incedir. Karşıtlıklar, kontrastın ne olduğunu kavramanın en kolay yoludur, ancak tasarım çalışmasına zıtlık uygularken asla siyah ve beyaz değildir. Merak ediyor olsaydınız, “siyah-beyaz” olan bir durumdan bahsedilir, bu da “gri alan” olarak adlandırılan bir şeyin söylenmesine neden olur. Tasarımda genellikle farklı fakat karşıt olanları, örneğin bir H1 ve bir h1'i veya bir “sepete ekle” düğmesini ve bir “çıkış” düğmesini karşılaştırıyoruz. Daha büyük kontrast seviyeleri burada devreye giriyor.
Farklı kontrast türlerine ve web tasarımında nasıl kullanıldığına ilişkin bazı örneklere bir göz atalım.
Renk Kontrastı
Hepsinin en yaygın örneği, her şeyin başladığı yer burası. Eğer iki renk birbirinden farklıysa (siyah ve beyaz), yüksek kontrasta sahipler, çok benzer (kırmızı ve turuncu) ise düşük kontrastlıdır.
TekRoc, çok karanlık bir arka plan üzerinde parlak ve canlı görüntüyü üst üste bindirerek çok belirgin bir renk kontrastı kullanır. Parlak turuncu ve mavi açıkça göze çarpıyor ve göz, sayfadaki diğer şeylerin hemen üstünde onlara çekiliyor.
Tim Van Damme, GoWalla site tasarımında mükemmel renk kontrastı kullanmaktadır. Sayfanın üst kısmındaki çok renkli kenarlık, soluk arka plandan farklı olarak göze çarpıyor ve görsel ilgi yaratıyor, aynı zamanda düğmelerdeki metne son derece ince 1px damlalıklı gölgeler ekledi. Biraz daha koyu turuncu, beyaz metin ve turuncu arka plan arasında kontrast yaratmaya gerçekten yardımcı olur.
Envato, ince kontrastın ustalarıdır ve bunun için 1px sınırlarını kullanma eğilimi, muhtemelen herkesten daha fazla onlara indirgenebilir. Tüm siteleri, bölümler arasında kontrast oluşturmak için birden fazla tek piksel sınırına sahiptir. Yukarıdaki ekran görüntüsünde iki içerik alanı sadece boşluk ya da tek bir çizgi ile bölünmüş olabilir, ancak iki çizgi (bir karanlık, bir ışık) kullanarak, iki bölüm arasında son derece etkili olan ince kontrast oluştururlar.
Boyut Kontrastı
Bir sonraki en yaygın kontrast şekli boyut kullanmaktır. Küçük bir şeyin yanında büyük bir şey genellikle daha büyük olanın çok daha önemli olduğunu gösterir. Doğru, bu büyüklüğün önemli olduğunu söylüyoruz!
MadeByWater, Jordan Vitanov'un tasarım portföyüdür. Son derece büyük bir tipografi ile boyut kontrastını kullanarak, Bruce Lee'nin bir alıntı yapmasını ve bu sayede kendini MadeByWater ismiyle markalamayı seçtiğini belirtti.
28Thiers, Fransa'da çekici bir upmarket bardır. Web siteleri, dikkatinizi hemen çevreleyen muhtelif malzemelerle Martini'nin büyük fotoğrafına çekmek için büyük boyut kontrastı kullanmaktadır. Bu, sayfanın en önemli unsuru olduğu ve tasarımcının bu görüntüye bakmanızı ve son derece klas bir kuruluş olduğu gerçeğinden satılmanızı istediği belli oluyor.
SlideScreen, sitelerinde çeşitli boyut kontrastı kullanır. Ürünlerinin büyük bir ekran görüntüsüyle gösterilmesinin yanı sıra, birincil arama eylemleri için çok büyük düğmeler kullanırlar. Ürünlerinin videosunu hareket halinde izlemenizi istiyorlar ve daha sonra indirmenizi istiyorlar. Bunlar sayfanın en önemli öğeleridir, bu yüzden çevrelerini çevreleyen diğer şeylerden büyük ölçüde daha büyüktürler.
Şekil Kontrastı
Şekil kontrastı, sayfadaki diğer şeylerle karşılaştırıldığında, fiziksel şekildeki farklılıklarıyla dikkat çeken şeyleri ifade etmektir. En temel seviyesinde bu, düğmelere yuvarlatılmış köşeler eklemek gibi şeylerde kullanılabilir, ancak daha aşırı seviyelere alındığında daha fazla dikkat çekebilir.
Anebstar, başlıktaki üç önemli görüntünün sergilendiği şekil kontrastını kullanır. Web'deki çoğu şey dikdörtgen olduğundan, şekil kontrastı elde etmenin en kolay yollarından biri, bir daire kullanmaktır. Tabii ki bu örnek aynı zamanda küçük boyutlu bir kontrast da içeriyor, ancak dairesel elemanların sayfadaki her şeyden nasıl ayrıldığını açıkça görebiliyorsunuz.
Carbonmade muhteşem çizimler ve iyi sunulan içeriğin gerçek bir karışımı ile çarpıcı bir sitedir. Burada basit bir kayıt düğmesi işe yarayacaktı, ancak boyut ve renk kontrastı muhtemelen yoğun arka plandan yeterince ayrılmayacaktı. Düğmenin ardında dostça bir ahtapot eklemek, göze doğrudan doğruya şekil vermek için farklı bir şekil verir.
WireframePlus, hizmetlerinin fiyatını vurgulamak için basit ama son derece etkili bir şekil kontrastı kullanır. İçeriğini okumanızı istiyorlar, ancak her şeyden önce, arkasında büyük bir daire oluşturarak sizi harika fiyatlarında satmaya çalışıyorlar.
Konumsal Kontrast
Konumlandırmada karşıtlık yaratmak, sadece farklı hizalamaları kullanarak bir eleman hiyerarşisi oluşturmak için çok temiz bir yoldur. Son zamanlarda bu teknik, en son portföy sahasında aşırı derecede kullanan Elliot Jay Stocks gibi insanlar tarafından popüler hale getirildi.
Elliot Jay Stocks, sitesinde bulunan tüm öğelerin hizalanmasını tanımlamak için ayrıntılı bir kılavuz kullanır. Sırasıyla sol veya sağa girintilendirilerek belirli alanlara dikkat edilir. Bu özel ekran görüntüsünde, giriş paragrafı gerçekten göze çarpıyor çünkü gözün en solunda, gözün ilk önce bir şeyler okumasıyla hizalanmış. Bu tür bir hizalama, son on iki ay içinde, aynı tarzdaki konumsal kontrastlı tasarımlar yaratmak için birçok başka tasarımcıya “ilham verdi”.
SimpleBits, Dan Cederholm'un altında çalıştığı bir markadır. Dribbble . İlk gösterimlerde SimpleBits sitesinin herhangi bir konumsal kontrastı var gibi görünmüyor, ancak kaydırma işlemine başladığınızda, hepsi netleşiyor. Bazı insanlar düzgün bir stilistik etki yaratmak için sabit bir arka plan görüntüsü kullandığında, Dan, logosunu ve navigasyonunu tamamen konumuna getirdi, böylece nereye gittiğinizden bağımsız olarak, ekranda her zaman aynı yerde kalırlar. Bu, standart olmayan konumsal kontrastın harika bir örneğidir.
SquaredEye, Matthew Smith tarafından yürütülen tasarım mağazasıdır ve portföyündeki vaka çalışma sayfaları, konumsal kontrastın harika kullanımını sağlar. Bu fikri gerçekten anlamak için tüm sayfayı görmelisiniz, ancak aslında Matthew, sayfanın her bölümü için titizlikle özel konumlandırma oluşturdu. Bu, bölümler arasında fevkalade bir kontrast yaratır ve okuyucunun dikkatini dağıtmadan büyük bir görsel ilgi oluşturur.
Kontrast Sonuç
“Işık ve karanlık” dan çok daha fazla kontrast var - tasarımdaki en önemli ilkelerden biri ve bunu hiç kullanmadan neredeyse hiç kullanamayacaksınız.
Tasarımlarınızı bir sonraki seviyeye taşımak, köşeleri yuvarlamak ve her şey için gölgeler bırakmak için bir sonraki grup vagonu bulmakla ilgili değildir, bu, tasarımın arkasındaki mesajı iletmenin daha iyi ve daha etkili yollarını bulmakla ilgilidir.
Kontrastı ayrıntılı olarak araştırmak ve onu tam potansiyeline kullanmak, bunu yapmanın en iyi yollarından biridir.
Ne düşünüyorsun? Tasarımlarınızda karşıtlık için ne kadar dikkat ediyorsunuz? Her zaman düşündüğünüz bir şey mi yoksa doğal olarak gelen bir şey mi?