12 Contoh Navigasi Vertikal Divi

Diterbitkan: 2017-06-28

Saat membuat situs web, ada banyak hal berbeda yang perlu dipertimbangkan. Biasanya dimulai dengan bagaimana Anda ingin keseluruhan tata letak situs web Anda terlihat dan terasa. Anda ingin itu cocok dengan konten di situs web Anda agar dapat memberdayakan pesan yang Anda coba kirim.

Salah satu faktor yang memainkan peran utama dalam bagaimana situs web Anda akan memengaruhi perilaku pengunjung adalah menu utama. Dengan Divi, ada banyak kemungkinan yang memungkinkan Anda untuk menata menu Anda dengan cara yang indah yang cocok dengan sisa situs web Anda dan membantu Anda memandu pengunjung melalui situs web Anda.

Salah satu kemungkinan itu adalah menggunakan navigasi vertikal alih-alih menu atas. Meskipun navigasi vertikal tidak terlalu sering digunakan, navigasi vertikal dapat memberikan hasil yang menakjubkan jika dipikirkan dengan baik dan jika cocok dengan bagian situs web Anda lainnya. Seperti menu teratas, menu vertikal mengikuti pengunjung selama mereka menginap di situs web.

Untuk menginspirasi Anda, kami telah memilih 12 situs web yang menggunakan navigasi vertikal untuk mengoptimalkan pengalaman pengunjung dengan meningkatkan cara mereka bernavigasi di seluruh situs web.

1. Master en Diseno de Interiores

Master en Diseno de Interiores adalah situs web menakjubkan yang membahas tentang desain interior. Pada gambar di atas, Anda dapat melihat bagaimana mereka menggunakan menu vertikal untuk memberikan sentuhan ekstra yang bagus ke situs web mereka.

Warna yang digunakan di situs web sangat netral, yang memberikan sentuhan dan nuansa modern pada situs web serta perusahaan atau merek yang bersangkutan.

Navigasi vertikal tidak terkecuali. Warna yang digunakan sangat halus dan tidak mengganggu mata saat membaca.

2. Model Di Atas

Model On Top adalah situs web manajemen model. Situs web ini, dibuat dengan Divi, memungkinkan harmoni tertentu untuk bersatu dan menunjukkan profesionalitas dan keahlian yang ingin mereka tautkan ke perusahaan mereka.

Selain memiliki navigasi vertikal yang sangat bagus yang berisi semua elemen yang diperlukan seperti logo, halaman, dan bilah pencarian, mereka juga membuat keterlibatan itu dengan menggunakan latar belakang video tepat di awal situs web mereka.

Navigasi vertikal tidak memerlukan banyak desain khusus, mereka lebih memilih untuk tetap bersih dan membiarkan visual di seluruh halaman melakukan pekerjaan.

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

Art-On-The-Run Filmschool Berlin dengan sempurna mewakili sisi artistik yang dibutuhkan sekolah film di situs web mereka. Navigasi vertikal memiliki tujuan khusus dalam keseluruhan gambar.

Mereka sengaja menggunakan navigasi vertikal untuk menikmati manfaat membuat menu terlihat seperti semacam 'daftar'. Mereka telah menggunakan penomoran yang sesuai dengan isi situs web tersebut. Penomoran, selain halaman, juga dapat dengan mudah diartikan sebagai skenario atau episode.

Kombinasi halaman dan logo yang ditampilkan memberikan kesan kesederhanaan dan struktur tertentu. Mereka tidak gagal untuk mewakili visual juga yang cukup sesuai dengan apa situs web mereka.

4. Merek Alex

Merek Alex adalah situs web e-niaga Divi yang menjual segala macam barang untuk anak-anak; dari seni & kerajinan hingga furnitur dan permainan. Situs web segera menunjukkan jenis perasaan yang ingin mereka wakili; menyenangkan dan mengundang.

Navigasi vertikal dalam hal ini juga sangat sengaja dipilih. Ada banyak halaman yang berbeda, jika mereka memilih menu teratas, strukturnya akan hilang dan tidak akan ada cukup ruang.

5. Foto Devlin

Delvin Photos mungkin adalah situs web paling elegan dari semua yang disebutkan dalam posting ini. Delvin Photos menggunakan situs web mereka untuk menampilkan semua karya mereka dengan cara yang orisinal dan menarik untuk menarik pelanggan baru atas layanan yang mereka tawarkan.

Mereka menggunakan navigasi vertikal untuk menekankan keanggunan yang mereka gunakan di seluruh situs web mereka dan dengan menyertakan ikon media sosial di menu utama mereka; mereka juga memastikan bahwa orang dapat mengakses saluran media sosial kapan saja selama mereka tinggal di situs web.

6. Riasan Soiree

Soiree Makeup adalah situs web yang membahas tentang tata rias. Website ini khusus dibuat untuk menawarkan jasa rias dari seorang penata rias. Website langsung menunjukkan kesederhanaan dan keanggunan yang diharapkan dari setiap penata rias. Tidak terlalu mewah tapi cukup untuk dilihat.

Situs web, secara umum, tidak mengambil seluruh layar yang membuat konten lebih terkonsentrasi. Dalam navigasi vertikal, sebagian besar perhatian tertuju pada logo dan kotak kontak.

Menyertakan kotak kontak dalam navigasi vertikal memungkinkan penata rias untuk menekankan tujuan terpenting yang dimiliki situs web; mendapatkan prospek baru, pelanggan baru, dan reservasi baru.

