12 przykładów nawigacji pionowej Divi

Tworząc stronę internetową, należy wziąć pod uwagę wiele różnych rzeczy. Zwykle zaczyna się od tego, jak chcesz, aby ogólny układ witryny wyglądał i działał. Chcesz, aby pasował do treści w Twojej witrynie, aby wzmocnić wiadomość, którą próbujesz wysłać.

Jednym z czynników, które odgrywają główną rolę w tym, jak Twoja witryna wpłynie na zachowanie odwiedzających, jest menu główne. Dzięki Divi istnieje mnóstwo możliwości, które pozwalają Ci stylizować menu w piękny sposób, który pasuje do reszty Twojej witryny i pomaga prowadzić odwiedzających przez Twoją witrynę.

Jedną z takich możliwości jest używanie pionowej nawigacji zamiast górnego menu. Chociaż nawigacja pionowa nie jest tak często używana, może dostarczyć oszałamiających wyników, jeśli jest dobrze przemyślana i pasuje do reszty witryny. Podobnie jak menu górne, menu pionowe śledzi odwiedzających przez cały czas ich pobytu na stronie.

Aby Cię zainspirować, wybraliśmy 12 witryn, które wykorzystują nawigację pionową w celu optymalizacji doświadczenia odwiedzających poprzez poprawę sposobu poruszania się po witrynie.

1. Master en Diseno de Interiores

Master en Diseno de Interiores to oszałamiająca strona internetowa poświęcona projektowaniu wnętrz. Na powyższym obrazku możesz zobaczyć, w jaki sposób wykorzystali pionowe menu, aby nadać swojej witrynie dodatkowy miły akcent.

Kolory używane na stronie są bardzo neutralne, co nadaje nowoczesny charakter zarówno stronie internetowej, jak i danej firmie lub marce.

Nawigacja pionowa nie jest wyjątkiem. Zastosowane kolory są bardzo subtelne i nie przeszkadzają oczom podczas czytania.

2. Model na górze

Model On Top to witryna do zarządzania modelami. Ta strona internetowa, stworzona z Divi, pozwoliła połączyć pewną harmonię i pokazać profesjonalizm i wiedzę, którą chcą połączyć ze swoją firmą.

Oprócz bardzo ładnej pionowej nawigacji, która zawiera wszystkie potrzebne elementy, takie jak logo, strony i pasek wyszukiwania, stworzyli również to zaangażowanie, używając tła wideo na początku swojej witryny.

Pionowa nawigacja nie wymagała specjalnego projektowania, raczej postanowili zachować czystość i pozwolić wizualizacji na resztę strony.

3. Szkoła filmowa Art-On-The-Run w Berlinie

Art-On-The-Run Filmschool Berlin doskonale reprezentowała stronę artystyczną, której potrzebuje szkoła filmowa na swojej stronie internetowej. Nawigacja pionowa ma na całym obrazie szczególne znaczenie.

Celowo wykorzystali nawigację pionową, aby czerpać korzyści z tego, że menu wygląda jak rodzaj „listy”. Użyli numeracji zgodnej z treścią serwisu. Numerację można, oprócz stron, łatwo zinterpretować jako scenariusze lub epizody.

Połączenie stron i wyświetlanego logo daje poczucie prostoty i struktury. Nie omieszkali również przedstawić wizualizacji, które są całkiem zgodne z tym, o czym jest ich strona internetowa.

4. Alex Marki

Marki Alex to witryna e-commerce Divi, która sprzedaje wszelkiego rodzaju rzeczy dla dzieci; od sztuki i rzemiosła po meble i gry. Strona internetowa natychmiast pokazuje rodzaj uczucia, które chcą reprezentować; zabawny i zachęcający.

Również w tym przypadku bardzo celowo wybrano nawigację pionową. Istnieje wiele różnych stron, gdyby wybrali górne menu, struktura zostałaby utracona i nie byłoby wystarczająco dużo miejsca.

5. Zdjęcia Devlina

Delvin Photos to prawdopodobnie najbardziej elegancka strona ze wszystkich wymienionych w tym poście. Delvin Photos wykorzystuje swoją witrynę internetową do wyświetlania całej swojej pracy w oryginalny i angażujący sposób, aby przyciągnąć nowych klientów do oferowanych przez nich usług.

Wykorzystali nawigację pionową, aby podkreślić elegancję, której używają w pozostałej części swojej witryny, a także umieszczając ikony mediów społecznościowych w swoim menu głównym; dbają również o to, aby ludzie mieli dostęp do kanałów mediów społecznościowych w dowolnym momencie podczas ich pobytu na stronie.

6. Makijaż wieczorowy

Soiree Makeup to strona internetowa, która skupia się na makijażu. Witryna jest specjalnie stworzona, aby oferować usługi makijażu wizażysty. Strona od razu pokazuje prostotę i elegancję, jakiej oczekuje się od każdego wizażysty. Nie za dużo ekstrawagancji, ale ładny wygląd.

Witryna generalnie nie zajmuje całego ekranu, co sprawia, że ​​treść jest bardziej skoncentrowana. W nawigacji pionowej największą uwagę przywiązuje się do logo i skrzynki kontaktowej.

Umieszczenie pola kontaktowego w nawigacji pionowej pozwala wizażyście podkreślić najważniejszy cel, jaki ma strona internetowa; zdobywanie nowych leadów, nowych klientów i nowych rezerwacji.

