Sekmeler, karmaşık olmayan bir kullanıcı arayüzüne izin veren son derece pratik öğelerdir. Ve en yaygın olarak tek bir web sitesi sayfasında ilgili içeriği gruplandırmak için kullanılsalar da, bazı tasarımcılar bunlarla deneyler yaptı ve sekmeleri tüm siteler için bir gezinme aygıtı olarak kullanmaya başladı. Sayfaları basit bağlantılar olarak görüntülemek yerine, onları güzelce tasarlanmış ve temiz sekmeli menülere yerleştirerek görsel olarak çekici ve sezgisel web sitesi gezinme sistemleri oluşturmaya başladılar.
Son birkaç yılda, dikey olarak yerleştirilmiş, tam yükseklikte gezinme sekmeleri, modern web tasarımında özellikle popüler hale geldi. Bu sekmelerdeki tipografi genellikle dikeydir ve menülerin göze biraz alışılmadık ve ilginç görünmesini sağlar. Bazı durumlarda, sekmeli menüler üste bile yerleştirilmez. Genellikle ekranın tamamını veya önemli bir bölümünü kaplayarak sayfa içeriğinin önemli bir parçası haline gelirler. Ayrıca hem dikey hem de yatay sekmeler genellikle çekiciliği artıran ve onları daha belirgin hale getiren ilgi çekici efektlerle süslenir.
Bu makalede, sekme tabanlı gezinme tasarlarken ve sekmeleri projelerinize uygularken ne kadar yaratıcı olabileceğinizi gösteren bir web sitesi koleksiyonu paylaşacağız. Sekmeli gezinmenin çok yönlülüğünü ve esnekliğini gösteren markalar şunları içerir:
-
Kitap. Arazi
-
garip yolculuk
-
Kanal Sokak Pazarı
-
Uzay – de Uzay
-
Tablet Dergisi
-
Asma Yolu
-
Sezon dışı
-
G!theimageers
-
İnternet Elçiliği
-
EDA Mimarlık
-
Büyük Jones
Kitap. Arazi
Book.Land, işbirlikçi hikaye anlatımı için müthiş bir projedir. Bir grafik tasarımcı olan Harry Boyd tarafından, dünya çapındaki izleyicileri birlikte bir roman yazmaya teşvik etmek amacıyla tasarlandı. Her kullanıcının hikayeye kaldığı yerden devam etmesi ve ayrıca metni tamamlamak için bazı resimler eklemesi gerekir. Sitenin düzeni alışılmadık ve göze ilginç geliyor. Ana sayfa, harflerin bir saniyeliğine karalamalara dönüştüğü eğlenceli bir logo animasyonuyla açılır – iki o bir kediye, gülen yüze, bir zarfa vb. dönüşür. Ekranın her iki yanında, yerleştirilmiş kitaplara benzeyen dikey sekmeler vardır. bir rafta. Bu tasarım, sitenin amacını mükemmel bir şekilde tamamlar. Ana sayfa, büyük harfli sans serif tipografi ve çevredeki nötr beyaz rengin sakinliğiyle çatışan çığlık atan flüoresan yeşili ile acımasız bir his veriyor. Ekranın her iki yanındaki sekmeler, içeriklerinin kısa bir açıklamasını içerir. İç sayfalar, ekranın sağ tarafında solda karalamalar ve hikayeler olmak üzere iki bölüme ayrılmıştır. Her hikayenin başlığı, çevredeki içeriğin eylemsizliğini kırarak ve romanı dikkat çekici bir şekilde duyurarak heyecan verici bir şekilde canlandırılmıştır. Fiziksel kitap kopyalarında standart bir öğe olan bir barkod da vardır. Fakat 8 haneli sayı yerine bu web sitesindeki barkod saati gösteriyor.
garip yolculuk
Queertrip bir LGBT seyahat acentesidir. Proje, kendini queer olarak tanımlayanları, güvenlik endişesi duymadan seyahat edebilecekleri mekanlarla tanıştırmak amacıyla kurgulandı. Ana sayfa, Dünya’nın dönen bir resmini ve dünyayı dolaşan animasyonlu bir oku gösterir. Aynı zamanda, arka planın, öğelerin ve tipografinin rengi birkaç saniyede bir değişerek gökkuşağının renklerini yansıtır. Ekranın sağ tarafında iki sekme göreceksiniz. Biri siyah, diğeri beyazdır. Her ikisi de dikey, animasyonlu tipografiye sahiptir ve sizi bu sekmelerin arkasına gizlenen içerik hakkında bilgilendirir. Ana sayfa renklerle dolup taşsa da kayan tipografi ve sekmelerin tek renkli renk paleti bir o kadar dikkat çekici. İmleci herhangi bir sekmeye getirdiğinizde, hafifçe genişleyerek sundukları içeriğin küçük bir bölümünü ortaya çıkarırlar. Tıklandığında, içerik ekranın neredeyse tamamını kaplar, fakat sekmeler yan tarafta görünür durumda kalır, böylece istediğiniz zaman bir sekmeden diğerine geçebilirsiniz.
Kanal Sokak Pazarı
Canal Street Market, New York’ta bulunan bir perakende pazarı, yemek salonu ve topluluk alanıdır. Web sitesinin içeriği renkli sekmeler halinde düzenlenmiştir. Her bölüm farklı bir renk tonu kullanılarak sunulur. Ana sayfada ince bir beyaz arka plan bulunurken, diğer sayfalarda mavi, kırmızı ve turuncu gölgeler dahil olmak üzere daha canlı arka planlar bulunur. Bir renkten diğerine geçiş, sitenin görsel çekiciliğini artırır ve sitenin gözünüze daha heyecan verici görünmesini sağlar. Sekmeleri tıkladığınızda, öne çıkan içeriğin güzelliğini sergileyerek ekran boyunca zarif bir şekilde yayılırlar. Muhteşem görsellerin yanı sıra bazı sayfalarda animasyonlu satırlar da yer alıyor. Örneğin ana sayfanın üst kısmında, ekranın bir tarafından diğerine doğru sürekli akan zikzak bir çizgi vardır. Öte yandan, ana sayfanın alt kısmına doğru animasyonlu noktalı çizgilerle karşılaşacaksınız. Sitedeki çizgilerin hareketi ve canlı renk paleti, sekmelerin sertliğini mükemmel bir şekilde dengeleyip yumuşatarak kullanıcıların keşfetmesi için eğlenceli ve ilgi çekici bir ortam yaratır.
Uzay – de Uzay
Space – de Space, Luzern’de sanatçıların çalışmalarını sergileyebilecekleri bir yerdi. Web sitesinde 2018’den bir program bulunsa da, bir sitedeki sekmelerin özellikle yaratıcı bir şekilde uygulanmasına örnek teşkil ettiği için bu örneği listeye ekledik. Ana sayfa alternatif titreşimleri çağrıştırıyor. Kuruluşun adı, el yazısı tipografi ve geometrik şekillerin bir kombinasyonu kullanılarak tasvir edilmiştir. Neredeyse okunamıyor ve daha çok sitenin cazibesini artıran bir süs gibi görünüyor. Her sergi bir sekme olarak sunulur. Sekmeler, sanatçının adını, tarihi ve içinde yer alan içeriğin bir görüntüsünü ortaya çıkararak, yalnızca üstleri zirveye çıkacak şekilde üst üste biner. Her sekme farklı bir tonda renklendirilir. Bununla birlikte sekmelerin çoğu pastel tonlarda boyandığından, ana sayfa birçok öğe içermesine rağmen gözleri yormaz. Aslında, toz pembe ve yumuşak sarıdan bebek mavisi ve narin menekşe geçişleri, sayfanın keşfedilmesi için daha heyecanlı görünmesini sağlar. Sekmelerin üst üste düzenlenmesi, ana sayfayı keşfetmeyi iyi organize edilmiş bir dosya çekmecesinden geçiyormuş gibi hissettiriyor.
Tablet Dergisi
Tablet, online bir Yahudi dergisidir. Kağıdı andıran arka planı ve ızgara tabanlı düzeniyle tasarımı, basılı gazetelerin görünümünü andırıyor. İçerik siyah beyaz ve harekete geçirici mesaj düğmeleri kırmızıdır. Fakat resimlerin üzerine geldiğinizde renk kazanarak siteye hareket katarlar. Ekranın en sağ tarafında, derginin bölümlerini keşfetmeniz için bir davet göreceksiniz. Tamamı büyük, kırmızı harfler üzerlerine tıklamanızı teşvik eder. İmleci sayfanın o bölümünün üzerine getirdiğinizde, biraz genişleyerek iki sekmeyi daha ortaya çıkardığını göreceksiniz. Üzerlerine tıkladığınızda, seçilen makalelerden oluşan bir koleksiyon, tüm ekrana yayılan görünüm alanında görünür. Makale önizlemeleri ve öne çıkan görsellerin tümü sekmeler halinde düzenlenmiştir. Bu bölümü daha sürükleyici ve göz atmayı eğlenceli hale getirmeye yardımcı olan yatay gezinmeyi kullanarak bunları keşfedebilirsiniz. Makaleler üçlü olarak görünür, bu nedenle tüm ekran her zaman sekmelerle kaplı kalır.
Asma Yolu
Vine Trail, Fransa, Kuzey İspanya ve İtalya’dan şarap tedarik eder, ithal eder, satar ve dağıtır. Ana sayfa, sizi nefes kesen şarap bölgelerinden birine götüren çarpıcı bir tam ekran animasyonlu fotoğrafla açılır. Ana sayfa markayı güzel bir şekilde tanıtırken, yetiştiriciler hakkında daha fazla bilgi edinmek ve tüm şarap listesini keşfetmek istiyorsanız, ekranın sağ tarafındaki iki göz alıcı mavi ve turuncu sekmeye tıklamalısınız. Onlara tıkladığınızda, ekranın tüm yüzeyini kaplarlar. Her iki sekme de alfabetik olarak (yetiştiriciler) veya bölgeye (şaraplar) göre sütunlar halinde düzenlenmiş uzun veri listeleri içerir. Sizi en çok ilgilendiren içeriği bulmak için kullanışlı filtreler de uygulayabilirsiniz. Sitede sekmeler uygulamak, tasarımcıların ekranı karıştırmadan ve sizi bunaltmadan birçok bilgiyi görsel olarak çekici bir şekilde görüntülemesine olanak sağladı. Bunun yerine, hakkında daha fazla bilgi edinmek istediğiniz bölüme şık bir şekilde tıklayabilir ve kendinizi tam ekran, canlı renklere sahip içeriğe kaptırabilirsiniz.
Sezon dışı
Off Season, müzisyenlerle çalışma konusunda uzmanlaşmış bir tasarım ve fotoğraf stüdyosudur. Web siteleri, kılavuz çizgileri ve sekmelerin çekici bir kombinasyonunu temsil ediyor. Düzen alışılmadık ve keşfedilmesi ilginç. Sol tarafta, ekranın küçük bir bölümünde stüdyonun kısa bir açıklaması yer alıyor. Metnin altında kesişen iki kare vardır. İmlecinizle etkileşime girerler – farenizi karelere ne kadar yakınlaştırırsanız, o kadar uzaklaşırlar ve bunun tersi de geçerlidir. Düzenin geri kalanı, sekmeler halinde sunulan menü bölümlerinden oluşur. Onlara tıkladığınızda, her klasör genişleyerek renkli içeriğini ortaya çıkarır. Her bölüm başlığından önce, fareyle üzerine gelindiğinde ve tıklandığında siyaha dönüşerek sekmenin “etkin” durumda olduğunu gösteren küçük, ana hatları çizili bir daire vardır.
G!theimageers
G!theimagineers çalışmalarında mimari, senografi, ışık, görüntü ve sesi birleştiren bir prodüksiyon stüdyosudur. Sitedeki en belirgin unsurlar, ızgara çizgileri ve siyah arka planda öne çıkan çeşitli geometrik şekillerdir. Genel tasarım minimalist ve basittir, fakat çizgilerin zekice ve eğlenceli bir şekilde uygulanması, siteyi ilgi çekici ve sürükleyici hale getirir. Izgara çizgileri, ana menü bağlantılarını içeren tam yükseklikte sekmeler oluşturur. Sekmeleri tıkladığınızda, öne çıkan içeriği ortaya çıkararak genişlerler. Hangi sayfayı açarsanız açın, diğer sekmeler ekranda görünür durumda kalır, böylece sitedeki başka bir bölüme hızlıca gidebilirsiniz. İç sayfalar ızgara çizgileri kullanılarak birkaç parçaya bölünmüştür. Sol tarafta genellikle daire gibi animasyonlu geometrik şekiller bulunurken, sayfadaki diğer alanlarda stüdyo ve ne yaptıkları hakkında bilgiler yer alır.
İnternet Elçiliği
Embassy of Internet, internetin geleceği ve toplumumuzdaki rolü hakkında tartışmaları teşvik etmek amacıyla oluşturulmuş deneysel bir platformdur. Bu proje artık aktif olmasa da sitedeki sekmelerin yaratıcı kullanımı nedeniyle listemize ekledik. Her bölümün üzerine geldiğinizde, sayfaların kısa bir açıklaması görünür. Aynı zamanda tipografinin rengi ve arka plan ters çevrilir. Sayfada kullanılan mavi renk çok özeldir – Windows’un eski sürümlerinde gördüğümüz mavi ölüm ekranına benzer ve siteye retro bir hava verir. Ana sayfa ayrıca güçlü acımasız hisleri çağrıştırıyor. Dikkat çekici, büyük, büyük sans serif tipografi içerir ve ekranın sağ alt köşesinde titreşen büyük mavi daire dışında neredeyse hiçbir görsel yoktur. Web sitesinin tamamı metin tabanlı olsa da, onu keşfetmekten asla sıkılmazsınız. Mavi ve gri tonların kombinasyonu, sayfaları göze heyecanlandırarak sizi proje hakkında daha fazla okumaya teşvik ediyor.
EDA Mimarlık
EDA Architects bir mimarlık, iç tasarım ve planlama firmasıdır. Web sitelerinde menü bölümleri dikey sekmeler olarak sunulur. Siteyi keşfederken bir sürpriz unsuru var çünkü sekmelerin arkasındaki içeriğin bir anını bile göremiyorsunuz. Bazı sayfalarda tam ekran kaydırıcı bulunurken, diğerlerinde heyecan verici galeriler bulunur. Animasyon efektleri müthiş, özellikle “Hakkında” sayfasına eklenen kaydırmayla tetiklenen animasyonlar. Bir noktada, tam ekran bir fotoğrafın keyfini çıkarırsınız. Daha sonra kaydırıldığında ekran, her iki tarafta birer resim olacak şekilde ikiye bölünür. Daha sonra bir tarafta küçük bir fotoğraf kalırken, beraberindeki metin sağda görünür. Her kaydırmadaki değişiklikler, sayfanın dinamik ve keşfedilmesi daha eğlenceli görünmesini sağlar. Baskın tek aralıklı tipografi, stüdyo binalarının modernist karakterini güçlendirir ve bazı düzenlerin minimalist havasını harika bir şekilde tamamlar. EDA’nın sağladığı hizmetler ve iletişim bilgileri ile ilgili sayfalar sadece metin içerir, fakat tek aralıklı yazı tipi ve kullanımı…