Stunning WordPress Sites That Have Reimagined Navigation

Is there anything more important than navigation when building a website? Don’t answer that. I don’t want to start a debate. But what I think we all can agree on is the indisputable fact that navigation is vital to a site’s success.

Typically, navigational menus are limited to a few key locations on a site: the top of the page, the right or left sidebar, or in a expandable mobile-style menu. A lot of this has to do with the fact this is where navigation has always been on websites. Menus continue to stay in these locations because that’s where your visitors expect them to be.

So that got me thinking about websites that don’t prescribe to these preconceived notions of what navigation should be. How do they experiment with the form? And though the location or structure is different, are these alternative navigational menus still effective?

I went on a hunt to find sites that have reimagined navigation. They’ve thrown convention out the window. And while the menus featured in this collection might not be ideal for businesses, it definitely offers some food for thought in terms of what’s possible from a creative design standpoint.

So, let’s get on to the list and explore some sites that approach navigation as creatively and originally as any other design element.

The Forecaster Interactive

The Forecaster Interactive is more than just a website, it’s an experience. This site is designed to be immersive and act as an accompaniment to the documentary film, The Forecaster, which tells the life story of Martin Armstrong, a man who made financial predictions in the 1980s that disrupted national economies. The site is presented like a print newspaper with large headlines and columns of text.

It does have a traditional expanding menu in the upper lefthand corner that works on desktop and mobile devices, but the presentation within it is interesting. It offers three tabs of navigation options to explore. The first covers key events from the film, the second is a category filter, and the third is a list of resources and external links related to the movie, Martin Armstrong, and the press.

This website was custom designed by Nico Roicke. It uses two plugins including Dr Splash page (which may be proprietary) and All-in-One SEO Pack.

Eginstill

The Eginstill website offers a seamless combination of traditional navigation with interesting innovation that makes for a more intuitive and immersive experience. When the site loads, you’re presented with a fullscreen image of a stylish kitchen with some flavor text an a downward arrow prompting you to scroll.

As you scroll, the image shrinks down to a portrait window and the rest of the site emerges around it. It’s minimal in design, with plenty of whitespace. But what I particularly loved here was the navigation on the lefthand side of the screen. Individual kitchen projects are listed and when you hover the curser over them, a small thumbnail image appears, offering a quick preview of the end result before you click.

The site was created by Build in Amsterdam and uses a custom theme to pull off its stylish design and simple yet effective navigational elements.

Team Les Chameaux

The navigation for the Team Les Chameaux site looks pretty straightforward on the surface but upon further inspection, it’s easy to see how it differs from what’s typical. There is a clearly identified “Menu” on the lefthand side of the screen but its contents are marked only by letters. Upon hover, these letters expand to reveal the full name of each section including “Team,” “Media,” and “Contact.”

Scrolling also takes you directly to each of these sections and within them, there are further sub-sections to explore. For instance, in the “News” section, there are numbers you can click to reveal additional news stories.

The creator of this site is Quentin Hocdé using a custom-built theme. The site also uses Contact Form 7.

Quentin Hocdé

Speaking of, Quentin Hocdé, this French developer has a portfolio site that’s built on WordPress that offers a truly unique presentation. It’s quite impressive in how it manages to be very eye-catching while totally simple. This site is essentially a one-pager that presents floating white dots on a dark blue background that swirl around to form different shapes. Upon first loading, the site presents the word “Hello” and on the lefthand side of the screen, simple navigation displays the words “I’m a Junior Creative Developer.”

When you scroll, the swirling dots change to pink and form a new shape. The navigation on the left now offers up one of Hocdé’s projects. Scroll again, we get another shape in yellow with another project to explore. Keep scrolling and the whole thing starts over from the beginning. There’s also a nice About link in the upper righthand corner that displays a simple popover.

Esy-floresy studio animacji

Esy-floresy is an animation studio based in Poland that offers a wide range of animation services including 2D character animation, motion graphics, multimedia, music videos, and more. The site’s navigation is largely conventional. There is a primary menu across the top of the page. However, the introductory images in the viewport provide a whimsical, circus-inspired scroll-triggered animation effect that means users are presented with navigation first thing.

The site itself relies heavily on parallax effects to help to tell the story of the studio. Each section on the page has additional navigational elements that help direct visitors to where they want to go. This site uses a custom theme created by Jacek Suski.

