The sketching phase is a no brainer. But Sketch as an app never got my full attention, so many bugs, especially around groups and rotations. For screen design and prototypes I prefer the more stable Adobe XD, and Illustrator, still, for vector design.
For sketching and prototypes, I’m still faithful to Balsamiq Mockups https://balsamiq.com and pen/paper or iPad/pencil and Linea app https://itunes.apple.com/us/app/linea-sketch-simply/id1094770251?mt=8
Figma and Invision look really neat. But it seems the same amount of work with them than to make a ready for production thing with Webflow, or Hype 3 if it’s only an animation/interaction. As a free lance I rarely have the luxury to make a complete 1:1 prototype before going to production.
@pauloram when it happens that I design directly i Webflow, I of course end up, like you, with a messy and less-than ideal structure. What I constantly do is redo whole sections. I’d design a section, and when it’s visually OK, I’ll redo it from scratch entirely, re-thinking the structure, adding class names and immediately working on the responsiveness of that section. Then I delete the first draft and clean unused classes. Webflow handles this workflow very very well. This said, big ideas come on draft/paper/prototype anyway so it’s a very good step to have.
There’s a new workflow I’m testing now. Making a whole CMS site without any graphic design. I just use the common elements and respect the HTML hierarchy. I make minimum styling, just to keep things organized and pleasant to the eye. When this wireframe is finished, with all data, content, lists etc… I rework the site with the clients, then start the graphic design process. It’s quite effective and allows the clients to see their entire working website quite early in the process. We can validate and invalidate what works and what doesn’t. (preparing an article on this).