Toon Titles
Explore my growing collection of classic cartoon title cards, lovingly recreated using CSS, SVG, and SMIL animations. Enjoy the nostalgia and learn from the code on CodePen.
Explore my growing collection of classic cartoon title cards, lovingly recreated using CSS, SVG, and SMIL animations. Enjoy the nostalgia and learn from the code on CodePen.
Kingdom of the Planet of the Apes is out and I decided to update one of my responsive easter egg headers—Kerfuffle on the Planet of the Apes—with more efficient, modern code.
Originally published in 2005 and updated in 2024, CSS Specisithity explains how to master specificity using Star Wars metaphors. It’s been credited with helping web designers and developers understand what’s often considered a complex subject.
Clarify what’s expected on both sides to help build great relationships between you and your clients. Contract Killer is plain and simple and there’s no legal jargon. It’s customisable to suit your business and has been used on countless web projects since 2008.
I wanted a simple set of layout modules I could call on for design projects, so I developed my own. I call them Layout Love and rather than keep them to myself, I’m offering them to everyone to use which I hope will encourage people to make layouts which are more interesting.
I wrote my first book, Transcending CSS: The Fine Art of Web design, way back in 2006. It became a success and since then I’ve had countless people tell me it was influential in their careers. Transcending CSS Revisited is available to read online for free, with a new foreword by Rachel Andrew.
As I’ve said plenty of times before, a well-chosen grid can do much, much more than align content. Our choice of grid can influence how we approach a design and it can change how we think about layout. That’s especially true of modular grids.
Sam Sycamore tweeted a utility class for breaking an element out of its container to fill the full width of a page. It prompted me to think about how and when to use utility classes.
Compound grids offer exciting and often unconventional layout possibilities. Most importantly, they also encourage us to think differently about the choices we make when we’re designing layouts. If you’re familiar with the grid made ubiquitous by Bootstrap, a 3+4 compound grid is a great place to start learning about compound grids.
I’ve said over and over again that a well-chosen grid can do much, much more than align content. The choice of grid can influence how we approach a design, it can change how we think.
For as long as I can remember, I’ve been specifying different colours for hyperlinks and their :hover pseudo-classes. Recently, I’ve been experimenting with CSS filters and found they make development much easier.
Although I don’t get to do it as often as I’d like, I enjoy working with startups. So, I was thrilled to be asked to work on a website design for Worrysome, a new business which aims to take the worry out of worrying.
Rooting around in boxes in our storage unit, I came across the Nintendo Game Boy I bought new in 1990. The plastic covering the green LCD was missing, but it was otherwise intact. The box even contained a few game cartridges. I popped it in my pocket and took it home.
Ekster sent me their iPhone 12 MagSafe wallet for review. The short version? I like it. But, I probably wouldn’t buy it.
When I was developing the SVG panel for principles on the Stuff & Nonsense about page, I ran into a problem which could only be fixed using <foreignObject>
.
A generation of product and website designers has grown up with 12 or 16 column grids from Bootstrap-style frameworks. In those frameworks, columns are used mostly for aligning content. In my new design for Stuff & Nonsense, I wanted to go beyond that and use a compound grid to influence the entire design.
Given that SVG makes it possible to create cool compositions of images and text, I’m surprised I rarely see designers and developers using it for more than just icons.
Late last year, I sat down for an hour with Steve Folland to talk about “blagging and learning” on the Being Freelance podcast. The episode’s now available and, to be honest, it’s the best podcast interview I’ve done for a long while.
I’ve been tempted to redesign the Stuff & Nonsense website since we moved back from Australia, but you know, there’s always something else to do.
Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week 40 and my design this week was again inspired by David King.
David King was a British writer, designer and historian of graphic design. He devoted his career to uncovering and chronicling the art of the Soviet and the Constructivist periods, developing posters and graphics for many political groups.
Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week 39 and my design this week was inspired by Milton Glaser.
Milton Glaser was born in 1929 in The Bronx, New York City and throughout his career, he personally designed and illustrated more than 400 posters including a famous psychedelic poster of Bob Dylan.
Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week 38 and my design this week was again inspired by Saul Bass.
In a career which spanned over 40 years, Saul Bass not only designed some of America’s most iconic logos, but also designed title sequences and film posters for some of Hollywood’s best filmmakers, including Alfred Hitchcock, Stanley Kubrick, and Martin Scorsese. For Hitchcock, Bass created innovative title sequences for films including North by Northwest, Psycho, and Vertigo. The opening sequence of Mad Men—one of my favourite TV shows—pays homage to Bass who died in 1996 aged 75.
Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week 37 and my design this week was again inspired by Paula Scher.
Paula Scher is an American graphic designer, painter and educator and the first female principal at design firm Pentagram. She is well-known for her distinctive typographic style.
Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week 36 and my design this week was inspired by David King.
David King was a British writer, designer and historian of graphic design. He devoted his career to uncovering and chronicling the art of the Soviet and the Constructivist periods, developing posters and graphics for many political groups.
Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week 34 and my design this week was again inspired by Max Bill.
Born in 1908, Max Bill was a Swiss artist, typeface and graphic designer, and industrial designer. He studied at the Bauhaus under Wassily Kandinsky and Paul Klee.
Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week 35 and my design this week was inspired by Paula Scher.
Paula Scher is an American graphic designer, painter and educator and the first female principal at design firm Pentagram. She is well-known for her distinctive typographic style.
Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week 33 and my design this week was inspired by Tibor Kalman.
Tibor Kalman was a Hungarian American graphic designer best-known for his work as editor-in-chief of Colors magazine. In 1979, Kalman opened his own studio with the goal of challenging mundane design thinking and creating unpredictable work.
Since going on holiday during July, I’ve fallen behind with my commitment to designing 52 designs for a series of Inspired Design Decisions. Now II’m back in the studio and II’ve settled back into work, II’m making up for lost time. Here are six new designs, inspired by Otl Aicher,Saul Bass, Ken Garland, and Armin Hofmann.
I know some people swear by frameworks and I do understand why, although my work rarely needs them. I also appreciate why some people find the grids component in frameworks useful. But, to me, including a framework just for its grid has always seemed excessive. Particularly when there are other ways to develop reusable layout components which are far less generic, but no less flexible than a framework.
Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week 26 and my design this week was inspired by Lester Beall.
Lester Beall was an American modernist graphic designer. Born in Kansas City, Missouri, Beall moved to Chicago to study and from there to New York. From his farm in Connecticut, he worked on covers and posters which often featured his distinctive use of photomontage.
Hello. I’m Andy Clarke, an internationally recognised product and website designer and writer on art direction for products the web. I help product and website owners captivate customers by delivering distinctive digital designs.
Every two weeks you’ll get design inspiration and insights on how to improve your design. View some recent emails, sign up today, and get: