Lately I’ve been doing web design ✨ with HTML and CSS

Last month, DHH, a well-known troll in the CS field and one of the famous authors of “Rework”, published an article calling on everyone not to use Figma for web design, saying that their company’s design work is done directly with HTML and CSS

His reasoning is that Figma hinders designers and programmers from collaborating. When Figma released new features during Config 2023, many designers complained that Figma was becoming less and less easy to use, and that it needed more and more programming foundations, and that Figma was a hindrance

Specific to the web page I designed, from the “block reading” project in collaboration with @zhufengme Zhu Feng, he is responsible for development and operation and maintenance, and I am naturally responsible for brand design, UX design…

If I use Figma for visual web design, then output it as a reference HTML + CSS page, then find a front-end programmer to rewrite it into a usable HTML + CSS template, and then find a back-end programmer to turn the template into a program… Not only is the process long, but any small change goes through at least 3 or 4 processes

The most realistic thing is that we don’t have front-end programmers 🤣

What we need to design is the email page, because we don’t use Figma, so the design process is very short and fast:

• I first write HTML + CSS with the editor locally and test the visuals locally (Figure 1)
• Then I use fake data and send test emails to confirm the visuals
• He changed the page I submitted to a template, and then sent me a test email with real data to confirm the visuals
• After I tested it, I directly told him how to change HTML + CSS, and so on

Later, I found that this process was still too slow, so I had to ask Zhu Feng if there was any other good way to let me do the test conveniently

Then he asked me for the public key, gave me access to the test server, and asked me to go to the server to modify the template file and run the script to do the test myself. Fortunately, I can understand the best programming language in the world (English) and the best programming language in the world

Btw, as a designer, I am adamant that VIM is not used to edit code, which is a portal and nothing to discuss… I use nano (Figure 2). 😂

Finally, we officially submit the template file and run the program on time, which becomes the email you receive (Figure 3)

In our case, DHH’s suggestion doesn’t seem wrong, and Boss Zhu and I did skip the barrier between designers and engineers at Figma, improving collaboration efficiency

In fact, we encounter special cases and are not representative

• I’m now designing functional web pages. Most of the functional pages are rectangular and rectangular, and it is not difficult to design them in a non-visual way such as HMTL + CSS (DHH estimates that this is a page like this); For display web pages, the layout is very flexible, and there are various animations and special effects, so visual design tools such as Figma, Framer, and Webflow can greatly improve design efficiency
• We didn’t introduce a design system and didn’t use Figma’s powerful design management capabilities
• We didn’t have cross-departmental collaboration issues or use Figma’s design collaboration features

Through our real-world examples, you should know what DHH is talking about and whether it makes sense, right?

Getting started with design