Tag: Design

Last week, I continued developing Moonwalk Audio’s new website, turning a collection of sketches and objects into an interactive SVG fantasy world. There’s still plenty to do, but the most extravagant animation I’ve created so far is taking shape.

It was heads-down in the studio last week, working on Moonwalk Audio’s new website and finishing my book. But the week started with a bang, then another bang, then a crash.

Moonwalk Audio and I started talking about a new website design about six months ago, but our calendars didn’t line up until now. Plus, I made time to work on designing the PDF version of Standout designs for the Web.

Since we came back from holiday, we’ve been attempting to spend equal time on work and home improvements. But last week, I found it difficult not to press ahead with book production. I suppose decorating will have to wait.

Last week was a little chaotic, with new windows installed throughout our cottage. But I still managed to get plenty done, including real progress on my upcoming book, Standout Designs for the Web.

We’ve been away from the studio for the past five weeks and on the road around southern Germany. Now, I’m back and easing myself into work with a new website design for an author.

Last week I found myself with time to tackle the second phase of my Stuff & Nonsense website upgrade.

One more week until we break for August, so last week was all about tying up loose ends with Lockrose and Portico Investments

It’s a couple more weeks until we break for our August break, so I’m trying to finish off my work on Lockrose and Portico Investments.

I have a couple of smaller projects to work on before we close the studio for the August break. I started one of them, for property investment consultants Portico Investments, last week.

Designing a bilingual website for the Open University by making politics feel welcoming, approachable, and relevant to a new generation.

Lockrose wanted to reach new markets without losing the credibility they’d built in the energy sector. Here’s how I designed a website that helped them tell a bigger story.

How I helped a Swiss transport planning consultancy communicate specialist knowledge more clearly through editorial design, illustration, and thoughtful typography.

Every Monday, I write about what I worked on during the previous week. I’m back in the studio for a few weeks and pushing to get a few client projects over the line before we head off to Germany again in August.

In this series of weekly posts, I write about what I worked on during the previous week. Now, I’m back from mainland Europe after a long drive back from northern Italy over the weekend. We’d decided to extend our trip by an extra week, taking in stops in Switzerland and France along the way, which meant fitting in work where I could.

In this regular series, I write about what I worked on during the previous week. I’m still in Germany, away from the studio, and I’m missing my space a lot. There’s a big part of me that loves travelling, but an equal part that craves the familiarity of my home workspace.

In this regular series, I write about what I worked on during the previous week. I’ve missed a couple of weeks of reporting because a) I haven’t been in the studio, and b) this site has had major surgery.

People invest in confidence before they invest in property. That simple idea shaped the decisions I made while designing Portico Investment’s website, from its illustrations and typography to its content and an interactive prototype.

In this regular “Last week in the studio” series, I write about what I worked on during the previous week. Last week was one without a solid piece of work to tackle. Instead, I spent it on some updates to a client’s design and on making a little website for myself.

In this regular “Last week in the studio” series, I write about what I worked on during the previous week. Last week was spent on a more business-focused but no less creative project

The view options toolbar at the bottom of my animated banners has irked me for a while. It had grown one button at a time, and the result looked ill-considered rather than designed. With a few minutes to spare at the end of last week, I finally redesigned it.

In this regular “Last week in the studio” series, I write about what I worked on during the previous week. Last week was quiet enough for me to take an afternoon off to enjoy the sunny weather, but I still got plenty done.

Militant was a British socialist newspaper associated with the Militant ‘tendency,’ a left-wing political movement whose members were ultimately expelled from the mainstream Labour Party. I looked back at how the Militant masthead logo evolved between 1964 and 1997.

In this regular “Last week in the studio” series, I write about what I worked on during the previous week. Last week was a good one as I could concentrate on just one thing.

I’ve added a “spring mode” to my animated SVG desert. Flowers bloom, colours shift, and the whole scene feels more alive—all without creating a separate version. Instead, I’m layering changes on top of the same SVG and letting CSS and JavaScript do the work.

