Types of Web Navigation

Hamburger Menu Navigation

sub menu navigation example
Figure 1. The hamburger menu is a small series of horizontal lines that represents the navigation bar, that can be placed anywhere on the screen, typically one of the top corners. It is one of the most popular choices, as it is stylish and pragmatic. It also saves a lot of space. However, it makes information in the navigation bar come off as unimportant and it has a low engagement rate.

Dropdown Navigation

dropdown navigation example
Figure 2. Dropdown menus are a popular form of navigation bars. They pair with horizontal navigation, but it highlights key sub-sections of each section of a site. An upside to this is that it easily organizes sites with a lot of information, and it can help users find things easier. However, it might become overwhelming if there is too much in the drop-down menu, and users might give up.

Single Page Dot Navigation

single page dot navigation example
Figure 3. Single page dot navigation is a newer trend in navigation bars. This method uses a series of circular icons on either side of the screen. Each dot represents a different section of the site. I think a benefit to this type of navigation bar would be that it makes your site very clean and focused, but it might be confusing for some users. They might not know what the dots mean, or even know that they can click on them.

Static Side Bar Navigation

static side bar navigation example
Figure 4. The static side bar navigation is a fixed vertical side bar on the left or right side of a page. I think the benefits of using this are that the navigation bar is always accessible, but a downside is that it might distract from the main content of the page.

Wireframe Experiment

lazy oaf website wireframe recreation
Figure 5. This is the first wireframe I have ever made and I created it using a software called Balsamiq. I found it kind of fun to recreate a wireframe from one of my favorite clothing brand's website. I did not have any problems, but I definitely did not know what all the buttons and icons represent. I am looking forward to learning more about it, and how to use it properly.