Z’s Still Not Dead Baby, Z’s Still Not Dead

Back in 2005, my friend Drew started a Christmas advent calendar website and asked me if I’d write something for it. Of course, I agreed, and my first 24ways article was “Z’s not dead baby, Z’s not dead.” It was a short piece how z-index and positioning in CSS could “be used to create designs which ‘break out of the box.’ This year, I returned that topic in what will be my fifteenth and final article for 24ways.

A reaction to overly ornamental designs, flat design has been the dominant aesthetic for almost a decade. As gradients, patterns, shadows, and three-dimensional skeuomorphism fell out of fashion, designers embraced solid colours, square corners, and sharp edges.

Anti-skeuomorphism no doubt helped designers focus on feature design and usability without the distraction of what some might still see as flourishes. But, reducing both product and website designs to a bare minimum has had unfortunate repercussions. With little to differentiate their designs, products and websites have adopted a regrettable uniformity which makes it difficult to distinguish between them.

Still, all fashions fade eventually. I’m hopeful that with the styling tools we have today, we’ll move beyond flatness and add an extra dimension. Here are five CSS properties which will bring depth and richness to your designs.

In Z’s Still Not Dead Baby, Z’s Still Not Dead, I cover:

• Transparency with alpha values
• Opacity
• Blend modes
• CSS Grid
• Z-index

While I’m not advocating a return to the worst excesses of skeuomorphism, I hope product and website designers will realise the value of a more vibrant approach to design; one which appreciates how design can distinguish a brand from its competition.

Over the years, I’ve written about many different design and design related topics. My personal favourite is last year’s “Designing Your Site Like It’s 1998” but without doubt the one I’m most proud of is Contract Killer from 2008. My open-source killer contract has been used thousands of times and designers and developers. It’s perhaps the most important thing I’ve ever made.

1. 2005: Z's not dead baby, Z's not dead
2. 2006: A Message To You, Rudy - CSS Production Notes
3. 2007: Underpants Over My Trousers
4. 2008: Contract Killer
5. 2009: Ignorance Is Bliss
6. 2010: Circles of Confusion
7. 2011: There’s No Formula for Great Designs
8. 2012: Monkey Business
9. 2013: The Command Position Principle
10. 2014: Taglines and Truisms
11. 2015: Blow Your Own Trumpet
12. 2016: Designing Imaginative Style Guides
13. 2017: Getting Hardboiled with CSS Custom Properties
14. 2018: Designing Your Site Like It’s 1998
15. 2019: Z’s Still Not Dead Baby, Z’s Still Not Dead

I’m incredibly grateful to Drew and his team of volunteers for inviting me to write for this incredible publication every year for the past fifteen years. I hope you enjoy this fifteenth and final 24ways article as much as I enjoyed writing it.