Tweaking In The Browser
Avoid context switching.
Focus on each step. Do not think about the next step.
ex. Draft → Refine → Design → Implement → Refactoring → Optimizing.
https://ishadeed.com/article/tweaking-in-the-browser/
A while ago, I got to think about the term “Designing in the browser” and if it’s a valid thing at all. The term “designing” in the browser indicates that we can add design elements quickly, but if we compare that to a design tool, like Figma, then the tool will win in terms of speed.
Introduction
The term “designing in the browser” is so vague to the point that some designers and developers think that web browsers are design tools. This thinking implies that if we have an HTML markup, then we can start designing in the browser, just like a design tool (e.g: Figma).
Can we design the following in the browser at the same time we do it in a design tool?
web page design picture...
For me, the short answer is no. There are many reasons why designing such a website in the browser can’t be practical. It’s not hard nor impossible, but it’s impractical!
Why Designing In The Browser Doesn’t Work For Me
It Takes Time
Here is a very simple case where creating a simple rectangle for the header, is way faster than doing this in code (AKA: designing in the browser).
...
While in Figma, it’s just a two steps process:
- Create a rectangle
- Pick a background color
A Constant Context Switching
You need to think about the look & feel of a design, and also how to write the CSS for it. This context switching isn’t good (at least for me). I just can’t focus that way.