2

I'm designing personal portfolio website and came up with a design that is not common. Instead of putting all those clickable items in floating top bar (floating, because I want navigation and "Contact" CTA button to be always visible) I put them in sidebar that is floating and always visible as well.

That has solved my problem of menu items visibility and saved vertical real estate, which is important in portfolio viewing. Also it created an original website look but one issues came up:
It could distract user from reading project as user scans information from left to right and this heavy dark shape draws attention.

The pattern I have used is not common so I thought there are reasons designers don't use it. Does it have worse usability than traditional floating top bar?

P.S. I could have made it with white background but blue tones are my brand color and images stack nicely to that sidebar and have full width of the body container. On my opinion it would look so good if sidebar background were white, no "full-width image feeling", if you know what I mean.

Improve this question

2 Answers 2

Reset to default
2

I do not think this particular pattern decreases usability, but as you want to showcase some portfolio, I believe it would be worth using colours that are as neutral as possible for the navigation. I would use black (or: dark grey) for it.

I would, also, change the structure of the menu so that it consists (top to bottom) of:

  1. Logo. Your logo is your brand, as I understand, and is associated with the portfolio itself.

  2. Projects. If they are visual, I would consider adding thumbnails here.

  3. Then, I would place the Contact button, maybe changing the CTA to "Hire me" or something similar, so that it is more straightforward.

  4. Much less prominent About.

  5. Much less prominent Blog (unless you are heavy blogger and an influencer, of course). I would add an icon with an arrow out to the top right, informing User that s/he is about to leave the site (if it is so).

  6. Links to Behance and Dribble.

enter image description here

Improve this answer
2
  • Why should I use neutral colours? Especially black, my main concern is that the darker colour I use - the more distracting it is. Isn't it?
    – Peter
    Commented Mar 16, 2017 at 14:47
  • I used black because the content of the project is light. I suggest using neutral colours to make the navigational elements melt with background and separate from the content. Of course, a problem may arise if a particular project is black-ish, so I would suggest using anything between black and white depending on the dominant of your projects.
    – Dominik Oslizlo
    Commented Mar 16, 2017 at 15:04
0

I have seen this approach a few times and it's just another way of displaying information. I wouldn't say it's worse than a traditional approach, but it isn't traditional, so you have to make the functionality very clear and simple to use.

To reduce the distraction from the content, I'd recommend collapsing the sidebar as you scroll, displaying just the logo and dots. Then when the user hovers over the bar, it expands back out.

Something I would keep in mind, however, is how this behaves on different devices or screen sizes.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.