7. Fotografia Nathana Weltona

Nathan Welton Photography to druga strona fotograficzna, którą wybraliśmy do tego postu. Korzystanie z nawigacji pionowej w witrynie fotograficznej jest znacznie częstsze niż w przypadku innych witryn. Dzieje się tak zazwyczaj dlatego, że zdjęcia na stronie mówią same za siebie.

Właściciele stron internetowych z fotografiami używają prostej nawigacji pionowej, aby skupić się na zdjęciach, mając menu, które jest łatwe w użyciu i nie rozprasza.

Obrazy użyte przez Nathana Weltona na swojej stronie internetowej są dokładnie takie; są pełne przygód i opowiadają własną historię. Pionowa nawigacja jest dostępna tylko w celach praktycznych i nie przerywa pracy na stronie, jak robiłoby to górne menu.

8. Fotografia Lilly

Lilly Photography to ostatnia strona fotograficzna, którą wybraliśmy do tego postu. Wspaniałą rzeczą w tej witrynie jest to, że używa galerii na stronie głównej.

Galeria pokazuje prace, które zostały wykonane w przeszłości, aby stworzyć pewne wrażenie doświadczenia. Ponieważ w końcu; ludzie szukają fotografa, który robi zdjęcia zgodne z ich oczekiwaniami.

Nawigacja pionowa jest podobna do nawigacji pionowej używanej przez Nathana Weltona; uproszczone, ale wykonujące zadanie.

9. Film Pittsburgha

Film Pittsburgh to organizacja prezentująca film. Jedną z fajnych rzeczy, które zrobili, jest stworzenie drugiego menu na górze strony, które pozwala odwiedzającym uzyskać praktyczne informacje.

Wręcz przeciwnie, nawigacja pionowa ma charakter informacyjny, ale pomaga odwiedzającym zrozumieć ich historię i misję, prowadząc ich do właściwych stron. Oddzielenie stron praktycznych i narracyjnych od siebie umożliwia opowiadanie historii w menu głównym.

Oprócz korzystania z nawigacji pionowej, Film Pittsburgh nie wykorzystał również całego rozmiaru ekranu, co pozostawiło im miejsce na ulepszenie projektu za pomocą odpowiedniego obrazu tła.

10. Mieszanka Miłości

BlendLove to sklep spożywczy znajdujący się w Australii. Zbudowali stronę internetową, aby poinformować swoich klientów o wszystkich praktycznych informacjach, które muszą znać.

Jednym z fajnych dodatków, które udostępniają na swojej stronie internetowej, jest możliwość zakupu e-booka pełnego zdrowej żywności, którą wytwarzają. To dobry sposób na nawiązanie kontaktu z klientami, poznanie ich, a nawet zarobienie.

Sama strona internetowa ma ciemną paletę kolorów, która tworzy ładny kontrast z posiadanym logo. Upewnili się, że kolory są spójne w całej witrynie, również w nawigacji pionowej. Zapewnienie spójności jest ważne, ponieważ pionowa nawigacja zajmuje stosunkowo dużą część ekranu, podczas gdy górne menu zwykle nie jest tak zauważalne.

11. Smakołyk

Bon Appetit to belgijska strona internetowa skupiająca się na prowadzeniu warsztatów obejmujących wiele smaków i zapachów. Poprzednie przykłady i ten przykład na pewno różnią się między sobą; strona internetowa Bon Appetit jest bardziej skoncentrowana na pisanej treści, którą dostarczają, niż na wizualności.

Pionowe menu zostało podzielone na 3 rodzaje części; logo, strony i dodatkowe usługi, takie jak obsługa klienta i wysyłka. Różnica w stylu między stronami a dodatkowymi usługami zapewnia dodatkową zorganizowaną atmosferę i atmosferę witryny.

12. Zjedz tajską restaurację

Eat Thai Restaurant to ostatni przykład w tym poście. To lokalna, mobilna restauracja, która trafia do sedna. Ich witryna nie ma wielu stron. Wzięli raczej jedną stronę i skupili się na tym, co najważniejsze; jedzenie. Strona służy do przekierowywania osób, które chcą złożyć zamówienie, na stronę zamawiającą.

Zaletą nawigacji pionowej użytej w tym przykładzie jest to, że tak naprawdę nie służy ona do nawigacji, ale zawiera więcej informacji. Pionowa nawigacja podąża za odwiedzającym przez cały czas jego pobytu na stronie, co oznacza, że ​​informacje też. Podali wszystkie istotne informacje w menu, wraz z ikonami społecznościowymi i wezwaniem do działania „Zamów teraz”.

Końcowe przemyślenia

Mamy nadzieję, że ten post dostarczy Ci mnóstwa inspiracji, które pomogą Ci wymyślić świetne koncepcje dotyczące obecnych witryn lub przyszłych witryn, które tworzysz. Jeśli masz jakieś sugestie lub uwagi; możesz zostawić komentarz w sekcji komentarzy poniżej! A kiedy tam będziesz, daj nam znać; dla jakiego rodzaju strony internetowej używałbyś nawigacji pionowej?

Pamiętaj, aby zapisać się do naszego biuletynu e-mail i kanału YouTube, aby nigdy nie przegapić ważnego ogłoszenia, przydatnej wskazówki lub gratisów Divi!

Polecane zdjęcie autorstwa LuckyDesigner / shutterstock.com