1

I have a blog/content website that has notices on the landing page, done using Bootstrap.

A notice is a piece of time-critical information that expires (almost, but not quite, an alert). There won't be more than 2-3 notices at any given time. Clicking on a notice heading on the home page leads to another screen that has more information about that notice. My current design is something like this:

The notices titles are the blue banners

What can I do to make the notices stand out better, without being too "in your face" and detracting from the blog posts below? Should they be moved elsewhere on the page?

|improve this question
  • 2
    Make it yellow. – bloodyKnuckles Feb 9 '17 at 1:46
  • Sometime instead of using bold color we can use some animations with bold move or notification sound which will catch user attention. – Rob H. Yamin Feb 9 '17 at 2:46
  • 1
    What @Tot Zam said. – dennislees Feb 9 '17 at 4:16
3

Bootstrap alerts come with four color options. Each color represents how much attention a user should give the notice.

alert colors

alert-info (Blue) - information that is helpful, yet not necessary to read
alert-warning (Yellow) - important information that you really should read
alert-danger (Red) - crucial information that you must read

Blue is considered a peaceful and safe color. By making the alert blue, you are basically indicating that the alert is helpful, yet is also safe to ignore.

Yellow is a warning color. You are letting the user know that something can go wrong if they skip this notice. If you want users to pay more attention to the alert, change the color to yellow.

Really important notices can be set to red, yet this should not be used often since red is usually an indication that something is really wrong.

|improve this answer

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.