无数的设计工具附加组件已经被构思出来，以帮助设计师-开发人员协作的崎岖之路变得平坦. 然而，典型的网页设计工作流程仍然充斥着效率低下和扼杀创造力的问题. 新一代的无代码, 视觉网页设计工具承诺将设计师从传统网页开发的创意束缚和乏味中解放出来.

Many no-code Web开发平台最近像天上掉下来的甘露一样出现在设计领域. 渴望“打破代码障碍”的设计师终于能够认清现实 乌托邦式的无代码未来. 星星应该排成一行吗?, 将设计交给具有详细规格的前端开发人员的需求将会结束. 设计师可以自由地在画板上安排元素，然后轻松地点击“发布”.

在无代码设计工具出现之前，设计师不得不依赖 前端开发人员 来实现 everything. 将网站上的一段文字更改为不同的字体大小可能需要几天的时间. Even for a 小型营销网站 或者一个简单的登陆页面, 设计师会把设计寄过来, sit back, 交叉手指, 然后祈祷它会恢复到像素完美的状态. 整个过程就像看着油漆变干一样.

感觉到了机会，“无代码”网站建设者现在无处不在. 有些是实验性的，有些是稳健而有能力的. 然而，在提供无限的创意控制方面，许多公司仍然表现不佳. 几乎所有的平台都是不灵活的、模板驱动的平台，针对的是中小型企业.

大多数专业设计师都渴望能够快速设计和构建响应式网站, 有绝对的创造性控制，不碰代码. 这一天可能很快就会到来，因为无代码霸权的战场现在充满了少数几个真正的竞争者: Editor X, Bubble, Ceros, and Webflow.

Webflow 在2013年进入竞争，并经过多年的发展，已经发展成为一个成熟的产品. 作为一名毕业生推出 Y Combinator创业加速器, Webflow希望打破无代码的网页设计格局，并设想一个“每个人都可以创造强大的东西”的世界, 灵活的网站就像他们创建文档一样容易.”

如何获得利益相关者的支持

随着设计师发现这些平台的功能, 他们很快意识到，各种规模的公司都可以从采用无代码网页设计工具中受益. 好处可能是显著的，特别是对于资源有限的小型团队. Still, it’s not enough to be infatuated with a new web design tool; stakeholders need to be persuaded to approve the switch.

设计师是如何做到这一点的? 我是一家B2B初创公司的产品设计师，只有一个开发人员专注于核心产品. 该公司需要一个营销网站，但没有开发者资源. 我们面临着一个难题:如何在没有开发人员的情况下建立一个网站? 在探索Webflow并熟练使用它之后，我意识到这一点 我可以一个人做.

我花了周末的时间在Webflow中实现设计，以便在周一参加一个涉众会议. 会议期间, 我描述了Webflows的优点，并演示了从设计到编码是多么容易, 创建响应式设计, 快速改变一些东西. 设计和发布网页只需要几天的时间.

我还展示了Webflow CMS的功能 并且可以轻松地将SEO纳入其中. 接下来，我列出了节省的成本 一个设计师实现一切 没有额外的成本，聘请我们的开发人员. 他们被卖掉了.

这也是一个重新获得创造性控制的机会. 我不再只是一个在Sketch中创建模型并将设计传递给开发人员的设计师. 这种新的模式把我变成了一个web开发的强者:我可以设计, build, test, tweak, 合并 SEOA/B测试，然后发布网站. 这给了我力量，让我在公司里有了更大的发言权.

如何使用Webflow:一个设计案例研究

At Upvest在设计公司核心产品的同时，我还负责视觉品牌. 这包括公司的 响应性网站，这需要适应频繁的更新. Upvest是一家早期创业公司，产品仍在不断发展. 因此，我们需要制作和A/B测试各种营销页面. 我们还需要使用CMS系统发布博客文章，并为不同的促销活动推出专门的登陆页面.

除了, 更复杂的是，公司在早期就做了一些调整. 它从销售API变成了开发 blockchain 钱包，向房地产公司提供“资产代币化”. 因此，随着我们的发展，我不得不在Webflow中设计各种各样的登陆页面.

点击查看全尺寸图像.

Webflow的入门相对简单. 通过以下网站提供教程 Webflow大学. 我在几天内设计并建立了我们营销网站的第一个版本. 拖放界面使用起来很简单, 检查不同屏幕尺寸的设计只需点击一下. 在使用Webflow的过程中，我也学到了很多关于如何使用 box model 对于响应式布局.

一旦每个人都同意了网站的视觉品牌，我创建了一个 styleguide 在Webflow中，我们都可以遵循. 我还为后续的页面构建设置了各种类和可重用符号. Webflow的符号工作方式类似于Sketch的符号和Adobe XD的主组件. 当一个符号被更新时，项目中该组件的所有其他实例都会反映更新.

在第一个网站发布之后，我对Webflow越来越熟悉了. 为了跟踪各种度量标准，我学会了如何安装度量工具，例如 Google标签管理器 and Hotjar. 我组装不同营销资产的速度也提高了. 随着产品的发展，公司需要测试各种布局和内容, 而Webflow使改变设计和快速上线成为可能，而不必依赖于开发人员.

点击查看全尺寸图像.

因为Webflow提供了 分段链接 预览网站, 利益相关者可以检查设计的演变并提供即时反馈. 一旦调整正式确定, 我可以直接在webflow中进行更改——而不是回到sketch这样的设计工具——并将站点发布到登台. 输出是所有代码，立即发布到登台站点，准备进行另一轮审查. 当一切顺利时，我将网站发布到公司的域名上.

