Separating Content

Establishing content hierarchy with divider lines

Linzi Berry
Jan 10, 2019 · 4 min read

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 your brand’s visual style.

Content types

Let’s start with three degrees of separation of simple static content:

No Divider, Item Divider, and Section Divider

Interactivity

Dividers increase the ability for a list to be perceived as tappable because it creates a visual containers around the interactive text relative to the size of the tap target. It is also common to use a chevron to enhance the call to action on iOS, but not on Android.

Dividers vs None

Visual Design

You have more options than just simple, utilitarian lines. A modern furniture company could use a shift in the background color, while a luxury watch maker could use more ornamentation and filigree. What feels right for your brand?

Highlights from audit

If you do go with lines (so did we — no judgement), here are some factors to keep in mind:

Item Dividers

Item dividers are typically inset to visually indicate that the thought is still connected.

Start inset

Both Apple’s HIG and Material Design recommend item dividers that align to the start of the text on the starting side (the left for LTR languages.) I believe they do this to give the imagery visual space, but I dislike the inconsistent item divider line starting points when a single screen is comprised of iconic and plain text list items. It makes the group of list items with icons feel more connected than the group without.

Having the item divider always start at the same inset gives the illusion of a more consistent layout.

Content vs Text Start

End inset

For interactive elements, both recommend item dividers that go to the edge of the screen on the ending side (the right for LTR languages.) For static elements Android recommends to inset. I believe they do this to clearly delineate between static and interactive elements, but I question if the user is tuned into such a small difference and it brings an asymmetry to the screen that may not be desired.

Insetting both the interactive and static dividers creates a more symmetrical and consistent layout.

Content vs Edge End

Exceptions

There are a few exceptions to the equal inset item divider:

Buttons, Connected Lists, and Single Lists with Images

Section Dividers

Section dividers are typically full width and hold more visual weight to indicate the thought has stopped. When designing section dividers, keep the style of your grouped list headers and footers in mind.

Grouped list headers and footers living outside of the list content on the background, like the HIG recommends, visually disconnects them. I have seen apps where the footer of the first list gets confused with the subhead to the second — oof!

I’m a strong proponent for the grouped header to be attached to the top of the list and for the footer content to be included in the relevant list item or as detail text as part of the header if it pertains to the whole list. This creates a more editorial ‘card’ look with clear hierarchy and content groupings.

Grouped Header and Description, Inside vs Outside

I’m Linzi Berry, currently design systems manager at Lyft. I sweat the details so you don’t have to. Please subscribe!

Tap to Dismiss

Sweating the details so you don’t have to

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store