Designing in the Browser: Five Tips for Beginners

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.

Designing in the browser with HTML and CSS can be exciting, powerful and even fun, but it is not a one-to-one replacement for purpose-built design software. Thankfully, it doesn’t need to be!

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:

Perhaps you’re designing an element with unique considerations for interaction states, and you’d like to know you’ve conveyed the intended experience:

Or maybe you’d like to share an enhanced color palette, using OKLCH to give colors more oomph on high-gamut displays:

Wherever 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.

You 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! (Also great: Make Your Own Website by Shannon Kay)
• If you’re more of a visual learner or ready to dive a bit deeper, Kevin Powell’s HTML & CSS for Absolute Beginners breaks things down into short, bite-sized videos. (Also check out freeCodeCamp’s YouTube tutorials and interactive courses.)
• Games like Flexbox Froggy and Grid Garden can make learning the most versatile CSS layout techniques surprisingly fun.
• For answers to specific questions, MDN Web Docs and CSS-Tricks host a wealth of guides and documentation.

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!)

The term “stack” refers to the software or resources used by an individual, team or project. While it can be fun to share and learn about favored tools of the trade, it can also be intimidating! Especially if you rarely/never open Terminal or don’t know your Node from your Git. 😵‍💫

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:

• CodePen is an online code editor, so you don’t need to mess with files, and what you create is easy to share or link to from discussions and documentation.
• If you want a dedicated local editor, Visual Studio Code is the most popular. But you might also consider Sublime Text (all platforms) or BBEdit (macOS) for their approachability, or Nova (macOS) for its beauty and feature set.

Pablo Picasso probably never said “Good artists copy; great artists steal.” But if he had, I’d like to think he’d appreciate the developer tools built into every modern browser.

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:

• Chrome
• Edge
• Firefox
• Safari

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:

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!)

In A Dao of Web Design, John Allsopp describes an ideal web design mindset:

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.