Shape guidelines

Shapes, particularly rectangles, are used in wireframes as containers and to create new components.

Common types of shapes

Rectangles

Interfaces are filled with rectangles, from form fields to containers, menus, and navigation bars. When wireframing, rectangles are often used to indicate the size of the screen as well.

Dotted lined shapes

Shapes, partially rectangles, with dotted lines are used to show that something is a placeholder or a draggable area. These are often used in places where one might drag and drop an image.

Breakline rectangle

When wireframing, the designer may need to indicate that a page is longer than currently displayed. To do this, they could use a breakline rectangle showing that the page is cut-off. Designers can also use breakline rectangles to show the top and bottom of a screen, cutting out the long or unnecessary middle section.

---

Variations

There are many different variations of shapes in Balsamiq.

Controls included in Balsamiq

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

Circle: A circle is often used as a circle button or as a decorative element.

Diamond: A diamond is often used as a decorative element or a decision step in a flow diagram.

Star: A star is often used in place of a star/favorite icon or as a decorative element.

Rhombus: A rhombus is often used as a decorative element.

Triangle: A triangle is sometimes used to show the direction (much like an arrow). It is also used as a decorative element.

Rounded rectangle: A rounded rectangle is often used as a button or container, much like a sharp-edged rectangle. Designers will often use a rounded rectangle to make a component seem more friendly and less serious.

---