Etkili Navigasyon Tasarımına Sahip 13 Divi Web Sitesi

İyi tasarlanmış bir gezinme yapısı, web sitesinin hedeflerine ulaşmasında çok önemlidir. Navigasyon basit veya karmaşık olabilir, ancak etkili olması gerekir. Tabii ki etkili her zaman güzel anlamına gelmez. Bu, sitenin sahip olduğu içerik miktarı için aradığınızı bulmanın kolay olduğu anlamına gelir. Bu yazıda, etkili navigasyon tasarımına sahip 13 Divi web sitesine bakacağız.

Bu gönderiyi oluştururken amacım, web sitesinin amacını belirlemek ve ardından navigasyon tasarımının bu amaca göre etkili olup olmadığını ölçmekti. Birincil ve ikincil menüleri düşündüm ama sadece menülere bakmıyordum. Ayrıca bir navigasyon yapısı oluşturan kahraman bölümünün içindeki veya altındaki bağlantılara da baktım.

Aşağıdaki web sitelerinden bazıları, belirli bir sektöre yönelik bilgileri, sektörün anladığı bir dille sağlayacaktır. Diğerleri, gezinmeyi bir bakışta anlaşılır kılmak için simgeler sağlar. Diğerleri, potansiyel kitlelerine ulaşmayı kolaylaştırmak için bağlantılar sağlar. Gezinmeye odaklandığım resimlerde, bazen siteyi beklediğinizden çok daha farklı gösteren açık menüler göreceksiniz.

Şimdi, web sitelerine…

1. Ana Hasat

Restoranların yol tarifi, rezervasyon ve bulunması ve anlaşılması kolay bir yemek menüsü için iletişim bilgileri sağlaması gerekir. Bu web sitesindeki gezinme, tüm bunları basit bir yapıda sağlar. İkincil menüde tıklanabilir bir telefon numarası ve Google Haritalar'a bağlantı ekler, böylece bir bakışta anlaşılması kolay olur. Yemek menüsüne bağlantılar, birincil menüde kullanımı kolaydır.

Web Sitesine Bakın

2. Wesleyan Kilisesi

Kiliseler, Kilise, etkinlikler, bakanlıklar, daha fazla bilgi edinmek için kaynaklar, konum ve bir bağış bağlantısı hakkında bilgiye ihtiyaç duyar. Bu, birincil veya ikincil menüdeki tüm bu öğeleri içerir. Birincil menü, grafik ve bu kategoriye basit bağlantılar içeren bir mega menüdür. Bağış eylem çağrısı mavidir, bu nedenle çok fazla öne çıkmadan ayrı durur. Renkler sitenin tasarımı için mükemmel çalışıyor.

Web Sitesine Bakın

3. Warner Üniversitesi

Okullar, öğretmenler, öğrenciler, aday öğrenciler, veliler ve kampüs, kurslar, çevrimiçi kurslar, kabuller ve çok daha fazlası hakkında bilgiler dahil olmak üzere birçok farklı amaç ve hedef kitle için tonlarca bilgi sağlamalıdır. Bu kadar bilgiyi bulması kolay bir şekilde sağlamak zor. Bu, ana konuları alt konulara bölen ve sütunlarda görüntüleyen bir mega menü ile hedefe ulaşır. İkincil menü, başka bir bağlantı turu sağlar, ancak bu konuların birincil menüde olmadığını anlamak kolaydır, bu nedenle yanlış yerlere bakmıyorsunuz.

Web Sitesine Bakın

4. Olivet Koleji

Bu okul farklı bir yaklaşım benimsiyor ancak aynı miktarda bilgi sağlıyor. Birincil menü, simgelerle ana bağlantıları sağlar ve etkili bir arama aracı kullanır. Mega menü, bindirmeli büyük resimler kullanır. Açıldığında mega menü, bağlantılar ve resimler içeren sekmeler sağlar. Sayfanın altına daha fazla bağlantı yerleştirilir ve kaydırma sırasında yerinde kalır.

Web Sitesine Bakın

5. Skyfox Tasarımı

