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.
My question is, in what ways can I make the “Add Post” element stand out without affecting the overall look/feel of the website?
Answer
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.
Attribution
Source : Link , Question Author : Mathew MacLean , Answer Author : Jon