Why we've redesigned Flying Penguin three times this year

A website I can keep experimenting with

A template is a useful place to start. It gives you something to react to: the size of the heading, where the image sits, how the sections follow each other. Once I can see it, I start thinking about what would suit Flying Penguin better.

That might mean a stronger opening, more space around the words or a colour change that pulls a section together. Sometimes the first version has too much going on. Getting it onto a real page makes that much easier to spot than discussing a design in the abstract.

I like having that freedom on my own site. I can follow an idea, look at the result and keep refining it. It is part of how I stay interested in the work, and it gives me something concrete to show when a similar design question comes up.

New ideas, still recognisably Flying Penguin

The penguin, the navy and the cyan give the site a familiar starting point. There is plenty to explore within that: a darker opening on one page, a lighter background on another, different proportions for the images and text.

The home page uses a bold headline and a large visual area to introduce the business. The pricing page has movement running behind its opening section. Those are different treatments, but they share enough colour and typography to feel at home together.

Modernity is part of the appeal for me. I want the website to feel like something I am actively working on. The interesting design decision is how far to take each idea while keeping the information comfortable to read and easy to find.

Source: Flying Penguin: the current home page; Flying Penguin: the current pricing page

The blog is a good example of that process

The blog header needed a bit more life. The white background worked, but I wanted depth and movement across the width of the page. The result is a light, animated background with an illustration related to the article. The title, author, date and reading time stay still.

Then there was the article library. I liked the illustrated featured article enough to want that treatment on all the cards. Each article now gets its own subject illustration and a short description, so you can get a feel for what you are about to read.

There was also too much to scroll past before reaching the articles. Bringing the introduction into one heading and a short line helped the library get to the point sooner. That was a small change, but it mattered to how the page felt.

At the bottom of each article, Worth reading next has a pale blue background and three illustrated cards. Seeing that section with two oversized cards made the inconsistency obvious. Using three across the template gives each article a more considered finish and a useful next step.

Source: Flying Penguin: the article library

The details decide what stays

I enjoy the first impression, then I want to know what happens when someone actually uses the page. Can they read the heading on a phone? Does a long title fit its card? Can they find the service or article they came for? A design has to survive those ordinary moments.

Movement needs the same attention. Here, the decorative animation follows the device's reduced-motion preference, and there is a motion control in the footer. The illustrations also have a complete static version. The page should still make sense when the movement stops.

For these blog updates, the checks include phone, tablet and desktop widths, keyboard navigation and the links between articles. There is also a visual check of the illustrations and their card crops. A successful build is useful evidence, but I still want to look at the page.

What that means for your website

For a client project, I start with what the business needs the website to do and the scope we have agreed. The useful change might be a new page, clearer navigation or a better enquiry form. A full redesign is one possible piece of work, with its own reasons and budget.

The value of experimenting on Flying Penguin is having working examples to discuss. We can look at an illustrated card, an animated header or a quieter layout and talk about whether it suits your content. It helps turn a phrase like 'make it feel more modern' into something you can see and try.

I expect I will keep finding things I want to improve here. I enjoy building websites, and my own is a place where that enthusiasm can show. If you spot a new layout or a different bit of movement on your next visit, you will know what has happened: I had another idea and wanted to see it working.