Ive recently discovered Sketch and have been using it to design sites. I was previously designing directly in webflow. the problem with this, I found is that its not really wise to mix the design process with the building of the site. I end up with numerous divs and duplication of styles.
Using sketch in the workflow, allows me to be far more organised when I start putting everything together in webflow. So I just wanted to share that - I think it makes webflow even more a powerful tool.
I agree with this.
Much easier if the designing is separate from the building of the site, especially if it’s a complex one.
Edit:
I’m referring to projects like these:
http://healthxchange.webflow.io
http://squarerooms.webflow.io
Sketch is the no brainer. But…
I am looking at Figma from a cross platform, cloud native perspective. Design and prototyping in the one platform makes sense. It doesn’t have the plugins and no doubt some other stuff.
yes, theres a lot out there, ive been trying them all out. They all have their strengths and weaknesses.
My workflow would be Sketch/Flinto/Zeplin to a developer, and Sketch/Flinto/Webflow if I build it myself.
I think Webflow deserves to be further up the list as sure it can be used for prototyping but offers so much more. From a UX perspective I just want Webflow in my life.
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 Linea Sketch on the App Store
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).
Good advice Vincent. Yes absolutely build out from the CMS - thats why I like Webflow. In that regard its a bit like Drupal, but actually comprehensible!
Theres a lot being promised this year by InVision - InVision Studio should be out shortly - it does look rather rock and roll, so im very curious. XD - Im always a bit suspicious of Adobe - they tend not to commit to a product, although it has some nice features. Balsamiq is great fun to prototype quickly with.
I want to move more into UX/UI so im busy exploring all these options. These tools all position designers in between UX and development, so I think its important to be able to grasp both sides at least to a certain level. I enjoy learning to code as well.
It does, but in the end, you have an Invision prototype, that’s it, that’s all. Nothing you can use in production or start to build from. It has a market but it takes place in a workflow where you have time, money and resources to spend on a full prototype. (= unrealistic for the usual freelance or agency web design workflow).
I hear the complain about Adobe not committing to a product. It seems it’s really a team thing at Adobe, like micro companies inside of a bigger one. And lately, 2 of them are shining: the Xd one and the Lightroom one. Xd started slowly, small, and gets more interesting as it grows. It’s incredibly fats, like, incredibly. I start to struggle to have a clean refreshed screen on Sketch with 20 artboards, where on Xd I placed 2048 of them, just for tests, and there was no slowdown at all. The feeling of quality in using Xd is definitely there. I’m almost as fast in Xd than in Balsamiq.
I like your thinking. This webflow wireframe / bar bones approach is what I am thinking about too. If this works then I can focus on my Affinity designer & photo skillset (and Hype which I would love to spend more time with).
As for wireframes, I would also like to extract value out of apple pencil. I use concepts, but it is full on! Does linea have layers?
Linea is meant for quick sketch and has an almost flat (one level) UI. It has 6 layers with a micro controller for opacity. This micro controller is so tiny that only the pencil can reach it 
Also 4 tools, palette with 6 values per colors, very nice backgrounds (blueprint, butcher paper etc) and a handful of useful grids (dots, checkers, isometric…). And it has the zoom+rotate on the canvas like Procreate intruduced. Apart from that, nothing, no line, no ruler (I wish it had a ruler).
I thought I’d only use Procreate because there’s ore features, but I’m happy to use Linea very often, after all. It’s a toy-tool that’s a no-brainer, simple, straight forward… no document size or complicated brush choice, layers controls visible at all times.
Procreate is better on all fronts, but Linea is very very good still, and so simple… I start everything in Linea and switch to procreate at times. What I miss from procreate is the built in timelapse. That’s such a fun feature.
More on iPad apps:
This topic was automatically closed after 60 days. New replies are no longer allowed.