无代码网页设计的 Webflow 优势 - 案例研究

无数的设计工具插件被构思出来，以帮助消除设计师-开发者合作的坎坷道路。 然而，典型的网页设计工作流程仍然充斥着低效率和扼杀创造力。 新一代无代码、可视化网页设计工具承诺将设计师从传统网页开发的创意枷锁和乏味中解放出来。

许多无代码 Web 开发平台最近登陆设计领域，就好像来自天堂的甘露一样。 渴望“打破代码障碍”的设计师终于能够认识到乌托邦式无代码未来的现实。 如果星星对齐，将设计交给具有详细规格的前端开发人员的需求将结束。 设计师可以自由地在画板上以视觉方式排列元素，然后松一口气地点击“发布”。

在没有代码设计工具出现之前，设计人员不得不依靠前端开发人员来实现一切。 将网站上的一段文本更改为不同的字体大小可能需要几天时间。 即使对于一个小型营销网站或一个简单的登陆页面，设计师也会将设计发送过来，坐下来，交叉手指，祈祷一切都能恢复到像素完美。 这个过程就像看着油漆变干一样。

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

大多数专业设计师一直渴望能够快速设计和构建响应式网站，具有绝对的创意控制且无需接触代码。 那一天可能很快就会到来，因为没有代码霸权的战场现在挤满了少数严肃的竞争者：Editor X、Bubble、Ceros 和 Webflow。

Webflow于 2013 年进入竞争，多年来，已经发展成为一个成熟的产品。 作为 Y Combinator 创业加速器的毕业生，Webflow 希望颠覆无代码网页设计领域，并设想一个“每个人都可以像创建文档一样轻松创建强大、灵活的网站”的世界。

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

随着设计师发现这些平台的功能，他们很快意识到各种规模的公司都可以从采用无代码网页设计工具中受益。 好处可能是巨大的，尤其是对于资源有限的小型团队。 尽管如此，仅仅迷恋一种新的网页设计工具是不够的。 需要说服利益相关者批准转换。

设计师如何做到这一点？ 我是一家 B2B 初创公司的产品设计师，只有一名开发人员专注于核心产品。 该公司需要一个营销网站，但没有开发人员资源。 我们面临一个难题：我们如何在没有开发人员的情况下构建网站？ 在探索 Webflow 并精通它之后，我意识到我可以一个人做。

我花了一个周末在 Webflow 中为周一的利益相关者会议实施设计。 在会议期间，我描述了 Webflows 的优势，并展示了从设计到代码、创建响应式设计以及快速更改某些东西是多么容易。 设计和启动网页只需要几天时间。

我还展示了 Webflow 的 CMS 功能以及整合 SEO 的难易程度。 接下来，我列出了单个设计师在不增加开发人员参与成本的情况下实现所有内容所节省的成本。 他们被卖了。

这也是一个重新获得完全创意控制的机会。 我不再只是一个在 Sketch 中创建模型并将设计传递给开发人员的设计师。 这种新的范式把我变成了一个 Web 开发强者：我可以设计、构建、测试、调整、整合 SEO、A/B 测试和发布网站。 它赋予了我权力，它让我在公司中有更强大的发言权。

Webflow 设计案例研究

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

此外，更复杂的是，公司在早期做了一些支点。 它从销售 API 到构建区块链钱包，再到向房地产公司提供“资产代币化”。 因此，随着我们不断前进，我不得不在 Webflow 中设计各种登录页面。

单击以查看全尺寸图像。

Webflow 的入门相对简单。 教程由 Webflow 大学提供。 我在几天内就设计并构建了我们营销网站的第一个版本。 拖放界面使用简单，只需单击一下即可检查不同屏幕尺寸的设计。 使用 Webflow，我还学到了很多关于使用盒子模型正确组装页面以实现响应式布局的知识。

一旦每个人都对网站的视觉品牌达成一致，我就在 Webflow 中创建了一个我们都可以遵循的样式指南。 我还为后续页面构建设置了各种类和可重用符号。 Webflow 的符号的工作方式与 Sketch 的符号和 Adob​​e XD 的主组件类似。 更新符号时，项目中该组件的所有其他实例都会反映更新。

在第一个网站推出后，我对 Webflow 越来越熟悉了。 为了跟踪各种指标，我学习了如何安装测量工具，例如 Google Tag Manager 和 Hotjar。 我组装不同营销资产的速度也有所提高。 随着产品的发展，该公司需要测试各种布局和内容，而 Webflow 使更改设计和快速上线成为可能，而无需依赖开发人员。

单击以查看全尺寸图像。

由于 Webflow 提供了一个临时链接来预览站点，因此利益相关者可以检查设计的演变并提供即时反馈。 正式调整后，我可以直接在 Webflow 中进行更改——而不是回到像 Sketch 这样的设计工具——并将网站发布到登台。 输出是所有代码，立即发布到暂存站点，准备进行另一轮审查。 当一切顺利时，我将网站发布到公司的域中。

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

对于我们的博客需求，我与利益相关者分享了一些 Webflow 基础知识，并向他们展示了如何使用其 CMS。 一旦他们对它感到满意，他们就会自己上传博客文章。 利用 Webflow 的 CMS Collections 功能，我已经设置了系统； 他们只需要为文章添加内容并使其生效。

