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.

by Leo Bassam

by Ibnu Mas’ud for Sebo

by KKSan

by Asar Morris

by XINBO

by Patricko

by XINBO

by Benjamin De Cock

by Jon Kyte

by Robbie Knight

by Marc Clancy

Follow UX Power Tools to get more #tinytrends right in your feed!

Tiny Trends #2: Off-Center Alignment

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:

Ultimate Guide to Non-Rectangular Headers (Part 1)

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