I thought it might be interesting to document what I work on during the week, so I started a regular “Last week in the studio” series. Last week was a bit productive but bitty.

As well as showing off work in progress on Sho!io, I thought it might be interesting to document what I’ve been working on here. So I’m starting a new regular “Last week in the studio” series.

I designed an information-rich website for The Shared Homeland Paradigm, using typography and graphics to clearly and visually explain complex political ideas. Here’s how I approached it.

The Academy of Scoring Arts just launched its new website. It’s a community of arrangers, composers, and musicians that helps industry professionals develop their craft through events and video tutorials.

I designed a website for composer Begoña Pereda using typography and animated SVG graphics to reflect her personality and musical style. Here’s how I approached it.

Business software websites don’t have to look boring. Here’s how I gave Mountain Duck a website with as much personality as the product itself.

I’ve been quietly working on a side project called sho!io, and I’m opening it up to a few people. It’s meant to be a quiet place where you can share one thing you’re making each day, without the usual social noise. It’s early and very much still in progress, but I’d really value your honest feedback if you’re up for trying it.

People don’t buy products from companies they don’t trust. That might sound obvious, but it’s remarkable how many technical websites expect visitors to decode specifications, compare unfamiliar part numbers, and somehow arrive at the right decision on their own.

A composer’s website shouldn’t look like every other composer’s. Here’s how I designed a portfolio for Begoña Pereda that reflected the person behind the music.

Count Binface already had an unmistakable personality. My job wasn’t to invent it. It was to translate it into a website where every illustration, typeface, colour, and layout decision felt unmistakably Binface.

A composer’s website shouldn’t look like everyone else’s. Here’s how I designed a portfolio for Michael Baugh that reflects the person behind the music.

A composer’s website shouldn’t look like everyone else’s. Here’s how I designed a portfolio for Mike Worth that reflects the person behind the music.

Music creates atmosphere long before it tells a story. I wanted Ryan Knaggs’ website to create that same feeling through colour, typography, and layout.

Every designer draws inspiration from somewhere. Here’s how I transformed Tristan Jakob-Hoff’s love of mid-century graphic design into his distinctive website.

While the smart people finish the Academy of Scoring Arts website’s CMS development, I’ve been rummaging through my design files and rediscovered several concepts that didn’t make it into the final design.

Sometimes I don’t want to style a whole word or heading. I want to style individual letters—to nudge a character into place, give one glyph extra weight, or animate a few letters independently. Sadly, some splitting solutions don’t deliver an always accessible result. With the help of a developer pal, I've written my own text splitter, Splinter.js.

Partway through writing an upcoming article for Smashing Magazine, I decided it would be helpful to have a tool to generate text styled like that in my beloved cartoon titles. So I made one.

People don’t buy products from companies they don’t trust. That might sound obvious, but it’s remarkable how many technical websites expect visitors to decode specifications, compare unfamiliar part numbers, and somehow arrive at the right decision on their own.

When I’ve had a few spare minutes, I’ve been adding to and optimising my Magnificent 7 character animations to improve rendering speed. Then I had the idea to build a silly fairground-style shooting game, and I set myself the challenge of keeping it as small as possible.

People don’t buy products from companies they don’t trust. That might sound obvious, but it’s remarkable how many technical websites expect visitors to decode specifications, compare unfamiliar part numbers, and somehow arrive at the right decision on their own.

I’d been tinkering with animations last week and wondered what else I could do with my Magnificent 7 characters. I love surprising people with hidden Easter Eggs, so I decided to use them in a little hidden game.

I had some spare time earlier this week to add a little more finesse to my Magnificent 7 animated graphics, so I added a new background to my blog pages’ illustrations, which has some hidden features.

When I started writing for CSS-Tricks, Geoff and I talked about what to put in my bio. He called me a “veteran” web designer. Geez, I felt old enough. So we settled on “pioneer.” That word stuck—and it’s what inspired the new set of animated pioneers now roaming my website.

