How we Designed Menu for our Agency Website
This is the second blog in the new series of blog posts where we are talking about upgrades and redesign process of our website. As I said earlier, this is not a complete redesign of Kontra’s website – it’s more like upgrading the existing one to improve the overall design and, of course, to improve the features, reorganize the information structure and to make it more interesting for the visitors. So basically all our design elements stayed the same, such as the color shame, typography, or the branding elements.
In this blog post, I am going to take you through the process of navigation bar becoming a hamburger menu button, which was really important to us in many ways. This is the most useful feature on our website, so it had to be good.
#1 Why hamburger menu
In the world of responsive websites, there are all kinds of existing variation: some are more complex, and some not as much. The agency websites like ours are complex, but it’s not at the top of the spectrum. For example, our website has pages like work, services, about, blog, ebook, and contact. Some of the pages have subpages, but they have an excellent connection with the main page. So we asked ourselves, can we remove the classic navigation bar and instead install a hamburger menu? As a digital agency specialized in making websites, we wanted to have a clear and simple website look, but also to follow today’s modern standards.
#2 Designing
Because this is one of the most valuable functions on the website, the goal was to make it functional and good-looking, while still combining good animations and transition effects. It also had to be responsive to be able to fit on every screen dimensions. The challenge was to make a unique menu design and animations which will be in agreement with the Kontra brand and website.
The priority of the menu is that it needed to contain all pages and subpages of the website and the links to social media in the easiest way for the user. The secondary was to make it look good and to have some wow effect with transitions. We also included the search option, but we are not 100% satisfied with it, so it’s still a work in progress. We believe that it will be done soon.
The animations are in line with other animations on our website, so they are pretty unique in that sense. For example, the menu icon has the animation to support the overall feeling. At first stage, it looks like a regular hamburger menu with three lines, but when you hover it, it’s expanded, and the middle one becomes shorter to give the impression of Kontra’s logo appearing from the right side (I hope you can now see that :D).
When you click on the icon, the line from the middle disappears, and the other becomes the “x” sign, which, as we all know, means that you can close the open menu. In the meantime, between the transition of two hamburger icons, the new background appears. The background is assembled with two shapes: the recognizable Kontra triangle in color white with a shadow and with the one blue rectangle. All shapes have their own animations in the opening and closing time.
One thing I also need to mention is the text hover animation, which represents moving from right to left (the Kontra way). Pages which have other subpages like the blog, ebook, and services, also include the small Kontra arrow which makes the little move from right to left and then others subpages appear.
#3 Conclusion
Like with everything in life, we have pros and cons between designing a new menu hamburger or redesigning the new navigation bar. Overall, the pros for the navigation bar is that you can super quickly get to the section you like, and it’s straightforward for all users, while the cons are: takes space on your screen and doesn’t look right or accurate. With the hamburger menu, things are a bit different. Pros are: looks nice and elegant, you can apply some cool animations when it opens, you are only focused on the website subpages, and the other content doesn’t distract you.
