Stop, navbar time!

This post is a part of the series on creating an awesome portfolio site in the series I run through every section of a portfolio site and give you tips and tricks to ensure that your site stands out from the crowd. Each articles in the series is presented with two types or portfolio sites in mind.

1. Someone who is building their portfolio in the hope of being hired eg; targeting employers.
2. Someone who is looking to build a great portfolio site to find freelance clients.

While both of these types of sites are similar, there will be some subtle differences between the content.

A little background on the navbar is and why it's important to get right on your portfolio site.

The navbar, also referred to as the nav or sometime the 'header' is at the top of the site and generally consists of;

• A logo, generally on the left hand side but sometimes in the middle
• a menu, usually on the right side but sometimes split to the left and right hand sides of a centered logo
• Some sort of call to action - Call Now button, a contact button or social media links (if that is an engagement tool for you)

I'm going to go through a few tips and tricks to ensure you get your navbar looking amazing. The navbar might seem like a fairly straight forward item but it can often be rushed and not executed correctly on a portfolio site. Let's break down each element of the navbar.

The logo

For the sake of this article, I will be referring to logo as either your name (if you don't have an official logo) or your logo.

Logo position

I recommend putting your logo on the left hand side and keeping it in a landscape orientation. Having a logo in the center can also work. I would not recommend putting the logo on the right hand side.

Logo size

A suitable logo size is roughly 4:1 ratio (that is every 100px in width will be 25px in height). This is fairly standard. Here's an examples of a good logo that would sit nicely in a navbar. (i'm a bit biased here)

Note: If your logo is portrait or square, then you have a couple of options. you can either create another version of your logo in a landscape orientation or you can use the logo you have and make the navbar height larger. It may take some testing to get it right. (let me know if you need some help with this)

The menu

Your menu and links are really the key part of the navbar, they allow your site visitors to get the information the need quickly and efficiently.

Menu position

your menu should reside on the right hand side of the page, unless you are using a centered logo, in which case, a menu on the left or right side could work.

Menu size

Your menu should be 3 or 4 links, ideally without any drop downs or 'mega menu' drop downs. Your goal is for the site visitor to get the information they need quickly. The font should be easily readable and at least 14px(or equivalent) in size.

The call to action

On the furthermost side of the menu, you should have a single call to action. This could be a number of things, but you want it to be direct and give the site visitor direct access to make contact with you.

Phone number

An obvious one, but this might be all you need. The site visitor can press this and call you directly to speak about your services / experience.

Email contact

Either a "mailto:" link or a contact form, either works, if you are creating a contact form remember to keep it short and get only the information you need. Remember to follow up as soon as possible after you receive the contact form submission.

Socials

you could linkto your social profile if you prefer to be contacted this way. Note: a potential employer is unlikely to contact you through Instagram or Facebook but may contact you on LinkedIn. For a freelancer, social media contact is really common and preferred by some clients.

Wrapping Up

Bringing it all together, your navbar should look something like this.