10

I started a tiny CSS framework recently. (http://mincss.com if anyone's interested) I quickly banged out an initial design for some buttons. After asking for feedback on UX StackExchange (and receiving lots of good feedback), I was recommended to come here for additional advice on improving them.

This is what they look like right now, after UXStackExchange's feedback. I removed the black border, added a 3px "shadow", and removed the 1px bevel:

enter image description here

I'm going for a flat-design look.

I have 3 remaining questions:

  • Do these buttons show enough affordance? (This seems to be a problem with flat design)
  • Would you suggest adding a small gradient?
  • Do they look well-designed? (subjective I know, but I can't think of a better way to ask this)

I'll gladly welcome (and probably use) any feedback on these buttons.

Improve this question
1
  • If you want to keep the shadow, consider making it a true alpha shadow. Something like RGBA(0,0,0,.2) of if not alpha, consider a much lighter gray.
    – DA01
    May 1, 2014 at 20:52

4 Answers 4

Reset to default
9

I think a very subtle gradient will definitely improve the aesthetics of the buttons. Since the Windows 8 "Metro" style is a large proponent of this style, I'll use that as an example:

Apps for Windows 8

At first glance the "tiles" look like they are a flat color, but if you look closely there is a very slight gradient going left to right. It is more noticeable on some than others, but they all have it. As Yisela said, you want this gradient to be barely noticeable, almost subconscious.

Improve this answer
1
7

As you mentioned, when designing flat buttons you need to keep an eye on a couple of things. The first one being, I'd say: Does it look like a button?

This is not necessarily something that depends only on the button, but on the rest of the elements of your UI. If you are using flat buttons, I'd suggest you avoid similar shapes/styles everywhere else. You need to maintain a visual vocabulary so people can instantly recognize these elements as buttons and not something else.

Shadows are good for this, because they give an impression of volume. Therefore, they are easier to see. Plus, we are used to buttons having that effect. I would however consider using a color that is similar to the button's color. For example, instead of using black for the red button, use a red with 50% opacity. Another option to make buttons more obvious is to add an icon (white, solid).

I'd be very careful with gradients. Not because they are bad, but because in the current super simple flat trend, they don't fit that well. Especially if the colors or shades you use are very different. A small gradient can look really nice, but it has to be tiny, barely noticeable.

In short, I like the way they look. I would only change the shadow color to something lighter, and maybe make the foreground text lighter too, white probably. The font is nice and you are using good padding, so nice job! I see you are using them in the site, but below them you have a set of notifications in pastel colors that actually look a bit similar. I'd reconsider their style, as they can be a bit confusing, and I'd try to use the same colors throughout the site (all pastels, or all contrast).

Improve this answer
2
  • I took your idea of color shadow: i.imgur.com/525NqBJ.png I agree that any gradient has to be tiny; I don't think I'll add one. What do you think of rounded corners on the buttons? How do you think I should change the notifications? Thanks!
    – Owen Versteeg
    May 31, 2013 at 11:41
  • @OwenVersteeg Looking good! I like them. Round corners also generally look nice, you might need to consider adding them to other elements as well (inputs, maybe?). About the notifications, how about a 1px border with a darker shade of the same color? Something like this
    – Yisela
    May 31, 2013 at 22:49
2

While I can respect making such minimal buttons you really need to consider if/how they can be applied across the web on different websites, as you are making a framework. If you are providing buttons you need to make sure to provide just about everything else someone might use like tables, forms, etc. (Which I'm sure you're still working on).

Take a look at Bootstrap if you haven't already. Bootstrap is a wonderfully simple and clean CSS framework that can be easily adapted or integrated into another website and might give you some ideas.

Now as far as these actual buttons go I would play around with a border, as this helps encapsulate the component and a border is pretty common to a lot of buttons. I checked out the website and I do like the hover/click states and I think you did well with those.

If you want to introduce gradients, be consistent and make sure you use them on other elements as well, else you'll have competing depths which will just be distracting.

Improve this answer
1
  • I've seen Bootstrap (kind of hard not to) and I've made some sites with it before. My problem with Bootstrap is that it is a humongous framework - several tens of kilobytes - and it is very common these days. I have created forms (farther down on the page) as well as tables. When I asked on UX StackExchange most people said to ditch the border, interestingly - which I did. I don't think I'll introduce gradients. How do you like these borders? i.imgur.com/OlOy5pN.png
    – Owen Versteeg
    May 31, 2013 at 11:50
0

The buttons look good, however the kind of buttons that show affordance and feel in the general flat style are once where the shadow part is placed is a small strip at the bottom of the main element (button) and is mostly a darker shade of the button color.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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