Critique: How can I make my ‘add post’ website element stand out better?

I’m working on building my own blogging website from the ground up, or at least that’s what I assume that’s what it will turn into at this point.

So far what I have built is fairly basic but one thing concerns me. I have an “Add Post” button that is inline with/on top of other posts but seems to blend into the flow of the site to well that it could easily be over looked.

Here is a link to the live website where you can play around with it.

enter image description here

My question is, in what ways can I make the “Add Post” element stand out without affecting the overall look/feel of the website?


you have a neat thing going on here. Essentially you have a challenge with meaning. Because your Add New button is identical in presentation to the other rectangles on the page, it means the same thing as the other rectangles when a person sees it.

There are many ways to tackle an issue like this. User’s graphic above is a very good example because it:

  • stays within the colour palette
  • indicates clearly an action with the big disc plus icon
  • clarifies the action with the addition of the word New

Think about the fact that you will have other controls, (like the cool Delete Post slide-out), and choose a systematic way of expressing controls. Sort of a style guide that relates to the verbs of your app. An example off the top of my head:

  • controls are always labelled in all caps
  • control panels are grey
  • control buttons are coloured: red for bad/stop, yellow for caution,
    green for go, and blue for informational
  • control buttons always have a meaningful icon in two colours
  • control buttons never have drop shadows

The result will be a family of controls that have consistency, fit within your interface and look cool.

A quick hack

Source : Link , Question Author : Mathew MacLean , Answer Author : Jon

Leave a Comment