Redesigned Canon Buttons

mazzifer commented 9 years ago

go straight to buttons: https://github.com/racker/reach/issues/8357#issuecomment-29783382

see live demo http://jsfiddle.net/johnsoniscool/KR9t9/

Intended Outcome

Bring the current Canon buttons visually into the modern age of the internet.
Modern age being visually bigger buttons, while also visually more subtle in visual contrast, but not so much so that users wouldn't know they are buttons.
Q: Why follow the terrible design fad that is "flat design?" A: We will not if it's not appropriate to the Rackspace Canon's visual language .
Canon button to be used in (as of Dec 2013):
Reach CP
Mailgun
Cloud Intelligence
Competitive Analysis

What are other pattern libraries doing with buttons? What sizes?

summary: Big companies' buttons not as flat (more gradient) than front-end/smaller companies framework buttons.

Flat vs Gradient (not flat)

Flat Button Pro/Cons

Pro

Less clutter
Less css
Playful
Minimal
Modern web
Aesthetically-pleasing
IMO big flat buttons look out-of-place on the Reach CP when I applied them
Con
Blends into the UI
Might not be noticeably clickable (counter: add in hover/active/focus states)
Relies on button size for visibility
Relies on intense color hues for visibility
Playful
Reach UI is more narrow in height (dense) than flat buttons sizes
Trendy design fad [counter: users will understand the universal flatness button visual language] http://www.nngroup.com/articles/windows-8-disappointing-usability/ http://contrastrebellion.com/
Gradient Button Pro/Cons

Pro
High visibility
Good contrast if applied correctly
Con
Get with the times, man: Not modern looking/ is passé
Gradient too strong is garish
Everyone hates gradients nowadays?
Too much css / load time
Conclusion: Flat + Gradient in a subtle way

Iterations

mazzifer commented 9 years ago

Neue button proposal

demo link http://jsfiddle.net/johnsoniscool/KR9t9/

red for login page button only, blue for interfaces (use seldomly)

small buttons, disabled state buttons coming soon

Reasons

Height: 30px and 36px

All buttons on all modern web interfaces are 30px in height (as seen in the comment above). 36px is also about standard extra-large size for the web. "Small" is somewhere around 22-24px in height.

Border-radius: 3px

CSS's border-radius over 5px in many cases has some glitch that can be fixed with using a div element or different color themes. http://tanalin.com/en/blog/2011/08/border-radius-rendering/

Gradient, but flat; Flat, but gradient.

Straight up "flat" buttons rely on strong color hues and big buttons with wide padding. That's not going to work with the Canon layouts, as the Canon layout patterns are denser in layout, therefore would contrast in a harsh way with big ol' flat buttons. Strong bottom shadows don't work well neither:

mazzifer commented 9 years ago

live demo: http://jsfiddle.net/johnsoniscool/KR9t9/

mazzifer commented 9 years ago

This issue was moved here from Reach Github - https://github.com/racker/reach/issues/8357#issuecomment-29783382

rackerlabs / canon