A Career Spent Struggling with Web Design and Why the Future Looks Bright

I've been building on the web for more than two decades now, and along the way have built hundreds of applications for clients, for personal use, for my own businesses, and simply for fun. Over the years the client projects have varied widely in purpose and scope, and have crossed sectors and industries as varied as education, agriculture, telecom, architecture and design, and publishing. Interestingly though almost without exception they have all shared a common thread: the teams were laden with coding talent, and woefully lacking in design and UX.

This experience isn't at all uncommon, and I'm not entirely sure why this is the case other than to observe that we developer types seem to suffer from a perennial delusion that "faking it until we make it" is an acceptable strategy when it comes to designing for the web. Perhaps this was the case throughout the 2000's and the first half of the twenty-tens, however at some point along the way even MVPs started to ship with exceptionally polished interfaces.

But I don't think it's fair to entirely blame developers for their horribly designed applications, because over the years web design tools have always been created for, you guessed it, designers. To the best of my recollection we haven't seen a mainstream IDE that additionally bundled visual web design tools since the days of Macromedia Dreamweaver¹. Obviously web-oriented IDEs have come a long, long way in the years since, with popular options like PHPStorm and VS Code more than satisfying the non-design side of things, yet somehow the associated design tooling never came along for the ride.

To be clear, I'm not necessarily lamenting the lack of WYSIWYG interfaces (although it would be a start); rather, I'm referring to a lack of historical tooling and capabilities associated with all of the other things that developers think about when designing web applications, such as:

• Maintaining consistent styling across multiple sites, such as a SaaS product's marketing website and application.
• Contributing to the creation of a user interface when using an unfamiliar CSS library such as MUI (these days I tend to stick to Tailwind).
• Synchronizing designs with a code repository (and vice versa).
• Riffing on various design ideas until finding an acceptable variation. In fact this strikes me as one of the most interesting (and frustrating) aspects of not being a proficient designer; I can't create something visually pleasing, yet I know pleasing when I see it and therefore by iterating through a bunch of variations I'm pretty confident I'll eventually land on something I like.

Fortunately, thanks to the rise of generative artificial intelligence, maturing web technologies, and some really smart people working on some really compelling products, we seem to be entering a new era in which developer-only teams are going to be able to build and launch visually appealing products with amazing user experiences faster and with less fuss than ever before.

We're Entering a New Era of Code-focused Design

Given my opening comment regarding most web products being built by developer-centric teams, it seems kind of silly that over the years more attention hasn't been devoted to developer-focused design tooling. Fortunately, we're really starting to see signs leading towards a reversal of this trend. In 2023 Figma launched Dev Mode, and entirely new products like v0.dev and Nick Dobos' amazing Grimoire GPT are focused on putting the code behind designs into the hands of developers as quickly as possible.

For instance I can paste a web component screenshot into Grimoire and it will recreate a close facsimile the HTML and CSS in seconds:

One such tool that I've been spending quite a bit of time using in recent months is UXPin (full disclosure: I've also spent a lot of time with the UXPin team, offering one developer's perspective regarding what a developer-oriented design tool should be). UXPin has actually been around for quite a few years, and it's used by PayPal, T. Rowe Price, HBO, and a bunch of other companies. It's historically been a designer-focused tool similar to Figma, however more recently they've launched UXPin Merge, a visual design tool that exports designs directly to React components.

I've been using Merge for all sorts of UI design projects, including a macOS screenshot app I've been working on (built using ElectronJS and Tailwind). For instance I actually used Merge to create the screenshot pasted into Grimoire. I needed to create a simple settings form for accepting an API key (when enabled, screenshots are uploaded to a companion web application), managing log settings, and so forth. This is the sort of thing that I might have agonized over for hours in an attempt to get the alignment, padding, etc just so. Using UXPin I managed to create it in less than five minutes:

Drag and Drop Interface...

These sorts of interfaces can easily be created using Tailwind, MUI, ANT, FluentUI, and a bunch of other libraries, and best of all you can just drag and drop the components onto your canvas:

...But Can Also Drop to Code When Desired

I also appreciate how I'm not constrained to using the drag-and-drop interface. For instance I'm free to directly fiddle with the Tailwind CSS styles via a convenient popup window:

Copying and Exporting Code

And of course, I can copy the code into my own project, and even view it in an interactive editor such as StackBlitz:

Prompt-based Designs

Given the current and understandable generative AI frenzy, it's probably no surprise that Merge also offers a chat-based interface called the AI component creator. It is this feature that allows me to quickly riff on designs without getting too caught up in design mechanics. As an example, I've lately wanted a custom Tailwind component for displaying terminal-based shell command examples. Here's the prompt I used:

I would like to display snippets of shell commands executed in a terminal. The terminal background should be dark gray, and the terminal prompt should be a white dollar sign. The shell commands should be styled with a bright green font color.

I typed this prompt into the UXPin AI component creator:

And this is the component CSS it generated:

<div class="rounded-md bg-gray-800 p-6 text-white">
  <p class="mb-2">
    <i class="fas fa-dollar-sign text-white"></i>
    <span class="text-green-400">
      <span> apt-get update</span>
    </span>
  </p>
  <p class="mb-2">
    <i class="fas fa-dollar-sign text-white"></i>
    <span class="text-green-400">
      <span> apt-get upgrade</span>
    </span>
  </p>
  <p class="mb-2">
    <i class="fas fa-dollar-sign text-white"></i>
    <span class="text-green-400">
      <span> apt-get install git</span>
    </span>
  </p>
  <p class="mb-2">
    <i class="fas fa-dollar-sign text-white"></i>
    <span class="text-green-400">
      <span> git clone https://github.com/user/repo.git</span>
    </span>
  </p>
</div>

Finally, here is a screenshot of the rendered component:

The Merge chat tool only supports Tailwind at this time, but support for other libraries is coming soon.

Future Directions in Developer-focused Web Design

Although already revolutionary, tools like Grimoire and UXPin really only represent the beginning of what's to come. I'd love to see features such as:

• An A/B testing agent that monitors page interactions and then autonomously creates and deploys sensible experimental variations.
• Automated synchronization between the GUI and my repositories, meaning I can make a design change in one and immediately see the results in the other.
• Ideation on steroids; for instance I conjure up an initial design and the tool creates 50-100 variations and presents them in gallery or flipbook mode so I can quickly browse and identify candidates.

Conclusion

After 20+ years of struggling with this critical and omnipresent part of web applications, I'm starting to feel like Neo entering the Matrix. These code-oriented tools open up all kinds of possibilities for design-challenged teams. Be sure to check out Grimoire, v0.dev, and if you'd like to start a UXPin trial, head on over to their site and give it a whirl.

1. I was really surprised to learn Macromedia Dreamweaver (now called Adobe Dreamweaver ) is still very much a thing in 2024.