9 ms·
The future of design tools
- nicoburns 7y agoI find it amusing that Sketch and Figma are considered "traditional tools" now. It wasn't so long ago that neither of these existed, and everything was Photoshop.
- adityapurwa 7y agoI remember when slicing means using the slice feature from Photoshop. Now slicing is just writing code and copying bits of css from Figma (or something similar). Ah the good old web where (almost) everything is an image :D
- GrumpyNl 7y agoI think you used fireworks for that, wasnt that also from adobe?
- robenkleene 7y agoYes, Fireworks was originally made by Macromedia who Adobe acquired in 2005 (mainly for Flash).
- adityapurwa 7y agoMy memories might be blurry. But I think it was photoshop, and there was this slice tool where you can define the segments of the design and export it to HTML. But Fireworks might also have the same feature, I personally never used it so I can’t say for sure. Oh also remember Dreamweaver :)
- nicoburns 7y agoFireworks and Photoshop both have a slice feature.
- terenceng2010 7y agoI miss fireworks so much as a middle school student. With it and dreamweaver, I can create website for my class before I learn any programming at all. They are so easy to use!
- robenkleene 7y agoI think he’s talking about the paradigms as raster and vector editors, which I would still categorize Sketch and Figma as. They’re vector editors with some specialized features for UI/UX. They’re still largely in the mold of what Photoshop and Illustrator have done for over 30 years. What I always find interesting about these pieces, is they always seem to be saying “they’re old now and need to be replaced” rather than marveling at the durability of original approach, which has been astounding. Same can be said for plain text, Unix shell tools, spreadsheets, NLE editors, the DAW. These should be celebrated for how successful their designs have been, instead of lamenting how many “old tools” we're using.
- smilespray 7y agoYou make many good points, especially NLEs and DAWs. For me, the last "killer" Photoshop feature was layers. That was in 1994. I still use it every day, but only because I have almost 30 years of muscle memory. It's getting slower and slower for every release. Granted, it inherited a bunch of nifty web-savvy features from Adobe ImageReady in the first half of the 2000s, but the whole sh*tshow that went down when ImageReady was killed was internal politics and a sign of crappy things to come. It's interesting that the same navel-gazing, customer-ignoring attitude that killed QuarkXPress in favour of Adobe InDesign struck Adobe. (By "killer", I mean a feature that completely changed the way I could work with graphics. Sure, I've saved a bunch of time with Actions, but the feature was not transformative.)
- superhuzza 7y ago>They’re vector editors with some specialized features for UI/UX I've used Sketch, Illustrator, and Photoshop pretty heavily in my career. Your statement is a bit like saying that a motorbike is just a bicycle with a few specialized features for people who want to go fast. The way component libraries, CSS outputs and Craft plugins work with Sketch make it a totally different workflow to Illustrator, even if the basic features are the same (draw vectors).
- k__ 7y agoI have to admit, I was underwhelmed using Sketch and Figma. People were touting it like the new hot shit, when it came out, but from a developer point of view it still felt like building with legos. But yeah, if you say "everything was Photoshop" than Sketch and Figma are orders of magnitude better, haha.
- monkin 7y agoAnd, I'm still waiting for Sketch killer from Bjango... it's 5 or 6 years now. ;)
- JDiculous 7y agoI've always wanted the ability to just save my HTML/CSS changes in Chrome Dev Tools to the source files ("Future #3"). Why has that not been done yet? Would save a ton of time.
- jerven 7y agoFirefox can do this for the css files, which I use quite often. Never thought about the HTML side as that is in templates anyway.
- robenkleene 7y agoMy understanding is Chrome Workspaces[0] already do this. But the problem here is how do you make this work with asset pipelines for SASS, HTML template to languages, etc...? [0]: https://developers.google.com/web/tools/chrome-devtools/workspaces/ https://developers.google.com/web/tools/chrome-devtools/work...
- bartproost 7y agoA friend recently made this: https://devsync.co/ https://devsync.co/. Not sure if it works with html, but it makes the finicky css a thing of the past.
- gitgud 7y agoPretty sure you can already add local folders and save files in Chrome dev tools... https://developers.google.com/web/tools/chrome-devtools/workspaces https://developers.google.com/web/tools/chrome-devtools/work...
- turbinerneiter 7y agoIs there a reason (or am I wrong about it) that the most common and most liked tools for developers are mostly Open Source, while there are almost no Open Source tools aimed for designers making it big?
- robenkleene 7y agoOpen source projects are run by developers, why would you expect developers to make great tools for any field except development?
- turbinerneiter 7y agoThat is true, but web-design and web-development are pretty close to each other and I'm pretty sure there is a lot of people out there doing both. There is also counter-examples: KiCad is an EDA tool which is very, very close to the commercial ones. But it's a great point, we could look at the counter-examples - good Open Source tools not aimed at developers - to maybe find out why they exist and how to do it. Browsers come to mind, Android in some regards. But hopefully we can find something else than ad-delivery infrastructure.
- monkin 7y agoIs there only web design and web development in this world? :)
- welly 7y agoYet they do... GIMP? Inkscape? Blender? Libre Office? Firefox?? Chrome?? I'm actually not sure what you're suggesting. There are no great open source projects outside those written for development? That's clearly false.
- robenkleene 7y agoAs others have pointed out, web browsers are developer tools. Just because other people also use them for other things doesn’t mean they’re not core to developer's workflows. GIMP, Inkscape, and LibreOffice aren’t competitive with their commercial alternatives. Which leaves Blender, which is the exception of a high quality open source tool that’s not for developers. I’ve spent a lot of time thinking about this, and I think they’re two reasons it exists: 1. The comparable commercial tools are very expensive, e.g., thousands of dollars per year, versus a bit over a hundred a year for something like Photoshop. 2. Developers have a particular affinity to 3D modeling, e.g., it’s the biggest gatekeeper to various types of development like games programming and AR/VR. But I agree 100% that Blender is a fascinating exception, and I’d love to hear more theories about what’s made it so successful.
- shripadk 7y agoWhy is Framer X not on this list?
- psweber 7y agoProbably because it's from a visual designer's perspective. There is nothing in the article about prototyping. It was focused on layout and developer hand-off. Framer is behind on those fronts, but they have a pretty different paradigm.
- shripadk 7y agoWhy is Framer X behind on layout? It has a really good layout system based on Flexbox and there is a plugin for handling grids too. Do you mean to say Framer and not Framer X? Because both are totally different. Framer was mostly geared towards prototyping while Framer X is for creating shared design systems (apart from prototyping ofcourse).
- pjmlp 7y agoLooks interesting, making a note for when they release a Web/Windows version.
- deleted 7y ago[deleted]
- davidy123 7y agoThere is nothing "crazy" abut "Browsers gobble it up." Along with annotation, this was supposed to be a standard feature of the web, in fact it was built into early versions of Netscape[1]. It just takes the world a long, long, long time to catch up with the bigger background ideas, because there are so many details and so many ways to make money with the immediate. 1. https://en.wikipedia.org/wiki/Netscape_Composer https://en.wikipedia.org/wiki/Netscape_Composer
- PaulDavisThe1st 7y agoIt wasn't even that long ago that I remember being constantly irritated by accidentally pretty Ctrl-E instead of Ctrl-W in some ancestor of Firefox, and finding myself editing the page. I was actually somewhat glad when this was removed.
- calciphus 7y agoI had one of my team members recently introduce me to document.designMode="on" For the better part of...15 years? I've been using various inspectors and dev tools. Like a chump.
- lincpa 7y agoWe can systematically simulate integrated circuit systems and implement "software design/development automation" like Electronic Design Automation (EDA). It is an innovative and revolutionary approach to develop large-scale software. https://github.com/linpengcheng/PurefunctionPipelineDataflow https://github.com/linpengcheng/PurefunctionPipelineDataflow
- dsego 7y agoWhatever happened to Macaw, the revolutionary web design tool? http://macaw.co http://macaw.co
- uxcolumbo 7y agoAcquihired by Invision - unfortunately (hopefully fortunate for the Macaw team) https://www.invisionapp.com/inside-design/macaw-team-joins-invision/ https://www.invisionapp.com/inside-design/macaw-team-joins-i...
- nlte 7y agoI've never understood why web design doesn't take place in a text editor and browser (with other tools, like Photoshop or Illustrator, for secondary tasks). The output of web design is, ultimately, HTML and CSS, so what reason could a professional have to work with tools that can only yield an approximation of what they are paid to do? In my view, a designer without full mastery of at least HTML and CSS doesn't really deserve his title. Going a little farther: with some knowledge of JavaScript, JSON and how to transform it (map, reduce, filter, sort), a designer can ask for some sample data and come up with a functioning prototype that offers truly important insights into the problems his design is supposed to solve. Client-side frameworks like Svelte.js are making all this very easy. Nothing is more maddening, and a waste of time and money, than a Photoshop mockup using rudimentary, and generally too self-complacent, content.
- chadlavi 7y agoYou're right, everyone should have the same job as us! /s Design is a different skill set than writing code. For some highly visual/spacial people, design is easy and intuitive, and managing lines of text is very unwieldy. Be like, 1% empathetic dude. Anyway, if designers wrote the code you'd be out of a job. Design should be a continual conversation between someone with the vision and someone with the skills to implement it.
- nlte 7y agoMy comment didn't exactly imply that designers and programmers are the same, simply that web designers should be able to use the tools (and fully understand the constraints) of what constitutes the final output of their job, that is HTML and CSS. Writing CSS and server-side code are obviously two very different things. A designer could be a guy who types CSS in a text editor, among other things.
- aklemm 7y agoMight be a tough pill for some, but ultimately I agree it's the way the industry needs to end up. Consider the architect; he doesn't get to blue-sky wild ass concepts for a building. He has to draw within boundaries of local codes and feasibility, often using technical tools such as CAD.
- ken 7y ago> Humans love standards and standardising things so I think whatever the future is, it'll always gravitate towards 1 or 2 main tools. I need 5 different chat apps on my phone in order to talk to all my friends and colleagues. And that doesn’t even include many of the ones I’ve read about online which are apparently popular elsewhere, like WhatsApp, WeChat, and Telegram. Standardization is great, but the set of tools we end up using is an accidental emergent property.
- Izkata 7y ago> This is a crazy idea but hear me out. Inspect Element is amazing. It’s what Hadron is basically utilising in its app. The experience that Chrome and Firefox have created around things like animations and grids is impressive. So why can't Chrome and Firefox add a few extra features, let developers enter “Edit” mode and allows those edits to change the files you are manipulating? Wasn't it possible to set up Firebug to do this, before it died and was replaced with the built-in tools? (Or am I thinking of a pre-quantum add-on to the current tools?)
- ollerac 7y agoI believe this is currently possible with Chrome's Workspaces [0]. [0]https://developers.google.com/web/tools/chrome-devtools/workspaces https://developers.google.com/web/tools/chrome-devtools/work...
- z3t4 7y agoI've been working on an IDE and one challenge is to reverse all the compilation of modern frameworks in order to get WYSIWYG editing on the compiled app.
- zackbrown 7y agoThe author's assessment of the "no-code" and "hybrid tools" landscape is either lazy or a joke. Here are a few more: No-code tools for apps & websites: - Webflow - Glide - SquareSpace - Dreamweaver [1] - Visly Hybrid "designer/developer connectors" - Hadron - Modulz [2] - Interplay [3] - Haiku [4] - Zeplin - Zeroheight [5] - InVision DSM [5] Sad to see this blog post on the front page of HN since it's such a poor representation of this landscape. Hopefully this comment helps in a small way :) -- [1] yeah it still exists, and yeah it's pretty much still Webflow as a 90's-vintage desktop app. [2] Modulz' product doesn't exist yet, but they've built hype. Caveat emptor. [3] Just like Modulz, but from what I've seen there's more execution and less hype. [4] My company: we pivoted our original "designer/developer connector" into an animation tool — we're launching our new collaboration tool soon. [5] Sort-of; designer-focus
- brudgers 7y agoThe remarks about the author detract from Hacker News more than the information in the comment adds to it. Removing those remarks would improve the comment. Adding links to the resources might improve it further but won't make it good Hacker News comment if the remarks remain.
- zackbrown 7y agoThanks for the feedback! "Lazy work" does not mean "lazy person." And "joke" would be better stated as "this article reads suspiciously as astroturfing." But I see how the blunt call-out of lazy work and tip-toeing around the astroturfing vibes—i.e. the way I worded my comment—could read as a personal attack, and I agree that's not a productive way to approach discourse. I missed the edit window, but I would amend the first line: s/author/article and s/a joke/intentionally misleading.
- brudgers 7y agoThe proposed edits don’t assume good faith and don’t contribute to understanding the topic. Instead here we are in the weeds.
- PaulDavisThe1st 7y agoAnother article on design for software that is written as if there will never be another non-browser/non-CSS app ever again.
- catchmeifyoucan 7y agoI have a #5 proposal. I believe as the future gets simpler. We’ll be on the lookout for a “Morphing UI”. One that adjusts based on the environment. We’re kind of seeing this paradigm with conversational bots - though not perfect. Perhaps entire spaces built with something like: adaptivecards.io It can’t replace all of our traditional UI. However, with more A.I. requiring less inputs, there may be a future where data, not UI sets apart services.
- deleted 7y ago[deleted]
- necovek 7y agoOne of the things I rarely see discussed or even mentioned is the ability for designers to easily provide incremental design improvements to engineers. Software development now has long established practices to develop and deliver incrementally. Where it is understood that you are delivering value piecemally. With the disconnect present between design and development, I think design is still lacking in working out how to approach problems incrementally. All too often, you are handed down a design to deliver in one go, when you can't reasonably do that. Perhaps it's my lack of familiarity with the field, but that's my perception. (To be clear, majority of software devs still struggle with it too, but core principles have been known and applied for 20 years). Do any of the tools mentioned (or not) specifically focus on that aspect of coordination?
- jgust 7y agoI see teams who are investing in "design systems" approaching this operation model. They're codifying the design language, teaching their applications to consume this language, and then making changes to subsections of the design system iteratively. The design function (designers, product) can make changes widely, or isolate them to specific components, and test these changes at each step rather than the "all in one go" we're used to.
- necovek 7y agoThat is great to hear: do you have any links to less abstract write-ups of how it looks and works in practice, and what (software or otherwise) tools are employed?
- sktrdie 7y agoSurprised Facebook Origami isn’t mentioned to bridge the gap between devs and designers.