What are the main Tumblrs design principles

Principles for successful button design

There are a thousand ways to design and create buttons and you just need to spend a little time working through Dribbble to get a feel for them. Many of these examples are exactly the same, but on occasion there are a few that feel like a little extra care and attention has been given to making them.

We use the wonderful new CSS3 properties to create amazingly elegant and stylish button styles without losing the impression of an image. You can create your buttons directly in CSS, or you might want to go to your layout tool of your choice. However, it's important to think carefully about how your button design lives in context.

It's too easy to just grab a pre-made "UI Elements PSD" that some generous people shared for free (and that no doubt has Apple-inspired buttons). But do you take a moment to consider if the button style is right for your design and see if there is room for something a little more original?

Recycling someone else's buttons is fine, it saves time, but there's no harm in understanding the design and makeup of your (or someone else's) buttons in a little more detail. How are they designed? Do they fit the interface, the context or the brand? Is there a way to create something unique? Are my buttons clearly visible? Do I need primary, secondary, and tertiary buttons? Are they significantly different enough? Do they look smooth ?! (Why not, we all want to design cool looking things ?!).

Here are ten quick and easy things I always think about when designing buttons. I'm not going to go into ideas for using layer effects in Photoshop, but rather a few simple, general design principles that can take a long time to optimize the design of your buttons and other user interfaces in general.

1. Matching brand

It is important that your buttons match their contextual style. This can mean jumping into a color palette, graphic style, or some form of branding guidelines or logos. Perhaps there are distinctive shapes, textures, or design styles that you can pick up on. Perhaps a logo has a circular aspect, and you can pick that up in your buttons or other potential calls-to-action.

If a user interface uses mostly flat colors, large, shiny, apple-like buttons might not be the way to go. If you can, take advantage of the opportunity to expand the brand all the way to the interface using appropriate shapes, effects, colors, or other forms of embellishment.

2. Matching contextual style

Hold on from above and pause briefly before opening the 'UI Elements PSD'. It's easy to get to for gradients, shadows, bevels, etc. However, think about whether it is the right choice to fit not only with a brand, but also with the interface the buttons sit in and whether they need to feel too crisp ..

Buttons must e.g. B. feel particularly knotty within an app and on mobile devices. However, websites may have a little more room for the buttons or calls-to-action.

3. Make sure the buttons have enough contrast

Because so many interface designs are inspired by the style of the Apple OS, especially in many of the UI Element PSDs, buttons can be lost a bit among the other UI elements, detracting from their potentially important power. Use color, size, spaces, or typography to ensure your buttons have the visual weight they need to stand out from the rest of the user interface.

4. Consider rounded or shapely buttons

If there are a lot of other rounded corner UI elements near the top, consider using round buttons or some other change in shape. This could give you some extra contrast that will ensure your important Calls to Action have the prominence they need.

5. Disable secondary UI elements

If you are going for an operating system-inspired style or working with a pre-built Element PSD, chances are that your UI elements will have predominantly rounded corners. Reduce the beautification reduction on items that are less crisp to the touch.

For example, bespoke selection menus, segmented controls, and custom menu triggers can all be the same rounded corners. However, if you use fewer shadows, borders, bevels, gradients, or other effects, you can reduce their abundance and promote button styles.

6. Color adjustment lines / frames

Most of the buttons we see out there have some form of border or stroke. If your button is darker than the background it's on, use a dark stroke of the general button color. If the opposite is true, consider choosing a stroke that makes the background color darker. If you stick with the former and use it on a darker background, I can tell that the button edges get a little "dirty". Using the latter can also help make the button really snap. I consider this to be a general design principle when dealing with lines / borders in web design.

7. Be careful with blurry shadows

Over the years I have always sworn by my "shadow law". The shadow law states that drop shadows work best when an element is lighter than the background. If an element is darker than the background, shadows should be used very subtle. Much like color adjustment strokes and borders, I consider this to be a general design principle that applies to all UI elements.

8. Subtle iconography can give affordability

Using simple iconic elements like arrows can not only be another small detail that can set your buttons apart from similar UI elements, but it can also provide a sense of action and a low degree of concession about what happens when a user clicks.

For example, an arrow immediately after the text on a button can give the user a sense of moving on or leaving the page. A down arrow might indicate that some content is shown below, step by step, or that a menu opens.

9. Consider primary, secondary and tertiary styles

When designing a user interface that has a lot of actions and features displayed all the time, it can be important to establish a visual language with your buttons by setting primary, secondary, tertiary, and possibly more styles.

Consider reserving the strongest, boldest color for your primary keys, and gradually use less strength or saturation to diminish the importance. In addition to color and hue, consider reducing the size, white space, text size, and degree of embellishment to reduce the visual weight of buttons that are not primary.

10. Always make feedback states

This is really a no-brainer, but is often considered at the end of the design process. Always work through the core states required for your buttons to ensure that the user is getting enough feedback in their context. Users will likely have a mental model of how a button works in the real world when used in its various states. Some simple CSS adjustments with shadows, borders and gradients and the like can give the user easy feedback and a touch of eye candy!


As a designer, you all have your own process that you go through. I bet a lot of the time to move your head back off the screen, tilt it slightly, blink and say, "Yeah, that's right!" That's part of the fun of designing, of course, and talented designers tend to get it just right, but I think it's always good to leave some internal comments, question them, and justify the design decisions you make.

By reusing or borrowing from ready-made styles and elements of the user interface, you cannot harm anything. You can of course save a lot of time. There may even be times when someone created exactly what you were looking for, pixel perfect, and offered it for free. However, I don't think that a deeper understanding of the design process and craft behind what you create and inform can harm your harm.