3

Let's say you have a card that uses a gray area to separate buttons from content. Should the buttons try to be aligned with the content? (24px on left/right, 12px top/bottom)

Buttons align on the left with content

Or should the left/right alignment try to match the vertical alignment? (In this case, 12px all around):

Buttons don't align with content, but look better in their container

To me, viscerally, the first option looks better for the primary/green button, but the second option feels more correct for the secondary button.

Which "rule of thumb" takes precedent?

2
  • Where is the vertical alignment reference line in the second example?
    – Danielillo
    Dec 29, 2023 at 19:08
  • @Danielillo The buttons break alignment in order to be consistently padded on all four sides.
    – Izquierdo
    Dec 29, 2023 at 22:40

2 Answers 2

0

As Michael Lai already mentioned, things like these should typically be tackled by a design system. However, to answer your question, I feel there is not debate between alignment vs consistency. The consistency is already in place of you align your elements as per boundary box:

alignments

I suggested a few extra things: Don't stick the last part (Option C) to the right, but let the entire sub bo be of equal width so it creates white space on the right. I would switch around the primary action and the cancel option, although this is very subjective. Speaking of the cancel option, I would have it as a link, but again, subjective (although I've written an extensive article or two about why I prefer a link and not a button).

2
  • Thank you for the detailed response. It would seem that the only way to make this visually correct is to align the buttons and add extra padding to the top and bottom of the buttons, making the whole gray area taller. Is that accurate?
    – Izquierdo
    Jan 1 at 13:06
  • @Izquierdo You're welcome. The top and bottom padding is completely up to you. Its just something I felt doing as to per personal taste. :) Regardless of the top and bottom padding, I would indeed suggest aligning the buttons as per example. Feel free to ask for feedback!
    – Kriem
    Jan 2 at 11:55
0

The answer should be derived from the design system or framework that you implemented (or will be implementing) to create the actual interface.

Ideally, you would take into consideration of the combination of different UI components and the content that can be displayed or presented within those components.

The reason why you don't want to create arbitrary rules (even if it is for the sake of aesthetics) or extend a design system unnecessarily is because of the flow-on effects from these actions.

In general, if you make the style guide of design system as simple as possible, it is easier to manage variations and extend it as required, rather than to try and come up with a consistent design language from a combination or variation of different UI design concepts.

2
  • This project isn’t tied to a design system, so we don’t have to worry about reusability. I know we can break consistency when there’s a good usability reason - but wondering if breaking alignment here is theoretically correct because applying a large amount of matching padding in the gray section would bloat it unnecessarily.
    – Izquierdo
    Dec 29, 2023 at 23:01
  • It might not be tied to a design system, but the front-end framework that you are using might still have some impact on this decision. However, I think you'll find that the guidelines for the Card component in Material Design 3 suggests that there should be alignment of elements that are subcomponents of the card container: m3.material.io/components/cards/guidelines
    – Michael Lai
    Dec 30, 2023 at 4:37

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.