Yours truly over at the Smashing Magazine: “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?”

Yours truly over at the Smashing Magazine: “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.”

Website design in the ’90s was messy, but it was also magical. It was frequently fraught with accessibility, performance, and usability problems that took us years to solve. But while we addressed them, we discarded much of what was captivating about early websites and replaced them with conservative, commodity designs.

In my latest Design Chatter video, I talked about how the homelessness charity Crisis aims to be bold and impactful and asked if their website design lives up to those goals? Here’s a written version of that, plus the full versions of my redesigns.

In my latest Design Chatter video, I talked about how the RSPCA rebranded and asked if its website makes the best use of its new look. Here’s a written version of that, plus the full versions of my redesigns.

For most of my career, I’ve encouraged designers and developers to learn from past masters of design and make inspiring web work. Now, I’m launching Stuff & Nonsense Premium Squarespace templates that help them do just that.

The 2024 General Election is just days away, and opinion polls suggest Labour will win with a majority bigger than 1997. Even though I’m not as excited about Labour’s vision as I was then, I still keep my fingers tightly crossed. As I found a few weeks ago, there’s barely anything left of Labour’s labourwin97.org.uk campaign website from its victory in 1997 under Tony Blair. It wasn’t archived by the Wayback Machine, so I imagined what it might’ve looked like.

During the General Election campaign, I’ve been studying political party websites, looking at their user experience and visual designs, and imagining what I’d make if they asked me to work on their designs.

There are less than two weeks before election day, and most of the headlines have come about from things the party leaders have said on the various TV debates. Out of nowhere, Prime Minister Rish! told young people he might take away their driving licences if they refused his national service. Keir Starmer was pushed on his supporting Jeremy Corbyn but not Arsenal, which is an even bigger character flaw. Ed Davey said, well, actually, I can’t remember anything Ed Davey said. But the person I’ve been most impressed with is Carla Denyer, the teeny-tiny confident co-leader of the Green Party.

How I took a website built on Squarespace, worked within a one-week deadline, and turned it into something that reflected Count Binface’s personality instead of the platform’s default design.

Since, I suppose, the late nineties, every time a General Election comes around, the political parties roll out new websites. Having spent time studying Labour’s 2024 campaign website, I wondered what their previous election websites looked like.

Labour has launched its 2024 General Election manifesto. With a campaign slogan that shouts “Change,” I’d expected they’d replace their lacklustre pre-manifesto website design with something which reflects that message. Today, they released a dramatically different design, which inspires and motivates people to vote for their plans. Just kidding.

The Conservatives launched their 2024 General Election manifesto. Its contents won’t come as any surprise to anyone who’s been following politics recently. Having no new ideas doesn’t mean their designers haven’t attempted to introduce a few of their own on the latest version of their website.

So far, Rishi’s announced the general election to the soundtrack of Things Can Only Get B W etter, spoke to reporters outside the Titanic exhibition (spoiler: It sank,) was photographed under an Exit sign, and accidentally grew big ears after announcing a crackdown on Mickey Mouse university degrees. Yes, it’s all going very well. But, even with all these mishaps, Labour can’t take victory for granted. Sadly, their website design sucks. So, I imagined what I’d make if Labour came calling.

In this week’s General Election campaigning, Reform’s Nigel Farage announced he’s standing for a seat in Clacton after promising everyone he wouldn’t stand as a candidate. Farage popped up on BBC Question Time, which, in fairness, promised they’d invite politicians from other parties. Speaking of novelty candidates, I hope the BBC will stand by their promise and invite someone with real common sense policies like Count Binface. The Count has obviously been too busy conquering the galaxy to get his website ready for the election, so I imagined what I’d make if Count Binface came calling.

Finally, the UK general election campaigns are underway, and the parties are pushing their messages to voters. With the Conservatives desperate to cling to power, Labour anxious to seize it, the Liberal Democrats hoping for more MPs, and Reform looking to claim the far-right vote from the Tories, how do I think their website designs are fairing?

