Brian Koberlein
What a beautiful website!
What a beautiful website!
I suspect most people on opposing sides of the Tailwind debate actually complete agree on Tailwind itself. I don’t think we disagree on atomic CSS, or utility classes; I think our contention comes from the valuations we made long before we ever chose our tools. Where one of us sees a selling point, the other sees a flaw.
This is very much in line with what I’ve been talking about in my presentation on declarative design.
As Jeremy Keith put it so well: where it comes to styling, Builders want imperative programming; they want to specify what they want, where they want, how they want it. No surprises.
Crafters instead want declarative programming; they understand how to wield the power of creating rules of governance within a complex system, and wish to use that power, rather than micromanaging the browser.
This free day-long online event all about accessibility and inclusive design is happening right now. You can join live, or catch up on the talks that have already happened, like the excellent talks from Russ Weakly and Manuel Matuzović.
This advice works both ways:
- Collaboration
- Communication
- Respect
Go spelunking down the archives to find some lovely graphic design artefacts.
Web Summer Camp in Croatia finished with an interesting discussion. It was labelled a town-hall meeting, but it was more like an Oxford debating club.
Two speakers had two minutes each to speak for or against a particular statement. Their stances were assigned to them so they didn’t necessarily believe what they said.
One of the propositions was something like:
In the future, sustainable design will be as important as UX or performance.
That’s a tough one to argue against! But that’s what Sophia had to do.
She actually made a fairly compelling argument. She said that real impact isn’t going to come from individual websites changing their colour schemes. Real impact is going to come from making server farms run on renewable energy. She advocated for political action to change the system rather than having the responsibility heaped on the shoulders of the individuals making websites.
It’s a fair point. Much like the concept of a personal carbon footprint started life at BP to distract from corporate responsibility, perhaps we’re going to end up navel-gazing into our individual websites when we should be collectively lobbying for real change.
It’s akin to clicktivism—thinking you’re taking action by sharing something on social media, when real action requires hassling your political representative.
I’ve definitely seen some examples of performative sustainability on websites.
For example, at the start of this particular debate at Web Summer Camp we were shown a screenshot of a municipal website that has a toggle. The toggle supposedly enables a low-carbon mode. High resolution images are removed and for some reason the colour scheme goes grayscale. But even if those measures genuinely reduced energy consumption, it’s a bit late to enact them only after the toggle has been activated. Those hi-res images have already been downloaded by then.
Defaults matter. To be truly effective, the toggle needs to work the other way. Start in low-carbon mode, and only download the hi-res images when someone specifically requests them. (Hopefully browsers will implement prefers-reduced-data
soon so that we can have our sustainable cake and eat it.)
Likewise I’ve seen statistics bandied about around the energy-savings that could be made if we used dark colour schemes. I’m sure the statistics are correct, but I’d like to see them presented side-by-side with, say, the energy impact of Google Tag Manager or React or any other wasteful dependencies that impact performance invisibly.
That’s the crux. Most of the important work around energy usage on websites is invisible. It’s the work done to not add more images, more JavaScript or more web fonts.
And it’s not just performance. I feel like the more important the work, the more likely it is to be invisible: privacy, security, accessibility …those matter enormously but you can’t see when a website is secure, or accessible, or not tracking you.
I suspect this is why those areas are all frustratingly under-resourced. Why pour time and effort into something you can’t point at?
Now that I think about it, this could explain the rise of web accessibility overlays. If you do the real work of actually making a website accessible, your work will be invisible. But if you slap an overlay on your website, it looks like you’re making a statement about how much you care about accessibility (even though the overlay is total shit and does more harm than good).
I suspect there might be a similar mindset at work when it comes to interface toggles for low-carbon mode. It might make you feel good. It might make you look good. But it’s a poor substitute for making your website carbon-neutral by default.
The slides and transcript from a great talk by Maggie Appleton, including this perfect description of the vibes we get from large language models:
It feels like they’re either geniuses playing dumb or dumb machines playing genius, but we don’t know which.
Service designers of Brighton!
We meet for 1–1½ hours from 8.30am on the first Thursday of every month at Clearleft’s studio in Brighton.
Some lovely scroll-driven animations illustrate this great little microsite.
There’s something very pleasy about the chunky design that harkens back to the Zeldmanesque early web.
An impressive piece of internationlisation and inclusive design.
- No shared (and contextual) sense of purpose
- Overbuilding, or scaling too early
- Inability to make decisions and move forward quickly
- Lack of clear ownership and dedicated resources
- Lack of cultural alignment
The common thread among these issues is that none are related to technical or tooling decisions —or even to the components themselves.
- Good design works for everyone
- Good design makes things obvious
- Good design puts users in control
- Good design is lightweight
A short talk delivered at a gathering in Brighton by the Design Business Association in July 2023 on the topic of “Web3, AI and Design”.
Hello. I was asked by the Design Business Association to talk to you today about “web3 and AI.”
I’d like to explain what those terms mean.
Let’s start with “web3.” Fortunately I don’t have to come up with an explanation for this term because my friend Heydon Pickering has recorded a video entitled “what is web 3.0?”
What is web trois point nought?
Web uno dot zilch was/is a system of interconnected documents traversible by hyperlink.
However, web deux full stop nowt was/is a system of interconnected documents traversible by hyperlink.
On the other hand, web drei dot zilch is a system of interconnected documents traversible by hyperlink.
Should you wish to upgrade to web three point uno, expect a system of interconnected documents traversible by hyperlink.
If we ever get to web noventa y cinco, you can bet your sweet @rse, it will be a system of interconnected documents traversible by f*!king hyperlink.
There you have it. “Web3” is a completely meaningless term. If someone uses it, they’re probably trying to sell you something.
If you ask for a definition, you’ll get a response like “something something decentralisation something something blockchain.”
As soon as someone mentions blockchain, you can tune out. It’s the classic example of a solution in search of a problem (although it’s still early days; it’s only been …more than a decade).
I can give you a defintion of what a blockchain is. A blockchain is multiple copies of a spreadsheet.
I find it useful to be able to do mental substitions like that when it comes to buzzwords. Like, remember when everyone was talking about “the cloud” but no one was asking what that actually meant? Well, by mentally substituting “the cloud” with “someone else’s server” you get a much better handle on the buzzword.
So, with “web3” out of the way, we can move onto the next buzzword. AI.
The letters A and I are supposed to stand for Artificial Intelligence. It’s a term that’s almost as old as digital computing itself. It goes right back to the 1950s.
These days we’d use the term Artificial General Intelligence—AGI—to talk about that original vision of making computers as smart as people.
Vision is the right term here, because AGI remains a thought experiment. This is the realm of super intelligence: world-ending AI overlords; paperclip maximisers; Roko’s basilisk.
These are all fascinating thought experiments but they’re in the same arena as speculative technologies like faster-than-light travel or time travel. I’m happy to talk about any of those theoretically-possible topics, but that’s not what we’re here to talk about today.
When you hear about AI today, you’re probably hearing about specific technologies like large language models and machine learning.
Let’s take a look at large language models and their visual counterparts, diffusion models. They both work in the same way. You take a metric shit ton of data and you assign each one to a token. So you’ve got a numeric token that represents a bigger item: a phrase in a piece of text, or an object in an image.
The author Ted Chiang used a really good analogy to describe this process when he said ChatGPT is like a blurry JPEG of the web.
Just as image formats like JPG use compression to smush image data, these models use compression to smush data into tokens.
By the way, the GPT part of ChatGPT stands for Generative Pre-trained Transformer. The pre-training is that metric shit ton of data I mentioned. The generative part is about combining—or transforming—tokens in a way that should make probabalistic sense.
Here’s some more terminology that comes up when people talk about these tools.
Overfitting. This is when the output produced by a generative pre-trained transformer is too close to the original data that fed the model. Another word for overfitting is plagiarism.
Hallucinations. People use this word when the output produced by a generative pre-trained transformer strays too far from reality. Another word for this is lying. Although the truth is that all of the output is a form of hallucination—that’s the generative part. Sometimes the output happens to match objective reality. Sometimes it doesn’t.
What about the term AI itself? Is there a more accurate term we could be using?
I’m going to quote Ted Chiang again. He proposes that a more accurate term is applied statistics. I like that. It points to the probabalistic nature of these tools: take an enormous amount of inputs, then generate something that feels similar based on implied correlations.
I like to think of “AI” as a kind of advanced autocomplete. I don’t say that to denigrate it. Quite the opposite. Autocomplete is something that appears mundane on the surface but has an incredible amount of complexity underneath: real-time parsing of input, a massive database of existing language, and on-the-fly predictions of the next most suitable word. Large language models do the same thing, but on a bigger scale.
So what is AI good for? Or rather, what is a language or diffusion model good for? Or what is applied statistics or advanced autocomplete good for?
Transformation. These tools are really good at transforming between formats. Text to speech. Speech to text. Text to images. Long form to short form. Short form to long form.
Think of transcripts. Summaries. These are smart uses of this kind of technology.
Coding, to a certain extent, can be considered a form of transformation. I’ve written books on programming, and I always advise people to first write out what they want in English. Then translate each line of English into the programming language. Large language models do a pretty good job of this right now, but you still need a knowledgable programmer to check the output for errors—there will be errors.
(As for long-form and short-form text transformations, the end game may be an internet filled with large language models endlessly converting our written communications.)
When it comes to the design process, these tools are good at quantity, not quality. If you need to generate some lorem ipsum placeholder text—or images—go for it.
What they won’t help with is problem definition. And it turns out that understanding and defining the problem is the really hard part of the design process.
Use these tools for inputs, not outputs. I would never publish the output of one of these tools publicly. But I might use one of these tools at the beginning of the process to get over the blank page. If I want to get a bunch of mediocre ideas out of the way quickly, these tools can help.
There’s an older definition of the intialism AI that dairy farmers would be familiar with, when “the AI man” would visit the farm. In that context, AI stands for artificial insemination. Perhaps thats also a more helpful definition of AI tools in the design process.
But, like I said, the outputs are not for public release. For one thing, the generated outputs aren’t automatically copyrighted. That’s only fair. Technically, it’s not your work. It is quite literally derivative.
Everything I’ve described here is potentially useful in some circumstances, but not Earth-shattering. So what’s with all the hype?
Venture capital. With this model of funding, belief in a technology’s future matters more than the technology’s actual future.
We’ve already seen this in action with self-driving cars, the metaverse, and cryptobollocks. Reality never matched the over-inflated expectations but that made no difference to the people profiting from the investments in those technologies (as long as they make sure to get out in time).
By the way, have you noticed how all your crypto spam has been replaced by AI spam? Your spam folder is a good gauge of what’s hot in venture capital circles right now.
The hype around AI is benefiting from a namespace clash. Remember, AI as in applied statistics or advanced autocomplete has nothing in common with AI as in Artificial General Intelligence. But because the same term is applied to both, the AI hype machine can piggyback on the AGI discourse.
It’s as if we decided to call self-driving cars “time machines”— we’d be debating the ethics of time travel as though it were plausible.
For a refreshing counter-example, take a look at what Apple is saying about AI. Or rather, what it isn’t saying. In the most recent Apple keynote, the term AI wasn’t mentioned once.
Technology blogger Om Malik wrote:
One of the most noticeable aspects of the keynote was the distinct lack of mention of AI or ChatGPT.
I think this was a missed marketing opportunity for the company.
I couldn’t disagree more. Apple is using machine learning a-plenty: facial recognition, categorising your photos, and more. But instead of over-inflating that work with the term AI, they stick to the more descriptive term of machine learning.
I think this will pay off when the inevitable hype crash comes. Other companies, that have tied their value to the mast of AI will see their stock prices tank. But because Apple is not associating themselves with that term, they’re well positioned to ride out that crash.
Alright, it’s time for me to wrap this up with some practical words of advice.
Beware of the Law of the instrument. You know the one: when all you have is a hammer, everything looks a nail. There’s a corollary to that: when the market is investing heavily in hammers, everyone’s going to try to convince you that the world is full of nails. See if you can instead cultivate a genuine sense of nailspotting.
It should ring alarm bells if you find yourself thinking “how can I find a use for this technology?” Rather, spend your time figuring out what problem you’re trying to solve and only then evaluate which technologies might help you.
Never make any decision out of fear. FOMO—Fear Of Missing Out—has been weaponised again and again, by crypto, by “web3”, by “AI”.
The message is always the same: “don’t get left behind!”
“It’s inevitable!” they cry. But you know what’s genuinely inevitable? Climate change. So maybe focus your energy there.
I’ll leave you with some links.
I highly recommend you get a copy of the book, The Intelligence Illusion by Baldur Bjarnason. You can find it at illusion.baldurbjarnason.com
The subtitle is “a practical guide to the business risks of generative AI.” It doesn’t get into philosophical debates on potential future advances. Instead it concentrates squarely on the pros and cons of using these tools in your business today. It’s backed up by tons of research with copious amounts of footnotes and citations if you want to dive deeper into any of the issues.
If you don’t have time to read the whole book, Baldur has also created a kind of cheat sheet. Go to needtoknow.fyi and you can a one-page list of cards to help you become an AI bullshit detector.
I keep track of interesting developments in this space on my own website, tagging with “machine learning” at adactio.com/tags/machinelearning
Thank you very much for your time today.
A good looking artifact too early in the process gains buy-in too quickly and kills discovery.
CSS is now the most powerful design tool for the Web.
I think this is now true. It’ll be interesting to see how this will affect tools and processes:
What I expect to see overall is that the perception and thus the role of CSS in the design process will change from being mainly a presentational styling tool at the end of the waterfall to a tool that is being used at the heart of making design decisions early on.
Progressive enhancement begins with constructing a robust and universally accessible foundation, designed to cater to all users, regardless of individual or technological circumstances. From here, advanced features can be strategically layered to enhance the user experience wherever feasible. Even as these enhancements roll out, guided by the capacities of different devices, the quality of network connections, or the availability of specific APIs, the core functionalities should remain steadfast and accessible to all.
This may mark the beginning of Gov.uk’s decline. The top-listed priorities are the very antithesis of starting with user needs. Instead from now on it’s going to be about growth, shiny new technology, having a native app, and literally pivoting to video.
It’ll be interesting to see if they try to maintain their existing design principles while simultaneously abandoning them.
This is a very handy tip if you’re adding view transitions to your website!
If we’re serious about creating a sustainable future, perhaps we should change this common phrase from “Form follows Function” to “Form – Function – Future”. While form and function are essential considerations, the future, represented by sustainability, should be at the forefront of our design thinking. And actually, if sustainability is truly at the forefront of the way we create new products, then maybe we should revise the phrase even further to “Future – Function – Form.” This revised approach would place our future, represented by sustainability, at the forefront of our design thinking. It would encourage us to first ask ourselves, “What is the most sustainable way to design X?” and then consider how the function of X can be met while ensuring it remains non-harmful to people and the planet.