Author Andy Clarke

May 21, 2025 — While there are plenty of ways that CSS animations can bring designs to life, adding simple SMIL (Synchronized Multimedia Integration Language) animations in SVG can help them do much more. Andy Clarke explains where SMIL animations in SVG take over where CSS leaves off. Read more…

May 14, 2025 — What if you could take your CSS animations beyond simple fades and slides — adding an extra dimension and a bit of old-school animation magic? In this article, pioneering author and web designer Andy Clarke will show you how masking can unlock new creative possibilities for CSS animations, making them feel more fluid, layered, and cinematic. Read more…

May 7, 2025 — Have you ever thought about how the limitations of early cartoon animations might relate to web design today? From looping backgrounds to minimal frame changes, these retro animation techniques have surprising parallels to modern CSS. In this article, pioneering author and web designer Andy Clarke shows how he applied these principles to Emmy-winning composer Mike Worth’s new website, using CSS to craft engaging and fun animations that bring his world to life. Read more…

August 18, 2020 — After 12 inspiring articles, Andy Clarke draws his Inspired Design Decisions series to a close by explaining how studying the work of Bradbury Thompson — one of the masters of 20th Century graphic — will teach you how to combine graphic and typographical elements with innovative layouts to create stunning designs for the web. In this final article, Andy brings together lessons from all his previous articles to teach you about choosing color palettes, working with compound and modular grids, and designing graphical and readable typography. If you’ve skipped any of the articles in this series, you definitely won’t want to miss this one. Read more…

July 28, 2020 — Emmett McBain was a Black American graphic designer whose work had a remarkable impact on the representation of Black Americans in advertising. He co-founded what became the biggest Black-owned agency in the USA. McBain designed almost 75 record covers by the time he was 24, and in the penultimate of his Inspired Design Decisions series, Andy Clarke will explain how his work can inspire what we design for the web. Read more…

June 26, 2020 — In the tenth issue of Inspired Design Decisions, Andy Clarke will explain how Giovanni Pintori — the Italian graphic designer best known for his work with Olivetti — can inspire design for the web with his distinctive use of color and shape. Andy will teach you how to use color to attract attention and then to lead someone’s eye around a design. He’ll discuss how a minimal color palette can act as a guide, helping people through a design, and how lines and shapes add structure and style. Read more…

May 22, 2020 — These days, product companies seem more interested in refining interfaces and simplifying user experiences. In this ninth issue of Inspired Design Decisions, Andy Clarke will explain how studying the work of Max Huber — one of the less well known but most distinguished Swiss designers — will teach you how to turn mundane subjects into exciting visual communication. Read more…

April 13, 2020 — In this eighth issue of Inspired Design Decisions, Andy Clarke will explain how learning about American graphic designer and typographer Herb Lubalin has transformed his approach to typography on the web. How can we combine elements to develop powerful headers and calls to action? How do we use pre-formatted HTML text, and the text element in SVG for precise control over type? How can we optimise SVGs and make SVG text accessible? In this article, we’ll explore just that. Read more…

March 23, 2020 — In this seventh instalment of Inspired Design Decisions, Andy Clarke will explore how American art director and graphic designer Otto Storch inspires his designs for the web. How do we use CSS Shapes to go beyond basic shapes to add energy to our designs? How do we use rotations on text for extra impact? How can we use mirroring and reflections to add interest to a design? In this article, we’ll explore just that. Read more…

March 2, 2020 — In this sixth instalment of Inspired Design Decisions, Andy Clarke will explore how British art director Neville Brody and in particular his work on The Face Magazine inspires his designs for the web. How do we use blend modes to add depth to our designs? How do we use vertical text for impact? How can we use clipping paths to bring in character and energy to a design? In this article, Andrew Clarke will explore just that. Read more…

October 3, 2019 — In this fifth installment of Inspired Design Decisions, Andy Clarke will teach you about Bea Feitler, who directed Harper’s Bazaar throughout the 1960s and has been described as “the pioneering female art director you’ve never heard of.” Andy will teach you about Feitler’s confident work and show you how to apply some of her design techniques to the work you make for the web. In this article, you’ll learn how to emphasize scale and maintain its contrast on even the smallest screens. Andy will teach you how to make confident color choices, and how to use pattern and texture to add depth to your designs. Read more…