Piet Oudolf – Gardens and Landscapes

Piet Oudolf is a garden and landscape designer from Haarlem, the Netherlands who creates a multitude of beautiful installations in The Netherlands, Germany, Sweden, and in other countries as well. The site does utilize traditional navigation across the top. When the user hovers over the header area, the menu drops down to reveal three columns of link options including those for Projects, Information, and Private Garden.

What stood out to me on this site, however, is the way the gardens and projects are presented. Each location is listed as large text with an image of the project itself used to fill in said text. When you hover on the project name, the full image appears, offering a great preview of the project before you click. It’s really quite innovative.

This site uses a custom theme developed by Studio Naam. It also uses the WP Retina 2x plugin.

Between Red & Toe

Between Red & Toe is a photography journal by Amit Adams that chronicles her life, including capturing her pregnancy. The site uses a grid-style layout but what I found unique is it presents multiple photos together as a single link to all photos in a mini-collection. For instance, at the top of the site is the latest collection called “Getting Ready” which features several photos that capture this theme, which are all linked together. When clicked, you’re then taken to a mini-blog post that discusses this theme and the photos within the collection.

Everything is presented minimally. It’s all about the photos here, which serves the purpose of the site well. This site features another custom designed theme, this time created by the photographer’s husband, developer Nathan Adams.

Bonne Marque

Bonne Marque is a design firm led by Alexander Engzell, that reimagines brands. It’s responsible for re-envisioning websites for a number of clients but its own site might be the most impressive of the bunch, especially in terms of breaking the mold of navigation and function. The homepage is filled with words like “Bold” and “Embody.” You can scroll to view case studies or you can click the menu on the righthand side of the screen.

When clicked, this menu expands and fills the entire viewport. The link to the “About” page is featured in the center of the page within a white box that turns blue on hover. The rest of the navigational options are placed at the bottom of the page. Hovering over each provides a small photo preview of the project. Individual project pages include fullscreen videos, and text blocks that are formatted like the pages of a book. The lefthand side of the screen also transforms into a timeline for the project.

Bonne Marque is built on a custom theme and uses WP Rocket to boost the site’s speed.

Bethlehem Steel’s Hoover-Mason Trestle

When you first land on the Bethlehem Steel’s Hoover-Mason Trestle website, you’re greeted by a slideshow of photographs and large links to Explore the Trestle, view visitor information, and to hear the stories of those who worked there. If you choose to explore, you’re taken on a guided tour of the location and through a timeline of its history. There are many unconventional links here like forward and back arrows that take you through a virtual photo tour, a clickable progress line of the location, and more.

Plus, for every stop on the tour, additional photos and videos are presented on the righthand side of the screen. You also have the option of view photos, audio, and videos based on their themes. This site uses a custom theme.

Alexander Engzell

This name should sound familiar, because he’s the founder of Bonne Marque, featured above. The personal site for Alexander Engzell includes some nifty scroll animations and design elements that I really haven’t seen elsewhere. Links to projects are presented as large photos that extend on hover. What I really like here is the site is completely minimal and foregoes traditional navigation in favor of something that better suits the subject at hand.

This site is based on another custom theme developed by Alexander Engzell, Antoine Wodniack, and Himmy Raheriarisoa. It uses Contact Form 7 as well.

Stupid Studios

Studio Studios is a design and branding agency based in Denmark that’s completed designs for  a wide range of projects, all of which include a fun edge. The website is fairly straightforward in its presentation but makes stunning use of fullscreen layouts, interesting graphics, and personalized touches. The primary navigation is tucked away in an expandable menu that opens in a minimal fullscreen overlay.

Once you access it, the navigation is impossible to miss, but how it’s hidden from view at first glance makes the site’s homepage immediately more immersive. This website is built on a custom theme, like all of the other sites featured here.

Wrapping Up

Navigation is often an element of websites that people don’t experiment with. After all, it’s how visitors get around a site. It needs to be intuitive and readily available. There shouldn’t be any guesswork involved with its use. However, every once in a while, a site comes along that defies expectation and dares to try something new. The sites here definitely do just that, all while still being relatively easy to navigate.

Did you appreciate the unique navigation featured on these sites? Or do you think they’re too hard to figure out to be truly effective? Did I miss a site with interesting navigation? Feel free to share.