Tags: design

Ben wrote a post a little while back about maybe organising his home page differently. It’s currently a stream.

That prompted Om to ask is “stream” as a design paradigm over? Mind you, he’s not talking about personal websites:

Across the web, one can see “streams” losing their preeminence. Social networks are increasingly algorithmically organized, so their stream isn’t really a free-flowing stream. It is more like a river that has been heavily dammed. It is organized around what the machine thinks we need to see based on what we have seen in the past.

Funnily enough, I’ve some recent examples of personal homepages become more like social networks, at least in terms of visual design. A lot of people I know are liking the recent redesigns from Adam and Jhey.

Here on my site, my home page is kind of a stream. I’ve got notes, links, and blog posts one after another in chronological order. The other sections of my site are ways of focusing in on the specific types of content links, short notes, blog posts in my journal.

Behind the scenes, entries those separate sections of my site are all stored in the same database table. In some ways, the separation into different sections of the site is more like tagging. So the home page is actually the simplest bit to implement: grab the latest 20 entries out of that database table.

I don’t make too much visual distinction between the different kinds of posts. My links and my notes look quite similar. And if I post a lot of commentary with a link, it looks a lot like a blog post.

Maybe I should make them more distinct, visually. Because I actually like the higgedly-piggedly nature of a stream of different kinds of stuff. I want the vibe to be less like a pristine Apple store, and more like a chaotic second-hand bookstore.

Going back to what Ben wrote about his site:

As of right now, the homepage is a mix of long-form posts, short thoughts, and links I consider interesting, presented as a stream. It’s a genuine representation of what I’m reading and thinking about, and each post’s permalink page looks fine to me, but it doesn’t quite hold together as a whole. If you look at my homepage with fresh eyes, my stream is a hodgepodge. There’s no through line.

For me, that’s a feature, not a bug. There’s no through line on my home page either. I like that.

I’ve spent the last few days in San Francisco where I was hosting Leading Design.

It was excellent. Rebecca did an absolutely amazing job with the curation, and the Clearleft delivered a terrific event, as always. I’m continually amazed by the way such a relatively small agency can punch above its weight when it comes to putting on world-class events and delivering client work.

I won’t go into much detail on what was shared at Leading Design. There’s an understanding that it’s a safe space for people to speak freely and share their experiences in an open and honest way. I can tell you that there were some tough topics. Given the recent rounds of layoffs in this neck of the woods, this was bound to happen.

I was chatting with Peter at breakfast on the second day and he was saying that maybe there was too much emphasis on the negative, like we were in danger of wallowing in our own misery. It’s a fair point, but I offered a counterpoint that I also heard other people express: when else do these people get a chance to let their guard down and have a good ol’ moan? These are design leaders who need to project an air of calm reassurance when they’re at work. Leading Design is a welcome opportunity to just let it all out.

When we did Leading Design in New York in March of 2022, it was an intimate gathering and the overwhelming theme was togetherness. After two years of screen-based interactions, it was cathartic to get together in the same location to swap stories and be reminded you are not alone.

Leading Design San Francisco was equally cathartic, but the theme this time was change. Change can be scary. But it can also be energising.

After two days of introducing and listening to fascinating talks on the topic of change, I closed out my duties by quoting the late great Octavia Butler. I spoke the mantra of the secular Earthseed religion founded in Parable Of The Sower:

All that you touch
You Change.

All that you Change
Changes you.

The only lasting truth
Is Change.

God
Is Change.

Some lovely people have recently made some lovely websites.

Dan has launched his type foundry, Simple Type Co. and it’s gorgeous!

For as long as I’ve been making websites, Dan’s designs have been an inspiration: Corkd, Dribbble, his own website; whenever he unveils something it always sits just right with me.

Oh, and I love the tagline for Simple Type Co.:

Never perfect. Always a-okay.

Someone who is a perfectionist is Marcin. He’s been working on his book about keyboards for years now (the Kickstarter project will launch in February) and he’s made a stunning website for the book called Shift Happens. Click around and find out.

Mandy has a lovely new professional website, courtesy of Ethan. It’s called everything changes. I love the subtletly of the different colour schemes for dark and light modes. It’s almost as if Ethan knows a thing or two about responsive design.

Look! Jason has new professional website too. The text is just scrumptious. It’s almost as if Jason knows a thing or two about typography.

And look! Lynn has done it again—a new site design for a new year. Beautiful stuff, as always—have a look through the archive if you want to the creativity she puts into this every single year.

All of these people are my web design heroes.

My upcoming appearance at An Event Apart next week to talk about declarative design isn’t the only upcoming trip to San Francisco in my calendar.

Two months from today I’ll be back in San Francisco for Leading Design. It’s on February 7th and 8th.

This event is long overdue. We’ve never had Leading Design in San Francisco before, but we were all set to go ahead with the inaugural SF gathering …in March 2020. We all know what happened next.

So this event will be three years in the making.

Rebacca is doing amazing work, as usual, putting together a fantastic line-up of speakers:

They’ll be sharing their insights, their stories and their ideas — as well as some of their pain from past challenges. It’s all designed to help you navigate your own leadership journey.

I’ll be there to MC the event, which is a great honour for me. And I reckon I’ll be up to the challenge, having just done the double whammy of hosting Leading Design London and Clarity back-to-back.