September 5, 2019 — In this fourth instalment of Inspired Design Decisions, Andy Clarke will teach you about Alexey Brodovitch, one of the most influential art directors of the twentieth century. Andy will teach you about Brodovitch’s iconic work and show you how to apply some of his design techniques to the work you make for the web. In this article, you’ll learn how scattering images will fill your designs with movement. Andy will teach you how to mirror pictures and text, and how to carve text into shapes using CSS Shapes. Read more…

August 8, 2019 — In this third instalment of Inspired Design Decisions, Andy Clarke will teach you how to use frameworks to create layouts as engaging as in the well-known Ernest Journal. All it takes is an understanding of layout design and imagination. Curiosity keeps a creative mind open to new possibilities, and that’s what Ernest Journal magazine — the inspiration for this issue — is all about. Ernest Journal’s design is successful because although each article has its own distinctive elements which connect the visual style with the content, those articles use a consistent grid system and foundation styles. Read more…

July 11, 2019 — In this second installment of Inspired Design Decisions, Andy Clarke will teach you how to expand your repertoire of layouts by combining more than one grid into a compound grid. This article will change the way you think about designing with grids. Read more…

June 13, 2019 — Through this unique “Inspired design decisions” series of article and webinars, Andy Clarke will change that. In the first edition of Inspired Design Decisions, Andy will “Say hello to skinny columns,” a technique which adds one extra narrow column to an otherwise conventional column grid. He explains how to design with, then implement skinny columns using meaningful markup and efficient CSS. He also explains how to design using modular grids to fill your designs with energy. Read more…

April 11, 2019 — Last year, Rachel Andrew wrote “Take A New Look At CSS Shapes” where she reintroduced readers to the basics of using CSS Shapes. In this new tutorial, Andy Clarke expands on the topic of “Art Direction for the Web” with CSS Shapes to create exciting and inspired new design ideas. Andy is going to show you how to use CSS Shapes to create the following five different types of layout: v-shapes, z-patterns, curved shapes, diagonal shapes, and rotated shapes. Read more…

April 9, 2018 — CSS Grid is important, really important. With it, we can now be as creative with layout on the web as we can in print, without compromising accessibility, responsiveness, or usability. If you’re at all serious about web design or development, you need to be serious about learning and using CSS Grid, too. In this article, Andrew Clarke will show you how to use one aspect, grid-template areas, an easy way of arranging elements. Read more…

March 25, 2014 — Being a good designer or developer is about so much more than knowing how to use tools. It’s also about the way you approach what you do and your attitude towards it. In this article, Andrew Clarke is going to talk about four lessons that can help you do what you do better. These have been important to him. They’re lessons that he learned a long time ago, at art school. Read more…

September 28, 2012 — At the Smashing Conference, Andy Clarke spoke about the workflow that involves responsive design, the client participation process and how to organize the feedback with your clients. In this article, Clarke shares the expanded notes he made before his talk. Read more…

January 1, 0001 —

The web can be more than plain rectangles and perfect circles. Art Direction for the Web exists because we wanted to explore how we all, designers and front-end developers alike, can break out of generic web experiences prevailing today.

In the book, Andy explores original compositions, unexpected layouts, critical design thinking and front-end techniques that will help you create something that stands out.

To achieve this, the book applies art direction to examine a new approach to designing for the web. This book is supposed to make you think, and ask questions, and polish every pixel with clear intent and purpose. It will show you how art direction will:

• Connect your brand with customers
• Create connected experiences
• Improve engagement and conversions
• Bring personas and user stories to life
• Take design beyond frameworks

January 1, 0001 —

The web can be more than plain rectangles and perfect circles. Art Direction for the Web exists because we wanted to explore how we all, designers and front-end developers alike, can break out of generic web experiences prevailing today.

In the book, Andy explores original compositions, unexpected layouts, critical design thinking and front-end techniques that will help you create something that stands out.

To achieve this, the book applies art direction to examine a new approach to designing for the web. This book is supposed to make you think, and ask questions, and polish every pixel with clear intent and purpose. It will show you how art direction will:

• Connect your brand with customers
• Create connected experiences
• Improve engagement and conversions
• Bring personas and user stories to life
• Take design beyond frameworks