![]() Pro Tip: Start with a solid vertical line, then create a small square with the color of your background and place it on top of the vertical line, then position the square in the middle of the vertical line. We can embellish our vertical line element be adding a small indicating word in the middle of the line. Much like the horizontal line, a vertical line often is an effective solution for separating side by side content blocks. In the next section we'll explore options for separating vertical content blocks. Whether it's a line (top examples) or a few small dots (bottom examples), design elements like these offer ways to pull in color and interest to these particular areas of dense text. Pro Tip: Start by drawing a rectangle layer, use the pen or vector tool in your design app of choice to manipulate the rectangle into a shape of your choice.ĭiving into deeper levels of your content hierarchy, dividers can be used in areas to separate headings from paragraph content in a variety of ways. In the example below, a free transformed shape creating a wavy pattern can offer an eye catching result. There are no limits to what shape your seperation element can be. You can determine the color of the gradient by using almost any existing color from your design with the opacity at a level of <20%.Īnother example of gradient separation is using a curved object: In its purest form, a divider is typically a thin line that separates lists or groups of content.īelow we'll tackle horizontal content seperation using a variety of divider styles.Ī simple 1px line is often an effective solution for separating horizontal content blocks and page sections.Īdjusting the width of the line to either match the width of the surrounding content (i the example above) or allowing the line to fully bleed to the ends of the page (in the example below) can determine just how dramatic and decisive the separating will be.Īnother element that can achieve visual seperation while also allowing for more fluid content visibility is a gradient background. Let's explore some examples and discuss how to decide which style may best suit your content separation needs. We can accomplish this with a simple UI element called: dividers. It allows us to delineate different groups of content and better manage areas of dense information. Separating content is a crucial part of designing layouts and information architecture. This is Part 5 of our UI Design in Practice Series
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |