Creating Non-Rectangular Headers

Over at Medium, Jon Moore recently identified "non-rectangular headers" as a tiny trend. A la: it's not crazy popular yet, but just you wait, kiddo.

We're talking about headers (or, more generally, any container element) that have a non-rectangular shape. Such as trapezoids, complex geometric shapes, rounded/elliptical, or even butt-cheek shaped.

The Power of the rgba() Color Function in CSS

One of the things that I'm really interested in about CSS is the new color-mod function. It will give us the ability to do color manipulations right in the browser. For example, when hovering over a button, you can change the color by using something like color: color(black darkness(50%));, without the use of any CSS preprocessor like Sass.

But as the support of these CSS color functions is zero nowadays, we can temporarily use PostCSS and compile them as regular colors. Or we can experiment and discover the power of CSS rgba() color functions to change colors on the fly! Let's see how we can use it.


Icons and Teams

Say you're working on a website that uses an icon system. Lots of people who work on the site interact with the icon system. Designers create new icons, they tweak existing ones, they have ideas on what they want the icons to do. Developers building out the pages of the site use the system.

Say you're the front-end developer. You're implementing this system. You're the middle man. You're the creator and consumer of this system.

What do you ask of the designers?


Introducing the new Framer

Framer, the design and code tool from Motif Tools BV, has been updated with lots of new features.

I guess it's Framer "js", because the designs you create are formed from a code syntax that is JavaScript-like. Kinda looks like JSON in CoffeeScript. It's CoffeeScript. But you're actually working in a native app.

It's a wild time for design tooling. Sketch had become a dominant player for screen design. Adobe knows designers don't turn to Photoshop like they used to and is making things from the ground up like Adobe XD and trying to figure out mobile. Webflow is getting it done in the browser and producing production-ready sites. InVision is also happening in the browser and focusing on teams and workflow. There are very niche tools like Lingo popping up.

The design tooling landscape in years to come will probably be as splintered as the web development tooling is now.