A Website That Looks Like It Was Printed, Not Rendered

The current design of ewancroft.uk is a major departure from the website I had before it.

That was deliberate.

I wanted something that truly stood out.

My previous designs felt too… conservative. Not necessarily because I disliked the style. I still love flat, minimalist design. I like clean interfaces, strong typography, simple shapes and systems where everything has a clear purpose.

That aesthetic is still very much part of how I think about design.

I just wanted to make something different.

The previous site was restrained in a way that increasingly felt too familiar. I had spent a long time working within that visual language, and eventually I wanted to see what would happen if I pushed the other way.

I wanted this one to look like it could only be mine.

More importantly, I wanted it to feel like something I actually wanted to look at.

I had been thinking about pop art, bold colours, comics, printed graphics and the sort of visual language that isn't afraid to be excessive. Large lettering. Hard outlines. Blocks of colour. Graphic symbols. Things deliberately pushed too close to the edge. A little bit of visual chaos, but still controlled enough that it feels intentional.

I didn't want to make another version of the same site with slightly different colours, a new font and a few rearranged components. I wanted to break the visual language and start again.

But I didn't want to break the underlying architecture.

That distinction matters.

The website can look completely different without throwing away the systems underneath it. The content is still external and AT Protocol-native. The site fetches my publications, documents, profile data, links, status information and other records from AT Protocol, then turns that data into the interface you see.

The presentation changed dramatically.

The foundation didn't.

A deliberate break

The interesting thing about a redesign is that continuity doesn't necessarily mean keeping the same visual language.

In fact, I think this redesign needed to break it.

I still like the clean, flat and minimalist approach I used before. I haven't suddenly decided that minimalism is boring or that every website needs to look like a poster.

Sometimes a very simple interface is exactly what a design needs.

I just didn't want to make another one this time.

The previous site had a much more conservative visual vocabulary. It was structured, restrained and typography-led. There was a lot of emphasis on clean information architecture and keeping everything under control.

That worked.

Eventually, though, I found myself wanting to make something that didn't feel quite so controlled.

So I went in almost the opposite direction.

The new site is louder. It is more physical. It has harder edges, stranger little objects, enormous type, bold seasonal colours, comic-like labels and things that look as though they belong on a printed sheet rather than inside a browser.

There is a deliberate pop-art influence in it. Not as a literal recreation of any particular artist or movement, but in the willingness to make colour, scale and graphic form do most of the talking.

The site doesn't particularly care about being subtle.

That contrast is intentional.

I wanted the redesign to be obviously new without becoming anonymous.

The goal wasn't to reject the old aesthetic. It was to try something I hadn't done before while still making it recognisably mine.

Changing the surface, not the foundation

There is a temptation with a visual redesign to rebuild everything at once.

I didn't want to do that.

As you may know, my website is built around an AT Protocol-native publishing stack using Standard.site and Leaflet. My blog documents aren't just Markdown files sitting inside the website repository. Their authoritative content lives in AT Protocol records.

The site retrieves those records, resolves the publication and document data, hydrates referenced records and renders the resulting structured content through its own components.

That means the website is effectively a presentation layer over a content system that exists independently of the website itself.

That architecture is important to me.

I can redesign the entire interface without having to move my writing into a new CMS. I can change the way a Leaflet document looks without changing where the document actually lives. I can publish through the same underlying system and have the website present it differently.

The new design therefore isn't a replacement for the architecture.

It is a new interpretation of it.

That is also why I was comfortable making such a drastic visual change. I wasn't throwing away the foundations just because I wanted the walls to look different.

Pop art, comics and ink

The visual language started with a fairly simple idea: I wanted the website to have the energy of something printed.

Pop art was part of that.

So were comics.

I like the way comic artwork can use enormous blocks of colour, heavy outlines, exaggerated typography and small graphic elements without apologising for any of it. It can make something as simple as a label or a speech bubble feel like part of the composition.

That gave me a useful direction for the website.

The design uses paper, black and seasonal spot colours as its basic material. The colours aren't supposed to feel like ordinary UI accents. They behave more like ink.

They overlap. They misregister. They sit behind and on top of typography. They create little collisions between different parts of the interface.

The result is somewhere between a poster, a comic page, a risograph print and a game menu.

That mixture is much closer to what I had in my head.

I wasn't trying to make a perfectly accurate imitation of any of those things. I wanted to borrow the visual instincts: bold colour, graphic shapes, strong contrast, physical texture and a willingness to make things large.

The website should look like it could exist as an object.

That is a very different goal from making a website look sleek.

The backgrounds matter too

One thing I have become particularly interested in is background art.

I might eventually push the site further in that direction, taking some inspiration from the environmental artwork of Steven Universe. Not by putting characters from the show on my website, but by borrowing the idea that a background can have its own visual identity.

