mirror of
https://github.com/LCTT/TranslateProject.git
synced 2024-12-26 21:30:55 +08:00
translating
This commit is contained in:
parent
ef5002d509
commit
d3723ade31
@ -1,57 +0,0 @@
|
||||
[#]: subject: "Merge design and code with Penpot"
|
||||
[#]: via: "https://opensource.com/article/23/1/merge-design-code-penpot"
|
||||
[#]: author: "Seth Kenlon https://opensource.com/users/seth"
|
||||
[#]: collector: "lkxed"
|
||||
[#]: translator: "geekpi"
|
||||
[#]: reviewer: " "
|
||||
[#]: publisher: " "
|
||||
[#]: url: " "
|
||||
|
||||
Merge design and code with Penpot
|
||||
======
|
||||
|
||||
For most of the history of computer programming, there's been a gap between the programmers creating an application's code and the designers creating an application's user experience (UX). The two disciplines receive vastly different training, and they use a different set of tools. Programmers use a text editor or an IDE to write code, while designers often draw concepts of widget layout and potential interactions. While some IDEs, like [Eclipse][1] and [Netbeans][2], have interface design components, they're usually focused on widget position and not on widget design. The open source design app [Penpot][3] is a collaborative design and prototyping platform. It has a suite of new features that make it easy for designers and developers to work together with familiar workflows. Penpot's design interface lets developers write code in harmony with the design process like no other tool does. And it's come a long way since Opensource.com [last looked at it][4]. Its latest features don't just improve your experience with Penpot, they propel the open source Penpot app past similar and proprietary tools.
|
||||
|
||||
### Prototyping with Penpot
|
||||
|
||||
One of the common problems with trying to design how an application might work best is that, at the time of designing, the application doesn't exist yet. A designer can visualize and storyboard to help both the design team and the programmer understand what to aim for. But it's a process that requires iteration and feedback as developers start to implement UX concepts, and designs change to react to the reality of code.
|
||||
|
||||
With Penpot, you can create a "working" prototype of your web or mobile application. You can connect buttons with specific actions, triggering changes in layout based on user input. And this can all be done before any code for the project exists.
|
||||
|
||||
The most important aspect of this isn't the ability to do a mock-up, though. Everything done in Penpot for an app's design has usable layout data that developers can use in the final project. Penpot isn't just a great drawing and layout tool. It informs the coding process.
|
||||
|
||||
Rather than providing just a visual list of designer-specific elements, like properties, colors, and typography, Penpot now integrates code output directly into the design workspace (like developer tools in a web browser). Designers and developers share the same space for design and front-end development, getting specifications in whatever format they need.
|
||||
|
||||
![Image of the current Penpot interface][5]
|
||||
|
||||
### Memory unlock
|
||||
|
||||
Many online design tools use proprietary technology to provide some fancy features, but at the price of essentially becoming an application, you don't run so much as access through a browser. Penpot uses open web standards, though, and is rendered by your web browser. That means Penpot has access to the web browser's maximum available memory, which makes Penpot the first online prototype and layout application with design scalability. You can provide more options, more mock-ups, and more pitches. Plus, you can open your design space to more concurrent collaborators with no fear of running out of application memory.
|
||||
|
||||
### Self-hosting and SaaS
|
||||
|
||||
Penpot is open source, so you don't have to use it on the cloud if that doesn't fit your workflow. You can self-host Penpot easily in a container, using it as a local application on your own workstation or hosting it for your organization on your own server.
|
||||
|
||||
### Open source design
|
||||
|
||||
I've written an [introductory article to Penpot][6] previously, and since then the application has only gotten better. If you're looking to bring coders and stakeholders into your design process, then give Penpot a try.
|
||||
|
||||
--------------------------------------------------------------------------------
|
||||
|
||||
via: https://opensource.com/article/23/1/merge-design-code-penpot
|
||||
|
||||
作者:[Seth Kenlon][a]
|
||||
选题:[lkxed][b]
|
||||
译者:[译者ID](https://github.com/译者ID)
|
||||
校对:[校对者ID](https://github.com/校对者ID)
|
||||
|
||||
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译,[Linux中国](https://linux.cn/) 荣誉推出
|
||||
|
||||
[a]: https://opensource.com/users/seth
|
||||
[b]: https://github.com/lkxed
|
||||
[1]: https://opensource.com/article/20/12/eclipse
|
||||
[2]: https://opensource.com/article/20/12/netbeans
|
||||
[3]: http://penpot.app
|
||||
[4]: https://opensource.com/article/21/9/open-source-design
|
||||
[5]: https://opensource.com/sites/default/files/2022-07/Current%20Penpot%20interface.png
|
||||
[6]: https://opensource.com/article/21/12/open-source-design-penpot
|
@ -0,0 +1,58 @@
|
||||
[#]: subject: "Merge design and code with Penpot"
|
||||
[#]: via: "https://opensource.com/article/23/1/merge-design-code-penpot"
|
||||
[#]: author: "Seth Kenlon https://opensource.com/users/seth"
|
||||
[#]: collector: "lkxed"
|
||||
[#]: translator: "geekpi"
|
||||
[#]: reviewer: " "
|
||||
[#]: publisher: " "
|
||||
[#]: url: " "
|
||||
|
||||
用 Penpot 合并设计和代码
|
||||
======
|
||||
|
||||
在计算机编程的大部分历史中,在创建应用的代码的程序员和创建应用的用户体验(UX)的设计师之间一直存在着差距。这两个学科接受的培训大不相同,他们使用的工具也不同。程序员使用文本编辑器或集成开发环境来编写代码,而设计师则经常绘制小部件布局和潜在交互的概念。虽然一些 IDE,像 [Eclipse][1] 和 [Netbeans][2],有界面设计组件,但它们通常专注于小部件的位置而不是小部件的设计。开源设计应用 [Penpot][3] 是一个协作式设计和原型设计平台。它有一套新的功能,使设计师和开发者可以很容易地用熟悉的工作流程一起工作。Penpot 的设计界面可以让开发者在设计过程中和谐地编写代码,这是其他工具所无法做到的。自从 Opensource.com [最后一次关注它][4]以来,它已经有了长足的进步。它的最新功能不仅改善了你使用 Penpot 的体验,还推动了开源的 Penpot 应用超越类似的专有工具。
|
||||
|
||||
### 用 Penpot 做原型
|
||||
|
||||
试图设计一个应用如何最好地工作的常见问题之一是,在设计的时候,这个应用还不存在。设计师可以通过视觉化和故事板来帮助设计团队和程序员了解目标是什么。但这是一个需要迭代和反馈的过程,因为开发人员开始实施 UX 概念,并且设计会发生变化以对代码的现实做出反应。
|
||||
|
||||
使用 Penpot,你可以为你的网络或移动应用创建一个“可用”原型。你可以将按钮与特定的行动联系起来,根据用户的输入触发布局的变化。而这一切都可以在项目的代码存在之前完成。
|
||||
|
||||
这方面最重要的不是做一个模拟的能力,但是。在 Penpot 中为应用的设计所做的一切都有可用的布局数据,开发人员可以在最终的项目中使用。Penpot 不仅仅是一个伟大的绘图和布局工具。它为编码过程提供信息。
|
||||
|
||||
Penpot 不是仅仅提供一个设计师特定元素的视觉列表,如属性、颜色和排版,而是现在将代码输出直接整合到设计工作区(就像 Web 浏览器中的开发者工具)。设计师和开发人员共享设计和前端开发的相同空间,以他们需要的任何格式获得规范。
|
||||
|
||||
![Image of the current Penpot interface][5]
|
||||
|
||||
### 内存解锁
|
||||
|
||||
许多在线设计工具使用专有技术来提供一些花哨的功能,但代价是基本上成为一个应用,你不能运行,而只能通过浏览器访问。虽然 Penpot 使用开放的网络标准,并由你的 Web
|
||||
浏览器渲染。这意味着 Penpot 可以访问 Web 浏览器的最大可用内存,这使得 Penpot 成为第一个具有设计扩展性的在线原型和布局应用。你可以提供更多的选项,更多的模型,和更多的投稿。此外,你可以向更多的并发合作者开放你的设计空间,而不必担心应用的内存耗尽。
|
||||
|
||||
### 自我托管和 SaaS
|
||||
|
||||
Penpot 是开源的,所以你不必在云上使用它,如果这不适合你的工作流程。你可以在一个容器中轻松地自我托管 Penpot,在你自己的工作站上作为一个本地应用使用,或者在你自己的服务器上为你的组织托管它。
|
||||
|
||||
### 开源设计
|
||||
|
||||
我以前写过一篇 [Penpot 的介绍性文章][6],自那以后,这个应用变得更好了。如果你想把程序员和相关人员带入你的设计过程中,那么请试试 Penpot。
|
||||
|
||||
--------------------------------------------------------------------------------
|
||||
|
||||
via: https://opensource.com/article/23/1/merge-design-code-penpot
|
||||
|
||||
作者:[Seth Kenlon][a]
|
||||
选题:[lkxed][b]
|
||||
译者:[geekpi](https://github.com/geekpi)
|
||||
校对:[校对者ID](https://github.com/校对者ID)
|
||||
|
||||
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译,[Linux中国](https://linux.cn/) 荣誉推出
|
||||
|
||||
[a]: https://opensource.com/users/seth
|
||||
[b]: https://github.com/lkxed
|
||||
[1]: https://opensource.com/article/20/12/eclipse
|
||||
[2]: https://opensource.com/article/20/12/netbeans
|
||||
[3]: http://penpot.app
|
||||
[4]: https://opensource.com/article/21/9/open-source-design
|
||||
[5]: https://opensource.com/sites/default/files/2022-07/Current%20Penpot%20interface.png
|
||||
[6]: https://opensource.com/article/21/12/open-source-design-penpot
|
Loading…
Reference in New Issue
Block a user