Rule guidelines

Rules are an aesthetic tool used to divide spaces and content.

Uses

Rules are used to separate spaces visually and to show hierarchy and structure.

A few common uses are:

• Separating sections on a page
• Separating items in a list
• Creating a visual contrast between 2 sides of a page

---

Variations

There are a few different kinds of rules.

Controls included in Balsamiq

Balsamiq offers a wide range of pre-made controls. Use the ‘Quick add’ tool to find the one you need, then drop it directly into your wireframe.

Rule orientation

V. rule or vertical rule: A vertical rule is a vertical line, usually used to separate 2 sides of a screen.

H. rule or horizontal rule: A horizontal rule is a horizontal line, usually used to separate sections or items in a list.

You can alter the vertical or horizontal rules using the Style toggle in the Balsamiq’s property inspector.

Rule style

Solid / default: Solid lines are the standard way to separate content.

Dashed: Dashed lines can be used the same way at the solid rule or as an annotation line to show a more tenuous connection or meaning.

Dotted: Dotted lines can be used the same way as a dashed rule.

Breakline: A breakline is used to show that a page or design has more to it that isn’t currently expressed in the design. This is especially useful when your design has a very long scroll.

You can change the rule style in the Balsamiq’s property inspector.

---