10 voorbeelden van uitstekende menu's voor websites
Sommige websites laten ons enigszins gedesoriënteerd achter wanneer we opzoek zijn naar een bepaalde sectie. Er zijn ook websites waarbij de ene knop ons intuïtief naar de volgende leidt, waardoor je moeiteloos kunt bladeren.
Bij het maken van een website moeten verschillende elementen van de pagina samenkomen om bezoekers naadloos en gemakkelijk door je site te leiden. Een element dat een doorslaggevende rol speelt in de gebruikerservaring van je site en de navigatie enorm beïnvloedt, is het menu.
Wat is een website menu?
Een website menu is een lijst van opties die dienen om te navigeren tussen de verschillende pagina's of secties van een website. Er zijn verschillende soorten menu's, afhankelijk van de content en het ontwerp van de website. De belangrijkste soorten website menu's zijn:
Klassiek navigatiemenu: dit is meest het voorkomende type menu. Het wordt meestal als een horizontale lijst bovenin de pagina weergegeven.
Sticky menu: Dit menu staat ook bekend als een vast of zwevend menu dat blijft staan wanneer bezoekers naar beneden scrollen. Deze menu's zijn ideaal voor lange pagina's.
Hamburgermenu: een icoon dat bestaat uit drie horizontale strepen die na het klikken op een menu worden geopend. Deze ontwerpstijl is geworteld in het ontwerp van mobiele websites, maar wordt nu ook veel gebruikt op desktop.
Vervolgkeuzemenu: ook wel dropdown menu genoemd. Dit is een lijst met extra opties die wordt geopend zodra bezoekers op een van de menu onderdelen klikken of erover zweven. Deze optie is geschikt voor websites met veel content.
Sidebarmenu: een lijst met menu opties aan de linker- of rechterkant van een webpagina.
Hieronder staan 10 voorbeelden van website menu's die gebouwd zijn met Wix. Ze vertegenwoordigen veelzijdig en creatief gebruik van het menu, zowel in hun website navigatie als webdesign. Hier zijn ze, ter inspiratie:
01. Brittney Johnson: interactieve navigatie in de sidebar
De navigatie op dit online designportfolio van Brittney Johnson staat centraal. De startpagina is uitsluitend aan het menu is gewijd. Het werk van Brittney wordt aan de linkerkant weergegeven en wanneer je erover beweegt met de muis, onthullen ze een afbeelding van hetzelfde project aan de rechterkant.
De sidebar, gemaakt met Velo by Wix, transformeert de navigatie van de website in een indrukwekkende, interactieve ervaring. Het gaat vergezeld met een extra minimalistisch menu in de header van de website dat naar de ‘Over’ pagina leidt en weer terug naar de startpagina.
02. Payton Pitts: een hamburgermenu met een twist
De fotografiewebsite van Payton Pitts is helemaal in opkomst! Ze gebruikt een handgeschreven logo en een kleurenschema in aardetinten. De navigatie is even stijlvol. Een vergroot hamburger icoon met ongelijke lijnlengtes, resulteert in een unieke look.
Eenmaal aangeklikt, opent het menu zich in een zijbalk (gemaakt met een lightbox) die het linker segment van het scherm vult met een prachtig abstract schilderij. Merk op hoe Payton's links naar social media worden geplaatst als een secundair, subtieler menu rechtsboven op de pagina.
03. Yang’s Place: On-brand navigatie dat makkelijk en toegankelijk is
De website van het Chinees restaurant Yang's Place, is volledig in stijl van het merk. Het logo is te zien op het eerste paginagedeelte, in de header van de website en verschijnt opnieuw in het volledige menu. Het logo op de header is vastgezet zodat het op alle pagina's te zien is en leidt zo bezoekers terug naar de homepage, een goede gewoonte om de gebruikerservaring te verbeteren.
Je kunt navigeren vanuit zowel een hamburgermenu (dat uitkomt in een volledig schermmenu), als een geometrische site indeling van foto's en tekstvakken op de startpagina, gemaakt met de Wix Pro Gallery.
04. Protea: een klassiek menu dat wacht om onthuld te worden
Met grote afbeeldingen van gerechten en de locatie van Napa Valley, benadrukt deze restaurant website hun vers gemaakte gerechten en geweldige sfeer. De navigatie is daarom minder prominent aanwezig in het ontwerp, met een klassiek menu dat pas wordt onthuld als we op het hamburger icoon klikken.
Als het menu eenmaal is geopend, blijft het op de pagina staan, zelfs als we naar beneden scrollen. Het fungeert als een zwevend menu. Voor extra navigatie is er een sidebar aan de rechterkant van het scherm, die leidt naar de verschillende social media accounts van de website, evenals een CTA knop om een reserveringen te maken.
05. William LaChance: een geanimeerd scrollmenu voor in lange pagina
Hoewel er een klassiek sidebar menu op deze artiesten portfolio staat, is er ook een extra menu bestaande uit afbeeldingen en videoboxen die in beeld komen terwijl we naar beneden scrollen. Dit menu maakt gebruik van website animaties en heldere, levendige kleuren om de aandacht van bezoekers te trekken.
Deze luide en kleurrijke scrol vormt een aanvulling op een eenvoudige sidebar, waardoor een interactieve navigatiemethode mogelijk is. In tegenstelling tot de animaties die op de startpagina staan, blijft de zijbalk ook op alle pagina's van de website staan.
06. I Love Dust: een menu verdeeld over alle hoeken van het scherm
De website van dit grafisch ontwerpbureau geeft warm welkom met een snelle, fullscreen video. In de video wordt een showreel van het werk van de studio weergegeven. Het website menu blijft daarentegen eenvoudig en statisch, met in elke hoek van het scherm een ander menu onderdeel.
Het opgesplitste menu, een huidige trend in webdesign, kan worden gemaakt door elementen aan de zijkanten van je scherm vast te zetten.
07. Mantra: een menu op volledig scherm dat een statement maakt
Als een ontwerpstudio gericht op sport, lanceert de website van Mantra een dynamische video op volledig scherm zodra je de site betreedt. Als we op het hamburger icoon van de website klikken, knippert het scherm helderblauw, gevuld met niets meer dan vier menu items in grote, witte letters.
Het toewijden van een volledige pagina aan een menu, is een gewaagde zet die perfect past bij het algehele ontwerp van de website. Het gebruik van grote typografie versterkt dit gevoel, wat zorgt voor een bijzonder leuk menu.
08. Stolen Goods: Klassiek menu, luid en trots
De producten van deze webshop worden benadrukt met hun prachtig handzeef gedrukte patronen. Het strakke ontwerp en de royale hoeveelheid witruimte, bieden voldoende ruimte om de productfotografie op de pagina te laten schitteren.
Maar als een echt design- en kunstmerk kun je erop rekenen dat Stolen Goods de website, en niet alleen de producten, een persoonlijk gevoel voor stijl geven. Het klassieke header menu is opnieuw geïnterpreteerd en trekt de aandacht van bezoekers met grote, kleurrijke typografie. Hun heldere kleurenpalet is net zo mooi als functioneel en geeft de huidige pagina aan met roze en blauw.
09. Ruby Love: een dropdown menu voor een eCommerce winkel
De webshop van Ruby Love is gespecialiseerd in menstruatie ondergoed en biedt een overvloed aan verschillende items, van ondergoed tot nachtkleding en zwemkleding. Als gevolg hiervan vereist de eCommerce website van Ruby Love een navigatiesysteem dat deze uiteenlopende hoeveelheid informatie kan bevatten.
Dit maakt het dropdown menu de perfecte match, omdat het een andere selectie van categorieën opent zodra je met de muis over een item zweeft. Om meer ogen naar het menu te trekken, hebben ze een vrouw in de bovenste gedeelte van de pagina afgebeeld wiens blik in de richting van het menu is gericht. Dit subtiele effect kan op zijn beurt de betrokkenheid van websitegebruikers helpen vergroten.
10. Doris Liou: een geïllustreerd menu met verrassende animaties
Dit illustratieportfolio is gevuld met handgemaakte tekeningen van de in Californië gevestigde kunstenaar Doris Liou, waardoor het geïllustreerde header menu zich meteen thuis voelt. De menu icoontjes zijn met potlood getekend, met een kleine krant voor de ‘Illustratie’ pagina en een bloem voor ‘Social Media’.
Wanneer de menu icoontjes worden bewogen, sluipen kleurrijke geanimeerde gifs naar binnen en brengen ze tot leven. Wanneer je over de naam van de illustrator zweeft, komen we een vrolijk klein personage tegen dat rondzweeft. Datzelfde vriendelijke gezicht schittert ook in het favicon van de site, dit brengt het algehele design samen en draagt bij aan de branding en zichtbaarheid van het portfolio.
Door Team Wix
