Divi'nin Dikey Navigasyonuna 12 Örnek

Bir web sitesi oluştururken, dikkate alınması gereken birçok farklı şey vardır. Genellikle web sitenizin genel düzeninin nasıl görünmesini ve hissettirmesini istediğinizle başlar. Göndermeye çalıştığınız mesajı güçlendirmesi için web sitenizdeki içeriğin neyle ilgili olduğuyla eşleşmesini istiyorsunuz.

Web sitenizin ziyaretçilerin davranışlarını nasıl etkileyeceği konusunda önemli bir rol oynayan faktörlerden biri birincil menüdür. Divi ile, menünüzü web sitenizin geri kalanıyla eşleşen güzel bir şekilde şekillendirmenize olanak tanıyan ve ziyaretçilerinize web siteniz boyunca rehberlik etmenize yardımcı olan tonlarca olasılık vardır.

Bu olasılıklardan biri, üst menü yerine dikey bir gezinme kullanmaktır. Dikey gezinme o kadar sık ​​kullanılmasa da, iyi düşünülürse ve web sitenizin geri kalanıyla eşleşirse çarpıcı sonuçlar verebilir. Üst menü gibi, dikey menü de ziyaretçileri web sitesinde geçirdikleri süre boyunca takip eder.

Size ilham vermek için, web sitesinde gezinme şeklini iyileştirerek ziyaretçinin deneyimini optimize etmek için dikey gezinmeyi kullanan 12 web sitesi seçtik.

1. Master ve Diseno de Interiores

Master en Diseno de Interiores, tamamen iç tasarımla ilgili çarpıcı bir web sitesidir. Yukarıdaki resimde, web sitelerine bu hoş ekstra dokunuşu vermek için dikey menüyü nasıl kullandıklarını görebilirsiniz.

Web sitesinde kullanılan renkler son derece nötrdür, bu da söz konusu şirket veya markanın yanı sıra web sitesine de bu modern dokunuşu ve hissi verir.

Dikey gezinme bir istisna değildir. Kullanılan renkler çok ince ve okurken gözleri rahatsız etmiyor.

2. Üstte Model

Model On Top, bir model yönetim sitesidir. Divi ile oluşturulan bu web sitesi, belirli bir uyumun bir araya gelmesine ve şirketlerine bağlamak istedikleri profesyonelliği ve uzmanlığı göstermesine izin verdi.

Logo, sayfalar ve arama çubuğu gibi gerekli tüm öğeleri içeren çok hoş bir dikey gezinmeye sahip olmanın yanı sıra, web sitelerinin hemen başında bir video arka planı kullanarak bu etkileşimi de oluşturdular.

Dikey gezinme çok fazla özel tasarıma ihtiyaç duymadı, bunun yerine onu temiz tutmaya ve sayfanın geri kalanındaki görsellerin işi yapmasına izin vermeye karar verdiler.

3. Art-On-The-Run Film Okulu Berlin

Art-On-The-Run Filmschool Berlin, bir film okulunun ihtiyaç duyduğu sanatsal yönü web sitelerinde mükemmel bir şekilde temsil etti. Dikey navigasyon, resmin tamamında özel bir amaca sahiptir.

Menüyü bir tür 'liste' gibi göstermenin avantajlarından yararlanmak için kasıtlı olarak dikey bir gezinme kullandılar. Web sitesinin konusuna uygun numaralandırma kullanmışlar. Numaralandırma, sayfaların yanı sıra senaryolar veya bölümler olarak da kolayca yorumlanabilir.

Sayfaların ve gösterilen logonun kombinasyonu, belirli bir basitlik ve yapı duygusu verir. Web sitelerinin konusuyla oldukça uyumlu görselleri de temsil etmekte başarısız olmadılar.

4. Alex Markaları

Alex markaları, çocuklar için her türlü şeyi satan bir Divi e-ticaret sitesidir; sanat ve el sanatlarından mobilya ve oyunlara kadar. Web sitesi, temsil etmek istedikleri duygu türünü hemen gösterir; eğlenceli ve davetkar.

Dikey navigasyon bu durumda da çok bilinçli bir şekilde seçilmiştir. Pek çok farklı sayfa var, eğer bir üst menüyü seçselerdi, yapı kaybolur ve yeterli alan olmazdı.

5. Devlin Fotoğrafları

Delvin Photos, muhtemelen bu yazıda bahsedilenlerin en zarif web sitesidir. Delvin Photos, sundukları hizmetler için yeni müşteriler çekmek amacıyla tüm çalışmalarını özgün ve ilgi çekici bir şekilde sergilemek için web sitelerini kullanır.

Web sitelerinin geri kalanında kullandıkları zarafeti vurgulamak için dikey gezinmeyi kullandılar ve ana menülerine sosyal medya simgeleri eklediler; ayrıca kişilerin sitede kaldıkları süre boyunca istedikleri zaman sosyal medya kanallarına erişebilmelerini sağlarlar.

6. Suare Makyajı

Soiree Makeup, tüm makyaj etrafında dönen bir web sitesidir. Web sitesi özellikle bir makyaj sanatçısının makyaj hizmetlerini sunmak için yapılmıştır. Web sitesi, her makyaj sanatçısından beklenen sadeliği ve zarafeti hemen gösterir. Çok fazla savurganlık değil ama bakmak için güzel.

Web sitesi, genel olarak, içeriği daha konsantre hale getiren tüm ekranı kaplamıyor. Dikey gezinmede, dikkatin çoğu logoya ve iletişim kutusuna gidiyor.

Dikey navigasyona bir iletişim kutusu eklemek, makyaj sanatçısının web sitesinin sahip olduğu en önemli amacı vurgulamasına olanak tanır; yeni müşteri adayları, yeni müşteriler ve yeni rezervasyonlar elde etmek.

