Advertisement
Design Theory

Principles for Successful Button Design

by

There are a thousand ways to design and create buttons today and you only need to spend a small amount of time looking through work on dribbble to get a sense of them. A great deal of these examples are exactly the same, but occasionally there are the odd few that feel like they've had a little more care and attention in their making.

Republished Tutorial

Every few weeks, we revisit some of our reader's favorite posts from throughout the history of the site. This tutorial was first published in February of 2012.

Taking advantage of wonderful new CSS3 properties we can create some amazingly elegant and stylish buttons styles without so much as the whiff of an image and have perfectly adequate fall back styles for older browsers. You may like to create your buttons straight in CSS, or you may like to head for your layout tool of choice, but it's important to think carefully about how your button design lives in context.

It's all too easy to simply reach for a pre-designed 'UI Elements PSD' that some generous soul has shared for free (and no doubt contains Apple inspired buttons). But why not take a moment to consider whether said button style is appropriate in the context of your design and consider if there's room to create something a little more original?

Recycling someone else's buttons is fine, it saves time, but there's no harm in taking a moment to understand the design and composition of your (or someone else's) buttons in a little more detail. How are they designed? Do they fit the interface/context/brand? Is there an opportunity to create something unique? Are my buttons prominent enough? Do I need primary, secondary, tertiary buttons? Do they differ substantially enough from each other? Do they look slick?! (Why not, we all want to design cool looking stuff right?!).

Here are ten quick and simple things that I always think about when designing buttons. I'm not going to share ideas on how to use layer effects in Photoshop but some simple, general design principles that can go a long away in optimizing the design of your buttons and other UI in general.


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.

Related Posts
  • Web Design
    Photoshop
    How to Improve Your Photoshop Workflow With CSSHat and PNGHatPs web thumb 1
    During this tutorial I'm going to walk you through the process of creating sophisticated web element styling in Photoshop, but without employing a single image file in your finished website. When we're done, you'll have a single page layout using nothing but CSS3, Base64 code and font icons.Read More…
  • Design & Illustration
    Designing
    How to Create an Ornate, Vintage, Poster Design in Photoshop0964 fury preview400x277
    In this tutorial, I will show you how to create a vintage-style poster design, complete with ornate typography and illustration. We'll look at the whole design process from start to finish, showing how to plan your piece, work up and colour the illustration, design the typography and border, and a few simple tricks to give it a bit of depth and interest. It's quite a long process, but I have included a lot of useful techniques that you'll be able to use in a wide range of projects. Let's get started!Read More…
  • Web Design
    Applications and Tools
    Five Useful Things You Can Do With Adobe Reflow Right NowReflow thumb
    Whether or not Adobe Reflow ever becomes a fully functional website creation tool, there are some really useful things you can do with it right now, and we're going to cover five of them.Read More…
  • Web Design
    Applications and Tools
    The ThemeForest Author’s Guide to Unbounce TemplatesUnbounce preview
    In this tutorial I'm going to introduce you to Unbounce, a tool for building campaign-specific landing pages. We'll walk through the anatomy of various types of landing page, go through the tool’s features, then cover what’s needed to sell your own Unbounce templates on Themeforest.Read More…
  • Code
    Creative Coding
    Customizing the WordPress Admin - Adding StylingCustomize wordpress admin rachel 400
    In the first five parts of this series, I showed you how to customize the WordPress admin in a variety of ways, including customizing the login screen, dashboard and post editing screen. In this tutorial you'll learn how to add some styling and branding to your admin screens. Specifically you'll learn how to: customize the admin screen footer and style it style admin menus style links and buttons Read More…
  • Web Design
    Site Elements
    Designing a Modular User Interface Kit in PhotoshopFancy web app ui retina
    The role of Photoshop in web design is becoming more modular. Instead of composing a pixel-perfect layout of an entire web page, it's perhaps more sensible these days to concentrate on general styles, color schemes and specific interface elements. Today we'll be looking more closely at designing UI elements, pulling together our own UI kit in the process.Read More…