Web son on yılda çok değişti ve aynı zamanda hiç değişmedi. 10 yıl geriye bakarsak, web sitesinin çok sayıda site genelinde çok yaygın bir yerleşim düzenine sahip olduğunu görürüz. Bu go-pattern, bir başlık, altbilgi, kenar çubuğu ve içerik alanından oluşuyordu. Web için beklenen düzen yapıldı. Aynı zamanda, alternatif bir düzen çağına yol açan Macromedia Flash'ın yükselişini yaşadık. Bu katı formüle sadık olmayan düzenler. Ve elbette Flash'ın patlak vermesiyle bu yaklaşım biraz azaldı… Biraz söylüyorum çünkü bir intikamla geri döndü.

Mevcut web tasarımını sergileyen birçok popüler galeriden birini incelerseniz, web sayfalarının temel yapısının sabit olan herhangi bir şey olduğuna dair şüpheniz olmayacak. Olması gereken her şeye esnek ve değişebilir. Bu benim görüşüme göre, web tasarımının en iyi ürettiği yan etkilerden biridir. Yeni norm, olduğu gibi, sabit bir formülün yokmuş gibi görünüyor.

Tüm bunlar, sıradışı düzenler olarak düşündüğüm şeyi temsil eden mizanpaj tasarımındaki birkaç yüksek düzeyli eğilimi gözlemleyebileceğimizi söyledi. Sıra dışı çünkü katı bir formül veya önceden tanımlanmış bir sistem takip etmiyorlar. Fakat onlar, bu kategorilerin her birini dolduran yüzlerce örnek olmasa da onlarca düzinelerce sağlayabileceğim eğilimlerdir.

Burada bulduğunuz şey, web tasarımına uyguladığınız temel yapıları değerlendirmenizde size ilham verecek olan eğilimlerin ve alışılmadık düzenlerin ilginç bir karışımıdır. Haydi içeri girelim ve bir bakalım…

Bölünmüş ekranlar

Bu kategoride, tüm ekranı dikey bölme kullanarak ayıran sitelerden bir seçim buluyoruz. Bunu yapmak için belki de birçok neden vardır ve bu türden birçok örneği araştırırken iki ana sebep buldum.

Birincisi, bir tasarımın gerçekten de iki önemli öneme sahip öğeye sahip olabileceğidir. Web tasarımına ortak bir yaklaşım, işleri önem sırasına göre sıralamaktır. Bu önem, daha sonra tasarımın hiyerarşisinde ve yapısında yansıtılmaktadır. Ama eğer aslında iki şey teşvik edecekseniz? Bu yaklaşım, her ikisine de önem vermenizi sağlar ve kullanıcının aralarında hızla seçim yapmasına izin verir.

Bu yaklaşım için bulduğum ikinci neden, bazen önemli bir ikiliği iletmeniz gerektiğidir. Örneğin, Sekiz ve Dört web sitesini düşünün. Burada çekirdek güçlerinin dijital kökleri ve yetenekli personeli olduğu gerçeğini aktarmak istiyorlar. Bu eşleştirme onları tanımlayan şeydir. Bölünmüş ekran bunu sunmak için güzel bir yoldur. Ve özellikle de, iki tarafın yerini nasıl değiştirdiğini seviyorum.

16
01
03
07
18

Krom yok!

Web tasarımında kullanılan ana unsurlardan bir tanesi şu unsurları içerir: bir sayfanın içeriğini bölmek için kullanılan her türlü kutu, kenar, şekil ve kap. Unsurların düzgün bir şekilde içerildiği ve içerikten ayrıldığı stereotipik bir başlık düşünün. Şimdi yaygın bir eğilim, bu ekstra kromun tümünü kaldırmaktır.

Bu minimalist bir yaklaşımdır, ancak bir adım daha ileri gider ve yol boyunca bazı ilginç yönleri vardır.

02