7. Nathan Welton Fotoğrafçılığı

Nathan Welton Photography, bu yazı için seçtiğimiz ikinci fotoğraf sitesi. Bir fotoğraf web sitesi için dikey gezinmeyi kullanmak, diğer web sitelerinden çok daha yaygındır. Bunun nedeni genellikle web sitesindeki resimlerin kendileri için konuşmasıdır.

Fotoğraf sitelerinin web sitesi sahipleri, kullanımı kolay ve dikkat dağıtıcı olmayan bir menüye sahip olarak görüntülere odaklanmak için basit bir dikey gezinme kullanır.

Nathan Welton'ın web sitesinde kullandığı görseller tam olarak bu; macera dolular ve kendi hikayelerini anlatıyorlar. Dikey gezinme, yalnızca pratik amaçlar için vardır ve bir üst menünün yapacağı gibi sayfayla kesintiye uğramaz.

8. Lilly Fotoğrafçılığı

Lilly Photography, bu yazı için seçtiğimiz son fotoğrafçılık sitesi. Bu web sitesinin en güzel yanı, ana sayfada bir galeri kullanmasıdır.

Galeri, belirli bir deneyim hissi yaratmak için geçmişte yapılmış çalışmaları gösterir. Çünkü sonunda; insanlar bekledikleri ile uyumlu fotoğraflar çeken bir fotoğrafçı arıyorlar.

Dikey navigasyon, Nathan Welton tarafından kullanılan dikey navigasyona benzer; basit ama işi bitirmek.

9. Pittsburgh Filmi

Film Pittsburgh, bir film sunum organizasyonudur. Yaptıkları güzel şeylerden biri, sayfalarının üst kısmında, ziyaretçilerin pratik bilgileri almasını sağlayan ikinci bir menü oluşturmak.

Dikey gezinme ise tam tersine oldukça bilgilendiricidir ancak ziyaretçileri doğru sayfalara yönlendirerek hikayelerini ve misyonlarını anlamalarına yardımcı olur. Pratik ve anlatım sayfalarını birbirinden ayırmak, ana menüdeki hikaye anlatımını güçlendirir.

Dikey gezinmeyi kullanmanın yanı sıra, Film Pittsburgh, tasarımlarını ilgili bir arka plan görüntüsüyle geliştirmek için onlara boşluk bırakan ekranın tüm boyutunu kullanmadı.

10. KarışımAşk

BlendLove, Avustralya'da bulunan bir yiyecek dükkanıdır. Müşterilerini bilmeleri gereken tüm pratik bilgiler hakkında bilgilendirmek için bir web sitesi oluşturdular.

Web sitelerinde sağladıkları güzel ekstralardan biri, yaptıkları sağlıklı yiyeceklerle dolu bir e-kitap satın alma fırsatıdır. Müşterilerle etkileşim kurmanın, kim olduklarını tanımanın ve hatta kâr elde etmenin güzel bir yolu.

Web sitesinin kendisi, sahip oldukları logoyla hoş bir kontrast oluşturan koyu tonlu bir renk paletine sahiptir. Dikey gezinmelerinde de tüm web sitelerinde renklerin tutarlı olduğundan emin oldular. Tutarlılığın olduğundan emin olmak önemlidir, çünkü dikey gezinme ekranın nispeten büyük bir bölümünü kaplar, oysa bir üst menü genellikle o kadar belirgin değildir.

11. Afiyet olsun

Bon Appetit, birçok tat ve koku içeren atölye çalışmaları vermeye odaklanmış bir Belçika web sitesidir. Önceki örnekler ve bu örnek bir konuda kesinlikle farklılık gösteriyor; Bon Appetit web sitesi, görsellikten çok sağladıkları yazılı içeriğe odaklanıyor.

Dikey menü 3 çeşit parçaya bölünmüştür; logo, sayfalar ve müşteri hizmetleri ve nakliye gibi ekstra hizmetler. Sayfalar ve ekstra hizmetler arasındaki stil farkı, web sitesine ekstra organize bir his ve dokunuş verir.

12. Tay Restoranı Yiyin

Eat Thai Restaurant bu yazıdaki son örnektir. Bu noktaya ulaşan yerel olarak sahip olunan bir mobil restoran. Web sitelerinin birden fazla sayfası yok. Bunun yerine bir sayfa aldılar ve en önemli şeye odaklandılar; yemek. Site, sipariş vermek isteyen kişileri sipariş veren bir web sitesine yönlendirmek için kullanılır.

Bu örnekte kullanılan dikey navigasyonun güzel yanı, aslında orada gezinmek için değil, daha çok bilgi vermek için orada olmasıdır. Dikey gezinme, bir ziyaretçiyi web sitesinde kaldığı süre boyunca takip eder, bu da bilgilerin de takip ettiği anlamına gelir. Menüdeki ilgili tüm bilgileri, sosyal simgeler ve bir 'Şimdi Sipariş Edin' CTA'sı ile birlikte sağladılar.

Son düşünceler

Bu gönderinin, sahip olduğunuz mevcut web siteleri veya gelecekte oluşturacağınız web siteleri için harika konseptler düşünmenize yardımcı olacak tonlarca ilham vermesini umuyoruz. Herhangi bir öneriniz veya yorumunuz varsa; Aşağıdaki yorum bölümünde bir yorum bırakmaktan çekinmeyin! Ve oradayken bize bildirin; Dikey gezinmeyi ne tür bir web sitesi için kullanırsınız?

Büyük bir duyuruyu, faydalı ipucunu veya Divi freebie'sini asla kaçırmamak için e-posta bültenimize ve YouTube kanalımıza abone olmayı unutmayın!

LuckyDesigner / Shutterstock.com tarafından Öne Çıkan Görsel