I’m a designer struggling with front-end development. It would be so much easier if my graphics editor just transformed my designs into responsive web apps.
And yes, I’ve tried webflow, wix, weebly and squarespace (I’m not looking for templates… just want to be able to have creative freedom from designs to a web app automatically).
Do you guys have the same pain? Would you like to publish your work without engineers in the middle?
I don't know. For me this is very much "What if we could draw a car, get into it and drive away?"
Sure it'd be nice if we could skip the "building" step. But we can't. Doubt we ever truly will.
----
.edit: extrapolating, I'd wanna mention that having "a building step" in the process allows us to have specialists in that area that discover more and more awesome techniques and possibilities.
... or see it this way: there's TONNES of front-end frameworks out there that all do massively different things aside from their common cores. It'd be impossible to put all those (and any future) possibilities into a single toolset.
----
.edit2: imagine having to build a tool that replaces photoshop, sketch, figma, illustrator, etc. As well as supporting MooTools. Bootstrap, UIKit. As well as output code that works in IE. Chrome. Firefox. Safari. As well as support every version of JavaScript. This still excludes backend functionality of course!
"it'd be nice if we could skip the "building" step. But we can't. Doubt we ever truly will."...
Why not?
It'd be so much better, no time wasted and instant real user feedback. No to mention the power we’d gain in the whole product process.
If we can think it, we can build it!
PS – regarding your first paragraph, it’s almost here: https://www.sculpteo.com/blog/2017/12/27/3d-printed-car-the-future-of-the-automotive-industry/
the important question is "how?" We tried this with visual website builders like Dreamweaver. They made awful websites. This might be good for prototyping, but not for a finished product.
Why not?
because it's an awful end result?
Remember Homestead? Pepperidge Farms remembers.
I'm going to use an imperfect analogy for this, but:
Designers speak visual language.
Fully built websites are a whole different language.(not referencing to code in this analogy)
Whichever tool builds the code for you, will have to translate between the two languages. Whatever you do, something will be lost in translation because language 1 will have things language 2 won't have. And they both change at different intervals and are based on wholly different principles. So it's not like you're translating English to American. You're legit translating two of the most far-apart languages into eachother.
They'll develop on their own, and they'll be mastered by different people.
In a way, it'd be detrimental too, because currently there's development happening on two fronts. Progress that will (in the mentioned dream state of "having a tool do the work") rapidly diminish. It'll be instigated purely from the design side. On top of that, one side won't be required any longer. Or rather, it will be required, but only by a tiny tiny group of people. And the more minds, the better the progress.
The latter part of this post is pure speculation of course.
Totally agree with this. It's an admirable effort, and maybe not impossible, but the track record with tools like Dreamweaver and other tools that promise "design-to-code!" for instant gratification have been rife with sloppy, hard to maintain code/output, performance & optimization problems (which we certainly have too much of as it is), and tool/platform lock-in, which really sucks.
The beauty of code is, for the most part, a functioning language doesn't absolutely need to evolve and be maintained by anyone for it to work still.
Tools that generate everything need a dedicated team to maintain it, add and support new features, make sure they're bug-free, etc. When the tool gets eaten by a Google or dies because the owners lose interest or funding, your product is stranded.
With well-written and understood code, you're not coupled to any magical system, company, or product. It's insanely portable.
Ummm I think its more like what if you could model a car and 3d print it? which kinda exist.
Design in production is already possible with our new front-end programming language, called Views. It won't build you a car, but it will help you build an app to design cars. More on the simplicity of composition here https://github.com/viewstools/docs/tree/master/CompositionModel
We have good news for designers who don't want to code (although Views syntax was designed with simplicity as the ultimate sophistication in mind, but hey!, writing code is not the ideal design workflow). After 5 years in dev, we will launch beta of Views Tools this summer (2018). Sign up to get it here https://design.views.tools/
The future of design is engineering. We need to make it accessible for non-technical folks too. Our future goals are to lower further the initial learning curve (flexbox is a challenge but it's production ready, that's why we use it). We've already managed to remove CSS classes and ids, as well as HTML, from the process. The only models I need to get familiar with are Views composition and flex. We will also simplify the state management in React stack, provide useful conventions for Javascript logic files, automate git. These are the goals for the next version after beta.
It took us some time because as some of you noticed already, it is not easy to auto-generate production quality code. Design and engineering had to come together to make that happen. We had to rethink and redo many things about how we used to make interfaces from scratch. It was possible because of the countless efforts of brilliant engineers like Dario Cravero and Amy McCarthy that it's all possible today.
Stay curious! And share your insights in our Slack community https://slack.views.tools/
Lookin' cool! I'm skeptical, but curious ;)
I'm also kind of a Vue.js fanboy and wish more tools like these would support that platform in addition to React.
Think about it this way: as a front-end engineer, I wish I could just click a button and have my application logic generate a gorgeous design. I have having to wait on designers to make mockups for me to build out … it seems like such a waste of time.
My point is that you'll always want to obfuscate and abstract the parts of the process you're not familiar with. Engineers will make hundreds of decisions that you don't see that improve performance, usability, or other aspects of the application.
In the same way you as a designer wouldn't think that a software tool could do your job better than you, a lot of engineers feel the same way about "no code" tools.
Your best bet is to simply learn both sides. I got sick of bad front-end engineers being sloppy with my designs so I learned it and can now do a better job representing my work on the web.
Well, out of the tools you mentioned, Webflow definitely gives you the most freedom to implement YOUR design and not a template. It just requires you alter your workflow a little. You also just have to know the principles of front-end development....not the languages themselves. Yes, there's a bit of a learning curve, but Webflow has excellent documentation and tutorials.
So I hear you and I've felt exactly the same way. However, if you don't want engineers to be in the middle you have to do it all yourself. In my experience Webflow has been the best tool to easily design and build front-end experiences without sacrificing creative freedom.
We use Webflow extensively at Bonsai and it's kind of like a strategic asset for us because it really does allow us rapid prototyping superpowers. Over half of our team is Webflow proficient and that makes a massive difference in terms of development time saved. Framer X is brilliant, and it's the start of a larger trend but I think for me Webflow will be the tool to watch in the next two years. I just filled out a Typeform survey that they sent me and it's hinted that they are looking to at least add a login module soon (one that hopefully plays well with Oauth), in addition to their E-commerce push. These steps are slow and iterative but very much in the right direction in terms of what the community needs. I would love to see them release a mobile app design oriented tool soon too, excited for the future.
There's a lot of what you mention and more here: https://wishlist.webflow.com/
I get the same feeling that you do about the future of Webflow.
I think you are misdirecting your frustrations. Instead of struggling with "front-end development", you might actually have a non-technical problem.
A couple points to consider --
(1) I question your assertion that front-end engineers get in your way. If what you're looking for is more rapid user feedback or quicker validation w/o going through a rigorous engineering process than Weblow and AnimaApp are you're asking for (total creative freedom & no engineers necessary!). PS -- why does even have to be coded? Principal is a very quick tool and feels totally real.
However, there's a difference between validating your solutions and deploying them to production. When it comes to the actual building part, engineering partners are critical stakeholders and will make your work better. This is especially true if your apps have any user-driven functionality. If you're thinking of them as adversaries and not partners than something else is wrong (and its possible you're contributing to the problem)
(2) You cannot fully automate the design of responsive apps without sacrificing quality. Its hard to tell from your post, but its possible you want to design a single state and have the mobile, tablet, and/or desktop versions automatically generated for you. It doesn't work that way -- responsive design is not only about choreography (how to make your designs stack/scale). Note: The simpler your site is, the less true this is....and machines will make this less true over time. eg: Framer X looks like its going make good progress. That said, I'm skeptical overall -- machines must make assumptions that are not informed by your specific needs, whether they're driven by business goals or user-related insights). If you are frustrated with the additional effort of designing responsive states, its more likely an issue with your level of experience and/or efficiency as a designer. This will get better over time! Just keep working
Obviously, I don't know you...so this could be way off. Just reading between the lines of your original phrasing
I think, to one degree or another, we all feel that way.
From what I understand, the complexity of html/css/grids/etc etc is hard to parse, via a tool-kit like Sketch/Figma/Photoshop etc... there've been many, many, many attempts...Sketch I believe has a few plugins like 'Protoship' .... I've tried a few for Photoshop a LOOONG time ago (they were garbage) haven't seen anything like that yet for Figma, but I'm sure someone will try eventually... The absolute BEST tool I've come across for website design etc would be Blocsapp https://blocsapp.com/
but...that's not exactly what we're talking about here is it...you mentioned web-apps....
probably the best would be Webflow... it's not ideal...but it's currently probably the best we have...
Framer X comes to mind... but we'll have to see how that goes.... https://framer.com
You said Webflow it's not ideal... How could it be ideal for your workflow?
I suppose there are aspects of it that still feel somewhat less than ideal. When I work in , say, Figma, I can design and iterate at a pretty fast rate. Something about how Froont and Weblfow work..it just seems less quick, and you have to tinker around quite a bit more to get things to look 'right' for lack of a better term. I suppose that's just the way things are...but I don't enjoy working in Webflow as much as ,say, Blocsapp or Figma, or whatever.....
As I code and design I find myself looking for familiar patterns to add easily. For example, I needed to add a 2 column card layout where one side is an image the other some text and a button. I literally copied similar code from the top of our webpage and adjusted it to my needs. I think this world is coming much sooner than people think, starting with landing pages. In app design patterns are also starting to converge and standardize so I think we will see much more rapid creation there as well.
I don't think it will be as free form as it is today, there will be a slightly larger learning hurdle, but it will be well worth it.
I don't see the point, if you are a one person team and want to build an app learn how to build an app. If you're a team then this would never work because the engineers would have to "refactor" (The nice way of saying "It wasn't written how I would write it so I'm going to rewrite it) whatever you made anyway.
Even within teams it'd be important for me to push my work to users asap with good functionality. I hate losing a week or two passing my designs to engineers…
Does this happen to you as well??
We have a proverb in german: "Gut Ding braucht Weile!" which translates to "good things come to those who wait" or "A good thing takes time!". Rushing things will make for worse quality and if we tell this to our customers they will understand that in order to get a top notch product they will have to "wait" a little longer. And in a good balanced and rehearsed team this won't take extra long.
Patience is a virtue :) use those 2 weeks to grab a coffee and reflect on the work you did, check in with your engineers, and produce more ideas.
The idea of rushing engineers to wrap something up is silly to me, when designers need ample time to plan and create, engineers have quite a heavy lift to figure out and finesse interactions, accessibility, etc.
Frankly, I think many designers underestimate the work and detail that goes into coding that truly requires the human touch (granted, with best practices in mind) to get right.
When you are prototyping, sure, get it out fast and test it, but in the grand scheme, building the product alongside design is a fast way to finish the actual product while keeping momentum going on the design-side.
WTF do you think happens in that week or two? Engineers aren't machines that convert your mockups to code. They solve complex problems that only a human being can do through problem-solving, abstraction and collaboration with the other layers of the stack.
This comes across as incredibly naive tbh, no wonder you are struggling—I don't think you understand how any of it works.
I hate losing a week or two passing my designs to engineers…
It's their job for a reason, they have to maintain it and fix it when it breaks. By you doing their job you're putting this burden on yourself and because you don't know how to build it from scratch you're not qualified to actually fix it in the case of it breaking.
My 2 Cents: I have been coding and doing visual design for a good amount of time now and I can build a fully responsive views with code almost as quickly as I can in Sketch. I'm not trying to give myself a pat on the back here, but my point is the tools exist if want you learn them, and they are free and accessible to all!
Yeah it would be great to have a tool that took visual design and converted it into code, but why not just start with coding? I think what it comes down to is where do you want to allocate resources: learning how to code yourself, or teaching your drawing program to code for you.
We can simply skip altogether and design & build a machine that can understand what is our problem, even we don't ever think about it and it finds a solution and builds it. Or at least we can skip the design part too? Right?
(Front-end) Coding/programming is explaining the computer to what it should do with the static objects we provide them. So you can find a different way than what we have now, but you have to tell what is what and how it should work together.
Otherwise, there must be a template/pattern to match. And these rules for templates to match will limit you more than anything. ("You must use 3 lines, at least X px wide for AI to understand that it's a menu... and no you can't use an emoji for that, AI doesn't understand"... kind of dialogs/rules)
Nope.
Tumult Hype is worth a look if you work on a mac. Responsive layouts, physics, symbols, images, sound, movie, x y z rotation, element opacity, clickable elements, etc. and animations, export to html5.
Hey Charles, we do feel the same pain. Here's what we've been working on to solve this problem https://design.views.tools
And here's how to find more info about the progress https://blog.views.tools
Let me know what you think?
Have you looked into Launchpad for Sketch?
Thanks!
Check out SuperNova. Their awesome team is solving this exact problem. They are a Sketch companion app that takes sketch files and imports them , then gives you the ability to set all kinds of responsive rules, create transitions, scroll views, mess with containers & tables, create animations, link screens, etc....and when you're finished you can export to swift, studio or react- 100% usable code. Currently they are in v4 beta, but ive used it and it works really well.
This is wrong: "turn designs into responsive web apps". It's just designing responsive web apps graphically (drag'n drop). I believe all the current apps that are offering the feature you're looking for, are good enough as far as it's a static stereo-type design. It's just like if you need complexity, ask an expert. Sure it feels more natural to human to just build apps or websites with blocks of logic and designs just like building a house but this is a fast-paced developing industry; too soon to hope for things like that.
Anything's possible but understanding how to design a tool that lets you design something in a medium that's difficult to describe visually is the biggest challenge. It's like designing in a third dimension.
People are creating tools to try and overcome this but unfortunately they don't allow designers to explore ideas in a way which is as natural as they are used to. For example Webflow is great, a real amazing bit of kit. But it still doesn't work for me because I don't generate my ideas in the way it wants me too.
Someone could create something that would ease this kind of pain but it would take some time to trial how it would work. Subform were really keen on this and invested a fair amount of money trialing it, responsive design in a tool but it closed shop eventually. Framer is probably the closest I've seen to get to this but that still requires some technical knowledge, even after the new app comes out.
There's still a gap in this market. Someone's probably trying to fill it as we speak.
You mentioned " Webflow is great, a real amazing bit of kit. But it still doesn't work for me because I don't generate my ideas in the way it wants me too.".
How do you see the perfect tool for you?
At the moment I design in Figma and then code my designs to bring them to life.
However I'd imagine that such a tool where we are able to go from concept to finished design could work well if it allowed designers to straddle both between absolute layout and relative layouts. Traditional tools that designers have used have always worked well because they are very easy to think two dimensionally. It's much easier to plonk stuff on a page that matches what's in your head. Any tool that exists to ease the burden process of creating UI from an already established concept are great for doing just that, but they're not very good for letting you experiment and explore the design in the first place so you can establish what the overall concept is for your UI.
Tools like Framer and Figma are the closest I've seen to bridging this gap. Figma for example lets layer on systematic decisions about what the layout should do when it changes (albeit quite basic decisions). Framer tries to guess some of this for you. Figma currently doesn't let you export html but it could do. Framer is exports code but you can't use it directly (but that might get better with Framer X).
To my knowledge, Subform is still alive and kicking. Seems they're taking their time building it, which is fine with me!
They announced in their private forum that they are no longer developing Subform sadly. They said they couldn't decide on what features to build because their users wanted it for different things. We might see something else from them in the future but for now work on Subform has stopped.
Ah bummer! I had high hopes for it, however it turned out. Creating design tools is an immensely complicated task, so I don't blame them.
I would love to see some of their ideas realized in other tools, like the way they treated stacks and grids and placing components within them. Not to mention treating styles and properties like CSS classes rather than battling with static symbols everywhere.
One can dream...
Yep, I agree. Some day...
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now