For years now, I’ve kept sauce sachets in my car’s glove box—I mean, who actually keeps gloves in that compartment?—just in case I needed it for a burger or bag of chips. That’s why I was really pleased when The Cheeky Condiment Company got in touch asking me to design a website for their condiment-carrying charm bracelets and necklaces.

This week I’ve been diving deeply into how I approach projects, using a recent design for Zombie Hunt as an example. Yesterday, I wrote about catering for small screens. Today’s all about performance and accessibility considerations when coding my designs.

This week I’m diving deep into how I approach projects, using a recent design for Zombie Hunt as an example. Yesterday, I wrote about designing a layout grid. Today is all about catering for small screens.

This week I’m taking a deep dive into how I approach projects, using a recent design for Zombie Hunt as an example. Yesterday, I wrote about designing dark and light themes.. Today is all about the choices I make when designing a layout grid.

This week I’m diving deep into how I approach projects, using a recent design for Zombie Hunt as an example. Yesterday, I wrote about making decisions about colour. Today is all about using colour across dark and light themes.

Two weeks ago, I took a week—away from work on Nozomi Networks—and spent some time working on a redesign for Zombie Hunt. The team are franchising their successful business and needed a new design to attract customers and potential franchisees.

Here’s a quick design tip for making headlines more interesting using text-decoration.

Here’s a quick design tip for improving the readability and style of long passages of running text.

Justin Stahl tweeted, “It’s been tough to recruit product designers with great visual design and an eye for detail. Did we atomic-design-system and product-manager-skills a generation out of having them?” It’s a fair question.

I’m not a framework user. I’ve never once used Bootstrap and I didn’t use 960gs or Blueprint before that. I can understand the benefits of using a framework or off-the-shelf templates, but they weren’t ever for me. Still, I wanted a simple set of layout modules I could call on for design projects, so I developed my own. I call them Layout ❤.

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.

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.

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.

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.

While articles about how to use CSS Grid and Flexbox 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 my series of “ Inspired design decisions “ magazines, I plan to change that.

With modern CSS properties including Grid, Flexbox, Multi-column, and Shapes, designers have countless opportunities to make diverse, and engaging designs. Sadly, many of us haven’t had the memo which gives us permission to make more interesting work, so I decided to write that memo. Feel free to modify the message for your company or organisation and of course, circulate it to the designers on your team.

I’ve written plenty of times before about how important it can be to look offline for inspiration to improve the things we make online. Last year, a few friends and I met in London for an inspiring visit to the Photographers Gallery.

This Art Direction for the Web video course is for web designers and developers who want to understand art direction and how to make digital products and websites better.

Did you buy my Art Direction for the Web video course on Vimeo? If you did, you’re entitled to free copies of the ePub, Amazon Kindle, and PDF versions of my new Art Direction for the Web book.

I didn’t study graphic arts when I was at art school in the ’80s, but I’ve been doing a lot of catching up recently. A few years ago, I became incredibly bored with what was passing for creative design on the web at the time, and so I started to look elsewhere for inspiration for my work.

If, on the off chance: You’re reading this entry using Safari Technology Preview 68, and You’ve already upgraded your MacOS to Mojave 10.14, and You’ve selected Dark appearance in System Preferences You’ll have noticed that I’ve implemented a brand new dark mode version of my website.

For the past few weeks, I’ve been working with Equfund, refreshing their visual identity, redesigning their website, and developing a consistent brand experience for customers across different channels and touch-points.

Over the past few weeks, I’ve been working hard on a new ‘Art Direction for the Web’ video course to accompany my new book and I’m pleased to announce it’s now available to buy on Vimeo and watch on Skillshare.

Over the past few weeks, I’ve been working hard on a new Art Direction for the Web video course to accompany my new book. Today, I wanted to share a preview and the first episode of nine in the course.

