Out of the Way: Corner Navigation in Web Design
Corner navigation has been with us for a while. It is a small trend that has emerged from the popular perimeter navigation. However, unlike its predecessor, it looks less massive and more elegant, giving more space to the content.
It fits nicely into today’s hero areas that are used to produce the first impression. Occupying corners, it minimizes the risk of being at cross purposes with the extravaganza on the fore. And still – with all of that it provides users with a quick method to get away or move forward to explore the inner world of the website.
The solution is very flexible. It does not have any restrictions or preferences. It comes in various styles and combinations. You are welcome to mix and match multiple integral components, carefully scattering them across the screen. Just take a look at these fantastic examples for inspiration.
Alpha Blue Ocean
As befits all modern hero areas, the welcome area of Alpha Blue Ocean also includes a dynamic piece that is assigned to command the attention and set the businesslike tone for the project. While the navigation should serve a secondary role here, it stands out thanks to a generous amount of white space and perfect contrast between the white color and dark blue background. It naturally catches an eye.
Note, at first glance, it seems that it occupies only the corners. However, due to the subtle appearance of the text and glyphs, they manage to take up the left and right side and do not overpower readers. Thus, the left side features the navigation through the homepage, whereas the right side includes a logotype, hamburger nav, and social media pack.
Playermaker
The team behind Playermaker uses the corners to their advantage as well. They have won over some extra space for their impressive photo background. Here, all the elements that are inherent to the first screen, such as the call-to-action, logotype, streamlined navigation and links to social media profiles are located in the four respective corners.
Note the location of the traditional five-item navigation. It is located at the bottom left of the screen. It feels quite unusual, yet inspiring and refreshing. The solution gives a tiny twist to the overall aesthetics without doing anything extraordinary. Neat and smart.
Neundlinger
Much like the two previous examples, Neundlinger also goes for the corner type of navigation – saving the home screen from looking ordinary. Here you can see a trendy vertical rhythm that was ingeniously applied to the menu on the left.
The slider’s controllers occupy their places under the sun just in the right angle. Note, all the elements of the navigation paired with the logotype form one area. Or, to be more precise, a frame. The latter visually edges the slider and gives it a greater focus. Here, the corner navigation ideally blends into the boxy-styled aesthetics.
Hot2Be
The team behind Hot2Be has improved the overall navigation without many sacrifices. They have used empty corners to show some additional links that they have found useful for their audience. Thus, the bottom left corner accommodates the social media icons, whereas the bottom right corner holds music player controls to make the presence of visitors pleasant and comfortable.
The logotype and language switcher sit exactly where they should. Although the upper part of the screen feels more massive than the lower part, there is a certain sense of harmony. Here, the navigation effectively covers all the vital escape routes and still looks stylish. And, most importantly, it’s unobtrusive.
Wolf and Whale
Wolf and Whale is an example where corner navigation borders with the perimeter navigation, producing quite an impressive outcome. It takes up not just corners but also some space in the right and left sides, feeling spacious and unforced.
Here you can feel an organizational harmony and order. It seems like everything is in its right place. The design is clean, neat and smart. So does the navigation. It fits like a glove with its tidiness and sleekness. Also, note the focal points that are skillfully placed here. The reading path starts with the word “design,” then it goes through the backlink to the works, and ends with a call-to-action button in the lower right corner. Smart.
Neal Ymar
The team behind Neal Ymar’s official website heavily relies on an intricate play with the boxy structures. And the solution certainly pays off. The hero area looks fantastic. It feels elaborate and sophisticated, even though only primitive squares and rectangles are involved.
The corner navigation goes perfectly well with it. It finishes off the entourage and makes the theme look complete. And with all that, it manages to speak for itself, giving all of its elements a sense of importance.
Oropress
Oropress is an excellent example of everything being done with minimalism in mind. The hero area is incredibly spacious, tidy and clean. The team has chosen only integral elements. However, everything is not as primitive as it may seem at first glance; and the parallax-based tagline in the heart of the page is a proof of that.
Here, the minimalism was taken to the next level, playing a role of extravaganza. Covering only essential items and occupying just three angles instead of four, the corner navigation meets the ideology of the website, making its contribution to the overall aesthetics.
Romain Avalle
The personal portfolio of Romain Avalle is another example of a minimalistic approach that was implemented to bring benefits to the owner. Much like the previous example, it is also built on the classic black and white color scheme, spruced up with a ton of white space.
Here, the initials of the artist’s name serve as an entertaining element that makes an impression. The corner navigation includes just two backlinks that lead to sections for works and a contact page, along with a logo. It blends in without a doubt. It feels like it is the only right solution here, since it efficiently supports the theme and strengthens the tone of the project.
The Corner Office
Corner navigation comes in handy in numerous situations. Whether it is a website with a traditional structure or a modern one, it will easily find its way to improve the situation and contribute to the general experience.
Thanks to its unobtrusive, neat, and elegant look, it becomes an ideal partner for those websites where hero areas are populated with intricate concepts that aim to make everything about themselves. In such an environment, the corner navigation naturally steps aside. Yet it still provides online visitors with helpful links and essential gateways.
The post Out of the Way: Corner Navigation in Web Design appeared first on Speckyboy Design Magazine.