I'm a developer and I remember the first time I tried to do some design work. My design friends told me to use Photoshop and I just couldn't figure it out. The learning curve was so steep I gave up on my ambitions to learn UX design. Plus it seemed weird to be using a photo editing tool to design software.
A few years later Sketch came along and it was so easy and intuitive to use that I was able to pick it up immediately. I've been able to get pretty good at UX design now because the barrier to entry on the tools side got so much lower.
I wonder if there's a way to lower the barrier to entry for coding in the same way. I mean, when you think about it, we're still using text editors to build software. Seems odd.
Anyway, Sketch is awesome and the first of this new wave of design tools. I use Figma now. It has most of the benefits of sketch and it supports Mac, Windows and in browser. I fear this funding may have come too late.
Wow, this comment got me really excited. I, too, have always wondered why programming has always been us programmers, sitting down in front of a text editor, writing tokens (def, if, = etc.).
It’s what got me working on Retool (https://tryretool.com). The idea is that visual programming has a bad rap, primarily because it’s being used in the wrong places. Most people try to apply visual programming to end-user software (Twitter, Airbnb, etc.). But because visual programming is really good for getting to an 80% solution in 20% of the time, and because 80% of Twitter really isn’t good enough (imagine Twitter with no autocomplete for tagging other users), building customer-facing software is precisely visual programming’s worst use case!
Retool’s focused specifically on building internal software. The idea is that, for internal software, 80% literally is 80%. And so visual programming is particularly suited for building internal stuff. Here’s a 4 minute demo video: https://vimeo.com/303811211. (People have described it as Delphi or Visual Basic in the cloud. In this case, the cloud is actually helpful, since it lets you distribute the created apps easily with authentication, authorization, and audit logs.)
If anybody has any feedback, or otherwise wants to hypothesize on why we’re still programming in text editors, please let me know! I’m david@.
Visual programming was pretty popular in the architecture industry last I remember. Mograph is also another area where I've seen people use it a lot, (its hard to hand model and animate thousands of objects), It's also great for developing shaders and textures that depend on different colors and noise values.
Programmers might dislike visual programming because you give up a lot of control, but artists have a far easier time using them than writing "const int x = foo", etc since they have to basically learn a whole new language/subject matter.
On that note, I think anything that isn't particularly algorithm heavy and visual could enable a different class of people (like designers and artists) to access the utility of programming logic without having to learn a whole new language and paradigm of thinking. Who knows, maybe in the future, front-end ui work might be done by designers using a "photoshop-for-interfaces" software rather than programmers writing react components.
>I wonder if there's a way to lower the barrier to entry for coding in the same way. I mean, when you think about it, we're still using text editors to build software. Seems odd.
We had HyperCard > Flash > Visual Basic > Delphi. None of those got any traction in the field because Computer technology popularity are dependent on Companies using them.
Computer Programming languages, or in fact most of the Technology Tools are Top to Bottom design. Google, IBM, Apple, Microsoft design tools that fits them, and people start using it. Do you really need k8s? I bet 80% of uses cases could do without it. Instead of bottom up design that is like Excel, everybody uses it all the way up to investment banks. It serves the need for 80%, or arguably 90%+ of number crushing uses cases.
I don't do much of excel directly as before we number crunching, need to process input before making and use to it. CSV format is good and then excel.
But for me k8s solves lot of problems, make deployment reliable, faster, infrastructure in code and these things. Other than k8s, haven't seen faster way of deployment on scale. IMO canary deployment style in istio is just the way deployment should be done. I find k8s great piece of software, still lots of apis need to be in GA, but still I found and see k8s a great piece of future.
It eliminates weeks and months of tedious design to code conversion and you can build sophisticated SaaS applications, content-rich pages, and e-commerce portals much faster.
It might help designers who're interested in understanding how their design translates into code because they can instantly see the underlying code for each design, play around with it, and see how it changes.
Checked your video and congrats for your effort. As every other tool so far that does try to make visuals into code ( e.g. Dreamweaver style ) I did not expect your tool to be useful for any company-scale use.
In your tool an anti pattern that I found was that it seems to use inline styles and css class names of sort 'font-normal' 'text-gray1', etc. That's unmaintainable for large code base.
On the other hand having `copy CSS attributes` contextual menu item in Sketch is super productive. I can choose my own class name and whatsoever and still have the exact styles as the designer wanted them to be.
> In your tool an anti pattern that I found was that it seems to use inline styles and css class names of sort 'font-normal' 'text-gray1', etc. That's unmaintainable for large code base.
Actually lots of companies use micro classes. I first learned about it using Tachyons and built a full compliance platform. It’s good because you don’t need to worry about unintended visual changes and bad because you can’t make large style changes without lots of effort.
Yeah these are out in the wild right now, but having some sort of support for those would be what I would be really looking for. The missing link is the problem. Generated HTML/CSS doesn't know anything about current frameworks / naming conventions / atomic CSS, etc.
`text-gray1` means what? Which library am I supposed to use in order to make this stylesheets work? Does it match tachyons or tailwind - no. So I have to add X lines of CSS to my project coming from a tool that I am not able to use once I change a simple class name? Not a good start.
The code you saw in the video uses Tailwind CSS, which means the code doesn't generate a class for `text-gray1`, but rather, it creates a simple tailwind.confg.js file that lists out all the colors (and every other design scale like typography, spacings etc.). Tailwind uses this config to generate all the functional CSS classes necessary. It is highly suited for building custom UI designs, unlike Bootstrap, Bulma etc. that brings its own styles.
The software also can generate BEM like you wish for in the future. One of our earlier iterations did do that, but the default stack today is Tailwind which I've found to be the second best way to approach CSS (the first is CSS-in-JS, but with explicit design scales).
You might be interested in Fuse Open (aka FuseTools) which is a design application that generates working application code. Before that there were various UI editors in software IDEs but those tend to produce a lot of boilerplate code. Interestingly, there are a lot of visual programming tools used in education now, such as Scratch, which get away from the text editor paradigm.
Most often these tools are so lackluster that it's not even worth using them. These code generators can never achieve the quality that a good programmer can give.
>I wonder if there's a way to lower the barrier to entry for coding in the same way. I mean, when you think about it, we're still using text editors to build software. Seems odd.
Is it really odd, though? UI design is inherently a visual activity - it makes sense to me to have a graphical tool like Sketch to use.
Whilst I sometimes use class hierarchy or control flow graphs to help me visualise a codebase, I feel that the medium of text is more efficient to write in (if you've ever seen one of those block-based coding tools often used in education, you'll know how painful it is to make something non-trivial by dragging and dropping blocks).
And it's not like we haven't seen innovation in the developer tooling space - nobody is using notepad to write serious code. JetBrains in particular have made a whole suite of tools which actually understand the code you're writing and suggest improvements, allow you to easily perform refactorings etc - it's far, far more than just a text editor. Today, I won't use a programming language without a JetBrains IDE/plugin.
Can I assume I do not miss anything from Sketch if i go Figma regarding :
- wire-framing
and
- demoing prototypes with transitions on my phone (specially this)
?
I am about to jump the wagon of design (product owner & ceo doing stuff on power point copy paste or balsamiq) and i do not have time to have multiple tools, i want just one.
Figma on browser + collaboration seems nice to test.
There is at least one company at each YC batch that aims to lower the barrier of entry for coding, us included. We (Anima YC S18 https://www.animaapp.com) take Sketch designs and convert them into code.
Amongst other things designers also use our generated code to learn how designs can be viewed in browsers as HTML/CSS.
When Sketch introduced Symbols, they started making designers think like developers, in the sense of reusable self-contained components. This makes our and companies like us live easier. And for that we thank them :)
+1 for Bubble.is they are definitely a big step in the right direction. They are still a long way from being ideal though. It's pretty hard to get started from scratch and the templates available are not very easy to modify and scale. It would be great if there were a few more players in this space.
Bubble is like a mix of an online Visual Studio for web development and Heroku. Everything is online, all the code and data (DB), you can only work through their interface and cannot port the app anywhere else. They provide the hosting.
For simplified software design, look for low-code or no-code tools.
An as for whether they are scalable, the new ones might be. I remember reading about a company, from somewhere in the middle East, using them to build hospital IT systems, which are usually very complex.
A few years later Sketch came along and it was so easy and intuitive to use that I was able to pick it up immediately. I've been able to get pretty good at UX design now because the barrier to entry on the tools side got so much lower.
I wonder if there's a way to lower the barrier to entry for coding in the same way. I mean, when you think about it, we're still using text editors to build software. Seems odd.
Anyway, Sketch is awesome and the first of this new wave of design tools. I use Figma now. It has most of the benefits of sketch and it supports Mac, Windows and in browser. I fear this funding may have come too late.