One of my earliest blog entries, all the way back in May 2004, was about a favourite technique for creating colour palettes. It was a technique which I’d used for years, even then. Now I have a new take on creating colour palettes, it’s time to revisit that topic.

I’m currently writing a hardboiled web design book about Art Directing for the Web, so in this season of the Unfinished Business podcast I’m discussing art directing with my guests who are some of the most experienced art directors and designers working on the web today. This week I talk about art direction Rob Weychert.

I’m currently writing a hardboiled web design book about Art Directing for the Web, so in this season of the Unfinished Business podcast I’m discussing art directing with my guests who are some of the most experienced art directors and designers working on the web today. This week I talk about art direction Stephen Hay.

I’m currently writing a hardboiled web design book about Art Directing for the Web, so in this season of the Unfinished Business podcast I’m discussing art directing with my guests who are some of the most experienced art directors and designers working on the web today. This week I talk about art direction with ProPublica Design Director, David Sleight.

I’m currently writing a hardboiled web design book about Art Directing for the Web, so in this season of the Unfinished Business podcast I’m discussing art directing with my guests who are some of the most experienced art directors and designers working on the web today. This week I talk about art direction and CSS Grid with Rachel Andrew.

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.

I’m currently writing a hardboiled web design book about Art Directing for the Web, so in this season of the Unfinished Business podcast I’m discussing art directing with my guests who are some of the most experienced art directors and designers working on the web today. This week I talk about art direction with Super Friendly, Dan Mall.

I’m currently writing a hardboiled web design book about Art Directing for the Web, so in this new season of the Unfinished Business podcast I’m be discussing art directing with my guests who are some of the most experienced art directors and designers working on the web today. This week I talk about art direction with former creative director at The Guardian, Mark Porter.

When I was redesigning my website recently I decided on a tongue-in-cheek new footer. Even though the idea behind my help page was tongue-in-cheek, I’m serious about the advice it gives.

Looking back, I’ve redesigned this website roughly every three years. Today I’m proud to show you the new Stuff & Nonsense.

Back in January I wrote about why I believe that style guides and component/pattern libraries should be beautiful as well as functional. That to be effective, they must cater for the different needs of creative and technical people by inspiring as well as informing.

While I’m finalising the table of contents for my ‘shot,’ I’ve been thinking about the things that I regularly do when I’m ‘Designing with a Browser’, one of which is using the contenteditable attribute in the templates that I share with clients.

I can’t quite believe that it’s been almost two years since we launched the previous, Go, go, go, rillas! design of the Stuff & Nonsense website. Today, I’m very pleased to present our next design, ‘It’s the taste.’

Our friends at Code Enigma relaunched their website at DrupalCon in Amsterdam. The launch included the branding we designed for them.

Over the last few months, we’ve been working with a client on the design of a mobile analytics ‘web app.’ I’ll show more of it when we add it to our portfolio, but because lately one or two people have asked me about how we choose colour palettes, I thought I’d share how we came up with the colours for the Elemez app.

I’m a Fireworks man.

Spoiler alert: I’m discussing a theme from the first half of the latest series of Mad Men, season 7, but I don’t mention what happens to major characters. Towards the end of the 1960s, technology had begun to creep into advertising and in ’68, Mad Men’s Sterling Cooper and Partners agency (SC&P) install their first computer, a room-filling, low-humming IBM System/360.

Last week, Cennydd Bowles wrote his Letter to a Junior Designer. It was widely shared and commented on, but while I enjoyed Cennydd sharing his experience—he is, after-all, an experienced product designer—I felt that his message and tone were profoundly negative.

Jeffrey Zeldman on Evolving Responsive Web Design: Some commenters want to use initial-capped Responsive Web Design to mean responsive design as Ethan first defined it, and lowercase responsive design to mean an amorphous matrix of exciting and evolving design thinking. Lyza says soon we’ll stop saying Responsive altogether, a conclusion Andy Clarke reached three years ago.

