Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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?

share|improve this question
    
I tried using bold font but it looks silly. I have thought of adding a "+" in the same fashion as the "X" is added on the posts but it would make it blend in even more I feel. –  Mathew MacLean May 16 at 17:29

3 Answers 3

up vote 4 down vote accepted

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

share|improve this answer
    
This is a GREAT answer and explanation! I will play around with your suggestions and get back to you. :) –  Mathew MacLean May 16 at 18:26
    
Oh yeah I forgot to mention in screen grab above: I changed the letter 'x' to a multiply sign '×' which is more square and iconic. Unicode: U+00D7 MULTIPLICATION SIGN (X)HTML entities: ×, × If you use UTF-8 as character encoding of your webpage, you can enter the character directly: × –  Jon May 16 at 18:29
    
I definitely like that suggestion and made that change. –  Mathew MacLean May 16 at 18:34
    
@MathewMacLean, I kinda like it with a + to the left too –  OGHaza May 16 at 18:44
    
@Jon Thoughts on this now? simplyazuma.com not sure the green stands out enough, but I don't want to make it too crazy. And maybe it's just me, but the green looks out of place. Hmm... –  Mathew MacLean May 16 at 18:49

Just to give you a few ideas before I pop out:

idea for siteidea for site

I can't explain right now but I will revisit this later today/tomorrow when I can. At least the visuals are there and I hope it helps. :)

share|improve this answer
1  
I definitely prefer the squared edges over the rounded as it fits with the design. Interesting idea so far. –  Mathew MacLean May 16 at 17:53

First I'd like to say you've done a really neat job of this, it's looking good. The interface is smooth and responsive.

My personal observations about this are;

  • It might be better to have the 'Add Post' call to action as a completely different colour to the rest of the elements on there. It blends in a little too much for me at the moment.
  • I feel that 'Add Post' should be somewhere else. It looks like a kind of status message to me, like if I'd just saved the post and it was confirmation of the fact. I can see why you put it at the top though, as with a larger number of posts it wouldn't be visible.

Nice job so far though.

share|improve this answer
    
Firstly, thank you for your comments. Secondly, I'm not sure if you visited the live site or not, but if you had it may make more sense why "add post" is where it is when you click it. :) –  Mathew MacLean May 16 at 17:50
    
Yeah I had a play around. :) Don't get me wrong, where it is makes perfect sense. Just out of interest, what will happen when there are so many posts that I have to scroll. Will 'add post' stick to the top? –  glitchmunki May 16 at 17:54
    
add them and find out! :D –  Mathew MacLean May 16 at 17:55
    
Also, if you type in paragraphs or long content it will add a read more link. –  Mathew MacLean May 16 at 17:56

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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