0

I'm designing a button for an tool app.

What are the general design rules for button design?

I'm trying to keep the element sizes in 8s, e.g. 8, 16, 24, 32, and so on.

enter image description here

The font size is 14px.

enter image description here

Then the auto layout made the text element height to 20. So I changed it centered and height (H) of 14px also:

enter image description here

My reasoning is depending on the actual text inside the element the height adjusts so it makes the padding on similar element (e.g. buttons different), place a 16px padding. Now the height of the element height is not by 8s

enter image description here

I understand that different UI calls for different approaches, but what is the general rule in designing buttons that are consistent across the whole app.

What are the approaches to have a consistent design that can help the CSS designing of the website more maintainable. In CSS it would be best to have defined padding, margins and sizes for certain elements.

2
  • 1
    "What are the approaches to have a consistent design". Height of the object IMO. And my rule of "thick thumbs" is never smaller than 42 px (mobile, ipad etc)
    – sibert
    Commented Apr 23, 2023 at 14:42
  • How is 14 a multiple of 8? It's evident that if you use non-multiples of 8, the result will also be a non-multiple of 8
    – Devin
    Commented May 14, 2023 at 20:13

1 Answer 1

1

Here are some general best practices to follow when designing buttons:

Color: Use consistent colors for your buttons. Generally, primary actions should be more visually prominent than secondary actions.

Size: Buttons should be large enough to be easily clicked or tapped, but not so large that they dominate the screen. A consistent size also helps users recognize them as buttons.

Shape: Consistent shapes can help users identify buttons. Whether you choose rounded corners, sharp corners, or circular buttons, make sure it's the same throughout the UI.

Typography: Use the same font style and size for all your button text. The text should be clear and legible.

Labels: Button labels should clearly indicate what will happen when the button is clicked. Use action verbs whenever possible. Be consistent with your terminology.

Placement: Commonly used buttons should be placed in easily reachable areas on the screen. Also, similar types of buttons should appear in the same location across different screens.

States: Buttons should have different states (like hover, active, disabled) that provide visual feedback to users. The styles for these states should be consistent.

Iconography: If you're using icons on your buttons, make sure they're consistent in style and size. Icons can be helpful, but don't rely on them alone—combine them with text labels whenever possible.

Whitespace: Ensure there's adequate whitespace around your buttons. This can help set them apart from other elements and prevent accidental clicks.

Accessibility: Ensure your buttons are accessible. This includes considerations like color contrast and support for keyboard navigation.

It's never been easier to create or modify an existing style guide or design system (e.g. Bootstrap, Tailwind, Bulma) for your product so that you and your team can keep styles, elements and components consistent. You can also use something like Storybook for advanced control and testing of your UI components to ensure consistency.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.