Designing an app may seem easy at first glance, but when you actually get to start prototyping it, things get complicated. What at first seemed simple started to get complex when you realize that it’s not so easy to make a choice on how to design a certain element. Even a simple and most common task of visual separation for two or more content blocks starts to get complicated.
You can use horizontal (or vertical) lines to create any necessary visual dividers between related sections of content. They help users understand how content is organized by establishing a rhythm and hierarchy on a page.
Full-bleed dividers emphasize separate content areas and sections that require more distinct visual separation. They separate distinct content sections (e.g. biographic details from contact information) or distinct content elements (e.g. list of emails) in both lists and page layouts.
Take a look at the inbox view in Gmail app for Android in the example below. You’ll notice that each email item separated by a full-bleed divider. The line across feels like a stop — it distinctly separates items with a hard stop between them.
Inset dividers separate related content, such as sections in a list of contacts. Inset dividers help users to visually scan the items and present them as a related collection: the whole set of items becomes a continuous flow, which invites users to scroll. Making the separator shorter also gives more room for status items, flags or anchoring elements (such as alphabet letter).
Alternative Ways to Draw the Line
Traditional dividers might break up content well on a desktop screen, but they have one big disadvantage for mobile apps — they take up valuable space on a mobile screen. Heavy use of dividers can also lead to visual noise and dense, crowded interfaces. As users’ preferences shift toward a simpler interface, stripping the UI to its very basic, necessary elements are the key to success. The real point behind this change is that it is a shift of focus onto content and functionality while doing away with superfluous elements.
Thus, try to divide by elements and spacing, not lines. Fewer lines and dividers will always give your interface a cleaner, modern, and more functional feel.
Whitespace is the areas of a design where there is no element placed by a designer. Generous whitespace can make some of the messiest interfaces look inviting and simple — it creates the spaces around elements in the design to help them stand out or separate from the other elements. Free space creates an essential breathing room and makes UI that looks less cluttered.
Color contrast is one of your most powerful design tools, use it skillfully and you’ll have an eye-catching design. Creativity will certainly come into play with the separation of content through the clever use of color. Basically, all you need to do is to find two colors that contrast really well — a pop of color draws the users’ attention to a particular area of the screen without an obtrusive, heavy-handed push to do so. As a result, users can access information more quickly and more easily.
Shadows and Elevation
Shadows and elevation are able to create some depth in the UI and visually separate content sections. Calendar App from Google is a good example of how leveraging space and using shadows instead of drawing lines help to define different sections in a non-obtrusive manner.
You Don’t Need Dividers For Image-based Content
Image-based content in grid lists does not need dividers. Because the grid itself creates visual distinction, grid lists do not need dividers to separate subheaders from the content. In this case, the white space and the subheaders separate the sections adequately.
While the ultimate goal is to simplify our interfaces an make them more functional and usable, we should think twice when separating content by lines and dividers. Developing a cleaner UI design also means removing any unnecessary elements and there are lots of things that can be done to improve mobile UX without adding line elements that just take up space.