I would love to see you in San Francisco! If you’ve attended a Leading Design event before, then you know how transformational it can be. If you haven’t, then now is your chance.

Early bird tickets are still available until mid December, so if you’re thinking about coming, I suggest making that decision now.

If you know anyone in the bay area who’s in a design leadership position, be sure to tell them about Leading Design San Francisco—they don’t want to miss this!

At the end of next week, I will sally forth to California. I’m going to wend my way to San Francisco where I will be speaking at An Event Apart.

I am very much looking forward to speaking at my first in-person AEAs in exactly three years. That was also in San Francisco, right before The Situation.

I hope to see you there. There are still tickets available.

I’ve put together a brand new talk that I’m very excited about. I’ve already written about the prep for this talk:

So while I’ve been feeling somewhat under the gun as I’ve been preparing this new talk for An Event Apart, I’ve also been feeling that the talk is just the culmination; a way of tying together some stuff I’ve been writing about it here for the past year or two.

The talk is called Declarative Design. Here’s the blurb:

Different browsers, different devices, different network speeds…designing for the web can feel like a never-ending battle for control. But what if the solution is to relinquish control? Instead of battling the unknowns, we can lean into them. In the world of programming, there’s the idea of declarative languages: describing what you want to achieve without specifying the exact steps to get there. In this talk, we’ll take this concept of declarative programming and apply it to designing for the web. Instead of focusing on controlling the outputs of the design process, we’ll look at creating the right inputs instead. Leave the final calculations for the outputs to the browser—that’s what computers are good at. We’ll look at CSS features, design systems, design principles, and more. Then you’ll be ready to embrace the fluid, ever-changing, glorious messiness of the World Wide Web!

If you’d a glimpse into the inside of my head while I’ve been preparing this talk, here’s a linkdump of various resources that are either mentioned in the talk or influenced it…

Declarative Design

• Declarative design on adactio.com
• Utopia by James Gilyead and Trys Mudford
• Every Layout by Heydon Pickering and Andy Bell
• Be the browser’s mentor, not its micromanager by Andy Bell
• Layout Land by Jen Simmons
• Designing Intrinsic Layouts by Jen Simmons on adactio.com

HTML

• A declarative Web Share API on adactio.com
• A polyfill for button type=”share” on adactio.com
• The reason for a share button type on adactio.com
• Share Button Type explainer on Github
• When should there be a declarative version of a JavaScript API? on adactio.com
• How to (not) make a button by Tomas Pustelnik

CSS

• The CSS Mindset by Max Böck
• Contextual Spacing For Intrinsic Web Design by Stephanie Eckles
• The CSS mental model by Peter Paul Koch
• CSS Forces by Tim Brown

Design Tools

• Our web design tools are holding us back by Vasilis van Gemert
• Traditional Web Design Process is Fundamentally Broken by Jason Grigsby
• Web Design Tool Wish List by Jason Grigsby
• Declarative Design Tools (archived) by Jem Gold

Design systems

• Declarative design systems on adactio.com
• Design systems thinking on adactio.com

History

• Cascading HTML style sheets — a proposal by Håkon Wium Lie, 1994
• A Dao of Web Design by John Allsopp, 2000
• Responsive Web Design by Ethan Marcotte, 2010

People

• Wolfgang Amadeus Mozart
• Miles Davis
• Tim Berners-Lee

Gerry talks about “top tasks” a lot. He literally wrote the book on it:

Top tasks are what matter most to your customers.

Seems pretty obvious, right? But it’s actually pretty rare to see top tasks presented any differently than other options.

Look at the global navigation on most websites. Typically all the options are given equal prominence. Even the semantics under the hood often reflect this egalitarian ideal, with each list in an unordered list. All the navigation options are equal, but I bet that the reality for most websites is that some navigation options are more equal than others.

I’ve been guilty of this on The Session. The site-wide navigation shows a number of options: tunes, events, discussions, etc. Each one is given equal prominence, but I can tell you without even looking at my server logs that 90% of the traffic goes to the tunes section—that’s the beating heart of The Session. That’s why the home page has a search form that defaults to searching for tunes.

I wanted the navigation to reflect the reality of what people are coming to the site for. I decided to make the link to the tunes section more prominent by bumping up the font size a bit.

I was worried about how weird this might look; we’re so used to seeing all navigation items presented equally. But I think it worked out okay (though it might take a bit of getting used to if you’re accustomed to the previous styling). It helps that “tunes” is a nice short word, so bumping up the font size on that word doesn’t jostle everything else around.

I think this adjustment is working well for this situation where there’s one very clear tippy-top task. I wouldn’t want to apply it across the board, making every item in the navigation proportionally bigger or smaller depending on how often it’s used. That would end up looking like a ransom note.

But giving one single item prominence like this tweaks the visual hierarchy just enough to favour the option that’s most likely to be what a visitor wants.

That last bit is crucial. The visual adjustment reflects what visitors want, not what I want. You could adjust the size of a navigation option that you want to drive traffic to, but in the long run, all you’re going to do is train people to trust your design less.

You don’t get to decide what your top task is. The visitors to your website do. Trying to foist an arbitrary option on them would be the tail wagging the dog.

Anway, I’m feeling a lot better about the site-wide navigation on The Session now that it reflects reality a little bit more. Heck, I may even bump that font size up a little more.