Çevrimiçi portföylerin, içerik içinde kaybolmayan bazı temel bilgileri sağlaması gerekir. Bu site bunu, sayfaların kendilerini gezinme olarak kullanarak, bir dosya dolabı tasarımı oluşturarak yapar. Her sayfa iyi bir şekilde etiketlenmiştir ve sayfa yüklenir yüklenmez tam olarak aradığınızı görebilirsiniz. Herhangi bir sayfaya tıklayın ve ileri doğru eğilerek gerisini gizleyin. Her sayfanın köşesinde, sayfaların bıraktığınız gibi anlık görüntüsünü gösteren ana sayfayı göstermek için sayfayı geriye doğru yatıran bir menü bağlantısı bulunur. Başka bir menü, sizi doğrudan her sayfaya götüren sayfanın altında kalır.

Web Sitesine Bakın

6. Rekübre

Ev geliştirme web sitelerinde genellikle kategorize edilmesi ve anlaşılması kolay bir şekilde sunulması gereken çok miktarda ürün bulunur. Bu site, ürün türlerinin simgelerini içeren birincil menü altında yeni bir menü oluşturarak bu ürünler arasında gezinmeyi basitleştirir. Yalnızca simgeden hangi bağlantıya tıklamanız gerektiğini bir bakışta anlayabilirsiniz. Onlara tıklamak sizi ürün listesine götürür.

Web Sitesine Bakın

7. Ryan Welch

Fotoğrafçıların tipik olarak, herhangi bir iyi portföy gibi, kendileri ve yaptıkları iş hakkında bilgi vermeleri gerekir, ancak aynı zamanda potansiyel müşteriyi süreç boyunca adım adım atmaları gerekir. Bu, numaralandırılmış bir navigasyon tasarımı kullanır ve navigasyonu, kahraman bölümüyle örtüşen bir kutunun içine yerleştirir. Kaydırmada, birincil menünün altına numaralandırılmış gezinme eklenir ve bu işlemde adım atmayı kolaylaştırır. Bölümlerin her biri eşleşecek şekilde numaralandırılmıştır.

Web Sitesine Bakın

8. Gruissan Akdeniz

Turistlerin web siteleri, bölgede görülecek yerler, yemek yenecek yerler, oteller, eğlence vb. içeren bir konum hakkında birçok bilgi sağlamalıdır. Bu, site tasarımıyla mükemmel şekilde çalışan yazı tiplerini kullanır ve iki gezinme alanı sağlar. İlki, hızlı bir şekilde anlayabilmeniz için simgeleri içeren birincil menüdür. İkincisi, kahraman alanının altında, üzerine gelindiğinde açılan bir menüdür. Bu alan, alanın özellikleri hakkında daha ayrıntılı bilgi sağlar.

Siteyi ziyaret et

9. DJ Charlie Villaları

DJ'ler genellikle izleyicileriyle bağlantı kurmak için stilize edilmiş grafikler kullanır. Bu, standart birincil menüyü ve metin bağlantılarını sağlar, ancak basit ana sayfanın altında, web sitesinin stiline uyan illüstrasyonları görüntüleyen başka bir menü vardır. Bu menü, çeşitli sayfalara ve hizmetlere yönelik bir harekete geçirici mesaj olarak çalışır. Resimler, bağlantının ne için olduğunu görsel olarak gösterir. Bir grafiğin üzerine gelindiğinde, birincil menüyle eşleşen metin ortaya çıkar. Hover animasyonu içerir.

Web Sitesine Bakın

10. Şık not

İşletmelerin, müşterilerin sizden tam olarak neye ihtiyaç duyduklarını keşfetmelerine yardımcı olmanın en iyi yollarından biri, onlara sorular sormaktır. Bu web sitesi, mega menü içindeki başlangıç ​​sorularını soruyor. Ürünler bağlantısı menüyü açar ve soruyu sorar, bu da sonraki birkaç sütunda çeşitli çözümlere yol açar. Çözümler, görsel olarak simgelerle bilgi sağlar ve bir başlık ve kısa açıklama içerir. Alt kısımdaki basit bir harekete geçirici mesaj, müşteriyi mevcut tüm özellikleri görmeye davet eder. Mega menü temiz ve takip etmesi kolay.

