1

I'm working on an app who's UI is mainly driven by images. The only non-image UI element is the navigation bar at the top and I'm struggling to find a good color palette for this. As you can see in the image below I've currently settled on a light salmon color for the navbar background, with a contrasting dark blue for the buttons.

Home screen

It still feels a bit bland to me. Since the navbar background is going to be the main color users will recognize the app by, it want it to be memorable, but of course it shouldn't distract from the content. Also the contrast between the active and inactive buttons is a bit vague, as is the contrast between the inactive buttons and the navbar background. I've tried a light grey color for the inactive buttons, but that clashes with both the salmon color and the dark blue of the active button.

In general I feel the color palette could use a revision, but I can't seem to find a good base color for the navbar background. Does anyone have any suggestions for this? Or advice on how to best approach this?

Thanks

  • 1
    I'm assuming the page in the screen shot is one of the most important pages of the app? A couple others might be good to give us some reference. Can you please provide the color palette you're using? – Zach Saucier Dec 13 '14 at 17:32
  • Yes that's correct. This is the home screen, the main feed if you will. If you click on a picture you zoom in to the product view, from there you can click on the shop name to zoom in to the shop view. I've uploaded the color palette and the two other screens here. – Nicolaas Wagenaar Dec 14 '14 at 9:52
  • Using the blue you have on the nav and switching the font color to white doesn't seem to distracting to me. – Zach Saucier Dec 14 '14 at 14:52
  • Thanks for that insight. I'm gonna start experimenting with it and start testing what works best on potential users :) – Nicolaas Wagenaar Dec 15 '14 at 10:28
0

I think it will start working better if you treat the effects / photos a little differently. Until then I'm not sure any menu will work. The main issue is the shadows. Having upward facing shadows is not common in the world and creates a very confusing look. I mean we generally want the top of the stack at the top especially if that's where the menu is. But instead our brains have to readjust and we end up looking at the Gouda Cheese first and working our way up the page.

I don't think you'll be 100% happy with your navigation until this is resolved because it's too distracting.

  • This is really insightful, haven't thought of it that way. – Nicolaas Wagenaar Dec 17 '14 at 23:52
1

Maybe try inverting your colors. If the Nav bar is dark it could recede in the viewers eye and let the photos take center stage.

  • I've tried this, but the presence of a large dark area at the top of the screen feels quite distracting. The contrast with the picture is better however, so I might need to play around with different hues. – Nicolaas Wagenaar Dec 14 '14 at 10:01
  • 1
    Colors can be challenging. I try to build everything in grayscale and add color at the end so I can get the values right before focusing on the hue / saturation of the piece. – wossname Dec 20 '14 at 20:00
0

While working on UI, I would point you toward some UX principals here. Make the nav bar for your users and not a design problem for yourself to fix. Make it easy to see/read. Check for colorblindness, etc. Check out iOS Human Interface Guidelines They'll help your users even if your product is Android.

  • Thanks for this. It's always good to refer to the Human Interface Guidelines. I've now changed the inactive buttons to an outline, instead of a lower opacity version of the active button. This allows me to improve contrast and also helps to distinguish from the active button in more than just a color difference. – Nicolaas Wagenaar Dec 14 '14 at 9:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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