I rebuilt the whole site


Hey there,

First of all, I’m happy to report that my dog and sidekick Johnny is back home and recovering nicely from surgery. At his doctors’ orders we’ve moved his bed into a playpen, which is now his fortress, and in between long naps he looks up at us to beg for scritches, pets, and extra bits of cheese.

New on the blog

Since last time, I've published two new articles:

The provocatively titled Yes, Designers Should Code is less a shots-fired-on-2010s Design Twitter polemic, and more an explanation of design engineering — the hot new practice of fusing design and development, why it's the best way to make interactive experiences, and especially why it's a good foundation for all this newfangled AI stuff.

Next, when AI can write your code, do you still need a CMS? This post is my contribution to the "AI is my CMS" discourse from late last year, as well as a go-to resource to explain what jobs a web-based CMS still does, and which ones are safe to hand off to the agents.

The newest, improved-est bitsandletters dot com

In my last note I said the new Bits&Letters site was on the way. It's live now at bitsandletters.com.

I’m continuing to tweak things; I’ll probably always be tweaking things. But here are a few of my favorite details in the new build:

New headline, who dis: “Positioning” is one of those marketing concepts that I’ll eagerly rant about at a bar if I’m given a whiskey and half a chance. Not because positioning is bad or wrong — far from it. Discourse around positioning makes me crazy because it’s often the only marketing tool anyone talks about. More clearly defining your ideal customers and outcomes is great, but it can easily clash with simply explaining who you are and what you do.

Anyway, the homepage hero unit — which, here as on many sites, is the spearpoint of my positioning and narrative — has gone through a lot of iterations. Taking some inspiration and advice from a post on the r/agency subreddit, rather than add stuff (like capabilities or my own pedigree) this time I tried to take as much away as possible, leaving just a short, sweet headline and a few lines of copy to make things more specific.

Most significantly, this hero copy — and most of the site — is now free of AI writing. It’s so tempting to ask Claude or its brethren to wish away the writers block and just do the thing, but unfortunately some things really have to be done by humans if they’re gonna be done well.

Big, vibrant backgrounds without huge image downloads: Most pages’ hero sections are built on gradient or pattern backgrounds based on our brand imagery. Any image this large will usually annihilate a web page’s Core Web Vitals scores, but here I’ve adopted a neat trick: the underlying image is relatively small (around 300px square), then blown up and blurred to cover up artifacts from being downscaled.

Art-directed blog thumbnails. An acquaintance from The Bureau, a digital agency community I’m a member of, called out that my post artwork didn’t seem to vibe with my overall brand. I took this as a prompt — in the human sense, not the AI sense — to start putting a bit more effort into these thumbnails, using my brand imagery created by Trust Design Shop as a foundation.

An IRS-style form you hopefully want to fill out: The new website build swaps a contact form hosted on an outside service for a good, old, standard HTML form. I had a bit of fun with the design; the form’s number is a reference to my age and, of course, Gen Alpha’s favorite number pair. (My 11 year old hates this form.)

Next up — a proper color system: Another piece of Bureau feedback: individual colors and graphic elements are nice, but there’s room to improve how they’re all used together. More to the point, the site could use some more rigor around which brand color pairings are used together, so each page feels nice and cohesive.

For the next major update, I’ve been working on a design system refresh where each page would have just one color theme, based around one of four key brand colors, with the light fuchsia being the ‘prime’ or ‘hero’ color.

Within the themes, individual tones are mostly auto-generated using CSS’s oklch and contrast-color functions, which also means it’s easy to swap in and build a new brand scheme around new colors whenever I may want.

This is one of the last elements in a proper design system for the B&L brand that I've been working on for a bit. The live version of the page shown above, which doesn't have the color work yet, does have typography, surface/elevation, and form/button styling worked out.

Have a look, and tell me where it breaks. Hit reply with anything confusing, broken, or just off. And thanks!

More soon, and this time I mean it,
- DD

47 Dunnell Rd, Maplewood, NJ 07040
Unsubscribe · Preferences

background

Subscribe to Bits&Letters