A programmer myself, I find it hard to make certain seemingly simple design decisions.
Currently I'm sketching a signup form for a website, and I want to keep the design really simple.

There are several sections in the form, which I decided to be best separated by horizontal lines:

signup form mockup

However I'm really not sure about:

  • widths of the text fields
  • widths of the separators

I think it's best to keep the width consistent for at least elements of the same type (see above).
Is this a common practice?

Should I also align separators with the fields, or maybe with the header?
Are there any commonly accepted recommendations on this?


Best practices in this kind of situation are:

  • Labels right aligned with right edges precisely aligned vertically.

  • Left edges of fields and separators precisely aligned vertically. Also applies to the left radio button.

  • Fields the same width except where it makes no sense (as in your second field).

  • Length of the rules (separators) isn't critical, but they will make the most sense if they're the same width as the headline.

  • An imaginary box around the entire form should be offset from the left or centered to correspond with the layout of other pages on the site.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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