单击以查看全尺寸图像。

将 Webflow 纳入设计过程

将 Webflow 整合到设计过程中很容易。 此外，可以消除许多传统的设计步骤——尤其是在最后。 没有开发人员交接。 仅消除最后一个阶段就可以节省大量时间——不再需要“重新划线”和为规范而努力。

如果设计师习惯于使用 Sketch/XD/Figma 进行线框图、原型制作和 UI 设计，他们可能会更适应这种工作流程。 但是，他们可能想要考虑直接进入 Webflow ，组装设计，并在浏览器中使用暂存链接对其进行实时测试——尤其是对于较小的项目。 这完全是为了平衡需求，因为根据范围，在 Webflow 中构建项目可能需要比其他方法更长的时间。 对于设计实验，例如 A/B 测试或多变量测试，直接进入 Webflow 也可能有意义——在那里进行设计、构建和测试。

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

构成设计的组件可以转换为 Webflow 符号，可以在几分钟内重复使用来组装后续页面。 与 Sketch 一样，设计人员可以设置符号，为每个组件创建可绑定字段，并在每个实例上添加内容覆盖。 这意味着设计人员可以创建带有标题、图像和文本块的组件，并在具有不同内容的页面之间重复使用它。

Webflow 也是构建设计系统的绝佳工具。 随着最近发布的符号内容覆盖，可以创建整个设计系统，帮助团队更快地构建设计，而不会影响或削弱其品牌的视觉识别或核心价值。

没有任何代码工具可以减少将想法转化为人们可以使用的东西所需的时间和编码专业知识。 您不再需要成为一名程序员来构建事物，从而为来自不同背景和观点的新一波创客赋能。 Product Hunt 的创始人 Ryan Hoover 在《无代码的崛起》中

Webflow 对网页设计的好处

在 Webflow 中创建响应式网站可以很快发生，因为该界面无缝集成了不同设备上的编辑和预览。 只需单击一下，设计人员就可以查看网站在桌面、平板电脑和移动设备上的显示方式，并且可以调整每个屏幕的布局、组件和字体。

网流优势：

• 压缩的时间线。 从构思到设计、原型制作和 MVP 的更快路径。
• Webflow 弥合了设计与内容之间的差距。 它使作家、编辑和营销人员能够立即跨网站更新内容。
• 设计师可以在 Webflow、跳过 Sketch 或其他原型设计工具中创建低保真或高保真原型。 一旦原型经过测试，它们就可以迅速变成最终产品并在网络上上线。
• 构建、托管和维护多个站点和登录页面。
• 结合测量工具，例如 Hotjar 或 Google Tag Manager。
• 降低营销人员和其他非技术人员的进入门槛。
• 其他人可以通过 Webflow Editor 在页面上轻松编辑内容。
• Webflow 电子商务支持在线业务的快速设计和扩展。
• Webflow 通过团队模板提供设计一致性和速度。
• 设计人员可以构建具有真实内容的站点并利用 Webflow 的CMS集合——其他团队无需技术技能即可使用的内容模板。
• 自动站点备份（版本控制）和暂存 URL。
• 网站不需要使用 Webflow 托管。 由于所有网站都以标准 HTML、CSS 和 JavaScript 编码，因此可以将网站导出并上传到任何主机。
• 离开 Webflow 时，可以将数据库与 HTML 和 CSS 文件一起导出以供将来使用。

概括

通过取消 Web 开发代码可以实现无数的商业利益。 Webflow 超越了不合标准的 DIY 网页设计工具，提供了适合大多数专业网页设计需求的引人注目的解决方案。 该平台不断发展，并且还有更多令人兴奋的发展。

在不到两个月的时间里，我单枪匹马地用 Webflow 设计并推出了一个公司网站。 Webflow 在设计过程中提供了前所未有的灵活性，无需担心代码即可提供更多创意控制。 与传统的 Web 开发相比，快速、无代码的 Web 设计工作流程提供了更快的启动途径并将生产成本降低了一半。

学习曲线并不陡峭。 在几周内，通过教程可以充分掌握 Webflow 的所有细节——足以开始构建一个成熟的网站。 一旦设计师学习了 Webflow，他们可能永远不会回到传统的 Web 开发方式。

没有代码网页设计工具会留下来。 它们提供的价值和灵活性是毋庸置疑的。 无代码运动基于这样一个基本信念，即技术应该支持和促进创造，而不是成为进入的障碍。 Webflow 允许设计师在更短的时间内设计和构建精致的产品。 它可以帮助设计师跟上业务的发展速度，并为那些不会编码的人打开一个充满机会的世界。 也许是时候跳上船了。

让我们知道您的想法！ 请在下方留下您的想法、评论和反馈。

• • •

进一步阅读 Toptal 设计博客：

• 后Flash时代的网络动画
• 简单是关键——探索最小的网页设计
• 响应式设计——最佳实践和注意事项
• 粗野主义网页设计、极简主义网页设计和 Web UX 的未来
• 所有的趋势都值得吗？ 网页设计师最常见的 5 个用户体验错误