和许多其他设计师一样，我喜欢的设计工具是 Sketch. 准备好后，我会与各种利益相关者分享设计以供审查. 一旦他们批准了，我就会继续在Webflow中实现它们. 过了一段时间，我对Webflow非常熟悉，不需要使用Sketch. 每当有新项目时，我都会直接进入Webflow. 这种新的工作流程为资金紧张的初创公司节省了大量的时间和金钱. For example, 我完全在Webflow中创建了以下登录页面，用于营销活动以产生潜在客户.

满足我们的博客需求, 我与涉众分享了一些Webflow的基础知识，并向他们展示了如何使用它的CMS. 一旦他们习惯了，他们就会自己上传博客文章. 利用Webflow的 CMS集合 feature, I had already set up the system; they just needed to add the content for articles and make them live.

点击查看全尺寸图像.

将Webflow融入设计过程

将Webflow整合到设计过程中是很容易的. 更重要的是，许多传统的设计步骤可以被消除——尤其是在最后. 没有开发人员的交接. 仅消除最后一个阶段就节省了相当多的时间——没有更多的“划红线”和在规格说明上的劳动.

如果设计师习惯于线框图、原型和UI designing 使用Sketch/XD/Figma，他们可能会对这个工作流程感到更舒服. However, 他们可能会考虑直接进入Webflow, 装配设计, 并在浏览器中使用staging链接对它们进行实时测试——特别是对于较小的项目. 这一切都是为了平衡需求，因为根据范围， 在Webflow中构建项目 可能比其他方法需要更长的时间. 对于设计实验，例如 A/B testing or 多元 在测试中，直接进入webflow的设计、构建和测试也是有意义的.

设计师可以通过从大量不同的元素中进行选择来快速启动项目 Webflow模板 定制它们. 所有模板都是使用Webflow构建的，无需编写代码, 因此, 它们可以通过Webflow的可视化开发界面完全定制.

组成设计的组件可以转换为Webflow符号, 哪些可以在几分钟内重用以组装后续页面. 和Sketch一样, 设计师可以设置符号, 为每个组件创建可绑定的字段, 并在每个实例上添加内容覆盖. 这意味着设计人员可以创建带有标题的组件, an image, 和一个文本块，并在不同内容的页面上重用它.

Webflow也是构建设计系统的优秀工具. 随着最近发布的内容覆盖符号, 可以创建完整的设计系统，帮助团队更快地构建设计, 不妥协或稀释他们的品牌的视觉形象或核心价值.

无代码工具减少了将想法转化为人们可以使用的东西所需的时间和编码专业知识. 你不再需要成为一个程序员来构建东西, 赋予来自不同背景和视角的新一波创客力量. 瑞安·胡佛，Product Hunt的创始人 无代码的兴起

Webflow对设计师和企业的好处

在Webflow中创建响应式网站可以很快发生，因为界面无缝地集成了不同设备上的编辑和预览. 只需点击一下, 设计师可以看到网站将如何显示在桌面上, tablet, and mobile, 他们可以调整布局, components, 以及每个屏幕的字体.

Webflow优点:

• 压缩的时间轴. 从想法到 design原型和mvp.
• Webflow弥补了设计与内容之间的差距. 它使作家、编辑和营销人员能够跨网站即时更新内容.
• Designers 可以在Webflow中创建低保真度或高保真度的原型，跳过Sketch或其他原型工具. 一旦原型测试完成, 它们可以迅速转化为最终产品，并在网络上直播.
• 构建、托管和维护多个站点和登陆页面.
• 合并度量工具，例如 Hotjar or Google标签管理器.
• 降低营销人员和其他非技术人员的进入门槛.
• 易于编辑的内容，其他人的权利，在页面上通过 Webflow编辑器.
• Webflow电子商务 能够快速设计和扩展在线业务.
• Webflow提供了设计一致性和速度 团队模板.
• 设计师可以利用Webflow的真实内容来构建网站 CMS Collections-其他团队无需技术技能即可使用的内容模板.
• 自动站点备份(版本控制)和暂存url.
• 站点不需要使用Webflow托管. 因为所有的网站都是用标准HTML编码的, CSS, 和JavaScript, 站点支持导出和上传至任意主机.
• 离开Webflow时, 可以导出数据库以供将来使用, 以及HTML和CSS文件.

为什么要使用Webflow

通过消除web开发的代码，可以实现无数的商业利益. 高于标准的DIY网页设计工具, Webflow提供了一个令人信服的解决方案，适合大多数专业的网页设计需求. 这个平台一直在发展，还有更多令人兴奋的发展.

我用Webflow在不到两个月的时间里独自设计并推出了一个公司网站. Webflow在设计过程中提供了前所未有的灵活性, 提供更多的创造性控制，而不必担心代码. The rapid, 无代码网页设计工作流提供了一个更快的发布路径，并将生产成本降低了一半. 传统的web开发. 而在Webflow中，一次只有一个设计人员可以对项目进行更改, 多个设计师可以在一个团队帐户下拥有席位, 在不同的时间做一个项目的不同部分.

学习曲线并不陡峭. 几周后, Webflow的所有细节都可以通过教程充分掌握——足以开始将一个完全成熟的网站组合在一起. Once designers 学习Webflow的最佳实践，他们可能永远不会回到传统的web开发方式.

无代码网页设计工具在这里停留. 它们提供的价值和灵活性是毋庸置疑的. The 没有代码运动 基于这样一种基本信念，即技术应该使创造成为可能并促进创造, 不要成为进入的障碍. Webflow允许设计人员在更短的时间内设计和构建精细的产品. It helps designers 跟上业务的发展速度，为那些不会编程的人打开一个充满机会的世界. 也许是时候加入了.

---

让我们知道你的想法! 请在下面留下你的想法、评论和反馈.