The web is still a very young medium, and it has been influenced more than anything else by print media design. There is so much more that can be done with text on a screen than is being done today. Citations, drawing, chat, speech-to-text. There are opportunities everywhere, and the bar is low! If we are serious about unlocking the value of knowledge we should consider how to improve every part of the knowledge production stack, and that includes reading. As Laurel Schwulst says:
Imaginative functionality is important, even if it’s only a trace of what was, as it’s still a sketch for a more ideal world.
There’s more room for spatial concepts to become part of our web browsing experience.
One example is an idea I call “trails.” It’s based on the story of Hansel and Gretel walking through the forest and leaving a trail of breadcrumbs behind them, so that they could find their way back later. What if you could do this on the web?
A breadcrumb in this case is a single pixel that you can place in a precise location on a webpage. Placing a breadcrumb could be as simple as Option + click. While navigating the web, you could leave breadcrumbs on different pages you find interesting over the course of a browsing session. When you’re done, that sequential “trail of breadcrumbs” would be saved. You could then jump back into the trail and navigate “forward” and “backward” through the things you found interesting in that browsing session. Or share the trail with a friend, and they could step through your spatial path of navigating the web.
Dame Wendy Hall, at the University of Southhampton, sought to extend the life of the link further in her own program, Microcosm. Each link made by the user was stored in a linkbase, a database apart from the main text specifically designed to store metadata about connections. In Microcosm, links could never die, never rot away. If their connection was severed they could point elsewhere since links weren’t directly tied to text. You could even write a bit of text alongside links, expanding a bit on why the link was important, or add to a document separate layers of links, one, for instance, a tailored set of carefully curated references for experts on a given topic, the other a more laid back set of links for the casual audience.
Thinking through building some kind of “web of books” I realized that we could use something similar to RSS to build a kind of decentralized GoodReads powered by indie sites and an underlying easy to parse format.
I created a proof of concept by converting my own bookshelf into a JSON file https://tomcritchlow.com/library.json.
If you think of several sites publishing their bookshelf as a library.json file you can imagine a bookshelf “feed reader” that let’s you keep track of friends bookshelves
macOS software that adheres to craft — Things or Carbon Copy Cloner or BBEdit or Sublime Text (which, despite not being “native native” feels so solid and so responsive you’re willing to overlook its quirks) or Bear or Alfred or iA Writer or Keynote (arguably one of the best pieces of macOS software of all time) or anything by Panic, heck, even Terminal or Quicken (which, against all rational expectations is just a joy to use)5 — exists in troves, the existence of such proves to the Slacks or Twitters or Adobes of the world that it’s not impossible nor rare to produce craft-oriented software in service to user fluency, and still make a profit.
In fact, there’s a business case to be made for being craft- and fluency-focused. We’ve seen entire companies with business models that could be summarized as “Bloat-Free X” emerge in recent years. Affinity is bloat-free Adobe. Install Adobe Creative Cloud on your laptop and marvel at the no fewer than a dozen processes whirling around in the background for unknown purposes. It’s no surprise Affinity Photo and Publisher and Designer have taken off. Sketch’s main feature for many years was simply: Not Adobe.
And the web! When you care — when you really give a shit — the web is awe inspiring. I still can’t believe Figma is web-native (also born from the Not Adobe camp). That an application can feel so powerful, so fast, so well-crafted and be fully web-based should be a kind of lighthouse-archetype for all other sites lost in a sea of complexity and muck and unnecessary frameworks.
When a site is done with care and excitement you can tell. You feel it as you visit, the hum of intention. The craft, the cohesiveness, the attention to detail is obvious. And in turn, you meet them halfway. These are the sites with the low bounce rates, the best engagement metrics, the ones where they get questions like “can I contribute?” No gimmicks needed.
What if you don’t have the time? Of course, we all have to get things over the line. Perhaps a challenge: what small thing can you incorporate that someone might notice? Can you start with a single detail? I didn’t start with a poached egg in my breakfast, one day I made a goofy scrambled one. It went on from there. Can you challenge yourself to learn one small new technique? Can you outsource one graphic? Can you introduce a tiny easter egg? Say something just a little differently from the typical corporate lingo?
We didn’t have Google in the early days. Other search engines like Lycos, Excite and Northern Lights did exist but were nowhere near as efficient as modern search engines. Finding something you were interested in was not as simple as typing a few words and getting to that information in one click.
No, the web was much more of an adventure. It was a place that you wandered to discover new areas, like exploring the vast open seas. A new virtual space that lead to all kinds of strange, interesting, exciting places. This is what the web was like, at least, in our collective imagination.
It is worth remembering a website does not have to be a product; it can also be art. The web is also a creative and cultural space that need not confine itself to the conventions defined by commercial product design and marketing.
If you run a website and you put official share buttons on your website, use intrusive analytics platforms, serve ads through a third-party ad network or use pervasive cookies to share and sell data on your users, you’re contributing to a user-hostile web. You’re using free and open-source tools created by thousands of collaborators around the world, over an open web and in the spirit of sharing, to subvert users.
Do we want the web to be open, accessible, empowering and collaborative? Free, in the spirit of CERN’s decision in 1993 or the open source tools it’s built on? Or do we want it to be just another means of endless consumption, where people become eyeballs, targets and profiles? Where companies use your data to control your behaviour and which enables a surveillance society—what do we want?
In the television show Masterchef there was an episode where the judges did a test on what they call “basic skills”. One of the judges often says that in order to be a “true chef”, you must know how to quickly and finely cut onions.
…This was really bothering me and I am stubborn so I wanted to win this fake argument really badly so I looked up why the way one cuts onions is important: as it turns out, the shape and even the surface area affect the end flavour. I thought the whole “chop chop chop” was about performance in the kitchen. Cut quickly to serve quickly! I was wrong.
My take is that the web could feel warmer and more lively than it is. Visiting a webpage could feel a little more like visiting a park and watching the world go by. Visiting my homepage could feel just a tiny bit like stopping by my home.
A website is its own, singular thing. We know it isn’t a book, a TV show, a film, or a song, but our language is limited to talking about it in those restrictive boxes. A website is a mix of all of those things, and none of those things. It is influenced by place and time. A website changes with age. It can evolve and regress.
It was then I wondered if the problem wasn’t that web design lacked its own Emigré. What if we actually lacked a shared language to critically discuss web design? Art, architecture, and even graphic design, have critics and historians that give context to new work through the lenses of culture and important work from the past.
A personal site offers a dedicated place to experiment across the entire tech-stack; not a deliverable for a client that is handed over and then never touched by me again. A personal site is a place to try out that new API, see what can be done with CSS, truly discover what the Web can be.
Students traditionally learn art and design by studying the masters, analyzing, sketching and interpreting the grand visions of the past. In doing this, they get to understand the ideas, concepts and motivations behind the visual form.
In user interface design, this practice is curiously absent.
I believe that small websites are compelling aesthetically, but are also important to help us resist selling our souls to large tech companies. In this essay I present a vision for the “small web” as well as the small software and architectures that power it.
There was a time when owning digital space seemed thrilling, and our personal sites motivated us to express ourselves. There are signs of a resurgence, but too few wish to make their digital house a home.
I’ve shaped this timeline over five months. It might look simple, but it most definitely was not. I liken it to chipping away at a block of marble, or the slow process of evolving a painting, or constructing a poem; endless edits, questions, doubling back, doubts. It was so good to have something meaty to get stuck into, but sometimes it was awful, and many times I considered throwing it away. Overall it was challenging, fun, and worth the effort.
A succinct way I’ve framed the split is that a front-of-the-front-end developer determines the look and feel of a button, while a back-of-the-front-end developer determines what happens when that button is clicked.
Ultimately this redesign has been a study in less, trying to dig deep and find out what it is I actually want for this site. A momentary visual “wow”, or quality content that is worthy of your attention? I decided on the latter, with less visual clutter it is far harder to try obscure bad or shallow writing behind a veneer of pretty images and effects. Posts may take longer to write but I hope this new design will push towards content that is worthy of your time.
URLs (Uniform Resource Locators) have rapidly become the standard method for specifying how to access information on the Internet. Although mostly used on the World Wide Web, URLs are also becoming more common for specifying locations for other distributed Internet services such as Gopher and anonymous FTP. Internet users see URLs both online and in print, and therefore URLs have visual interfaces. This paper gives an overview of many of the issues that concern the visual and user interfaces of URLs.
After the first websites demonstrate the commercial and aesthetic potential of the web, the media industry floods the web with a surge of new content. Amateur webzines — which define and voice and tone unique to the web — are soon joined by traditional publishers. By the mid to late 90’s, most major companies will have a website, and the popularity of the web will begin to explore. Search engines emerge as one solution to cataloging the expanding universe of websites, but even they struggle to keep up. Brands soon begin to look for a way to stand out.
What I sense is a real tension between the web as we know it, and the web as it would be. It’s the tension between an existing medium, the printed page, and its child, the web. And it’s time to really understand the relationship between the parent and the child, and to let the child go its own way in the world.
Some of the web’s early richness has gradually been getting lost in a sea of landing pages, hero images, sans-serifs, and calls-to-action. “Web brutalism” is a valid reminder that there is still a world of possibilities out there, if we are bold enough to break free of our UI kits and stock photos.
When brutalist web design isn’t going all in on rationalism and functionality, it’s laughing in the face of rationalism and functionality. All clear?
The term has grown to encompass approaches that are in many senses at odds with each other. Indeed, Pascal Deville, who founded the Brutalist Websites directory after coining the term in 2014, thinks the style has splintered into three micro-stylistics:
Generally speaking (and ignoring questions of styling, API availability, etc.), an ideal Web annotation pattern follows these principles:
Annotations appear in close visual proximity to the primary content.
Their design neither distracts from nor hides the primary content.
The preceding principles are followed regardless of screen width.
The only pattern I’ve found that meets these criteria is FiveThirtyEight’s.
…As it turns out, FiveThirtyEight didn’t invent this pattern. It likely originated in medieval illuminated manuscripts which contain “interleave notes” — comments written literally between the lines.
So much about [Gerhard Richter’s painting process] reminds me of designing and building for the Web: The unpredictability, the peculiarities of the material, the improvisation, the bugs, the happy accidents. There is one crucial difference, though. By using static wireframes and static layouts, by separating design and development, we are often limiting our ability to have that creative dialogue with the Web and its materials. We are limiting our potential for playful exploration and for creating surprising and novel solutions. And, most importantly, we are limiting our ability to make conscious, well-informed decisions going forward. By adding more and more layers of abstraction, we are breaking the feedback loop of the creative process.
Project Xanadu was the first hypertext project, founded in 1960 by Ted Nelson. Administrators of Project Xanadu have declared it an improvement over the World Wide Web, with the mission statement: “Today’s popular software simulates paper. The World Wide Web (another imitation of paper) trivializes our original hypertext model with one-way ever-breaking links and no management of version or contents.”
In the early days, design systems promised us more consistent interfaces, more collaborative teams, and improved shipping times. While they’ve certainly delivered on some of those fronts, they’ve introduced new challenges too. Let’s talk through what’s working well—and what could be working better—as we take a closer look at the systems between us and our work.
I’ve come to the conclusion that “enterprise web development” is just regular web development, only stripped of any joy or creativity or autonomy. It’s plugging a bunch of smart people into the matrix and forcing them to crank out widgets and move the little cards to the right.
In these structures, people are stripped of their humanity as they’re fed into the machine. It becomes “a developer resource is needed” rather than “Oh, Samantha would be a great fit for this project.” And the effect of all this on individuals is depressing. When people’s primary motivation is to move tickets over a column, their ability to be creative or serve a higher purpose are almost completely quashed. Interaction with other humans seems to be relegated to yelling at others to tell them they’re blocked.
Reading “AS PER THE REQUIREMENTS” in tickets makes me dry heave. How did such sterile, shitty language seep into my everyday work?
In our cultural obsession with billionaire entrepreneurs we laud new features more than the maintenance and incrementalism work of making old features better and more accessible. Maintenance looks like red minus signs in the spreadsheet. New features look like green plus signs. New features look better on our LinkedIn profiles. New features have that pizzazz, baby.
When gardening, the building of planters and initial planting is a very short process. The majority of your time is spent nurturing and monitoring growth. I personally feel the struggle between maintainer work and new shiny feature work. I enjoy that new feature smell but I know that my day-to-day is more like a janitor on a boat mopping up someone else’s barf. In terms of metaphors, the gardening metaphor is certainly better, and it acknowledges that design and development still tend to be more creative endeavors.
In her piece “A drop of love in the cloud” (2018), artist Fei Liu writes about the like/heart button as a flattening affordance of giving affirmation and love. The text-editor provides a much more expressive input.
But even people who can’t communicate well because of language barriers can express love through actions, like cooking food. Can we create other “love inputs” that might allow us to "reach across the chasm of a seamless signal"?
What is expressing “real” love or affirmation about? Is it about effort, thoughtfulness, generosity, something else? What might a thoughtful or generous interface feel or behave like?
I’m beginning to suspect that software, and more conspicuously the Web, is fundamentally the wrong shape for the archetype of the construction project.
Today I made an Exit page. So many people end their visit by hitting the Back button on their browser. The exit page is a last attempt to get them to explore the Blog Directory to find an entertaining blog. Or failing that to try a search on a search engine they may have never tried before.
"Every website that’s made me oooo and aaahhh lately has been of a special kind; they’re written and designed like essays. There’s an argument, a playfulness in the way that they’re not so much selling me something as they are trying to convince me of the thing. They use words and type and color in a way that makes me sit up and listen.
And I think that framing our work in this way lets us web designers explore exciting new possibilities. Instead of throwing a big carousel on the page and being done with it, thinking about making a website like an essay encourages us to focus on the tough questions. We need an introduction, we need to provide evidence for our statements, we need a conclusion, etc. This way we don’t have to get so caught up in the same old patterns that we’ve tried again and again in our work.
And by treating web design like an essay, we can be weird with the design. We can establish a distinct voice and make it sound like an honest-to-goodness human being wrote it, too."
Quotebacks brings structured discourse to blogs and personal websites.
Quotebacks makes it easy to reference content and create dialogue with other sites by turning snippets of text into elegant, self-contained blockquote components.
The open web is much like emergent, unplanned cities — it happens at the scale of the individual, it allows for unexpected creativity, it gives agency to anyone (well, anyone with sufficient technical knowledge) to shape their own spaces. On the other hand, the platforms that now dominate much of the web experience are more evocative of Moses’s planned cities—they often occur at the scale of the corporation, and have rigid, predictable constraints for how individuals can behave and express themselves.
