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.

Jon Moore

Written by

Jon Moore

Principal Design Partner at www.innovatemap.com in Indianapolis, and co-founder of www.uxpower.tools. Contact me at 1jonmoore@gmail.com.

UX Power Tools

A publication for designers, written by designers.

Jon Moore

Written by

Jon Moore

Principal Design Partner at www.innovatemap.com in Indianapolis, and co-founder of www.uxpower.tools. Contact me at 1jonmoore@gmail.com.

UX Power Tools

A publication for designers, written by designers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store