Bu örnekte, hepsi birlikte bir üstbilgi ve altbilgi düşüncesini ortadan kaldırdılar. Bunun yerine interaktif bir kiosk gibi hissediyor. İçeriğin hiyerarşisi, öncelikle düzeni çok sezgisel hale getirmeye yardımcı olan soldan sağa bir organizasyonla yapılır. İçeriği gezinmeyi ayırmak için krom gerekli değildir. Bunun yerine güzel ürünler parlıyor.

13

Burada, üstbilgi veya altbilginin herhangi bir hissini kaldırarak içeriğin büyük ölçüde vurgulandığını görüyoruz. Önce bir üstbilgi okumak yerine, şirketin adını ve yaptıkları (ve nerede yaptıkları) hakkında açık bir beyanı okursunuz. Ana navigasyon tarafından takip edildi. İnsanları gezinmeden önce markayı vurgulamanın harika bir yolu. Zarif bir akış sağlar. Sayfada ilerlerken ilginç bir şekilde bir başlık ve bir miktar krom elde edilir. Modeli ilham verici bir şekilde kullanan güzel ve etkili bir düzen.

15
20
17

Modüler veya ızgara tabanlı

Daha sonra modüler veya ızgara benzeri yapılar üzerine inşa edilmiş düzenlerimiz var. Bu tasarımlarda her modülün ekran boyutuna göre esneymesi amaçlanmıştır. Bu tam olarak yeni bir yaklaşım değil, ancak duyarlı web tasarımının tanıtımı daha da kullanışlı hale getirdi. Bu, Masonry gibi eklentilerle oluşturulabilen uyarlanabilir düzenlerin türüne işaret eder.

04

Bu örnek, fikri mükemmel bir şekilde göstermektedir. Tasarım tamamen duyarlı. Ekran boyutu değiştikçe, her modül, alana sığacak şekilde uyarlanır ve boyutlandırılır. Mekanı eşit olarak bölerek, tasarımın adapte olması daha kolaydır. Ve modüller arasındaki katı engelleri kıran bir eleman (daha büyük ekran boyutlarında) tanıtmak için bonus puanları alırlar.

19

Bu örnek, modelin oldukça yoğun bir sürümüdür. Elbette içeriği gerektiği gibi içeri ve dışarı kaydırmasına olanak tanıyan modüler yaklaşımı benimsemektedir. Fakat burada, önceki örneğin yoksun olduğu önemli bir tasarım öğesi var. Modüllerin büyüklüğü, önem sırasını ve hiyerarşideki yerini yansıtacak şekilde değişir. Bu modüler yaklaşımın riski her şeyi aynı büyüklükte yapmaktır, yani herhangi bir şeyi gerçekten vurgulamadığınız anlamına gelir. Aksine, bu örnek açıkça birincil öğeye önem vermektedir.

08
05
06

Tek bir ekranı doldurma

Son olarak, tasarımın ekranı tamamen doldurmaya adapte olduğu bir yaklaşım kullanarak sitelerimiz var. Bu, ekran boyutuna uyum sağladığından duyarlı tasarımın bir alt kümesidir. Ancak bu niş içinde tasarımlar, ekranı tamamen dolduracak ve kaydırma çubukları üretmeyecek şekilde adapte oluyor. Bu kayma yokluğu, içeriğin aşırı odaklanması ve içeriğin hiyerarşisinin açıkça ortaya konması anlamına gelir. Bu sitelerin odaklanma ve netliğini ferahlatıcı buluyorum.

09
10
11
12
14

Sonuç

Bu eğilimlerin her birini tecrit ederken, gerçek şu ki yapı taşlarını temsil ediyor olmaları. Ve bu yapı taşları çok farklı şekillerde monte edilebilir. Aslında, burada sunulan örneklerin çoğu tartıştığımız kategorilerden birçoğuna taşınabiliyordu. Modern web üzerinde düzenlerin çeşitliliği ve kullanılabilir olmaları gerçeği, web'i çalışmak için heyecan verici bir ortam haline getiriyor.