The story is as old as graphic design itself: you have two different sections and you need a way to visually separate them. As a designer, I frequently spot myself reverting to the same old one or two tricks to pull this off. Why not mix it up a bit?
Today we’ll show you ten awesome ways to create two distinct sections of content. Each example is from a real website so you can click through to see it in action.
The Contrast King
This is one of the simplest and most common way to separate two sections. All you do is find two colors that contrast really well.
This is most typically done with white or a close equivalent in addition to something really dark like black or really bright like red. Color contrast is one of your most powerful design tools, wield it skillfully and you’ll have a eye-catching design every time.
The Quick Fade
The quick fade is like the opposite of the previous example. Here instead of lots of contrast and a hard line we have very little contrast and a soft separation.
This is ideal for situations where you want to add a tiny bit of visual difference between two sections that are still very closely related from a conceptual standpoint.
The example above uses the quick fade to separate icons from their descriptor text. Again, the two belong together and yet work well with a slight distinction.
The notch can be combined with several of the other techniques but is typically used with a hard line like you see in the example below. This one is more of a point than a notch but a popular variant is to invert the triangle so that it cuts into the lower layer.
The notch is perfect when you want to call attention to something. This usually comes in the form of a horizontal collection of items with an active selection. The triangle of course moves as you select different items.
I’m not sure who started it, but jagged separators like the one below have become massively popular in the past year or two. It’s an elegant solution that definitely adds more visual interest than your typical solid line.
The technique doesn’t necessarily suggest a scrapbook theme, that’s just what I think about every time I see it. For variation, try experimenting with the point height, spacing and roundness. You could also go with a less regular pattern such as a torn edge.
This example actually comes from the same site as the last one, kudos to Colin Grist for an awesome site. Check out how he separates these two sections:
Here he uses a hard line, but instead of color contrast he simply cuts of a graphic. The solution is wonderfully simple and works very well. If you scroll down a little further he picks the scene back up, so this is more of a stripe, but you can definitely use it either way.
This one is conceptually the same as the scrapbook look, you’re essentially just breaking up the line so that’s not straight and boring. However, a graphic comes into play to add a lot more visual interest.
I really like how this designer took things a step further and layered the buildings into the background. It makes the separation a lot more complex and impressive. Don’t just rip off this idea and go with buildings, thing about some other shapes you could try: mountains, water, trees, etc.
The overlay is another way to separate two sections in a very subtle manner. It’s a bit more stylish and common than the quick fade.
This can be easily accomplished in Photoshop with layer opacity, but using CSS to accomplish it is simple too. Just make sure you declare your color using RGBa and set that alpha value to something that fits the level of transparency you’re going for.
The overlay trick is commonly used on navigation and other menu bars, both in app and website UI design. It’s really a solid technique for just about any purpose though and should definitely go in your “use often” bag of tricks.
The Ruler (a.k.a. The Timeline)
I really like the look of this one and will definitely keep it in mind for future projects. The example below uses it vertically but it can easily be horizontal as well.
You can use this technique as a simple static element, but this designer took it one step further. Stop by the site and scroll down to see how it becomes a dynamic navigation tool. Very slick!
This example has a bonus technique too, notice the simple, single pixel horizontal line. If you’re going for a minimal design, sometimes the best way to separate two things is just to draw a line! How much easier can it get?
I debated for quite a while about what to call this one. Is it a pillow, a dam, a puff, a slice, a line or a fold? I don’t know what you call it but it looks pretty cool.
There are several variations on this idea. Basically they all aim at adding a bit of dimensionality to the content break and usually involve little more than some clever shadow positioning. This is perfect for when you’re going for a bit of realism in your design.
The Kitchen Sink
If this post has your head spinning wondering which method to use for your current design project, keep in mind that you can use several of them!
As with anything, it’s easy to go too far but I think the design above is a good example of using several of the methods but still keeping it attractive and not too busy. We can spot color contrast, overlays, simple lines, and the scrapbook method, all in a few hundred pixels of space!
There’s definitely something to be said for consistency and repetition so make sure you’re not just using something different for every section. Pick a couple of different methods and repeat them several times across the design.
Well that wraps up our ten examples of how to design content separators. This may seem a little trivial now, but trust me, the next time you design something you’re going to think about this post and your various options for creating visual distinction!
Leave a comment below and let us know which techniques you use regularly in your designs.