7. Fotografi Nathan Welton

Nathan Welton Photography adalah situs web fotografi kedua yang kami pilih untuk posting ini. Menggunakan navigasi vertikal untuk situs web fotografi jauh lebih umum daripada situs web lain. Itu biasanya karena gambar-gambar di situs web berbicara sendiri.

Pemilik situs web fotografi menggunakan navigasi vertikal sederhana untuk menjaga fokus pada gambar dengan memiliki menu yang mudah digunakan dan tidak mengganggu.

Gambar yang digunakan Nathan Welton di situs webnya persis seperti itu; mereka penuh petualangan dan menceritakan kisah mereka sendiri. Navigasi vertikal hanya ada untuk tujuan praktis dan tidak mengganggu halaman seperti yang dilakukan menu teratas.

8. Fotografi Lilly

Lilly Photography adalah situs web fotografi terakhir yang kami pilih untuk posting ini. Hal yang hebat tentang situs web ini adalah ia menggunakan galeri di beranda.

Galeri menunjukkan pekerjaan yang telah dilakukan di masa lalu untuk menciptakan perasaan pengalaman tertentu. Karena pada akhirnya; orang mencari fotografer yang mengambil gambar yang sesuai dengan apa yang mereka harapkan.

Navigasi vertikal mirip dengan navigasi vertikal yang digunakan oleh Nathan Welton; sederhana tetapi menyelesaikan pekerjaan.

9. Film Pittsburgh

Film Pittsburgh adalah organisasi penyaji film. Salah satu hal menyenangkan yang mereka lakukan adalah membuat menu kedua di bagian atas halaman mereka yang memungkinkan pengunjung mendapatkan informasi praktis.

Navigasi vertikal, sebaliknya, agak informatif tetapi membantu pengunjung memahami cerita dan misi mereka dengan mengarahkan mereka ke halaman yang tepat. Membagi halaman praktis dan narasi satu sama lain memperkuat penceritaan di menu utama.

Selain menggunakan navigasi vertikal, Film Pittsburgh juga tidak menggunakan seluruh ukuran layar yang menyisakan ruang untuk menyempurnakan desainnya dengan gambar latar yang relevan.

10. Campuran Cinta

BlendLove adalah toko makanan yang berlokasi di Australia. Mereka telah membangun situs web untuk memberi tahu pelanggan mereka tentang semua informasi praktis yang perlu mereka ketahui.

Salah satu tambahan bagus yang mereka sediakan di situs web mereka adalah kesempatan untuk membeli sebuah ebook berisi makanan sehat yang mereka buat. Ini adalah cara yang bagus untuk terlibat dengan pelanggan, mengenal siapa mereka dan bahkan menghasilkan keuntungan.

Situs web itu sendiri memiliki palet warna nada gelap yang menciptakan kontras yang bagus dengan logo yang mereka miliki. Mereka memastikan warnanya konsisten di seluruh situs web mereka, dalam navigasi vertikal mereka juga. Memastikan konsistensi adalah penting karena navigasi vertikal menempati bagian layar yang relatif besar, sedangkan menu atas biasanya tidak terlalu terlihat.

11. Selamat Makan

Bon Appetit adalah situs Belgia yang berfokus pada pemberian lokakarya yang melibatkan banyak rasa dan aroma. Contoh-contoh sebelumnya dan contoh ini pasti berbeda dalam satu hal; situs web Bon Appetit lebih fokus pada konten tertulis yang mereka berikan daripada visualitas.

Menu vertikal telah dibagi menjadi 3 jenis bagian; logo, halaman, dan layanan tambahan seperti layanan pelanggan dan pengiriman. Perbedaan gaya antara halaman dan layanan ekstra memberikan perasaan dan sentuhan ekstra terorganisir ke situs web.

12. Makan Restoran Thailand

Eat Thai Restaurant adalah contoh terakhir dalam posting ini. Ini adalah restoran seluler milik lokal yang langsung ke intinya. Situs web mereka tidak memiliki banyak halaman. Mereka lebih suka mengambil satu halaman dan fokus pada hal yang paling penting; makanan. Situs ini digunakan untuk mengarahkan orang yang ingin memesan ke situs pemesanan.

Hal yang menyenangkan tentang navigasi vertikal yang digunakan dalam contoh ini adalah bahwa itu benar-benar tidak ada untuk menavigasi tetapi lebih untuk menginformasikan. Navigasi vertikal mengikuti pengunjung selama mereka tinggal di situs web, yang berarti informasinya juga demikian. Mereka menyediakan semua informasi yang relevan di menu, bersama dengan ikon sosial dan CTA 'Pesan Sekarang'.

Pikiran Akhir

Kami harap posting ini memberi Anda banyak inspirasi yang membantu Anda memikirkan konsep hebat untuk situs web saat ini yang Anda miliki atau situs web masa depan yang Anda buat. Jika Anda memiliki saran atau komentar; jangan ragu untuk meninggalkan komentar di bagian komentar di bawah! Dan saat Anda di sana, beri tahu kami; untuk jenis situs web apa Anda akan menggunakan navigasi vertikal?

Pastikan untuk berlangganan buletin email dan saluran YouTube kami sehingga Anda tidak akan pernah melewatkan pengumuman besar, tip bermanfaat, atau Divi freebie!

Gambar Unggulan oleh LuckyDesigner / shutterstock.com