- Get out of design software and into code as early as you can
- Design software has improved a lot, but that creates a temptation to waste time building in an environment that isn’t the one you’re shipping to
- Your designs need to be proved out in a browser over a network, so hop in
Excerpts from The already-here future of prototyping by Brad Frost below… 🔖
I’ve spent pretty much my entire career helping teams design software rather than pictures of software. Development is design. Frontend design. Front-of-front-end code. Front-end workshop environments. Death to the waterfall. The Hot Potato process. Designer/developer collaboration. Pattern Lab. I’ve shared all of these concepts, words, and tools to help bring the worlds of design and development closer to one another so that people can make great things together.
Unfortunately, all these years later it still feels like our design processes have calcified into a one-dimensional, one-directional waterfall workflow. Design tooling has gotten significantly better over the years, which in my view is truly a double-edged sword. On one hand, getting designers using components, variants, autolayout, and variables is way better than Photoshop smart objects and these developments have been extremely welcome. One the other hand, the tooling has gotten to a “good enough” state that allows designers to stay in their comfort zone and insulated from the mediums for which they’re ultimately designing. The old limitations of design tools used to require designers to enlist the help of developers, which while not ideal still created opportunities for cross-disciplinary collaboration and shared understanding.
I’m still hopeful that we can restore a collaborative process and get teams working better together and to get designers closer to real software. It’s critical for designers to capitalize on the opportunities and confront the constraints of the medium for which they’re designing, which is why cross-disciplinary collaboration and prototyping in code are still so important.
At the end of the day, design tools are abstractions that don’t paint the full picture of what a digital experience is. I dig into this in Atomic Design:
Working in HTML, CSS, and presentational JavaScript allows teams to not only create aesthetically beautiful designs, but demonstrates those uniquely digital design considerations like:
- flexibility
- impact of the network
- interaction
- motion
- ergonomics
- color and text rendering
- pixel density
- scrolling performance
- device and browser quirks
- user preferences
Crucially, jumping into the browser faster also kick-starts the creation of the patterns that will make up the living, breathing design system.
Every medium has its affordances, its opportunities, and its limitations, and the sooner we factor those into our design process the better. Thankfully, expressing design in code is easier than ever.
“Should designers code?” is a funny question now.
“Should designers code?” has always been a hilariously charged question in the world of design. But LLM tools like ChatGPT and Claude have made it easier than ever for anyone — including and perhaps especially non-developers — to develop ideas in code. Designers, product managers, and even lay people don’t need to know how to code in order to create something and explore ideas. This democratization of code opens many doors and unlocks so many opportunities for creativity and collaboration.
This new generation of tools erases many of the excuses used to avoid involving developers and exploring ideas in code during the “design phase” of an effort. “Oh we can’t free up time for our developers”, or “this will take too long.” Those excuses don’t hold water anymore. In fact, you can create a functioning prototype of an idea in the time it would take you to draw 4 rectangles in Figma. Sure, the window dressing might not be perfect, but there are really no excuses left for code to not be a key part of the design process.
Flow and a focus on results
As I’ve adopted these tools in my own workflow, I’m struck by how much these tools get me out of papra I always seem to have a million ideas buzzing around in my head, and I often talk myself out of pursuing these ideas by mentally stressing about getting (the right!) environments stood up, choosing (the right!) tools, and (the right!) code syntax, and creating (the right!) features.
Rather than getting bogged down by all of these hypothetics, I can instead use these tools to focus my attention of getting my ideas out of my head and into the world. That’s why I wanted to put this video together to show a real-life example of turning a frequently-occurring idea (in this case, “I should have a ‘request song’ page on my website”) into actual working software:
This immediacy has already proven to be so valuable both in my personal practice as well as in our professional work. We’ll be on a Zoom call with a client discussing an idea, and when the conversation ventures into hypothetical back-and-forth, we’ll spin up a quick prototype to give everyone something tangible to latch onto and iterate over together. It really is a powerful tool in the creative toolkit.
The design process needs a serious shake-up
The ability to rapidly prototype in code — now supercharged by the introduction of LLM tools — brings us closer to truly designing for the web medium. It democratizes the process, allows more people to express ideas in code, makes it easier to consider the medium’s opportunities and constraints, and gets ideas further down the line faster than ever.
There’s a time and a place for traditional design processes, and sure creating a prototype is not the same as creating a ready-to-ship product. It’s important to note that these approaches are not mutually exclusive; you can create and advance prototypes while sweating the design details and code architecture elsewhere. But too often we don’t create the practice nor the room for designers to do this type of exploration. Does everything need to originate in Figma and be fully articulated there? Increasingly, the answer is “no”. There’s a big world outside of Figma, and I recommend exploring it!
Rapid iteration and solid foundations
Of course, putting together a quick prototype detached from your design and development reality is all well and good. Cute, even! But at Big Medium, we’re helping our client teams integrate these new workflows and tools into their organization’s architecture, workflows, and culture. We’re finding that coupling this generative creative approach with the sturdy foundations of a design system yields some truly impressive results. Design systems and AI are a potent combination.
Sure these tools help save time and money, but it also blows open the doors of new creative terrain. Ideas that would have taken days, weeks, or months to pursue can now be explored over the course of a meeting. It’s truly wild. And when coupled with an organization’s solid design foundations, the ideas don’t seem like distractions or impossible-to-implement experiments; instead they feel like…the new design process.
Using these tools in our behind-the-scenes design process unlocks new opportunities, but it doesn’t need to stop there. With Sentient Design, my partner Josh Clark demonstrates how these tools can be used to create radically adaptive user experiences that morph and shift based on the user’s specific context and needs.
We’re entering a new era of design, and it’s been fun to explore and help our client teams navigate this new terrain. If your team would welcome help integrating these tools into your practice, feel free to reach out! We’re offering AI for designers and developers workshops and engagements to help organizations successfully integrate these these tools into their design practices.
Now get out there and get into some code!