1. It’s possible to design right away in Webflow, but…
There’s what’s I think is a rule and I would be surprised a lot of people can prove it wrong: If you design directly in Webflow, your code is going to be a bit of a mess. More importantly, it’s going to be so badly optimized that maintenance is going to be difficult, and it is going to affect your will and capacity to fine tune your great design. And fine tuning makes the difference.
But as it’s often said here, Webflow is self cleaning. When you have achieved a nice section, you can redo it from scratch just below and erase the draft version. Later, clean the unused classes in the class panel and you’re back with a clean structure.
2. it’s preferable to follow a better design route and ignore the final design tools beforehand
Start with a pen, you’ve surely read that everywhere and that’s hyper effective. Gather your references and inspirations and draw. You can scan and continue in a design tool.
With that approach only you can decide beforehand how you’ll compose your elements, the number of nested blocks you need and how to spread the styles among levels. It would be really hard to come up with a clean structure with design on-the-fly in Webflow.
Once your structure on paper, the work on WF is replication. It’s fun and quick as you know where you’re going. Once done yo have a clean structure to work with for your interactions and you don’t have to debug the structure to make them work.
So, the design and layout decision to take before Webflow:
- full visual layout and visual hierarchy of blocks (what’s the main
reading path and what’s secondary, tertiary…)
- structure in term of : sections / containers / columns / structure
of nested divs / links blocks / text and images elements. It’s a
good time to decide what HTML5 kind of IDs the upper elements will
get (Header, section footer…).
- Given the structure, decide where to apply the main shared styles
and their structure (button, button.wide, button.blue, etc) so you
take advantage of what CSS hierarchy is. You also define a clean
text hierarchy, H1 to H5 and all your p in order. Designing the
extra content will be so cool and easy if you achieve that right.
Hope this helps