One of the most important elements in our recent redesign is our new portfolio. We ran out of time during the redesign week and couldn’t include all of the portfolio pieces we’d planned. This week we’re adding more and while we were doing that I discovered something I hadn’t known before about large images and iOS.

If you’re reading this in RSS, switch over to a browser, as we just launched ‘Go, go, go, rillas!’ It’s our late 2013 version of Stuff and Nonsense.

Bob Asbille asked me this week if my Hardboiled Web Design book is worth buying by someone who’s looking to learn about responsive web design.

I’m struggling to believe it quite frankly, but The CSS Zen Garden was planted ten years ago today. I don’t think we should underestimate the importance of The CSS Zen Garden in the history of the web. Its influence still resonates today. Now it’s back accepting submissions and making some of us feel very old.

The Stuff and Nonsense nutty boys header is pretty tall and I decided I wanted to reduce its height for small screens, such as phones, in landscape orientation. When I wrote the CSS to make this happen I made some nutty assumptions. In the spirit of sharing our mistakes:

I hope you enjoyed yesterday’s new, Madness -inspired home page header. We certainly enjoyed making it.

I like to think that at Stuff and Nonsense, our house isn’t so much a place to work as it is a house of fun and although we take the work we do very seriously, we don’t take ourselves too seriously at all. We hope that sense of fun comes across on our site and today we’re putting aside our embarrassment, putting on our baggy trousers and unveiling a new header on our home page.

Jordan Moore (who wears rattlesnake skin shoes) on how to give users the option to “Toggle a Responsive Design On and Off”:

I thoroughly enjoyed hosting another Fashionably flexible responsive web design workshop at New Adventures on Wednesday. I got the feeling that everyone enjoyed the day. I know that I did.

Thibaut Sailly added an extra dimension to the three-lines responsive navigation icon discussion by suggesting that the three horizontal lines could represent a gesture.

I’m glad that the three-lines icon I suggested first, back in March is now being established as a sort of standard.

There’s been a lot written about device testing over the last year. Jeremy instigating open device testing labs has rightly generated a lot of column inches like Smashing Magazine’s Establishing An Open Device Lab. However, I think we need to be clear just what we mean by testing.

It was January, 2011 and an email arrived from a name I recognised. Would you be available for me to phone you to discuss a potential project? I’ve attached an NDA. Could you sign a printed copy, scan and send it back to me? John Jones Jones Olson

Thank-you to everyone who tweeted and emailed about the site. The reaction was overwhelmingly positive. More than I’d hoped for. And I’d hoped for a lot. Some of the comments came with bugs I need to fix and suggestions for improving the site and its performance overall. I’m really grateful for that. A little bit of follow up from yesterday’s site launch.

If you’re reading this in anything other than a browser, open Chrome, Safari or Firefox (if that’s your thing,) because I’ve designed a new website for Stuff & Nonsense.

In the later part of last year, my good friend and colleague David Roessli and I started a new project together — to redesign ISO, the International Organization for Standardization. I wrote about it a little in November 2011.

I’ve been working on a small travel site over the last few weeks and came across an interesting responsive web design challenge.

You know those responsively designed sites where — on small screens like smartphones — navigation is either hidden or set at the bottom of a layout, then revealed when you click a button? Well, I think we need a standard ‘show navigation’ icon for that button in responsive web design.

Brad Frost wrote about Responsive Navigation Patterns, Alexis Fellenius Makrigianni followed up with his thoughts. Both mention a responsive design pattern that was the subject of much debate at this month’s series of Fashionably Flexible Responsive Design Workshops in Australia — transforming a navigation lists into a select menu using scripts like TinyNav.js at small screen sizes.

There’s been much written about responsive design, but so much of it has focussed on aspects of technical implementation rather than about the design decisions that responsive design demands. So next February (2012), I’ll be travelling down-under to Australia to host four, yes four, ‘Fashionably flexible responsive web design’ workshops.