Yatay Site Tasarımları

HTML5 ve CSS3’ün gelmesi ile birlikte web tasarımda bir çok şey değişti. Scroll kullanımı bile bu değişiklikler arasında yer alıyor. Önceden sitemizin yan tarafında bulunan dikey scroll artık yatayda da kullanılıyor yada hiç kullanılmadan ekran hesaplamaları ve butonlarla ekranı farklı bir biçimde yönetebiliyorsunuz.

Şuan için kullanımı çok fazla yaygın olmasada geleceğin web sitelerinde scroll kullanımını oldukça geliştireceğiz. Doğru fonksiyonelliği yakalamak ve kullanışı kolaylaştırmak adına bu gibi çalışmalar büyük rol oynayacak.

Peki scroll kullanımı neden değişmeli?

Scroll’u çevirmekten parmağınızın yorulduğunu hissettiğiniz kesinlikle olmuştur. Bu gibi durumlar için scroll hareketlerini hızlandıran siteler bile var. Durum böyle olunca sayfaları sahne sahne tasarlamak, yatay ve dikey scroll’u bir bütün içinde kullanmak gerçekten hem eğlenceli hemde daha kullanışlı olabilir.

Şimdi bununla ilgili bulabildiğimiz örnekleri inceleyelim.

İncelemek istediğiniz sitelerin üzerine tıklayabilirsiniz.

Reverse Buro

Bu site bir porfolio sitesi. Scroll’u dikey yerine çok daha farklı düşünerek yatayda ve dikeyde çok doğru kullanmış. Böyle bir site için dikey scroll hem estetik hemde kullanışlılık açısından şuan ki kadar iyi durmayacaktır.

reverse-buro-scroll-ornegi

Gavin Castleton

Sitedeki butonlar biraz küçük olduğu için kullanışlıklık anlamında belki biraz zor olabilir fakat yinede sroll kullanımı için iyi bir örnek. Sol taraftaki butonlardan müzik listesine ulaşıp sağ taraftaki butonlardan detaylı bilgiye ulaşabiliyorsunuz ve sitede scroll cubuğu görünmüyor bile.

gavin-scroll-tasarimi

Jens Lehmann

Scroll kullanımı oldukça akıllı tasarlanmış, scroll kullanmadan sahneler arasında yön tuşlarıyla hızlıca gezebiliyorsunuz. Ayrıca Yatay kullanımda scroll pasif iken dikey kullanımda scroll’u rahatça kullanabiliyorsunuz. Bu sitede iken scroll’un gereksiz olduğunu düşünebilirsiniz çünkü yön tuşlarıyla siteyi gezmek çok daha kullanışlı.

ambasdor-farkli-scroll-ornegi

James Joyce

Eğer bir notebook kullanıcısı iseniz sitede gezinmeniz çok daha kolay. Notebook üzerindeki touchpad ile sadece yana hareket edebilmek için dokunduğunuzda hızlı bir şekilde sitede dolaşabiliyorsunuz. Eğer mac kullanıyorsanız sitede gezinmeniz çok daha kolay çünkü mac’in touchpad hassasiyeti diğer bilgisayarlardan biraz daha hassas.

james-farkli-scroll-yatay

Here Design

Bu sitede ise scroll kullanımı tamamen kapatılarak ziyaretçilerin sitede sadece mouse tıklama hareketiyle gezinmesine izin verilmiş. Aslında ziyaretçileri istediğiniz kısma yönlendirmek adına doğru yol izlenmiş olabilir.

here-yatay-web-site-ornekleri

C. L. Holloway

Hem touchpad ile yana hareket ettirerek hemde mouse ile navigasyon butonlarına tıklayarak sitede gezinmek mümkün. Aslında böylesi özellikle eski nesil web sayfalarına alışkan olanlar için geçiş sürecinde başarılı bir alıştırma örneği olabilir.

hollaway-yatay-site

WWF

Tamamen navigasyon ile yönlendirmeyi hedeflenmiş başka bir örnek. İçeriği az, sunum sayfaları için oldukça ideal olabilir.

wwf-site-ornegi

Blocklevel

Bu site tam anlamıyla yatay sayılmaz fakat farklı bir özelliği dikkatimi çekti. İçerik bölümünü mouse ile tutup kaydırabiliyorsunuz. Normal scroll işlevine devam ederken içerik sayfasını mouse ile yönetebilmek farklı bir interaktif görünüm sağlamış.

blocklevel-yatay-menu-ornegi

Hot Dot

İşte hem interaktif hemde kreatif güzel yatay siteye en iyi örnek! Normal scroll hareketiyle sitede rahatça yatay konumda gezinebiliyorsunuz.

hotdot-yatay-site

Rezo Zero Interactive

En kreatif örneklerden biride bu site sanırım. Hem yatay hemde dikey pozisyonda içerikler oldukça güzel konumlandırılmış. Ayrıca içeriklerin hareketli gelmesi siteyi daha kaliteli göstermiş.

rezo-zero-yatay-ve-dikey-scroll

Nerval

Bu sitede de yatay kullanım akıllıca düşünülmüş, hem scroll ile yatayda hareket ettirebiliyor hemde mouse ile çalışmalar arasında gezebiliyorsunuz.

nerval-yatay-site

Giellesse

Yatayda navigasyon ile dikeyde ise sadece içerikleri scroll ile hareket ettirebildiğinİz farklı bir yatay site tasarımı örneği.

giellesse-yatay-site

Siteler awwwards üzerinden seçilmiştir, daha fazla örnek için awwwards gibi sitelerden faydalanabilirsiniz.


Bir cevap yazın

E-posta hesabınız yayımlanmayacak.

This site uses Akismet to reduce spam. Learn how your comment data is processed.