Friday, September 18, 2015

gradient - Styling clean flat-design buttons so they show affordance, and look 'well designed'


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.




No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...