What I particularly like about that sort of background art is that it can be incredibly simple while still making a place feel distinctive. Simplified landscapes, strong silhouettes, unusual shapes, large areas of colour and strange little environmental details can do a lot without turning into visual clutter.

That is interesting to me because it suggests another way of thinking about a website background.

It doesn't have to be a gradient.

It doesn't have to be a texture.

It doesn't have to be a giant photograph sitting behind some text.

It can be a place.

I like the idea of the homepage gradually becoming an illustrated environment: a moon hanging over the composition, strange silhouettes along the bottom, abstract landscapes, little geometric forms, perhaps some gem-like or crystalline shapes, and the enormous typography sitting inside the scene rather than simply sitting on top of a blank background.

Other sections could have their own environments too.

A project shelf could feel like an illustrated landscape. A writing section could have a different horizon. The seasonal system could change the palette and scenery without changing the underlying composition.

That feels much more interesting to me than adding another generic decorative background.

It also fits the rest of the site surprisingly well. The moon, seasonal colours, sigils and physical-print metaphor already suggest that this website is a place rather than merely a collection of pages.

The background art could make that explicit.

Cut edges, not rounded corners

One of the clearest rules of the new design is that things are cut rather than rounded.

There are almost no rounded rectangles. Cards don't float inside soft shadows. Buttons aren't pill-shaped. Containers don't have enormous radii because the current design language says they should.

Things have edges.

That sounds like a small distinction, but it changes the entire character of an interface. Rounded corners make things feel soft, polished and interchangeable. Hard edges make them feel assembled.

That is much closer to what I wanted.

The site is meant to have a little bit of physicality to it, even though every part of it is still HTML and CSS.

It also fits the comic and print influences better. A thick border around something feels more like a piece of printed artwork than another generic rounded web card.

Typography does most of the work

Typography is probably the most obvious connection between the different parts of the design.

There isn't one typeface doing everything. Different kinds of information get different voices.

The enormous poster typography uses Archivo. It is deliberately excessive: huge, compressed, sometimes almost too large for the screen. The main name on the homepage is less like a conventional heading and more like something printed across a poster.

Body text uses Atkinson Hyperlegible Next because readability matters more than aesthetic purity.

Small interface labels use Pixelify Sans, giving things such as tags, metadata and status information a slightly game-like and comic-like character.

Code gets JetBrains Mono.

Those voices are deliberately different, but they belong to the same system. The website can move from enormous poster text to tiny pixel labels without feeling as though another designer took over halfway through the page.

The typography is allowed to have a personality.

That matters.

The website has a spine

The navigation is treated almost like the spine of a physical publication.

On a desktop screen it runs down the side of the page. On smaller screens it becomes a bar along the bottom.

That is another place where the design departs from conventional portfolio layouts. Navigation doesn't sit politely at the top and disappear into the background. It is part of the object.

It also makes the site feel slightly like an interface from an old piece of software or a physical publication with a labelled edge.

That was the point.

The website isn't pretending to be a neutral container for the content. The interface itself is part of the identity.

Nothing needs to float

Modern web design has a particular obsession with floating things.

Floating cards. Floating buttons. Floating glass panels. Floating everything.

I wanted much less of that.

The new site uses borders, rules, overlaps, colour plates and typography to establish hierarchy instead. Sections can sit directly against one another. Lists feel like lists rather than collections of cards. Small labels look attached to the things they describe.

It is less about creating little islands of content and more about constructing one composition.

That is why the design can feel more like a page than an application, even though underneath it is still a fairly complex web application.

The interface is assembled rather than floated.

The homepage is a poster

The homepage is where most of these ideas collide.

It isn't trying to be a conventional personal homepage with a hero, a subtitle and a couple of calls to action.

It is closer to a poster.

There is the enormous name, the moon, the seasonal colours, the little status elements, the nametag and the deliberately imperfect registration between colour layers. The various pieces are allowed to occupy the same space rather than being separated into neat little boxes.

Some of that is decorative. Some of it is information. The important thing is that they are allowed to coexist.

The moon and sigils give the page some of its stranger personality. The chips and labels make it feel more like an interface. The oversized name anchors everything like a piece of poster typography.

It is not supposed to look like a conventional portfolio hero.

The homepage should tell you what sort of place you have arrived at before you have read every word on it.

The cartridge shelf

The same thinking carries through to projects and applications.

Rather than presenting everything as a conventional grid of project cards, the site treats some of this work more like a collection of cartridges or objects on a shelf.

That metaphor works particularly well for me because the things on the site aren't just portfolio pieces. They are actual software projects, experiments, tools and pieces of an ongoing personal archive.

They have a history.

I wanted the interface to acknowledge that.

A project doesn't need to be presented like a SaaS landing page just because it happens to be software.

