Design deja vu
This week, I launched Design Chatter. It’s a weekly one-hour Zoom call where like-minded designers can give each other constructive, friendly feedback.
This week, I launched Design Chatter. It’s a weekly one-hour Zoom call where like-minded designers can give each other constructive, friendly feedback.
One of my favourite CSS writers Ahmad Shadeed has written about CSS Masking and I thought I could put his techniques to good use on Emma’s website.
Emma Bodger is a film/television producer, and recently, I’ve spent time working on her visual identity and a new website. It’s been a lot of fun, and I also learned more about SVG while working on it. I’m digging into the details this week, and today I’ll reveal the Easter Egg theme which I hid on Emma’s website.
Emma Bodger is a film/television producer, and recently, I’ve spent time working on her visual identity and a new website. It’s been a lot of fun, and I also learned more about SVG while working on it. I’m digging into the details this week, and today I’ll explain how I made experimental banner images for Emma’s home page using SVG masks.
Emma Bodger is a film/television producer, and recently, I’ve spent time working on her visual identity and a new website. It’s been a lot of fun, and I also learned more about SVG while working on it. I’m digging into the details this week, and today I’ll explain how I made an experimental word search concept for Emma’s home page.
Emma Bodger is a film/television producer, and recently, I’ve spent time working on her visual identity and a new website. It’s been a lot of fun, and I also learned a few things while working on it. I’m digging into the details this week, and today I’ll explain the pseudo-3D design I created for Emma’s home page banner.
Emma Bodger is a film/television producer, and recently, I’ve spent time working on her visual identity and a new website. It’s been a lot of fun, and I also learned more about SVG while working on it. I’m digging into the details this week, and today I’ll explain the SVG filters I created to transform images on Emma’s website.
In a video of one his talks, Andy Bell mentioned CUBE CSS and his approach to using data attributes for variations (exceptions) to design styles. I’m currently working on a grid system for a product project and revamping my Layout Love templates, so was keen to implement this approach.
Most parts of Apple’s website are fabulously flexible. But today, I was browsing for Black Friday deals and found a fixed-width design element which I was determined to make flexible.
Safari Technology Preview is my every day browser. When the latest version dropped, a feature in the release notes interested me. It was experimental support for three new relative colour CSS values. So, I tried what’s possible now.
There’s been a meta tag for specifying a theme-color for UI elements on websites for a while. If you’ve used it, now’s time to change that element along with the upcoming version of Safari.
Let’s face it, unless you develop a complex product—and even if you do—you probably don’t need half the humungous hunk of CSS you bung at a browser. In fact, it’s possible you only need one default and one alternative style for every element.
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.
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.
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.
While developing prototype designs for a French football magazine, I came across a strange bug when Chrome’s translate feature comes into contact with CSS generated content.
While I was researching typefaces for a new project, I came across Dalton Maag’s case study for Universal TV. The type is beautiful, of course, but it was their graphics which got my attention.
It’s 20 years to the day since my wife, and I started Stuff & Nonsense, our little studio and my outlet for creative ideas on the web. Over on 24ways, it’s also my fourteenth article, this time how to Design your site like it’s 1998. It’s a tongue-in-cheek look back at how we developed websites when I started my company, complete with not so old favourites like font elements, frames, layout tables, and spacer gifs.
Working with CSS Grid is a lot of fun, as well as making distinctive and original layouts easier and with less code. However, using Grid does occasionally come at a cost and that is semantic markup. Fortunately, there’s a new CSS display property which—when used thoughtfully—can overcome the problem of ‘flattened HTML.’
Here’s a quick entry about something I learned just this week about :not()
pseudo-class selectors and how to combine them.
It’s been a while since I’ve written seriously, but since I started working on my new ‘Art directing for the web’ book, I’ve got the bug. So when Smashing Magazine asked me to write for them again, I couldn’t resist. My latest article, on ‘Art Directing For The Web With CSS Grid Template Areas’ was published today and I’m very pleased with how it turned out. You can read it here.
Over the next few weeks, I’m going to share some of the things that I’ve learned while designing and developing Inspired Guides, starting today with using HTML entities as separators in breadcrumb navigation.
Hello. I’m Andy Clarke, a well-known website designer and writer on art direction and design for products and websites. I help businesses to deliver engaging customer experiences and unique designs.
Hire me. I’m available for coaching and to work on design projects.