设计和实现我们公司的营销网站：从内容到实现的旅程

如果你是 Logto 的用户，你可能会发现我们公司的网站最近进行了更新。 如果你不是，那么请访问我们的网站，logto.io，来猜猜我们投入了多少资源来实现这一点。

你可能会想，难道你们是在自我宣传，说展示你们的执行力需要大量的工作、努力和精心设计？

不！

恰恰相反，我们想展示如何聪明地利用工具和方法来提高产品质量，并为用户提供最好的产品和服务。

我们从社区收到了很多积极反馈，并在思考我们是如何做到这一点的。这次更新与以往不同，因为我们在一个快速变化的环境中完全重新发明了一个新的工作流程。我们希望介绍我们的最佳实践，并深入了解团队合作和协作文化。

背景#

我们是一群专注于提供多种客户身份相关开发服务和基础架构工作的技术团队。交付的压力非常大。同时，我们还需要支持各种讲故事和运营任务，比如构建品牌营销网站、撰写博客、推广项目以及与用户互动。

一个引人注目的登陆网站至关重要，因为它通常是你的受众对产品的第一印象，帮助他们了解你的产品旨在解决的问题，包括定价和任何显著的社交证明客户。

此外，它还可以实现多个业务目标：

• 展示你的产品品牌和价值主张。
• 生成潜在客户。
• 作为内容集线器，特别对那些专注于产品驱动或开发者驱动增长的公司特别重要。
• 提供一个优化 SEO、获取用户并追踪常规流量的地方。

在我以前的工作中，我曾参与过一个网站项目。让我们看看一个典型的工作流程包括什么：

1. 首先，产品营销经理和产品经理定义内容和需求。
2. 产品设计师和 UX 作者精炼内容。
3. 我们将正在进行中的工作（通常是一个低保真版本）转交给视觉和品牌设计师进行最终润色，然后进入生产阶段。
4. 工程师和产品经理随后开始实施，专注于动画和响应式网页设计。

这个过程非常繁琐，涉及很多人和利益相关者，无法适应快速变化的环境。

即便我们最初只有两个人维护一个网站——一名产品设计师和一名工程师——管理网站性能、上传图片、确保响应式设计、处理图片格式和更新内容等任务仍然需要大量的来回沟通。

这种工作流程效率低下。我一直在思考如何解放工程资源，让他们专注于核心产品工作，而我来管理其余的工作。

使用工具来提高生产力是我们团队的一个关键理念。因此，我开始研究可以帮助简化这些流程的工具。

分析需求#

为了开发一个成功的 SaaS 营销网站，让我们分解一下所需的基本元素：

1. 内容：任何营销网站的基础就是知道确切展示什么。这需要对目标客户、他们的典型用例以及产品价值主张有深刻的理解。没有工具可以替代这种理解。幸运的是，我参与产品设计和市场进入策略，使我能够创建满足用户需求的内容。
2. 设计：网站应该具有精致和光滑的视觉吸引力。虽然我的 UX/产品设计背景不如专门的创意设计师那么广泛，但它足以让我胜任这一方面的工作。
3. 工程：关键的技术考虑因素包括托管网站、确保响应式设计和实现流畅的微交互。还需要确保网站与其他组件无缝集成，例如链接重定向和产品的身份验证页面。

在进行了一些研究后，这是我计划用于设计方面的工具包：

产品和营销内容#

ChatGPT 3.5，ChatGPT 4.0，Gemini Advanced，Jasper 或类似的 AI 应用作为副驾驶。

这是为了微调和优化我的营销内容和消息。明确目标和意图非常重要。AI 只是辅助，不是决策者。在编写任何营销消息之前，我会问自己几个问题：

1. 谁会阅读这条消息？
2. 他们是否需要额外的背景信息？
3. 你想在消息中表达的关键点是什么？
4. 你希望用户的下一步是什么？
5. 这个消息旨在教育还是驱动特定行动？
6. 这是否有可能产生误导或夸大其词？

然后我会撰写我想传达的要点的初稿。

