5

I designed this but it looks ugly to me. What are your suggestions to make it look better?

I also would like to do some golden ratio calculations for its width and height but couldn't figure how its calculator (http://goldenratiocalculator.com/) works.

enter image description here

Improve this question
3
  • 1
    @JonW: I think your edit changed the question.
    – Steve S
    Sep 1, 2012 at 2:11
  • 1
    The Golden Ratio isn't some sort of magic cure-all and seems to be misused/abused more than anything. FWIW, that form seems quite fine to me.
    – DA01
    Sep 1, 2012 at 5:44
  • 1
    @SteveS the question was at risk of closure for being too localised around just this one single form. I edited it to be of more use to future visitors, but you're welcome to make an edit yourself of you feel it could be better worded. It needs to be an objective answerable question that is going to be helpful to other people rather than just the OP.
    – JonW ♦
    Sep 1, 2012 at 7:37

3 Answers 3

Reset to default
8

It's your grid:

grid of form

You could apply a golden ratio-based grid but it still has to be a grid.

The left side is mostly fine, Name is a bit too much downwards, but it's ok.

Right side:

  • Field option stays lonely on its grid line, it's aligned to nothing.
  • I don't know if the radio buttons follow any pre-existing grid distances
  • neither I see if the labels for them do.

So, let's grab a grid first. Rather than constructing one myself, I grabbed a grid from gridpak. It's made for web designs, so, not for this purpose, but all I wanted was

  • gutter (space between columns)
  • padding (edge of columns)

Padding is overbled by elements like frames, but text aligns to the it.

You also need to construct a vertical grid, but that was mostly fine at you.

constructing the form with a grid from gridpak

And let's see the final result:

form mockup

It was quickly done in graffle which is not an ace when it comes to text alignment, but I hope it fits. I'm not a visual designer, so perhaps other people here will know much more about grids.

Edit: As per comments, vertical spacing was too tight, so I devised a grid which follows a 2-1, 2-1, 2-1 vertical scheme.

complex grid

After removing grid and adding platform livery:

enter image description here

Improve this answer
5
  • 1
    Grids can be useful, but once needs to step back and double check the result. In this example, you've compressed the vertical space between elements, making it much harder to visually scan and more difficult to hit the targets.
    – DA01
    Sep 1, 2012 at 5:45
  • @DA01: I agree with the vertical spacing now being too tight, but other than that the grid approach has worked well, and the vertical spacing is easily fixed.
    – Marjan Venema
    Sep 1, 2012 at 12:54
  • @DA01: I agree with you that a grid is just a tool, not a panacea, but it's a damn good tool for people who don't have an eye like beauty (I don't have). Vertical spacing is funny: I kept the vertical guidelines from the original in place... Perhaps I shouldn't have done mid-alignment there... Hmm... this diagram is messed up in many ways, sorry, let's see if I can redaw it quickly.
    – Aadaam
    Sep 1, 2012 at 13:28
  • Adam, how did you create all these grids? any software?
    – Blake
    Sep 1, 2012 at 18:50
  • 1
    @BDotA: this is OmniGraffle, but all graphics editor do have such kind of grids, including Gimp or Adobe Creative Suite products. The original overlay grid was from gridpak.com. Remember, it's never the tool but the idea - read about grids in "Grid Systems in Graphics Design" or "Grid principles for Web Design"
    – Aadaam
    Sep 1, 2012 at 19:23
8

The golden ratio is a red herring. Do yourself a favor and forget you ever heard about it. This dialog has much bigger problems than its aspect ratio:

  • The margins are inconsistent.
  • The Ok/Cancel buttons should follow your platform's conventions for size and position. They shouldn't be that far from the bottom edge of the dialog.
  • The border around the form widgets is unnecessary. Remove it.
  • Don't use Title Case for radio button text.
  • The layout doesn't guide the user's eyes. Should I process the dialog from left to right first, or top to bottom first? If your toolkit provides a form-specific layout, use it. If not, at least try putting everything in one column and making the dialog tall instead of wide.

Sample layout

Improve this answer
4
  • 1
    +1 for the red herring. ;) I consider it a design platitude. Sounds legit, but really doesn't hold up to scrutiny.
    – DA01
    Sep 1, 2012 at 5:46
  • 1
    a question: why you haven't aligned all labels to the left side of the form?
    – Blake
    Sep 1, 2012 at 18:49
  • 2
    @BDotA: Because I aligned them to the left side of the inputs. ;-) The idea is to strengthen the association between each label and the widget it describes. It's an arguable choice, and different platforms have different guidelines. Some align labels to the left, some to the right (as in my example), and some place the labels above the inputs (as in the original design). I happen to like the labels the way I aligned them, but I try to follow the conventions of the platform I'm working on. This is a concern that a form-specific layout will generally handle for you.
    – Steve S
    Sep 1, 2012 at 19:02
  • 1
    There is research to indicate that at least on web form labels should be above the form fields or at least right aligned. Left aligned labels would appear to be cognitively most taxing to the users. uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php
    – Illotus
    Sep 2, 2012 at 6:25
1

Golen ratio calculator is just performing multiplication/division by the golden ratio.
By definition, Golden Ratio == (1+sqrt(5))/2 ~= 1.618.

So, enter 100:
100 * 1.618 == 161.8 (Grey square)
100 / 1.618 == 61.8 (Green square, second grey square)

The rest is just adding/subtracting the initial width (i.e., 100 in this case).

Improve this answer
1
  • 1
    Suppose your form is 1000px wide. You could divide it into two columns of widths 618px (1000px / golden ratio) and 312px (1000px - 618px).
    – Brian
    Aug 31, 2012 at 21:45

Your Answer

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

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