Web design without design software

Designing directly in the browser, using only HTML and CSS

As a web designer, having designed and built many websites, there are times where I have a design fully realized in my head that I would skip using a design tool and just start coding HTML and CSS to flesh out the design in the browser directly.

It started out as something I did with personal projects; then it turned to only doing black and white wireframes for professional projects before going to code. Then I started using a boilerplate HTML template for the wireframes. Now I do all my web design in the browser directly. And feel that everyone should design in the browser, no matter what level you are at with design or coding HTML and CSS. Here's why.

The limits of design apps

Design tools like Photoshop were originally made for designing graphics that would be output on a static canvas, like a magazine, or a banner. We started using them for web design because it seemed like a logical extension of their functionality. But the layout of a website doesn't really work as fixed shapes, it's more fluid, with content flowing vertically, and needing to adjust to different screen sizes.

Throughout the years, design apps have evolved to be more specialized to fit different cases. I find that Sketch works best for UI/UX design for apps. And Pixelmator is great for static graphics and images. But when it comes to web design, they're all still limited. Even design apps that attempt to focus on web design like Figma still end up being shapes on a static canvas.

Another design app, Framer does a pretty good job with fluid layout, but you still end up pretty much redoing your work when you have to code the HTML/CSS for it. Webflow outputs HTML/CSS directly and follows standard practices, but it's basically just a visual CSS editor with a clunky interface that quickly becomes more cumbersome to use than just writing up some CSS code.

"Even design apps that attempt to focus on web design like Figma still end up being shapes on a static canvas."

The definition of design

Part of the divide between using a design app and coding a website separately comes from how the expectation that designers don't write code, programmers do. This makes sense from the standpoint of developing an app, but it makes less sense when it comes the way a website layout works. HTML and CSS are made for structure and visual aesthetics, which is design. Programming is having to use an API to communicate with different systems for processing certain interactions.

I have done print design work in the past. Graphic design for print also has technical aspects that are required that may not be considered design. By having to work within physical limitations: calculating paint color codes, and accounting for the different kinds of paper to print on. While there are people at print companies that can help with the process, you still need to understand these technical details to get the results you want. HTML and CSS are the tangible limitations of web design.

And there is actually not very much code needed, it's more about your design decisions. You're essentially defining abstractions and giving them properties. In a design tool you would create a shape that you give a name to and set its size, color, border, whether it has rounded corners, etc. You do the same thing in HTML and CSS. You define your object layers in HTML, and format definitions in CSS. If you're a designer with experience in traditional design tools, you already understand how the model works!

"HTML and CSS are the tangible limitations of web design."

A modern workflow

Designing straight in HTML and CSS code gives a live view in the browser that you're designing for:

• You see how your fluid layout works, every step of the way
• Editing styling gets applied to multiple components instantly
• You can plug in and update placeholder content and have your design automatically adjust accordingly
• Make needed adjustments for various screen sizes without having to setup separate canvases and duplicating work
• Fonts are accurately rendered and formatted, and can be tested across browsers

And once you do all this during the design stage, you're already more than half way through the coding stage! So while the traditional web design process requires more software and time. Designing in the browser cuts costs on both software and on time spent to more than half of the traditional approach.

A recent trend of web design tools are setting up a design system with components to work from, making it easier to keep a design consistent and make updates in the future. This is so much easier to do in HTML and CSS as it has the cascading approach to using components built-in, without having to do a lot of initial setup.

"Designing in the browser cuts costs on both software and on time spent to more than half of the traditional approach."

For anyone and everyone

The beauty of how HTML and CSS were designed is that there's a spectrum to the level of skill required. You can have content in a text document that outputs in a web browser. Add some HTML tags to break it up. Some CSS properties for formatting. And you have yourself a website.

The browser is the most accessible design tool there is when the goal is to publish content, which is the point of a website! It can do it all: a personal homepage, a flyer for an event, a magazine of articles, a home base for a business, a virtual store, and so much more.

It's what it means to have a democratized web. Publishing available in the hands of anyone to build and share.

"The browser is the most accessible design tool there is when the goal is to publish content, which is the point of a website!"