Principles for Successful Button Design
http://webdesign.tutsplus.com/articles/design-theory/principles-for-successful-button-design/
http://dribbble.com/ormeski/tags/button
1. Matching Brand
It’s important that your buttons match their contextual style. This could mean fitting in with a color palette, graphical style or taking a lead from some form of brand guidelines or logo. Perhaps there are some prominent shapes, textures or design styles that you can pick up on. Maybe a logo has a circular aspect to it and you could pick up on this in your buttons or other potential calls to action.
If an interface predominately uses flat color then perhaps big shiny Apple-like buttons aren’t the way to go. If you can, take the opportunity to experiment with extending the brand through to the interface by using appropriate shapes, effects, coloring or other forms of embellishment.
2. Matching Contextual Style
Following on from above, stop for a moment before opening the ‘UI Elements PSD’. It’s easy to reach for grads, shadows, bevels etc. but take a moment to think whether it’s the right choice not just to match a brand but also the interface in which the buttons sit and whether they need to feel overly ‘buttony’.
Buttons may need to feel particularly button-like within an app and on mobile, for example, but with websites maybe there’s room to do something a little different with your buttons or calls to action.
3. Ensure Buttons Have Enough Contrast
With so many interface designs being inspired by Apple OS styling, particularly in a lot of the UI Element PSD’s out there, buttons can get a little lost amongst other elements being used in the UI, diluting their potentially important power. Try using color, size, whitespace or typography to ensure your buttons have the visual weight they need to stand out from the rest of the interface.
4. Consider Rounded or Shapely Buttons
Following on from the above, if there are lots of other rounded corner UI elements in your design, consider using circular ended buttons or perhaps some other change in shape. This could give you an extra bit of contrast that ensures your important calls to action have the prominence they may need.
5. De-emphasise Secondary UI Elements
If you’re striving for an OS inspired style or you’re working with a predesigned elements PSD then it’s likely your UI elements will predominantly be rounded corner rectangular in shape. Consider reducing the level of embellishment on elements that can afford to feel less ‘buttony’.
For example, bespoke select menus, segmented controls, custom menu triggers might all be the same rounder corner shapes but using less shadow, border, bevel, gradient or other effects can help to reduce their richness and in turn promote button styles.
6. Color Match Strokes/Borders
Most buttons we see out there have some form of border or stroke on them. Loosely speaking, if your button is darker than the background on which it sits use a dark stroke of the general button color. If the reverse is true then go for a stroke that’s a darker shade of the background color. If you stick with the former and use it on a darker background I find it can make the button edges a little ‘dirty’. Using the latter can also help make your button really pop. I consider this to be a general design principle when dealing with strokes/borders in web design.
7. Be Careful With Blurred Shadows
Over the years I’ve always sworn by my ‘Shadow Law’. The ‘Shadow Law’ states that drop shadows work best when an element is lighter than its background. If an element is darker than its background then drop shadows should be used very subtly. Similar to color matching strokes and borders, I very much consider this to be a general design principle that applies to all UI elements.
8. Subtle Iconography Can Give Affordances
As well as being another small detail that can further differentiate your buttons from similar UI elements, the use of simple iconic elements such as arrows can give some sense of action and a small affordance as to what happens when a user clicks.
For example, an arrow pointing right after the text on a button maybe gives the user some sense of moving on or leaving the page. An arrow pointing down might suggest that some content will be progressively disclosed below, or perhaps some kind of menu will open.
9. Consider Primary, Secondary and Tertiary Styles
If you’re designing an interface where there are consistently lots of actions and functionality on display it may be important to establish some visual language with your buttons by establishing primary, secondary, tertiary and potentially more styles.
Consider reserving the strongest and boldest color for your primary buttons and using progressively less strength or saturation as you reduce importance. As well as color and shade, consider reducing size, whitespace, text size and level of embellishment to further reduce the visual weight of buttons that aren’t primary.
10. Always Make Feedback States
This is a no brainer really, but is often something considered toward the end of the design process. Always work through the core states required for your buttons to ensure they provide the user with sufficient feedback in their context. Users will likely have a mental model of how a button works in the real world as they use it through its various states. Some simple CSS tweaks with shadows, border and gradients and the like can give the user some simple feedback and a touch of eye candy!
Conclusion
As designers you’ll all have your own process you go through. I’ll bet a lot of the time that can involve moving your head back from the screen, tilting it slightly, squinting and saying ‘Yeah that’s about right!’. That’s part of the fun of designing of course and talented designers tend to get it right doing just that, but I think it’s always good to run a bit of internal commentary, interrogating and reasoning over the design decisions you’re making.
There’s no harm in re-using or leaning on pre-designed styles and UI elements, they can obviously save a lot of time. It may even be the case that someone has pixel-perfectly crafted exactly what you were looking for and is offering it for free. However, I don’t think there’s any harm in having a deeper understanding of the design process and craft behind what you’re creating and informing your design decisions going forward.
'프로그래밍 > Style & Design' 카테고리의 다른 글
| [Design] INTERFACE SKETCH - 모바일 디바이스 스켓치 템플릿 (0) | 2012.10.08 |
|---|---|
| Responsive Patterns A collection of patterns and modules for responsive designs. (0) | 2012.09.12 |
| [Design] 20 Examples of Minimal Style Navigation Menus in Web Design (0) | 2012.09.05 |
| [Design] 21 Beautifully Designed E-commerce Sites (0) | 2012.09.05 |
| [Design] 5 Simple Tips for Designing Better iPhone Apps (0) | 2012.09.05 |
