How many shots can you get on target in 60 seconds?
3
Score
0
Time
60
0
60
I spend an unhealthy amount of time on the typography in my designs, and if you’ve read any traditional typography books, you might remember “the measure.” If not, it’s simply the length of a line of text. But measure means more than that, and once you understand what it represents, it can change how you think about layout entirely
Over the past few months, I’ve explored how we can get creative using well-supported CSS properties. Each article is intended to nudge web design away from uniformity, toward designs that are more distinctive and memorable. One bit of feedback deserves a follow up.
There are so many creative opportunities for using shape-outside that I’m surprised I see it used so rarely. So, how can you use it to add personality to a design? Here’s how I do it.
When you picture placing images in long-form content—like articles, case studies, or reports—the standard approach is inline rectangles, breaking up blocks of text. Functional? Sure. Inspiring? Hardly. So, how do you use images to add personality, rhythm, and even surprise someone along the way? Here’s how I do it.
How do you design block quotes and pull quotes to reflect a brand’s visual identity and help tell its story? Here’s how I do it by styling the HTML blockquote element using borders, decorative quote marks, custom shapes, and a few unexpected properties.
A versal letter is a typographic flourish found in illuminated manuscripts and traditional book design, where it adds visual interest and helps guide a reader’s eye to where they should begin.
So, how can you take dialogue box design beyond the generic look of frameworks and templates? How can you style them to reflect a brand’s visual identity and help to tell its stories? Here’s how I do it in CSS using ::backdrop, backdrop-filter, and animations.
Let’s run through a quick refresher. Image maps date all the way back to HTML 3.2, where, first, server-side maps and then client-side maps defined clickable regions over an image using map and area elements.
I’ve used border-image regularly. Yet, it remains one of the most underused CSS tools, and I can’t, for the life of me, figure out why. Is it possible that people steer clear of border-image because its syntax is awkward and unintuitive? Perhaps it’s because most explanations don’t solve the type of creative implementation problems that most people need to solve. Most likely, it’s both.
After 20 years since I first published my book about Multi-Column Layout in CSS, I’m back to encourage a fresh look at CSS columns for enhanced readability and design flexibility.
SVG is one of those web technologies that’s both elegant and, at times, infuriating. In this article, pioneering author and web designer Andy Clarke explains his technique for animating SVG elements that are hidden in the Shadow DOM.
Ambient animations are subtle, slow-moving details that add atmosphere without stealing the show. In part two of his series, I show how ambient animations can add personality to any website design.
SVGs, they scale, yes, but how else can you make them adapt even better to several screen sizes? I explain how I build what I call “adaptive SVGs” using <symbol>, <use>, and CSS Media Queries.
Creating motion can be tricky. Too much and it’s distracting. Too little and a design feels flat. Ambient animations are the middle ground—subtle, slow-moving details that add atmosphere without stealing the show.
What’s the best way to make your SVGs faster, simpler, and more manageable? I explain the process I rely on to prepare, optimise, and structure SVGs for animation and beyond.
Now, you might’ve heard that SMIL is dead. However, it’s alive and well since Google reversed a decision to deprecate the technology almost a decade ago. It remains a terrific choice for designers and developers who want simple, semantic ways to add animations to their designs.
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?
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.
What if we thought of web design more like a comic book? In this post, I explore how the structure of comic book layouts—panels, gutters, and rhythm —can inspire more expressive and narrative-driven web designs.
What do giant spiders, invaders from Mars, and a 50-foot woman have in common? Incredible colour. B-movie buff and web design pioneer I show you how the over-the-top palettes of horror and sci-fi posters can inspire memorable colour choices for modern websites.
How can a collection of dog-eared posters from the golden age of British wrestling influence the design of today’s websites? I step into the ring to give you the lowdown.
Have you ever considered how ’90s animations might relate to web design today? I show how they inspired a new website design for Emmy-winning composer Mike Worth
How can a long-defunct popular music magazine for teens influence the design of today’s websites?
What do you see when you look at a movie poster? Is it simply advertising to promote a movie or a piece of artwork you’d potentially hang on your wall at home or in an office?
When I was growing up in the 1980s in a steel-making town that had lost its steelworks, there was a thriving subculture of fanzines and fly posters printed in garages and community centres.
After 12 inspiring articles, I draw the 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. I brings together lessons from the previous articles to teach you about choosing colour palettes, working with compound and modular grids, and designing graphical and readable typography.
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 the Inspired Design Decisions series, I will explain how his work can inspire what we design for the web.
I 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 colour and shape. I teach you how to use colour to attract attention and then to lead someone’s eye around a design. I discuss how a minimal colour palette can act as a guide, helping people through a design, and how lines and shapes add structure and style.
I 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.
I 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.
I 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.
I 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, we’ll explore just that.
I 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 emphasise scale and maintain its contrast on even the smallest screens. I teach you how to make confident colour choices, and how to use pattern and texture to add depth to your designs.
I teach you about Alexey Brodovitch, one of the most influential art directors of the twentieth century. I 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.
I 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.
I teach you how to expand your repertoire of layouts by combining more than one grid into a compound grid. You’ll learn how combining grids increases design flexibility, the difference between layered and stacked compound grids, and how to use 2+3 columns, 3+4, and 4+6 compound grids. This article will change the way you think about designing with grids.
Thanks to technologies like CSS Grid and Flexbox, there’s been a resurgence of interest in creative design and art direction. While articles about how to use these technologies are common, when and why to use them is hardly ever discussed. Very few people are taught design fundamentals or see inspiring examples to learn from. Through this unique series of article and webinars, I hope to change that.
I dig deep into snow to find ways flat design can be brought back to life in CSS with the use of techniques to create a sense of depth. Like spring after an everlasting winter, perhaps it’s time to let a different style of design flourish. What a relief.
A tale as old as time, a tale of tables, framesets, fixed widths and spacer GIFs (ask your parents). Harking back to the methods that were appropriate to used to build cutting-edge websites twenty years ago, not only can we see how far we’ve come but can be excited for what lies ahead.
Andy Clarke unpacks his tinsel and untangles the Christmas illuminations to add some brilliance to the subject of style guides. Whether you choose a boxed pre-decorated tree, or lovingly choose each adornment to your Norwegian spruce, just remember to switch the lights on.
Andy Clarke unpacks his tinsel and untangles the Christmas illuminations to add some brilliance to the subject of style guides. Whether you choose a boxed pre-decorated tree, or lovingly choose each adornment to your Norwegian spruce, just remember to switch the lights on.
Andy Clarke encourages us to have confidence in the way we communicate with potential clients. Being open and genuine, and providing an insight into what working with you will be like can help prospective clients choose you over your competitors. So before you refresh your glass, refresh your website’s copy!”
If we’re all telling prospective clients that we’re crafting and designing delightful, beautiful and remarkable digital experiences, what marks any of us out?”
Just like demonstrating we know our rightful position on the road, knowing our rightful place in a business relationship and communicating that through how we deal with people will help everyone achieve an equitable balance. ”
When you say that something’s ‘too expensive,’ you’re doing much more than commenting on a price.”
Before he combined them with fluid images and CSS3 Media Queries to coin ‘responsive design’, Ethan Marcotte described Fluid Grids—one of the most enjoyable parts of responsive design. Enjoyable that is, if you like working with math(s). But Fluid Grids aren’t perfect and unless we’re careful when applying them, they can sometimes result in a design that feels disconnected.”
Andy Clarke whittles his early photographic experience into an innovative approach to deciding what matters most.
Andy Clarke shares a case study highlighting the benefits of progressively.”
Andy Clarke rides into town to remind us of the importance of having a proper contract in place between those providing a service (usually us) and our clients commissioning the work. Projects that don’t run to plan are a fact of life, so make sure you’re prepared.”
Andy Clarke looks to the world of comic books and graphic novels for inspiration in web design. Personally, I look for design inspiration in Christmas wrapping paper, which, as it turns out, is a less successful technique. On the whole I’d recommend Clarke’s approach above mine. Lesson learned.”
Andy Clarke details an approach for embedding production notes inside your document—a useful aid to project management and team communications throughout the development phases of any project. Sounds like Santa isn’t the only one who’ll be getting notes this Christmas.”
Andy Clarke dusts off the CSS z-index property to take control of the depth of his positioned elements. Why not try it out for yourself and see how it all stacks up. Santa’s not the only thing in your stack this Christmas. Erm ok, I’m outta puns.”
In this tutorial, I go beyond basic CSS Shapes and show how you can use them to create five types of distinctive and engaging layouts for your art-directed designs.
If you’re at all serious about web design or development, you need to be serious about learning and using CSS Grid, too. Andy Clarke explains how.
Being a good designer or developer is about so much more than knowing how to use tools. It’s also about the way we approach what we do and our attitude towards it.”
At the fabulous Smashing Conference in Freiburg, I gave a new talk, one I’d written just a few hours prior. I chose not to use slides, but instead to speak about three things that I’m incredibly enthusiastic about.”
Part of a series of guest posts covering tips and tricks for working with CSS. These techniques, along with web fonts, make rich interactive sites achievable with simple and accessible standards-based markup and CSS.
A different perspective on Cennydd Bowles’ Letter to a Junior Designer.
Wouldn’t it be great if we could update the classic ALA style switcher to accommodate multiple users and devices, including some that aren’t even traditional browsers, all from a single JavaScript and CSS file? Well, now we can! Enter the Body Switcher. By Andy Clarke and James Edwards.