Tek Sayfa Web Sitelerinin Bir Vitrini
Çok az sayıda sayfa içeren ve bir ton içeriğe sahip olmayan bir web sitesi tasarlarken, tek sayfalık tasarım, siteyi birbirinden ayırmanın yenilikçi bir yolu olabilir.
Tek sayfalık web siteleri, çoğunlukla, yükleme sürelerini önemli ölçüde arttırmadan, bir sayfaya daha fazla içerik sığdırmak için HTML ve CSS ile birlikte JavaScript ve Flash'ı kullanır.
Ziyaretçilerin sayfanın ana bölümüne sorun yaşamadan geri dönebilmelerini ve herhangi bir bölümden başka bir bölüme geçebilmelerini sağlamak için, tek sayfalı siteler söz konusu olduğunda gezintiye özel bir önem verilmelidir. Bu genellikle yapışkan başlıklarla veya her bölümde yinelenen gezinme ile elde edilir.
Aşağıdaki siteler tek sayfalık web sitelerinin mükemmel örnekleridir. Hem kullanılabilir hem de estetik olarak hoşlarlar ve tek sayfalık formattan tam olarak faydalanırlar.
Roaaar
Roaaar web sitesinde, her bölümün alt kısmındaki "en üste dönüş" bağlantısı bulunur ve bu da ziyaretçilerin başlığa göre gezinmeye geri dönmesini kolaylaştırır.
Ricardo Mestre tarafından Duplos
Duplos sitesi, ana içeriği sayfanın altına koyarak farklı bir yaklaşım benimsiyor. Gezinme, sayfayı aşağıdan daha yukarı götürür.
Grzegorz Kozak
Buradaki deniz feneri motifi, sayfanın tüm uzunluğunu boşluktan aşağıya doğru akıyor. Deniz fenerinden pencere dışında asılı olan afişler, sayfanın üst kısmına navigasyonun olduğu yere dönerler.
Kaleydoskop
Kaleidoscope web sitesi, sitenin her bölümünün arkasında farklı arka plan resimleri ve dokular kullanır. Bu, her bir içerik alanını birbirinden ayırır.
Dan Scotton
En az içerikli bu gibi kısa sayfalar, özellikle iyi çalışır. Sayfayı aşağı kaydırdığınızda gezinme kenar çubuğunda kalır.
Viktor Shvaiko
Bu site, gezindiğiniz sayfaya ulaşmak için yeni içerik yüklemek için diğer içeriğe kaydırarak yatay bir kaydırıcıyı kullanır. Gezinme çubuğu, bulunduğunuz sayfaya bakılmaksızın üstte kalır.
Jon Rundle
Bunun gibi basit, kişisel profil siteleri tek sayfalık bir tasarıma mükemmel uyum sağlar. Simgeler ve vurgu renkleri, tasarıma biraz daha görsel bir ilgi katmaktadır, aksi halde çok nötrdür.
Jason Reed
Yeni içerik görüntülemek için bir akordeon efektinin kullanılması, içerik çok uzun olmadığında iyi çalışır. Resimli başlık resmi ve gri ve turuncu renk şeması hem siteyi öne çıkarır.
Tweet CC
Dokular ve basit çizimler kullanarak Tweet CC sitesi görsel olarak çekici olurken, aynı zamanda tek renkli bir renk düzeni ile basit tutulur.
PSD Düzeni
Düz ileri hizmetler sunan siteler, tek sayfalık bir biçimde özellikle iyi çalışabilir. Tek bir sayfada sunulması ve saklanması için çok fazla bilgi yok, potansiyel müşterilerin ihtiyaç duydukları şeyi hızlı bir şekilde bulmasını kolaylaştırır.
Feelwire
Feelwire sitesi işleri basit tutar ve araç ipuçlarıyla ekstra bilgi sunar. Beyaz arka plan minimalist olmayı sürdürür ve cesur ikonlar görsel ilgi alanı yaratır.
Sıcak Meteor
Sıcak Meteor sitesi tipografi odaklı, gri ve kırmızı bir tasarım kullanır. Başlık yapışkandır ve gezinmeyi sayfanın üst kısmında tutar.
Mia Makila
Mia Makila sitesi, daha geleneksel 3 sütunlu bir tasarım kullanarak, burada bulunan diğer sitelerin çoğundan biraz farklı. Her kategorideki resimleri görüntülemek için JavaScript kullanılır.
Costas Theoharis
Bu site, her bir bölümün (başlık, ana içerik ve altbilgi) birbirinden ayrı kayan ilginç bir kaydırma efekti kullanmaktadır.
Javan Makhmali
Burada kullanılan ızgara tasarımı, tek sayfalık tasarımlarda çok sık görülmez. Ancak bol miktarda beyaz alan ile, çok akıcı bir tasarıma sahip birçok farklı içeriğin dahil edilmesi gayet iyi çalışıyor.
Takım Nomad
Buradaki tasarım basit ve basittir ve 2 sütunlu tasarım, sayfaya daha fazla içerik sığdırmak için ağır görünmeden iyi çalışır.
Jorge Fino
Jorge Fino'nun sitesi, odağı tam anlamıyla tasarımlara koyuyor. Gezinme var olmayan (kaydırma dışında) ve iletişim bilgileri hem üstbilgiye hem de altbilgiye eklenir.
Moly Yim
Navigasyon bulunmayan başka bir site. Gerçi makul bir uzunlukta tutuluyor, bu yüzden sorun değil.
Justin Tsang
Buradaki navigasyon biraz farklı. Sizi en üste geri götüren düğmeler veya her bir ekranda gezinmeyi eklemek yerine, her bir projenin ve içerik alanının yanında bir ekran yukarı veya aşağı gitmek için düğmeler bulunur. Her ana bölüme geçmek için üstte bir gezinme çubuğu da var.
Mogulista
Geçici web siteleri, tek sayfalık bir site kullanmak için harika bir zamandır. Bu site, sitede her "sayfa" için yeni içerik yüklemek için JavaScript kullanır.
Chirag Solanki
Bu sitede gezinme, ziyaretçilerin sayfanın üst kısmına geri dönmek için her bir bölümün sonunda ana gezinmeyi ve bağlantıları birleştirir. Resimli karalamalar, her bir bölümü birbirine bağlar ve tüm sayfaya bir süreklilik hissi verir.
Sığınak Stüdyoları
Deluge Studios sitesinin yerleşimi, burada en eşsiz özelliklerden biridir. İki sütun, tümü üst navigasyondan bağlanan beş içerik alanı sağlar. Daha küçük "kenar çubuğu" stil sütununda ana içerik bölümleri dahil etmek, sayfayı önemli ölçüde daha kısa hale getirir.
Sahne 5 Stüdyosu
Stage 5 Studio sitesi, gezinme olmaksızın kısa. “Daha fazla bilgi edinin” bağlantıları, her bir proje hakkında daha fazla bilgi kayarken, diğer içerikler “kenar çubuğunda” tutulur.
SmartCube
SmartCube sitesi, navigasyonu her zaman ekranda tutmak için yapışkan bir başlık kullanır. Ayrıca içeriğe bağlı olarak 1- ve 2 sütunlu düzenlerin bir kombinasyonunu kullanır.
Eklektik Tasarımlar
İçerik bölümleri benzersiz arka plan dokuları ile ayırt edilir. Tipografi, her şeyi sayfa boyunca bir araya getirir ve daha fazla yer kaplamadan ek ürünleri görüntülemek için JavaScript kullanılır.
Bir iPhone Uygulamasının İçindeki Sırlar
Bu, burada özellikli tek sayfalık web sitelerinden biridir. Bir bölümden diğerine ulaşmayı kolaylaştırmak için navigasyonlu yapışkan bir başlık kullanır.
Dökmek öldürmek
Böyle bir sadaka sitesi gibi kısa ve bu noktada tutmak için gelen bağış sayısını artırmak için neredeyse emin olun. Kalın tipografi, grafik görüntüleri ve altındaki bir bağış formu dahil tüm birlikte mükemmel çalışır.
Emily Whitesmith
İşte sizi sayfanın alt kısmında başlatan başka bir site. “Daha fazla bilgi edinin” bağlantısına tıklamak, sayfayı bir portföy alanına kaydırır. Modal pencereler, her bir kumaşın yakın planlarını verir.
uçan
Uygulama web siteleri, genellikle sınırlı içeriğe sahip oldukları ve yalnızca bir ekran görüntüsü veya iki resim için olduğu için tek sayfa tasarımlarına uygundur.
Hayley Smith
İşte başka çok uzun bir sayfa. Gezinme, her bölümün üst kısmında tekrarlanır ve logo, sayfayı kaydırdıkça aşağı doğru kaydırır.
Conway Anderson
Conway Anderson sitesi, içeriği görüntülemek için kaydırıcıların (yaklaşık ve iletişim bilgileri için) ve modal pencerelerin (çalışma için) bir karışımını kullanır. Basit, ızgara tabanlı tasarım ve tek renkli renk düzeni, işleri basit ve modern bir görünümde tutar.
Daniel Moir
Daniel Moir'in sitesi, minimum içerik ve gezinme olmaksızın basittir. 2 sütunlu tasarım, sitede farklı içerik türlerini düzenler ve daha kısa tutar.
Günde Latte
Lansman öncesi web siteleri, burada gösterildiği gibi, tek sayfa tasarımlarına çok uygundur. Çok sayfalı bir siteyi haklı çıkarmak için henüz yeterli içerik yok.
Arı Kovanı Pazarı
İşte başka bir tek sayfalık site. Parlak sarı arka plan ve arı illüstrasyonları tüm siteyi birbirine bağlar ve navigasyon her bölümün üst kısmında tekrarlanır.
Rubidine
Rubidine sitesi, her bir içerik bölümü ile karışan şeffaf bir arka plana sahip yapışkan bir başlık kullanır.
Jakub Szymanski
Bu site yeni içerik yüklemek ve sayfayı aşağı kaydırmak için JavaScript'i kullanıyor. Yapışkan altbilgi, ana sayfa "sayfasından" sonra "üst dönüş" bağlantısına sahip olarak görünür.
Tyler Termini
Tyler Termini'nin web sitesi kısadır, sadece üstbilgilerde gezinir. Çok uzun bir sayfa olmadığı için, en üste geri gitmek zorunda kalmanız gerçekten sorun değil (ya da yalnızca navigasyonu kullanmadan sadece her bir bölümde gezinmek).
Josh Sender
Gri tonlamalı renk şeması burada harika görünüyor. Görüntülenen çalışma, üzerine gelindiğinde tam renkli olur ve daha sonra bir renk modal penceresi tıklandığında daha büyük bir sürüm açılır.
Sadece WDD için yazılmış ve derlenmiş Cameron Chapman .
Tek sayfa web siteleri hakkında en çok neyi seviyorsunuz? Burada özellikli olmayan favorileriniz var mı? Lütfen aşağıdaki yorumlarda paylaşın…