Web Sitesine Bakın

11. Film Okulu

İşte numaralandırılmış navigasyonun bir başka etkili kullanımı. Film okulu kadar yabancı bir konu, potansiyel öğrencileri süreç boyunca ilerletmelidir. Bu numaralandırılmış navigasyon bunu yapar. Menü dikey olarak sağlanır ve her zaman ekranda kalır. Menünün üzerine geldiğinizde, bağlantılar tepki verir ve bu bağlantıyı vurgular. Ekranın üzerinde gezinmek, menü içinde nerede olduğunuzu gösterir. Bölümlerin her biri navigasyona uyacak şekilde numaralandırılmıştır.

Web Sitesine Bakın

12. Mambo Medya

Bu, portföy için benzersiz bir gezinme oluşturur. Menü yapısını doğrudan kahraman alanına ekler ve bir arka plan videosu üzerinden portföye animasyonlu bağlantılar görüntüler. Video yalnızca gezinirken oynatılır; bu, bağlantılar doğrudan görüş alanınızda olduğu için onları aramaya gitmeniz gerekmediği anlamına gelir. Bu, portföyü görselleştirmenin ve aynı zamanda onu yoldan çıkarmanın ilginç bir yoludur. Bağlantılar videonun üzerine yerleştirilmiş olsa da, kahraman alanı hala temiz görünüyor.

Web Sitesine Bakın

13. Willow Creek Şelalesi

Belirli türdeki etkinliklere hitap eden yerlerin, etkinlikler ve çevredeki alan hakkında birçok bilgi sağlaması gerekir. Bu web sitesinin ana menüsündeki bağlantıları anlamak ve takip etmek kolaydır, ancak benim ilgimi çeken ikincil menüdür. Tıklanabilir bir telefon numarası, gelin bilgileri, kabin kiralama web sitesi, şirketin Facebook sayfası ve Google Haritalar'ı içeren bağlantılar sağlar. Bağlantıların her biri, ne için olduklarını bir bakışta anlayabilmeniz için simgeler içerir.

Web Sitesine Bakın

Biten Düşünceler

Bu, bir sonraki Divi web siteniz için size ilham vermeye yardımcı olacak etkili gezinme tasarımına sahip 13 Divi web sitesine bakışımız. Özellikle ikonların ve mega menülerin kullanımını seviyorum. Bazıları menüde çok fazla içeriğe sahip olsa da, iyi sıralanmış ve takip etmesi kolay.

İyi tasarlanmış navigasyon, web sitenizi hedeflerine ulaşmada daha etkili hale getirebilir. Navigasyon tasarımı ve Divi ile stil oluşturma hakkında daha fazla bilgi için şu makalelere bakın:

• Zarif Temaların Ücretsiz 10. Yıldönümü Zaman Çizelgesi Düzenine Etiketli Nokta Gezintisi Nasıl Eklenir
• Divi ile Navigasyon Ana Sayfası Nasıl Oluşturulur
• Divi Dikey Navigasyonun Aktif Bağlantısına Stil Vermenin 3 Yaratıcı Yolu
• Divi ile İşe Yön Veren Dikey Navigasyon Nasıl Oluşturulur
• Divi Web Sitenizde Standart ve Dikey Navigasyon Örtüşmesi Nasıl Yapılır?
• Dikey Alt Menü Gezinmenizi Stillendirmenin 3 Yaratıcı Yolu
• Divi Web Sitenizle Örtüşen Şeffaf Dikey Gezinme Nasıl Oluşturulur
• Divi Navigasyonunuzu Alttan Başlatma, Sonra Kaydırırken Üstte Sabit Kalma
• Divi Slider Modülü ile Navigasyon Mozaiği Nasıl Oluşturulur

Senden duymak istiyoruz. Bu navigasyon tasarımlarından hangileri favoriniz? Yorumlarda onlar hakkında ne düşündüğünüzü bize bildirin.