12 Exemple de navigare verticală a lui Divi

Publicat: 2017-06-28

Când creați un site web, trebuie să luați în considerare o mulțime de lucruri diferite. De obicei, începe cu modul în care doriți să arate aspectul general al site-ului dvs. web. Doriți ca acesta să se potrivească cu conținutul de pe site-ul dvs. web, pentru ca acesta să vă permită mesajul pe care încercați să îl trimiteți.

Unul dintre factorii care joacă un rol major în modul în care site-ul dvs. web va influența comportamentul vizitatorilor este meniul principal. Cu Divi, există o mulțime de posibilități care vă permit să vă stilizați meniul într-un mod frumos, care să se potrivească cu restul site-ului dvs. web și să vă ajute să vă ghidați vizitatorii prin site-ul dvs. web.

Una dintre aceste posibilități este utilizarea unei navigări verticale în loc de meniul de sus. Deși navigarea pe verticală nu este atât de des utilizată, poate oferi rezultate uimitoare dacă este bine gândită și dacă se potrivește cu restul site-ului dvs. web. La fel ca meniul de sus, meniul vertical urmărește vizitatorii pe tot parcursul șederii pe site.

Pentru a vă inspira, am ales 12 site-uri web care utilizează navigarea verticală pentru a optimiza experiența vizitatorului, îmbunătățind modul în care navighează pe tot site-ul web.

1. Master en Diseno de Interiores

Master en Diseno de Interiores este un site uimitor care se referă la design interior. În imaginea de mai sus, puteți vedea modul în care au folosit meniul vertical pentru a da o atingere extra frumoasă site-ului lor web.

Culorile utilizate pe site-ul web sunt foarte neutre, ceea ce oferă o notă modernă atât site-ului, cât și companiei sau mărcii în cauză.

Navigarea verticală nu face excepție. Culorile utilizate sunt foarte subtile și nu deranjează ochii în timp ce citesc.

2. Model On Top

Model On Top este un site de administrare a modelelor. Acest site web, creat împreună cu Divi, a permis o anumită armonie să se unească și să arate profesionalitatea și expertiza pe care doresc să le asocieze companiei lor.

În afară de o navigare verticală foarte frumoasă, care conține toate elementele necesare, cum ar fi un logo, paginile și o bară de căutare, au creat acea implicare folosind un fundal video chiar la începutul site-ului lor web.

Navigarea verticală nu a avut nevoie de multă proiectare specială, ci a decis mai degrabă să o mențină curată și să lase lucrurile vizuale pe tot restul paginii.

3. Art-On-The-Run Filmschool Berlin

Art-On-The-Run Filmschool Berlin a reprezentat perfect pe site-ul lor latura artistică de care are nevoie o școală de film. Navigarea verticală are un scop special în întreaga imagine.

Au folosit în mod deliberat o navigație verticală pentru a se bucura de avantajele de a face meniul să arate ca un fel de „listă”. Au folosit numerotarea care este în conformitate cu ceea ce este site-ul web. Numerotarea ar putea, pe lângă pagini, să fie interpretată cu ușurință și ca scenarii sau episoade.

Combinația dintre pagini și sigla care este afișată oferă un anumit sentiment de simplitate și structură. Nu au reușit să reprezinte și imagini care sunt destul de conforme cu ceea ce este site-ul lor web.

4. Alex Brands

Brandurile Alex este un site web de comerț electronic Divi care vinde tot felul de lucruri pentru copii; de la arte și meserii la mobilier și jocuri. Site-ul web arată imediat felul de sentiment pe care doresc să îl reprezinte; jucăuș și primitor.

Navigarea verticală a fost în acest caz, de asemenea, aleasă în mod deliberat. Există o mulțime de pagini diferite, dacă ar fi optat pentru un meniu de sus, structura s-ar pierde și nu ar fi suficient spațiu.

5. Fotografii Devlin

Delvin Photos este probabil cel mai elegant site web dintre toate cele menționate în această postare. Delvin Photos își folosește site-ul web pentru a-și afișa toată munca într-un mod original și captivant pentru a atrage noi clienți pentru serviciile pe care le oferă.

Au folosit navigarea verticală pentru a sublinia eleganța pe care o utilizează în restul site-ului lor web și prin includerea pictogramelor de socializare în meniul lor principal; de asemenea, se asigură că oamenii pot accesa canalele de socializare în orice moment în timpul șederii lor pe site.

6. Machiaj Soiree

Soiree Makeup este un site web care se învârte în jurul machiajului. Site-ul este conceput special pentru a oferi serviciile de machiaj ale unui artist de machiaj. Site-ul web arată imediat simplitatea și eleganța care se așteaptă de la fiecare artist de machiaj. Nu prea multă extravaganță, dar destul de privită.

Site-ul, în general, nu ocupă întregul ecran, ceea ce face conținutul mai concentrat. În navigarea verticală, cea mai mare atenție se îndreaptă spre siglă și caseta de contact.

Includerea unei cutii de contact în cadrul navigării verticale permite machiajului să sublinieze cel mai important scop pe care îl are site-ul; obținerea de noi clienți potențiali, clienți noi și rezervări noi.