有时候 AI 可能会引入一些听起来陈腐的词语，或者扭曲你的原意，使其看起来逻辑正确。然而，你必须重新强调你的意图并坚持你的目标。你必须建立标准，确保传达给受众的信息是清晰、直接、简洁和透明的。这一点在我们的产品领域尤为重要，因为我们服务于许多企业和开发者。

设计#

Figma，Framer 用于交互和视觉设计，以及动画和原型设计

我有设计背景，主要专注于产品设计，这涉及到 UI 和 UX 的制作。虽然设计精致的 UI 对我来说并不是挑战，但我的工作并不像专业人士那样完美。然而，通过一些基本的视觉设计和插画技巧，并选择合适的工具，你可以提升作品的质量。我在这个创作过程中使用 Framer 和 Figma。

这是我们完全用 Figma 构建的旧设计

我们的原始设计是在 Figma 中创建的。我使用官方 Framer 插件“Framer to HTML”将基本设计复制并粘贴到 Framer 中，提供了一个良好的起点。

接下来是设计。如果你以前使用过 Figma，过渡到 Framer 过程非常顺滑，因为总体用户体验非常相似。我将重点介绍一些显著提高生产力的有趣交互。

布局#

Figma 用户喜欢自动布局，因为它在设置布局和放置元素方面节省了大量时间。然而，Framer 中的布局功能更智能，更贴近前端思维。在 Framer 中，你可以选择是使用网格还是堆叠布局，定义列数，设置最大宽度，必要时它会自动换行。这种功能通过反映元素在实际网页环境中的行为来增强设计过程。

响应式设计的断点#

通过智能依赖于设置断点和宽度设置（如填充、固定、相对和适应内容）以及定义不同的画布，你可以轻松准确地实现各种响应式设计。这种方法使你能够有效地针对不同屏幕尺寸和设备优化布局。

动画#

Framer 提供了多种预构建的动画，包括一个我们广泛用于展示作品的 ticker 动画。你可以设置组件并将其嵌入这个小部件中。它允许你定义各种配置，如速度、方向、填充等，从而使你对动画在网站上的行为拥有灵活性和控制力。

Framer 中的另一个有用功能是能够自定义滚动动画。例如，你可以指定项目在滚动时如何出现。设置滚动动画可以让你控制元素显示的时间和样式，从而增强用户体验并增加用户与内容的互动。

快速发布#

我的一个关键要求是：

1. 快速设计多个登陆页面 以进行 SEO 优化和营销活动。速度是必须的。
2. 自己频繁更新内容。产品的登陆页面反映了最新的开发和当前的产品定位。过时的内容意味着错过市场机会，未能跟上客户的需求。

在我以前的工作流程中，每当需要更新内容时，我要么请求工程师来做，要么自己提交拉取请求。我们的工程团队遵循严格的流程以确保代码质量，这可能耗时且限制了我快速做出更改的能力。

Framer 为我解决了这个问题。现在，每当我做出更改并点击发布，它就会立即反映到线上。这种功能大大简化了过程，让我能够快速更新内容并在管理内容上拥有更大的自主权。

工程#

由于由 Framer 托管，因此不需要我们进行任何实施或技术工作。我们的工程师只花了大约 10 分钟就完成了与我们剩余网站的集成工作。

我们当前的网站包含 20-30 个页面；有些是通过 Framer 开发的，而另一些则是通过传统的软件开发方法创建的。我们正在选择维护页面的最佳工具。例如，开发者文档比较难用 Framer 管理，使用开发者友好的文档框架来托管内容是最佳选择。未来，我们将评估我们的需求，并决定是否继续自行托管或完全迁移到 Framer。

它如何改变了我们的工作流程#

我们完全改变了工作流程，使营销网站的制作变得毫不费力。它可靠、可维护且高度高效。

我写这篇博客是为了分享最佳实践。如果你对 Framer 和设计漂亮的网站有经验，我很想听听你的看法。让我们一起讨论并相互学习。

现在，是时候来看看我们的产品了！请访问我们的网站 logto.io。