webdesign Antwerpen

We hebben allemaal mega navigaties en fullscreen dropdowns online gezien. Ze zijn gewoon op het internet en vooral handig op sites met veel links.

Maar het ontwerpen van een mega nav die werkt kan een echte pijn zijn. Er zijn geen strikte richtlijnen voor deze menu’s, zodat u moet bestuderen wat anderen doen en proberen iets te maken die past bij uw project.

Leer hier: Hoe maak je een CSS3 Mega drop-down menu

Laten we eens kijken naar een aantal mega navigatie trends en zien hoe ze traditionele dropdown-menu’s nemen en ze een stap verder zetten.
Indien je op zoek bent naar webdesign antwerpen, dan kan je ook eens bij O-design kijken

Deep Level Categorieën

De meest waardevolle designstijl voor een mega nav is de kolomstructuur.

Hiermee kunt u ‘categorieën’ voor links aanwijzen en dieper links maken zonder gebruik te maken van meerdere fly-menu’s. Een mega navigatie dropdown kan de hele pagina overslaan, zodat u meestal minstens 3-4 kolommen in één dropdown kunt passen.

Mega Navigatie Menu Ontwerp Trends In Moderne Websites
Kijk eens naar Wayfair die een zeer uniek soort dropdown menu gebruikt. Ze hebben een link voor ‘afdelingen’ waar u kunt bladeren per categorie en zelfs subcategorie zoals slaapkamers> nachtkastjes.

Naast deze link is een dropdown voor “kamer ideeën” waar u kunt bladeren op basis van de kamer. Deze dropdown bevat afbeeldingen naast de links, zodat u veel gemakkelijker kunt surfen door keuzes.

Het duurt niet lang om te realiseren dat ze navigatie artikelen in categorieën breken. Deze volgen een vergelijkbare trend en Wayfair’s mannavigatie heeft alleen twee hoofdverbindingen nodig om dit te kunnen werken!

Mega Menu
Als alternatief heeft een andere e-commerce winkel Puma een vergelijkbare kolomstructuur.

Maar ze breken categorieën af op basis van demografie en items, dan vind je in elke meganav kolommen voor elk itemtype (populaire producten, kleding, sport, enz.).

Merk op dat de kolommen hun eigen headers hebben en deze staan ​​uit de rest van de links. Het creëert een echte kolomstructuur, omdat u eerst de kolomkoppen kunt doorzoeken en daarbuiten sub-links bladeren.

Soortgelijk effect op Lucky Brand maar met een draai in het ontwerp.

goed webdesign vind je ook hier.

Drop-down menu
Al hun kolommen hebben dezelfde kleurenschema’s, maar ze gebruiken verschillende typografieën. Dit kan sneller browsen harder, maar het is nog net zo bruikbaar.

Lucky’s animatie-effecten zijn ook een fijne aanraking, dus dat is zeker iets te overwegen.

Maar als je worstelt met een mega-navigatie-hiërarchie, probeer je links eerst in dieper categorieën te organiseren.

Full-Width Dropdowns

Deze trend wordt niet gebruikt op elke site, maar ik zie het veel meer tegenwoordig.

Enorme mega navigatiemenu’s kunnen de gehele breedte van de pagina uitbreiden om meer ruimte voor desktop- en laptopgebruikers te creëren. Mobiele gebruikers hebben meestal verborgen menu’s, zodat ze nooit echt het volledige effect zien.

Full-Width Dropdowns
De navigatie voor Pluralsight is een uitstekend voorbeeld met een fullscreen mega menu. De inhoud blijft op dezelfde breedte als de pagina zelf vast, maar het menu strekt zich over het geheel van het scherm.

Het is een cool effect, omdat het meer ruimte creëert in het menu. Of het geeft in ieder geval de visuele illusie van meer ruimte.

En als je een enorme navigatie voor grotere monitoren uitvoert, waarom niet helemaal?

Digital Spy heeft iets heel vergelijkbaar en hun navs bevatten ook categoriepauzes.

Full-Width Dropdowns
Er is een gelijkmatige splitsing tussen “normale” dropdown links en thumbnail links direct naar artikelen.

Maar weer blijft de inhoud op dezelfde breedte als de pagina vast, terwijl het menu het geheel van het scherm uitstrekt.

Fantastisch effect als je het kan laten werken.

Mega Menu
U kunt zelfs de kolomstructuur en het fullscreen-effect combineren in één ontwerp.

Dit is wat u op de OARS website ziet en het is een prachtig voorbeeld van geweldig ontwerp + geweldige UX.

Mengen van afbeeldingen en tekst

Ik moedig aan om, indien mogelijk, meer afbeeldingen toe te voegen aan alle websites. Visuals helpen om alle tekst die we regelmatig zien op te breken.

Mega nav menu’s werken het best op grotere schermen, dus het is veilig om te zeggen dat er ruimte is voor afbeeldingen. De website van Sears breidt hun nav op in multilevel categorieën met zowel links als afbeeldingen.

Mengen van afbeeldingen en tekst
Sommige van de topcategorieën hebben afbeeldingen voor keukenapparatuur, matrassen en huismeubilair. Maar de diepe categorieën bevatten directe links naar dingen zoals bestek en servies.

Vergeet niet dat je een mega-navigatie vrij lang kan maken en het nog steeds bruikbaar maakt. Dus er is ruimte voor een rij afbeeldingen en een rij van tekstverbindingen voor bijna elke nav.

Maar je zou ook de route van een kleinere menu kunnen gaan zoals bij de dropdowns van PlayStation.

Mengen van afbeeldingen en tekst
Hun navs bevatten ook een goede mix van afbeeldingen met tekst, veel daarvan zijn labels voor individuele pagina’s.

Als u de tijd hebt om aangepaste pictogrammen te ontwerpen, kunt u dit voor uw eigen site proberen. Voeg een pictogram naast elke belangrijke link toe zodat u visuals hebt, plus tekst voor navigatie.

Alternatieve Dropdown Technieken

Wees bereid om te experimenteren met uw mega-navigaties. Er zijn geen strikte regels voor