Recently, I shared why I like designing in the browser. But I didn’t get there overnight: The process was gradual, building up over time as I bumped against the edges of dedicated design software and static deliverables. And I had to start somewhere.
If you’re a designer who’d like to give in-browser mockups a try in your own work, this article could be your starting point.
My intent here isn’t to evangelize this way of doing things: I’ve met too many amazing designers with too many different processes to believe one size fits all. And this isn’t for developers interested in design: Stephanie Stimac already wrote a whole book for you.
These are simply a few tips I’ve seen resonate with designers on client teams who have a spark of interest or curiosity, but aren’t sure where to begin.
There’s a good chance you already augment your design artifacts with external documents, slide decks, animations or specifications. You might reach for xScope or a color picker to streamline certain tasks. Web standards can be just another gadget in your design utility belt.
Say you’re crafting a responsive grid system, and you’d like to whip up a demo so developers won’t need to improvise between breakpoints:
Example of a responsive 12-column grid visualized using CSS (with thin guides for typographic spacing), resizing from 320 to 1440 pixels wide. (Live example on CodePen)Perhaps you’re designing an element with unique considerations for interaction states, and you’d like to know you’ve conveyed the intended experience:
CodePen Embed FallbackOr maybe you’d like to share an enhanced color palette, using OKLCH to give colors more oomph on high-gamut displays:
CodePen Embed FallbackWherever you sense friction in the features of your software or the boundaries of a fixed frame, wherever there’s a design question typically left unanswered until implementation, there’s an opportunity to augment your usual process with a pinch of web standards.
Learn a Few BasicsYou don’t need to be a seasoned web developer to mock-up HTML and CSS for the browser. But knowing a few fundamentals can help chart the clearest course from idea to reality:
If you’ve never made a web page before, HTML for People is a free ebook by Blake Watson written for those with “no prior coding experience of any kind.” Very approachable!
Don’t feel pressure to learn more than you need up front. Your goal is to conceptualize a particular design idea as styled HTML, not to ship pristine, production-ready code. (Though with enough practice, you might accomplish that by accident from time to time!)
Don’t worry: The most important thing is what displays in the browser. How you get there is completely up to you!
If you’re happy with TextEdit or Notepad, that’s perfectly fine. If you’re itching for a bit more from your editor, I’ve seen these suggestions resonate with a few designers:
What about AI?Most code editors support plugins for AI-powered suggestions or code generation. Some like Cursor, Windsurf and Zed were built with these features in mind.
Ethical considerations aside, if you choose to use these tools, you must take care to scrutinize and understand the output. As a designer loosely mocking up self-contained concepts for modern, capable browsers, your HTML and CSS needs should be simple and straightforward compared to the decades of outdated or complicated code AI models were trained on. You can easily prompt yourself into a corner of frustrating complexity, curtailing your own design voice only to recreate what came before.
Let’s say you come across an interesting web experience, and you’d like to know how it was done. First, open “dev tools” (as they’re often called) in your browser of choice:
From there, you can inspect any page element that catches your eye, revealing its markup and styles, even toggling or changing styles on the fly:
Using dev tools to inspect and tweak the details of my site’s project listing.This ability to peek behind the curtain is an invaluable learning tool for newcomers and experts alike. (It’s great for troubleshooting your own designs, too!)
Need inspiration?If the web experiences you come across all look the same, consider following more people who design in the browser! We’re a bit hard to find since we can’t agree on a title (Web Designer? Designer-Developer? Design Engineer? Creative Developer?), but we’re out there!
I’ll assume if you’ve read this far you already follow me and Cloud Four. But here are some more folks who use web tech to craft inventive designs, courtesy of my own feeds and a few suggestions from social media:
About this listI tried to focus on individuals with plenty of self-hosted, freely available, prominent or recent hybrid design content, whose work I felt would appeal to designers with less technical experience. Sincere apologies to anyone I overlooked or forgot to mention. I may update this list from time to time.
If you’re looking for more of a Dribbble equivalent for interactive works, CodePen has a “Trending” section that’ll blow your mind.
It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility, and produce pages which, by being flexible, are accessible to all.
In The Web’s Grain, Frank Chimero illustrates why web and interaction design are so unique:
It is an edgeless surface of unknown proportions, comprised of small, individual, and variable elements from multiple vantages assembled into a readable whole that documents a moment.
If you approach designing in HTML and CSS with the exact same mindset as in Figma or Sketch, you’ll come away pretty frustrated. But if you can relax some pixel perfectionism, embrace the web’s inherent flexibility and edgeless-ness, and allow its quirks and constraints to guide your hand… that’s where you’ll make your most meaningful discoveries.
We’re Cloud FourWe solve complex responsive web design and development challenges for ecommerce, healthcare, fashion, B2B, SaaS, and nonprofit organizations.
See our work