Designing in the browser is all the rage. 'Should designers code' is a long running meme. What do you think of the static design workflow that is very common in the agency world from a development perspective?
Especially the last couple of years the landscape for design tooling got pretty scattered. We have at least 5 major tools: Sketch, Figma, Adobe XD, InVision Studio and just recently Framer X launched.
If you design something for yourself, you go straight into the browser or first explore some options in static design tools? It's not really about which tools is the best but is there still a place for these tools in the design workflow?
Top comments (4)
It's rare that my first design concept is the final design. As a result, I have to iterate and explore to improve it. This is a lot easier to do by dragging rectangles around than it is to code new components. Writing code first constrains how far I can diverge from my initial design, due to the work required to refactor, which constrains the possibilities.
If your content is coming from an API, then changing the design might mean altering endpoints, http requests, templates, and more. I look at it as 'measure twice, cut once' - but with design as measuring the lay of the land and the implementation as the final cut.
I have nothing against throwing together a sketch in the browser, but if your design is meant to last, I think it's worth it to spend time in a medium unhindered by code.
At what point is 'dragging rectangles' around enough? When is it time to go to code? Whenever I feel like I have my main idea in a design tool I iterate further in the browser. And where do sketching and wireframes fit in your workflow?
When the design is approved by the people who need it - through user research and/or conversations with stakeholders. As soon as I'm getting signals that it's likely to meet the project goals.
I almost always do rounds of sketching with pen and paper before jumping into Figma. Certain things need to be ironed out before drawing rectangles
Sketching helps me figure out selection, placement, and order without the complexity of colors, typesetting, etc. Figuring it out one layer at a time, rather than needing to manage and rework everything with each iteration
Indeed for small 'basic components' I don't really see the need for recreating those components withing sketch for every project. I assume most people use a boilerplate or Sketch Library of some sort.
What about digital designers on your team that don't know how to code and a design tool is their only medium to express themselves?
Haha! There are plugins (such as paddy) that can do this.