Notes on Playful Interfaces, Real URLs, and a Web That Still Wants to Be Read
For a long time, I have been interested in websites that do not feel like ordinary websites.
Not because ordinary websites are bad. They are often the right answer. A landing page can be clear. A blog can be calm. A dashboard can be useful. A product catalog can be direct.
But the web is wider than those familiar shapes.
A browser can become a small operating system. A portfolio can feel like a desktop. A note can open inside a window. A project can live inside something that resembles Finder, Preview, Photos, or Safari. The interaction can feel closer to exploring a personal workspace than scrolling through another predictable page.
That kind of interface gives a website personality.
But it also creates a serious question:
How do we make a playful desktop-style website remain readable for search engines?
And today, the question becomes wider:
How do we make it readable for AI systems too?
This article is not an argument that every portfolio should become a desktop interface. It is more of a personal note about a tension I care about: how to build something expressive without abandoning the basic dignity of the web.
Because in the end, a website still lives on the web.
It should have URLs.
It should have readable content.
It should have semantic structure.
It should be understandable even when the interface becomes unusual.
The more experimental the interface becomes, the more thoughtful the architecture needs to be.
This note is the first part of a small series about desktop-style websites and SEO.
Here, I am intentionally writing from the principle side: why URLs should remain real, why content should stay semantic, and why desktop UI does not need to become the enemy of SEO.
For the more technical implementation note, I continue the idea here: Building SEO Routes for a Desktop-Style Website in Next.js.
1. The Risk: A Beautiful Interface That Becomes Opaque
A desktop-style website usually begins from a visual feeling.
Windows.
Dock.
Menu bar.
Finder.
Notes.
Preview.
Small interactions that make the website feel alive.
For a human visitor, this can be delightful. The website is no longer just a page to consume. It becomes a place to explore.
But from the perspective of a crawler, the same interface can become unclear.
If everything only exists inside client-side state, several problems appear:
- important content is hidden behind interactions.
- pages do not have stable public URLs.
- metadata becomes too generic.
- internal links become weak.
- content is difficult to quote, index, or summarize.
- AI crawlers may notice the shell but miss the meaning inside it.
This is where many experimental websites become fragile.
They look interesting to humans, but confusing to machines.
I do not think the answer is to avoid experimental UI. That would make the web smaller. The better answer is to design the relationship between interface and content more carefully.
The mistake is not making a website feel like a desktop.
The mistake is letting the desktop layer become the only place where meaning exists.
2. The Principle: One URL, Two Responsibilities
The principle I keep returning to is simple:
The interface can be playful, but the content should remain semantic.
In the earlier version of this website, I thought about this mostly as two separate layers:
- an experience layer for the desktop UI.
- a semantic layer for search engines and crawlers.
That way of thinking was useful, but it can sound as if there are two different websites living side by side: one for humans, one for machines.
I now think the stronger model is slightly different.
One public URL should carry two responsibilities.
The same URL should be able to:
- render meaningful HTML for crawlers, search engines, sharing previews, and AI readers.
- open the right desktop window for human visitors inside the interactive interface.
So the route is not merely an SEO fallback.
The route is the real address of the content.
The desktop window is the experience that opens around that content.
This distinction matters. It keeps the architecture honest. It avoids the feeling that SEO is a hidden duplicate of the website. It also avoids making the desktop interface a closed visual world that only works after JavaScript state has been assembled in the browser.
The page can still be playful.
But the URL remains real.
3. Content as the Source of Truth
The healthiest architecture for this kind of website is content-first.
The window should not be the owner of the content.
The window should be one way to experience the content.
That means the meaningful parts of the website need to live in a format that can be reused:
- article title.
- description.
- category.
- language.
- body content.
- images.
- metadata.
- public route.
In the past, I leaned heavily on local MDX files as the direct runtime source. That worked well while the content was small. It also made writing feel natural because MDX is close to how I think: text first, metadata above it, images beside it, meaning inside the body.
But as the website grows, the runtime source does not need to be the same thing as the authoring source.
The authoring source can still feel like a clean local content folder.
The runtime source can be Firestore and Storage.
The important part is not where the content sleeps. The important part is that the system keeps the same shape of truth:
content source
-> publish step
-> runtime content store
-> one public route
-> semantic article HTML
-> desktop window UI
-> metadata
-> sitemap
-> llms.txt
-> llms-full.txt
This keeps the writing workflow human-friendly while keeping the website scalable.
I can still write like a writer.
The website can still render like a website.
The desktop can still feel like a desktop.
And the content can still be understood by crawlers without depending on a visual trick.
4. Desktop UI Is Not the Opposite of SEO
There is a common assumption that creative interfaces are naturally bad for SEO.
Sometimes that is true, but not because the interface is creative.
It becomes true when the interface hides the web.
A desktop-style website can still respect the fundamentals:
- canonical URLs.
- page-specific metadata.
- Open Graph images.
- structured headings.
- readable article content.
- sitemap entries.
- robots.txt.
- internal links.
- clear route hierarchy.
- AI-readable supporting files.
The goal is not to make the website boring for the sake of crawlers.
The goal is to make the website legible.
There is a difference.
An interface can be expressive while the underlying page remains understandable. A note can open inside a beautiful Notes window, while the route behind it still contains a semantic article. A project can appear inside a Preview-style panel, while /work/project-name remains a clean public address. A quote can feel like part of the desktop experience, while /quotes/... remains readable, shareable, and indexable.
This is where the desktop metaphor becomes stronger, not weaker.
It is no longer just decoration.
It becomes the human layer on top of a serious information architecture.
5. AI Readability Is Just Clarity With a Wider Audience
AI SEO is still a developing area, but the underlying principle feels familiar:
Machines benefit from clear content.
Search engines need it.
Assistive technologies need it.
AI crawlers need it.
Future readers need it.
Even we, as builders, need it when we return to the project months later.
For a desktop-style website, this means the content should not only be visually available. It should also be textually clear.
Some patterns matter:
- headings should describe the real structure of the page.
- metadata should match the actual content.
- bilingual content should be explicit.
- images should support the article instead of replacing meaning.
- routes should be stable.
sitemap.xmlshould reflect the public surface.robots.txtshould communicate crawl intent.llms.txtandllms-full.txtcan help expose a cleaner map of the content.
The goal is not to trick AI.
The goal is to remove unnecessary ambiguity.
I like this mindset because it feels less defensive. It does not treat crawlers as enemies. It treats clarity as hospitality.
If a human visitor arrives, the website should feel alive.
If a search engine arrives, the website should be structured.
If an AI reader arrives, the website should be explainable.
Those goals can live together.
6. The Principle Model: A Desktop Experience Built From Real Routes
The model I like now is more mature than my earlier version of this idea, but in this article I do not want to dissect it too deeply at the level of files, components, and loaders.
That belongs in the implementation note.
Here, the principle is enough.
The desktop is still the main feeling.
There can still be:
- dock apps as entry points.
- Finder-like windows for collections.
- Preview windows for projects.
- Notes windows for writing.
- Photos windows for visual exploration.
- Spotlight for quick discovery.
- settings and account windows for app-like flows.
But the public URL is no longer a secondary concern.
When someone opens an insight route, the page can render semantic content for crawlers and still open the Notes window for the user.
When someone opens a work route, the project can be represented as a real page and still feel like part of the desktop.
When someone opens a quote route, the quote can be readable as content and still appear in the interface.
So the architecture is not:
one page for the UI
another page for SEO
It is closer to:
one public URL
-> semantic content for the web
-> desktop window for the experience
This feels cleaner to me.
It also feels more honest.
The desktop interface does not pretend the web does not exist. And the semantic route does not pretend the desktop interface is just decoration.
They support each other.
7. Why This Matters for a Personal Website
A personal website is not only a portfolio.
It is also a memory system.
It contains work, writing, experiments, decisions, values, taste, and sometimes even unfinished thoughts. It becomes a small public map of how someone thinks.
That is why the structure matters.
If the website is only visual, it may impress quickly but disappear from long-term understanding.
If the website is only semantic, it may be clear but lose personality.
The interesting space is in the middle:
Readable enough for machines.
Expressive enough for humans.
Structured enough to grow.
Personal enough to feel alive.
For me, the desktop metaphor works because it feels close to how creative work actually happens. Things are not always linear. Notes sit beside projects. Documents sit beside images. A product, an idea, and a technical article may live near each other. The interface can reflect that.
But the web still needs a map.
That is what routes, metadata, sitemap, and semantic HTML provide.
They give the experience a spine.
8. The Trade-Off Is Worth Naming
This architecture is not the simplest version of a website.
A normal blog would be easier.
A plain portfolio would be easier.
A static landing page would be easier.
But easier is not always the point.
The point is to build a system that can carry the personality of the interface and the seriousness of the content at the same time.
That requires discipline:
- the window renderer should care about experience.
- the SEO renderer should care about semantic HTML.
- the content loader should care about consistency.
- the publish flow should care about freshness.
- the route model should care about public meaning.
If these responsibilities blur too much, the system becomes heavy.
But when the boundaries are clean, the result feels calm.
The website can be playful on the surface and disciplined underneath.
That combination is what I am trying to build.
Closing
I do not think a desktop-style website should behave like a normal website in every detail.
If it does, the interface loses its character.
But I also do not think creative UI gives us permission to ignore the fundamentals of the web.
The healthier approach is not to choose between playful interface and strong SEO.
The healthier approach is to let each part do its job.
Let the desktop become the experience.
Let the URL remain the address.
Let the content stay semantic.
Let metadata explain the page.
Let sitemap and llms.txt provide the map.
Let search engines and AI readers find something clear.
Strong SEO for an experimental website is not about making the design less creative.
It is about making the architecture more thoughtful.
And when that works, a desktop-style website can become more than a visual concept.
It becomes a serious web experience with a soul.
For the technical version of this idea, I wrote a deeper implementation note here: Building SEO Routes for a Desktop-Style Website in Next.js.
