Skip to main content

Divider

Dividers are used throughout all types of design to establish content hierarchy and separate themes. Deceptively simple, they are one of the main contributors to our visual style.

Kinds of Visual Dividers​

Talking about dividers, we can analyze them in two aspects: their appearance and their functions. Starting with the visual part, there are 4 basic and broadly used methods of dividing content in our user interfaces:

  • Lines

  • Color contrast

  • Negative space

  • Images

Lines have belonged to the top methods of separating the pieces of content since time immemorial, both in print production and in digital interfaces. They are recognized easily in this role, so users won’t need to think twice.

Don’ts​

Too many lines can overload the screen with visual noise and create unnecessary visual tension. Use lines only if the content cannot be effectively divided in another way.

When to use​

  • when whitespace is not enough of a separator

  • in lists, separate items to show they are individual and unrelated items when each item is long and otherwise difficult to scan

  • in layouts, when background color changes (e.g. from Gray 100 to White)

When not to use​

  • for surrounding an item, use a border instead

  • for grouping content, use a card or table

Color Contrast is another effective type of visual divider. Contrast is one of the key factors influencing scannability and visual hierarchy of the page or screen. With all that, color contrast can effective separate different option, items, or interactive zones, that means work as a visual divider.

Negative space (aka white space) means empty space on the screen around and often inside the elements. Yet, empty does not mean passive or wasted: as well as any other element of the screen, it works supporting a positive user experience. Negative space is one of the most popular kinds of visual dividers, especially in interfaces built on the idea of minimalism and simplicity. Negative space turns into an effective and elegant visual divider that also let the interface to breathe and avoid clutter.

Images of all kinds present one more effective visual divider. In this role, they are especially popular in the interfaces with lots of text content pages. Photos, illustrations, 3D graphics, as well as animated images, help to balance the text content, increase scannability and readability levels, effectively divide the visual blocks, as well as add fun and emotional appeal.