I've created an overlay top bar that slides over the top of the page for confirmation messages. I did a fiddle with it. Now I wonder if the light yellow background is appropriate thinking of the rest of the colors and if the message bar should be width 100 % and some close button in the middle instead of the way it is now. Should it be exactly the same height as the topbar that is always there? What do you think?

enter image description here

  • 1
    I'm voting to close this question as off-topic because it's a graphic design issue and belongs on graphicdesign.SE – Vitaly Mijiritsky Jul 18 '15 at 5:29

Problem: This screen has thar top banner/ad pulling lots of attention compared to other elements hence your notification banner has high probability of being ignored by users.

Solution: Im assuming the notification is triggered by the form below. If that's the case I would place the notification message inside the from area or next to the submit button at best, That way the user doesn't have to drive his eyes to the top increasing chances of it being read.


It depends on the importance of the notification message for your user. If it is highly important you should make it more visible choosing colors and opacity that can highlight your message. If it is not of that much importance compared to other things on the page then keep it light and not distracting.

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.