The little things are part of the identity

Some of my favourite parts of the design are also the easiest to miss.

There are little references to Scotland and England. There is the Saltire. There is tartan. There are other flag-related details. There are little bits of Gaelic and other pieces of my identity scattered through the interface.

They aren't there because I needed to fill empty space.

They're there because this is a personal website.

The Saltire in particular is an example of something that would probably look out of place on a generic developer portfolio. Here, it doesn't. It belongs to the person the site is actually about.

The same goes for the werewolf stuff.

Yes, there are werewolf Easter eggs.

Typing certain words can trigger things like a moonrise, a howl or the rather more dramatic “change”, complete with claw marks and a red vignette. There is also a full-moon interaction, because apparently I decided that a website about a programmer, a Pagan, a moon and a wolf needed to acknowledge the obvious.

These are deliberately ridiculous.

That is part of why I like them.

A personal website doesn't need every detail to be justified as professional branding. Some things can exist because they are funny, because they are personal, or because I thought they would be cool.

The important part is that they are mine.

The same principle applies to the little seasonal details, the sigils, the moon phases and the various visual references that aren't immediately explained to someone visiting for the first time.

The site rewards paying attention.

Small details are allowed to be strange

A personal website doesn't need every element to justify itself as a conversion optimisation.

Some things can simply be there because I like them.

The moon. The sigils. The strange little labels. The seasonal shifts. The physical metaphors. The occasional bit of visual misregistration.

The comic-like chips and little status elements.

The oversized type that sometimes gets uncomfortably close to the edge.

The Saltire appearing where it shouldn't necessarily be expected.

A werewolf suddenly deciding that the interface needs claw marks.

Those details are useful precisely because they aren't trying to be universally appealing.

This is my website.

It doesn't need to look like the safest possible interpretation of a personal website.

But it also doesn't need to stay like this forever. It absolutely won’t, I love designing fresh.

Accessibility is part of the design

The visual language is deliberately loud, but that doesn't mean accessibility gets sacrificed for it.

That is an important distinction.

The typography still has to be readable. Interactive elements need clear focus states. Motion respects reduced-motion preferences. The layout needs to work at different viewport sizes. Decorative effects shouldn't turn the entire screen into visual noise.

I have also deliberately avoided covering the site in static paper grain. It might look convincing in a mock-up, but a permanent layer of visual noise isn't particularly useful when the rest of the design is already doing quite a lot. Not to mention I have visual snow to begin with.

The aesthetic has to work with the person using the site, not against them.

That is especially important on a website that is supposed to represent me.

Accessibility isn't something I want to bolt onto an otherwise inaccessible aesthetic. It is part of the design language.

Dark mode is black stock

Dark mode isn't just the light theme with the background colour inverted.

The idea is that the same imagined print has been produced on dark stock.

That changes the way the ink behaves. The blend mode changes with it, the paper becomes the dark material and the seasonal colours are adjusted accordingly.

It is still the same visual language, just a different physical version of it.

That is the kind of continuity I care about.

It still has to be mine

This redesign is deliberately very different from what came before it.

That was the whole point.

I wanted to try something louder without deciding that the quieter things I liked before were somehow wrong.

I still love flat design. I still love minimalism and still like clean interfaces and carefully constructed systems.

I just wanted to make something else.

And knowing me, this probably isn't the final form of the site anyway.

I tend to keep tweaking it.

A component gets adjusted. A colour changes. Some interaction gets moved somewhere else. A strange idea turns into an Easter egg. Something that looked good on desktop turns out to need nudging on mobile. Then I change something else because I had another idea.

That is part of having a personal website.

It doesn't need to be finished in the traditional sense.

The content is still mine. The publishing system is still mine. The AT Protocol records are still the source of truth. The website still acts as the presentation layer around that underlying system.

What changes is how I choose to express all of it.

The thing that needs to survive a redesign isn't the exact layout, colour palette or component library. It is the sense that an actual person made the thing.

That includes the big decisions and the tiny ones.

The typography. The moon. The Saltire. The strange little Easter eggs. The werewolf. The seasonal colours. The background art I keep wanting to push further.

The things that make absolutely no sense on a generic portfolio but make perfect sense once you know whose website you're looking at.

The previous ewancroft.uk was still recognisably mine. So is this one. They just express that identity in completely different ways.

And the next version might be different again.

The new design is louder, bolder, stranger and more physical. It takes cues from pop art and comics, from printed matter and game interfaces, from illustrated environments and from the simple idea that a website doesn't have to behave like every other website.

It doesn't try to disappear behind good taste.

It has a point of view.

It looks like a website, but it also looks like something else.

That is what I wanted.

Not a template. Not a portfolio skin. Not a polished interface designed to be universally agreeable.

Something that stands out.

A place on the internet with its own visual language.

Mine.