7. Fotografie Nathan Welton

Nathan Welton Photography este al doilea site de fotografie pe care l-am selectat pentru această postare. Utilizarea navigației verticale pentru un site de fotografie este mult mai comună decât pentru alte site-uri web. Acest lucru se întâmplă, de obicei, deoarece imaginile de pe site vorbesc de la sine.

Proprietarii de site-uri web de fotografii utilizează o navigație verticală simplă pentru a menține accentul pe imagini, având un meniu ușor de utilizat și care nu distrage atenția.

Imaginile pe care le-a folosit Nathan Welton pe site-ul său web sunt exact așa; sunt plini de aventuri și își povestesc propria poveste. Navigarea verticală este acolo doar în scopuri practice și nu se întrerupe cu pagina, așa cum ar face un meniu de sus.

8. Fotografie Lilly

Lilly Photography este ultimul site de fotografie pe care l-am ales pentru această postare. Lucrul minunat al acestui site este că folosește o galerie pe pagina principală.

Galeria prezintă lucrări care au fost făcute în trecut pentru a crea un anumit sentiment de experiență. Pentru că până la urmă; oamenii caută un fotograf care să facă fotografii care să corespundă cu ceea ce se așteaptă.

Navigarea verticală este similară cu navigația verticală utilizată de Nathan Welton; simplist, dar realizând treaba.

9. Film Pittsburgh

Film Pittsburgh este o organizație de prezentare a filmului. Unul dintre lucrurile frumoase pe care le-au făcut este să creeze un al doilea meniu în partea de sus a paginii lor, care să permită vizitatorilor să obțină informații practice.

Navigația verticală, dimpotrivă, este destul de informativă, dar îi ajută pe vizitatori să înțeleagă povestea și misiunea lor, conducându-i către paginile potrivite. Împărțirea paginilor practice și narative unele de altele împuternicește povestirea din meniul principal.

Pe lângă utilizarea navigației verticale, Film Pittsburgh nu a folosit nici întreaga dimensiune a ecranului, ceea ce le-a lăsat spațiu pentru a-și îmbunătăți designul cu o imagine de fundal relevantă.

10. BlendLove

BlendLove este un magazin alimentar situat în Australia. Au construit un site web pentru a-și informa clienții despre toate informațiile practice pe care trebuie să le cunoască.

Unul dintre extra-urile frumoase pe care le oferă pe site-ul lor web este posibilitatea de a cumpăra o carte electronică plină cu mâncarea sănătoasă pe care o fac. Este un mod frumos de a interacționa cu clienții, de a cunoaște cine sunt și chiar de a obține profit.

Site-ul în sine are o paletă de culori întunecate care creează un contrast frumos cu logo-ul pe care îl au. Aceștia s-au asigurat că culorile sunt consistente pe întregul site web, și în navigarea lor verticală. Asigurarea consecvenței este importantă, deoarece navigarea verticală ocupă o parte relativ mare a ecranului, în timp ce un meniu de sus nu este la fel de vizibil.

11. Bon Appetit

Bon Appetit este un site web belgian axat pe oferirea de ateliere care implică o mulțime de arome și parfumuri. Exemplele anterioare și acest exemplu diferă cu siguranță pe un singur lucru; site-ul Bon Appetit este mai concentrat pe conținutul scris pe care îl furnizează decât pe vizualitate.

Meniul vertical a fost împărțit în 3 tipuri de piese; sigla, paginile și serviciile suplimentare, cum ar fi serviciul pentru clienți și transportul. Diferența de stil între pagini și servicii suplimentare oferă un sentiment și o atingere suplimentară organizate site-ului.

12. Mănâncă restaurant thailandez

Eat Thai Restaurant este ultimul exemplu din această postare. Este un restaurant mobil deținut local, care ajunge la subiect. Site-ul lor web nu are mai multe pagini. Mai degrabă au luat o pagină și s-au concentrat asupra lucrului care este cel mai important; mancarea. Site-ul este utilizat pentru a redirecționa persoanele care doresc să comande către un site de comandă.

Lucrul frumos despre navigarea verticală utilizată în acest exemplu este că nu este acolo pentru a naviga, ci mai mult pentru a informa. Navigarea verticală urmărește un vizitator pe tot parcursul șederii pe site, ceea ce înseamnă că și informațiile fac acest lucru. Au furnizat toate informațiile relevante din meniu, împreună cu pictogramele sociale și un CTA „Comandă acum”.

Gânduri finale

Sperăm că această postare vă va oferi o mulțime de inspirație care vă ajută să vă gândiți la concepte excelente pentru site-urile web actuale pe care le aveți sau pentru site-urile viitoare pe care le creați. Dacă aveți sugestii sau comentarii; nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos! Și cât timp sunteți acolo, anunțați-ne; pentru ce fel de site web ați utiliza navigarea verticală?

Asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să nu pierdeți niciodată un anunț mare, un sfat util sau un cadou gratuit Divi!

Imagine prezentată de LuckyDesigner / shutterstock.com