PSD Mockup
Separating content is a crucial part of designing layouts and information architecture. It allows us to delineate different groups of content and better manage areas of dense information. We can accomplish this with a simple UI element called: dividers.
What Is Visual Divider?
Visual divider is a layout element that helps to separate pieces of content into clear groups, sections, options or parts. This way it helps a designer to organize the page according to the typical patterns of visual perception and make the layout clearer and more digestible for users.
Together with other elements on the page, dividers play a great role in setting up solid visual hierarchy. For example, with them, users can easier define the relations of content, like if the pieces of content are the same, similar, or related; if any of them is subordinate to the others, etc.
Dividers are also important for usability: in many cases, they create visual containers that look clickable or tappable, which is particularly crucial for mobile interfaces.
Visual Kinds of Dividers
Talking about dividers, we can analyze them in two aspects: their appearance and their functions. Starting with the visual part, the basic and broadly used methods of dividing content in user interfaces are:
Whitespace
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
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 helps to define different sections in a non-obtrusive manner.
Functional Types
The functional types of visual dividers depend on the hierarchy levels they work at.
Traditional Dividers
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
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.
Inset Dividers
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).
Conclusion
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.
