Tiny Trends

Tiny Trends #1: Non-Rectangular Headers

Dashes of flair to kick your designs up a notch.

Jon Moore
Jon Moore
Jan 6, 2017 · 3 min read

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

UX Power Tools

A publication for designers, written by designers.

UX Power Tools

A publication for designers, written by designers.

Jon Moore

Written by

Jon Moore

Principal Design Partner Innovatemap in Indianapolis. Creator of The Design Encyclopedia (https://www.designencyclopedia.io). Email: 1jonmoore@gmail.com

UX Power Tools

A publication for designers, written by designers.