Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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?

share|improve this question

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.

share|improve this answer
Thanks for the tips. – Dan Sep 17 '11 at 1:22

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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