: Should I place the border above or below header to separate sections? If the content is split into several sections, and each section has a header, should I put border below or above the header?

@Tiffany317

The reason you are having difficulty deciding which to use is that the section headings are too far from the content. A larger space = separation, a closer space = association, but there must be enough difference between "larger" and "closer" to make it clear to the eye which is which. Here, the information grouping and the visual grouping are in conflict.

You can see the problem if you take the rule out completely. The heading is almost exactly half way between the content above and below it. So the heading becomes ambiguous; it associates equally with what is above it and what is below. (This is easier to see if you use random characters in place of the actual headings, so that the meanings of the words don't blind you to the purely visual presentation.)

Visual spacing should parallel the information structure. If you use Border Below, reduce the space above and below the border to about one third of its current amount, and the design will snap into place. For Border Above, reduce the spacing below the border and between the heading and the content.

Either way, the visual grouping and the information grouping will agree, and your design will work. The rule (border) here is a decorative element, not a data separator as it might be in a table or a spreadsheet.

Vote Up Vote Down

@Turnbaugh909

It really depends upon what you want the title to be associated with. If it's the images above, then border below. If it's the images below, then border above.

The border serves as a content divider. If you place it below, it's clearly dividing the title from the elements below it.

A third/forth option of both above and below, or no border at all, would separate the title while not directly associating to with any neighboring content.

Vote Up Vote Down

@Gretchen549

I personally think in this case above the header..

Reason: It keeps your thought complete. Title and Pictures are grouped together and kept as a complete thought

Vote Up Vote Down