TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

It's Time for a DevTools for Designers

163 点作者 vanni大约 7 年前

25 条评论

devins大约 7 年前
Every proposal like this seems to assume that the web is basically the same as paper, and therefore should have tools that work like print tools. And this may be true for many marketing sites, which are effectively posters with download buttons. This is probably the kind of thing the author has in mind, because his wishlist doesn&#x27;t include anything to do with interactivity, video, sound, etc.<p>But these are the best parts of the web! As much as designers want to believe it, a web app isn&#x27;t actually a series of pictures. There are far more possibilities than with paper, and you remove all of those possibilities when you insist on designing like it&#x27;s paper.<p>Disclaimer: I am a designer who codes.
评论 #16818945 未加载
评论 #16817541 未加载
评论 #16819138 未加载
评论 #16819149 未加载
评论 #16833012 未加载
评论 #16819115 未加载
评论 #16820561 未加载
realusername大约 7 年前
&gt; having the code update itself intelligently and automatically.<p>That&#x27;s why what the author wants is impossible. Everybody tried to make the perfect design Tool for web content starting back from Frontpage, it just never worked, not even once.<p>There&#x27;s so much invisible pieces in web which are not related to the design. Does the markup makes sense? How does the design integrate with the features (web isn&#x27;t static print at all). How does the code renders on non-standard screen sizes? Is the code generated maintainable and readable for future use? Is there a right balance between design and loading time?<p>The core issue is that if you would provide all the features in a software that the code provides, it would be more complicated than learning coding itself. That&#x27;s also why nothing replaced a text-editor to code after all these years. If you would invent something to replace it, it would be more complicated than directly learning to code.
评论 #16821256 未加载
评论 #16821178 未加载
评论 #16820779 未加载
zackbrown大约 7 年前
This has been done before, and it&#x27;s time for it to happen again.<p>Hailing from 1995, Flash (nee Future Splash) was a dev tool for designers. Design, animate, optionally code, then ship to production on any device. For that connection between design and code [and the imaginativeness, the creative empowerment!] there&#x27;s still a big ol&#x27; Flash-shaped hole in the world. [1]<p>More recently, in the game industry, Unity brought together design and code in a compelling way — by integrating existing tools. E.g. do your 3D modeling in Maya, do your coding in Visual Studio; find a common workflow to design and code together for any platform through Unity. This has worked well enough for Unity to capture &gt; 50% market share in the game industry over the course of the last ~decade.<p>The key to this problem is a workflow-unifying tool that 1.) enables designers and developers to create software together through comfortable + familiar tools 2.) ships that software to every device<p>Like Unity. Like Flash. It&#x27;s been done before.<p>[1] I&#x27;m passionate enough about this subject that I&#x27;ve dedicated my career to it. I&#x27;m on the Haiku team (YC W18) and we&#x27;ve taken a lot of inspiration from Flash, Unity, and modern software practices to build a cross-platform solution that allows designers and developers to create software together. <a href="https:&#x2F;&#x2F;www.haiku.ai&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.haiku.ai&#x2F;</a>
评论 #16818596 未加载
评论 #16832461 未加载
评论 #16817762 未加载
pcmaffey大约 7 年前
A note to all designers reading this thread: HTML + CSS is the best design tool you could learn.<p>Don&#x27;t think of it as code, or engineering. Get over the mental block. It&#x27;s not more complicated than learning Photoshop or Illustrator. It&#x27;s just a different interface. One that gives you total control. Where you can build things that actually work, and aren&#x27;t just static representations. If you do web design, learn to work with the final medium. Otherwise, what are you really doing?<p>(..from a designer and engineer.)
评论 #16817944 未加载
评论 #16821094 未加载
评论 #16819687 未加载
Townley大约 7 年前
Honestly, Mozilla could just shove a DreamWeaver clone into Firefox and make a lot of designers and developers happy.<p>The challenges for developing software that would let someone who doesn&#x27;t know HTML&#x2F;CSS produce HTML&#x2F;CSS seem high. In the &quot;drag and drop interface&quot; did that drag mean that the column should be 60px smaller? 10% smaller? 1.21rem smaller? Should the font get smaller when a username is longer than 15 characters, should the column get bigger, or should it overflow to the next line? Is there custom menu interactivity at different breakpoints, or can I just let Bootstrap do its magic?<p>That said, Sketch or Figma plus an exporter gets wonderfully close to what the author is talking about. And as a developer, I appreciate being handed imperfect HTML and CSS over being handed a picture of a website. At least with the former, I can copy and paste into the appropriate location, or throw out that which my judgement decides is counterproductive or unnecessary.<p>So I don&#x27;t believe that this DesignTools utility needs to be perfect from the get-go, or address most&#x2F;all of the edge cases that will come up during development. It just needs to decrease the cognitive workload that developers take on during the &quot;PSD &gt;&gt; application&#x2F;website&quot; process.
RobertRoberts大约 7 年前
They&#x27;ve been around for years in many forms on many platforms. This isn&#x27;t a new idea. The problem is solved by combinations like this:<p><pre><code> Designers &gt; GUI DevTools &gt; Canned Solutions Designers &gt; Coder&#x2F;Designers &gt; Coders &gt; Any Solution Designer&#x2F;Coders &gt; Any Solution Designer&#x2F;Coders &gt; GUI DevTools &gt; Canned Solutions etc... </code></pre> You have to make a compromise somewhere, either with skilled people or tooling.<p>I had a friend work with a client using a Squarespace site, and his client asked &quot;Can we put a red circle ad in the top right corner?&quot;<p>His reply was &quot;Maybe&quot;. If they were using a non-canned solution, the answer would be &quot;yes&quot;.
评论 #16817481 未加载
Bizarro大约 7 年前
Can production-level, front-end developers get some cool design devtools too?<p>I&#x27;ve never been able to play around with Sketch because it&#x27;s Mac only. Every browser-based, UI design tool that I&#x27;ve ever played with has been so klunky, or non-intuitive that I just gave up after a couple minutes.<p>I&#x27;d love to have a nice prototyping tool using Bootstrap 4 or Material that has round-tripping like the old-school IDEs used to have.
评论 #16819538 未加载
mattkevan大约 7 年前
The problem is that our design tools are not good enough. Sketch combined with a handoff tool like Zeplin is lightyears ahead of Photoshop for web and app design, but fundamentally, at heart, it&#x27;s a draw program. You make a page, draw a bunch of boxes and call it a website.<p>It&#x27;s not. It&#x27;s a page layout. But websites and apps aren&#x27;t pages, they&#x27;re dynamic systems built from interactive components with multiple states and screen sizes.<p>All visual web builders do is replicate traditional drawing tools, but output to HTML&#x2F;CSS rather than Postscript or bitmaps. This is not enough, except for the most basic of brochure sites.<p>There&#x27;s still a massive gap between designs and working code. Some things that are easy to do in Sketch are tough in code and vice versa - it&#x27;s too easy to do things that become problems later. And because it&#x27;s static images, it&#x27;s not easy to show live data or interactions.<p>Prototyping tools like Framer and Flinto can help here, but again, it&#x27;s never a true representation of what can actually be done in code.<p>For both layout and interaction, the developer has to recreate something that&#x27;s already been created - it&#x27;s an inefficient process, and one that go wrong unless the design team thoroughly understands the systems they&#x27;re designing for and can know the consequences of their design decisions.<p>I&#x27;ve seen it happen many times where developers struggle to implement something that the designer did quickly without really thinking about. Not the designer&#x27;s fault - just falling down the gap between design tools and medium. And not enough collaboration between the teams.<p>There is some really cool stuff on the horizon however. React, and the move towards component-based design and development is making this possible. But it&#x27;s early days.<p>Supernova Studio [0] is an interesting start, along with Alva [1] and AirBnb&#x27;s Lona[2].<p>[0] <a href="https:&#x2F;&#x2F;supernova.studio" rel="nofollow">https:&#x2F;&#x2F;supernova.studio</a> [1] <a href="https:&#x2F;&#x2F;meetalva.io" rel="nofollow">https:&#x2F;&#x2F;meetalva.io</a> [2] <a href="https:&#x2F;&#x2F;github.com&#x2F;airbnb&#x2F;Lona" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;airbnb&#x2F;Lona</a>
cwilson大约 7 年前
I haven&#x27;t considered myself a front-end developer in quite some time (at least 7-8 years), but it used to be what I&#x27;d put on my business card. Since then I&#x27;ve focused almost entirely on PM and Design. I have a decent front-end background, but I&#x27;m by no means pushing production code.<p>I recently decided to give Webflow a try after a good friend, who does happen to be a front-end dev (and quite good), told me how cool he thought it was.<p>He wasn&#x27;t wrong. Yes, you have to pay to really do anything with your creation, but I think it might be worth it (if you&#x27;re a designer who doesn&#x27;t want to learn to code). I was extremely impressed with how quickly I could export my assets and various measurements from Sketch and lay everything out in Webflow, especially when it was time to build the various breakpoints and add some animations.<p>What would have normally taken me a few days (over the course of a few sessions), instead took me 2-3 hours, tops.<p>More importantly I used flexbox for much of the page, which is something I hadn&#x27;t touched before. I&#x27;ve of course read about it and have a basic understand of how it works, but I&#x27;d have spent A LOT of time getting that aspect of it right had I been coding from scratch.<p>The best part was, at least from what I could tell and based on their claims, all of this would have exported to clean code worthy of a production site. Pretty cool.<p>So, as the author mentions, Webflow is very interesting. It&#x27;s just not exactly practical because of the way it&#x27;s tied to their CMS and hosting platform. If you&#x27;re only really building marketing sites for clients who need basic hosting anyway, it might be perfect for you, but outside of that I can&#x27;t imagine where I&#x27;d use it. Certainly not on a product team, but it&#x27;s still worth playing around with on the free plan.
saintPirelli大约 7 年前
The author seems to assume that all software developers unanimously decided that a visual web editing tool isn&#x27;t going to happen and should not be worked on (even though he is entitled to it, for some reason).<p>There are plenty of very smart people laboring away to make this happen, but as it turns out, it&#x27;s not that easy.
评论 #16821193 未加载
radva42大约 7 年前
Visual builders seem like a somewhat controversial topic on HN, but I personally am a huge supporter of the idea. So much so that I invested a lot of time in building a visual builder for database software myself [1]. It&#x27;s a tool that looks perfect for UX designers, who can use it to build fully functional CRUD apps without writing code.<p>For example starting with the standard CRM and invoicing apps and going to more complex apps for inventory management, product &amp; project management - virtually any kind of database software can be built without writing code.<p>[1] <a href="https:&#x2F;&#x2F;www.formbolt.com" rel="nofollow">https:&#x2F;&#x2F;www.formbolt.com</a>
评论 #16819877 未加载
评论 #16823516 未加载
degif大约 7 年前
A problem I and my friend are tackling from a different perspective - what happens to the Web, when it&#x27;s already out there and a designer wants to introduce some new changes. This process is still in the stone age of internet - emails and screenshots are the rockstars here. As the title of this blog post says - we are also trying to come up with a &quot;DevTools for designers&quot; with <a href="https:&#x2F;&#x2F;finch.io" rel="nofollow">https:&#x2F;&#x2F;finch.io</a> - a web fine-tuning toolkit for live or development websites that tries to balance between a &quot;designer tool&quot; and a &quot;devtool&quot;.
patleeman大约 7 年前
Lately I&#x27;ve been working with designers through Sketch + Zeplin and its been pretty great. I like being able to pull CSS and SVG&#x2F;PNG assets out of the tool and it speeds up mockup to built site quite a bit.<p>What worries me about a tool that outputs html + css is then having to take that markup and integrate it with whatever client side framework or server side template engine so that its consistent with the rest of the code base, follows set code and style standards, is fully responsive and adheres to whatever arbitrary standards are set by the dev team.<p>I just don&#x27;t have a lot of faith that a tool can be flexible enough to output markup that can then be used effectively. I imagine a developer will need to massage it into place in order to get it to conform well and by that point it might have just been easier for a competent web developer to build it from scratch. For prototyping or building out functional mock ups, it could be quite useful, but if the end goal is to hand a developer some markup and stylesheets and then let them build out the business logic, then things could get messy pretty quickly.<p>It&#x27;s a good dream though and I hope that one day we can let designers do more of the view layer work but I&#x27;m cautiously optimistic.
评论 #16819570 未加载
评论 #16817480 未加载
评论 #16823408 未加载
评论 #16818319 未加载
blauditore大约 7 年前
If there were a tool that would generate perfectly acceptable code, we&#x27;d already be using it and coding <i>on top of that</i>. Whenever something is automated away, it&#x27;s usually abstracted away as a module and manual work continues on a higher level.
ninjamayo大约 7 年前
I think I would like to see in web design tools some of the principles that people like Alan Kay and Bret Victor laid out over the years. I work in React and I often think that there is a big disconnect with my team and the designers. I do not believe that all web applications need a design tool but many do. I actually think that we should have a unified dev tool that allows us to write code and design interfaces like we &#x27;ve been doing in Visual Studio for years now when we were developing Winforms.
评论 #16823429 未加载
deltron3030大约 7 年前
Pagedraw looks interesting if you&#x27;re into building components: <a href="https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=UhVXKJpwtVA" rel="nofollow">https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=UhVXKJpwtVA</a> (The video also makes sense to watch if you&#x27;re a designer and want to get an idea about how React works, if you already know React, start at min. 15)<p>Pagedraw is a tool that converts Sketch or Figma files into the HTML and CSS of React render functions.
zimorodek大约 7 年前
Excellent counter article &quot;Design tools are running out of track&quot; speaking of &quot;We are all just drawing pictures. It’s insane...Our products are interactive. Our tools are static.&quot; <a href="https:&#x2F;&#x2F;medium.freecodecamp.org&#x2F;design-tools-are-running-out-of-track-94f21b6ae939" rel="nofollow">https:&#x2F;&#x2F;medium.freecodecamp.org&#x2F;design-tools-are-running-out...</a>
fiatpandas大约 7 年前
anyone played with framer’s design mode? It produces markup and style from a sketch-like interface that you make interactive with a JS interactivity API. It’s meant for prototyping, but you could make a fully functional app if you were crazy<p>The responsive design system is really intuitive as well, and is easier to reason about than regular css techniques.<p>The code markup that comes out is.. quite messy, but it made me realize the potential of design tooling that could completely take care of the work around html and css for an individual component (for me, they take at least 2x time compared to JS for some types of components)<p>It kinda goes against the rigor of producing lean code, and does away with expertise, but it’s definitey a version of the future: designers could output a bundle that was a packaged responsive UI component that exposed a JS API
AriaMinaei大约 7 年前
There is an extremely powerful tool that developers have always had and designers sadly never had: functions.<p>Look at every website you&#x27;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:<p>As in, they are parametric, they compose, they recurse, and, most importantly in visual design, they do <i>NOT</i> match 1-1 with HTML nodes. Let me qualify:<p>Look at this simple &lt;Button&gt; component (defined in React for example):<p><pre><code> +----------------+ | | &lt;--- div | {children} | | | +----------------+ </code></pre> The component not only produces the surrounding &lt;div&gt;, it also accepts an instance of <i>another component</i> that it then places inside that div:<p><pre><code> const Button = ({children}) =&gt; &lt;div class=&quot;button&quot;&gt;{children}&lt;&#x2F;div&gt; </code></pre> The &lt;Button&gt; component does not match 1-1 with the number of HTML nodes it produces. That&#x27;s how you build abstractions – it&#x27;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&#x27;s how you keep the complexity of your frontend manageable.<p>In visual design tools however, these abstractions aren&#x27;t possible. What you get to work with are layers. Every &#x27;thing&#x27; on the screen is made of a layer, sometimes more than one layer. Every &#x27;thing&#x27; 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 &#x27;things&#x27; with the ease of controlling just a few &#x27;things&#x27;.<p>The most that visual design tools have done to manage this complexity so far, is a feature known as Symbols&#x2F;Components as it&#x27;s named in Sketch&#x2F;Figma. It helps, but it doesn&#x27;t give you anywhere near the power of functions. It&#x27;s not parametric, it hardly composes, and it doesn&#x27;t recurse. Also, you can&#x27;t create the above &lt;Button&gt; component with it.<p>Now, why haven&#x27;t design tools given us something as powerful as functions (or React&#x2F;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&#x27;re in the zone playing with shapes and colors? I certainly can&#x27;t.<p>This is all not to say that it&#x27;s impossible to make such a powerful design tool. It is possible. It&#x27;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&#x27;s UX and add animation&#x2F;multiplayer&#x2F;history to it. People want that. So it&#x27;s easier to invest on those and get rapid adoption rather than invent something completely new and convince people to jump ships.<p>--<p>ps. We&#x27;re building such a tool. We call it TheaterJS. No online demos yet, but we&#x27;ll have a private beta soon. Hit me at aria@theaterjs.com if you want to know more :)
评论 #16844035 未加载
tomcooks大约 7 年前
&gt; the appeal of visual tools is self-evident.<p>So is the appeal of a lean, semantically correct, fast-loading page.
评论 #16819123 未加载
stevefan1999大约 7 年前
I remember in React, we are able to do WYSIWYG visual design by using a library called sturctor. It was a pain to set structor up, however, and it has a limited state management facility.
评论 #16818509 未加载
est大约 7 年前
Reminds of me dreamweaver and frontpage.<p>I really miss those instead of writing tedious bootstrap boilerplates.
ajkandy大约 7 年前
Hi all, I&#x27;m the author of the article. Thanks very much for linking it here.<p>It&#x27;s very easy to fall back on entrenched opinions and unhelpful developer-vs-designer stereotypes, and see any call for a visual tool to be one to remove or demote code from the process altogether. That is absolutely not what the article states or is about.<p>I&#x27;m adamantly against canned solutions that make things easier for designers but harder for developers; rather, I want something that merges the power of code-centric tools with the speed and approachability of visual tools.<p>Basically: Visual Studio Code + DevTools + Codepen + a browser rendering engine + the stuff we use Gulp &#x2F; Grunt &#x2F; Browsersync &#x2F; Sass etc for on the command-line, but bundled into something useful for non-developers - with added GUI deliciousness that would obey good code rules.<p>Rather than just &#x27;draw anywhere&#x27; and getting all that FrontPage-y style rule nightmare, it might be more &#x27;define a grid, then draw a div into a grid cell, then either create or apply a class,&#x27; etc.<p>Interaction is definitely supposed to be part of this (something I did not go into depth with in the article) - defining states for sure, as well as animation.<p>One use context is creating a component library &#x2F; pattern library that will be consumed by several different user types. For instance, Material.io or the Salesforce Lightning Design System, IBM&#x27;s Carbon Design System, etc, intended for producing web applications.<p>Designers need a style guide, front-end developers or &#x27;designer-devs&#x27; want to see live examples with code snippets, other kinds of developers might want to know about data sources and where the variables are used in a particular component.<p>A visual tool should make it very easy to both create and edit such components, and maybe add a bit of metadata like &#x27;this component is recommended for use as the nav&#x27; and &#x27;it has these dependencies&#x27; - so you can more easily export it into something like Clearleft&#x27;s Fractal tool, etc. In the long run, such metadata might let an opinionated tool automatically snap things into place &#x2F; recommended source order to guide beginners, but always modifiable by developers.<p>And similarly, being able to open a library of components, see a &#x27;molecule&#x27; like a nav bar, then drill down to atomic components like ULs, buttons, see what the data placeholders are, etc - preferably also with some human-readable annotations.<p>(Obviously I am handwaving the complexity of actually doing something like this, but conceptually, it _ought_ to be doable.)<p>By its nature, I would want this kind of tool to promote understanding of CSS inheritance and modularity, so that it would lend itself to creating reusable symbol-objects, much as we are used to in Adobe apps and Sketch, and previsualize the changes to the cascade, or get warnings that &quot;x other classes depend on this, are you sure?&quot;<p>For instance, InDesign style palettes can roughly map onto text and object styles - your basic H1-H6, standard HTML styled elements. The missing part in Adobe is scoped&#x2F;modified or additive styles, but that&#x27;s just a conceptual step forward. In a code context, an &quot;H1, but inside a product grid&quot; style can decompose to BEM classes, and the app or tool should make this clear as we already do with Inspector computed views.<p>So just to clarify, what this really should do is help visual designers make the leap into becoming hybrid designer-developers (and vice versa) but if someone simply wants to use it to sketch things out freehand, regardless of end use or code quality, it should help them do that, albeit in an opinionated way under the covers.<p>As I allude to in the article, we don&#x27;t ask visual designers to write raw PostScript. We depend on the tools we use to author it correctly when we draw boxes or type text into our documents; the Web has added robustness. I&#x27;m not that worried about it producing spaghetti code.<p>Any visual tool should produce at least well-structured, readable code; lean towards making sure it&#x27;s standards-compliant &#x2F; uses best practices; but also is flexible enough to let you author it in any way that is suitable for your needs, so you&#x27;re not trapped in canned layouts or overly-prescriptive boundaries.
评论 #16824506 未加载
kilon大约 7 年前
&quot;In 2018, web browsers offer vast potential to interactive designers, as revolutionary as what PostScript and desktop publishing offered for print thirty years ago.&quot;<p>No they don&#x27;t , almost half a century after the creation of the most influential software technology , Smalltalk. Development tools still largely ignore designers mainly because designers try to stay as far away from coders as possible and coders as far away they can from designers.<p>These are two cultures that are founded on polar opposite ideals and principles.<p>A browser, in particular, is from a designer perspective nothing more than an abomination and is laughable to compare web apps and web technologies with specialized designers tools like Photoshop, Illustrator, Blender, Zbrush, Maya, 3DS Max etc. with the ugliness of Javascript , CSS, HTML and XML and is no coincidence that those technologies have so tiny presence on the web. Even WebGL which supposed to bring design and designers to web browsers is pretty much an abandonware.<p>For now, we can only compromise with modern IDEs that are somewhat designer-friendly like Pharo, Delphi, Squeak etc. and maybe we designers wait for another half century until the so-called &quot;IDEs&quot; catch one and another century for web technologies to move to HTML12 which may or may not be at last designer-friendly.<p>Especially when we take into account the blazing fast evolution of designer tools (which drive also the hardware evolution mostly through games) and the glacial pace of the evolution of software development tools stuck to the curse of backward compatibility, those two worlds continue to move apart with an accelerating rate.<p>In the meantime, the gap (or more likely the abyss) between those two cultures will remain. Designers avoiding coding like the plague, coder being mesmerized by their &quot;readable code&quot; completely oblivious to what makes a design good, kneeling before the glory of the holey grail know also as &quot;not reinventing the wheel&quot; or &quot;not fixing what is not broken&quot;.<p>It is sad that 30 years ago designers and coders were so close together as communities, the closest they ever been was during the 80s with the introduction of Amiga 500 which gave birth to some of the most popular design tools but those days are long past.<p>It&#x27;s funny because I joined a &quot;coders and designers&quot; facebook group out of curiosity and after 2 years the only design related talk have been a mockery about designers and a couple of mention of design tools from the rare breed of game developers that tend of frequent the group. Can&#x27;t say I am surprised.<p>But hey if coders want to continue to believe that coding is an art and that design is an essential part of software development, who am I to judge. I am also delusional at times. None is perfect.
评论 #16819183 未加载
george_ciobanu大约 7 年前
Also check out bubble.is