3 ms·
There is an extremely powerful tool that developers have always had and designers sadly never had: functions. Look at every website you've built. The frontend
by AriaMinaei 9y ago
There is an extremely powerful tool that developers have always had and designers sadly never had: functions.
Look at every website you've built. The frontend is made possible only by functions. You may call them React components, or Vue templates. You may even have your own view library. But they all boil down to the characteristics of simple functions:
As in, they are parametric, they compose, they recurse, and, most importantly in visual design, they do NOT match 1-1 with HTML nodes. Let me qualify:
Look at this simple <Button> component (defined in React for example):
+----------------+
| | <--- div
| {children} |
| |
+----------------+
The component not only produces the surrounding <div>, it also accepts an instance of another component that it then places inside that div:
const Button = ({children}) => <div class="button">{children}</div>
The <Button> component does not match 1-1 with the number of HTML nodes it produces. That's how you build abstractions – it's why you can re-use this button in different situations without changing its source. And, you do the same thing for other reusable piece of your project. That's how you keep the complexity of your frontend manageable.
In visual design tools however, these abstractions aren't possible. What you get to work with are layers. Every 'thing' on the screen is made of a layer, sometimes more than one layer. Every 'thing' you want to put on the screen will make your hierarchy at least linearly more complex. That is the opposite of what programmers have, where they can create hundreds of 'things' with the ease of controlling just a few 'things'.
The most that visual design tools have done to manage this complexity so far, is a feature known as Symbols/Components as it's named in Sketch/Figma. It helps, but it doesn't give you anywhere near the power of functions. It's not parametric, it hardly composes, and it doesn't recurse. Also, you can't create the above <Button> component with it.
Now, why haven't design tools given us something as powerful as functions (or React/Vue components)? Because functions have complexities of their own, eg. type annotations, or runtime errors, just to name a few. Can you imagine having to fix runtime errors when you're in the zone playing with shapes and colors? I certainly can't.
This is all not to say that it's impossible to make such a powerful design tool. It is possible. It's just harder. You gotta rethink the whole thing from the ground up. But there are tons of low hanging fruits in this growing industry. You can take Sketch's UX and add animation/multiplayer/history to it. People want that. So it's easier to invest on those and get rapid adoption rather than invent something completely new and convince people to jump ships.
--
ps. We're building such a tool. We call it TheaterJS. No online demos yet, but we'll have a private beta soon. Hit me at aria@theaterjs.com if you want to know more :)
- Const-me 9y ago> In visual design tools however, these abstractions aren't possible. I occasionally use MS expression blend. It’s a visual design tool, yet it’s quite good at working with styles, control templates, data templates. These are XAML markup equivalents of functions. They don’t match 1-to-1 to visual elements, and you can compose them; even recursively if you want to, see e.g. HierarchicalDataTemplate. HTML doesn’t have templates, but there’re third-party libraries implementing them on top. IMO the main reason why people still code web design is legacy: until recently, clients were too slow, different browsers were less compatible, i.e. coding was the only viable option to ensure acceptable quality results.