Tiny Trends

Tiny Trends #1: Non-Rectangular Headers

Dashes of flair to kick your designs up a notch.

Breaking parallel is a great way to take a standard, rectangular header and adding some visual interest. It’s often accompanied with overlapping cards to give introduce another “z-layer” of depth.

Anyway, I won’t bend over backwards with a drawn-out explanation. Here’s what I’m seeing.














If you want to experiment with some non-rectangular headers in code, Ahmad Nassri wrote a fantastic tutorial for how to create them in CSS. Check it out:


When I’m not writing, I’m working on Sketch design tools at UX Power Tools to make you a better, more efficient designer.

Follow UX Power Tools on Twitter
Follow me on Twitter

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.