网站是新商机的重要门户。建立一个新网站或重新设计一个网站可能是一个充满挑战的旅程。在领导重新设计公司网站后，我决定分享一些我们的旅程。如果您正在考虑建立一个新网站或重新设计当前网站，我们希望这将帮助您，让您的旅程更加顺利。 评估 我们的网站对我们来说是新业务的重要入口。作为一家网络开发精品店，我们如何在网上展示自己，很大程度上说明了我们的工作以及客户在与我们合作时的期望。 一旦我们决定要创建一个新网站来匹配我们的新品牌，我们就清楚我们必须言出必行，向我们的客户和观众展示一个高质量的网站。我们的团队在开始工作之前的准备阶段投入了大量的思考和精力。 我们从一个简单的问题开始：为什么我们需要网站或重新设计？这是保持专注于目标并避免分心的好方法。 一旦我们了解了原因，我们就完成了确定目标受众的过程。我们为谁建立这个网站。清楚地了解您想要接触的对象以及您希望他们了解您的品牌和工作的哪些内容至关重要。 然后我们开始思考我们想要向观众传递的信息，我们希望如何被看到，最重要的是，我们如何证明我们擅长我们所做的事情。该信息的很大一部分是在品牌创建过程中经过深思熟虑的（检查 ），我们必须将其传输到新网站中。 我们如何创建新品牌 由于我们已经有了在线业务，因此我们花了一些时间来评估我们的旧网站，并列出我们认为运行良好以及我们认为缺少的功能和方面。 在整个过程中，跟踪竞争对手基准以尝试了解我们行业中的公司在做什么也非常重要。我们还浏览其他类型的网站以获取参考和灵感。这为我们提供了一些宝贵的见解，并帮助我们避免重复错误或错过重要功能。 此准备阶段的最后一步是我们希望在网站上拥有的特性和功能列表。这就像创建一个愿望清单，就像我们可以做我们想做的一切。后来对列表进行了优先级排序，我们选择了必须的功能和可以稍后实现的很好的功能。首先关注最关键的要素非常重要。 其中一些步骤是与整个团队一起完成的。作为一个小团队，我们希望每个人都在某种程度上参与这个过程。经过第一次评估后，我们开始分而治之，并有专门的团队成员负责将我们的新网站变成现实。 设计 我们很高兴能够深入研究我们的网络项目的设计流程。 UI/UX 设计是任何 Web 项目的一个重要方面。我们有一个多学科团队参与，但设计师是节目的明星，负责创建我们想要传递给观众的信息的视觉表现。 设计师必须清楚地了解项目的需求和期望，以直观地传达我们的信息并相应地构建内容。我们的目标是简洁、引人入胜的设计和正确的基调。 在项目的这个阶段，我们遵循了以下步骤： 我们从一开始就采用了以用户为中心的方法。我们关注目标受众如何看待我们并与我们互动。这就是为什么我们首先研究信息架构，决定所需的页面、部分和组件并创建副本的初稿。 接下来，我们创建了低保真线框，以提供布局和功能的粗略、低保真表示。它使我们能够在投入太多时间和精力进行设计之前测试和试验想法。我们还考虑了现阶段的一般用户流程。 此阶段至关重要，因为它为要使用的整个组件格局奠定了基础：创建设计系统。我们使用 构建了一个库，其中包括设计模式、指南和示例。该库是单一事实来源，确保所有 UI 元素之间的一致性，并为引入新组件时的可扩展性奠定基础。 Figma 一旦定义了设计系统，我们就以高保真度构建布局。我们将 UI 应用于之前创建的低保真线框。在这个阶段，我们对设计是否符合无障碍要求进行了全面测试，并且我们对内容显示得出了更精确的结论。 我们在整个过程中都使用  ，这使得与团队协作和迭代变得更加容易。经过几次迭代后，我们有了一个可供开发人员使用的最佳版本。 Figma 发展 我们专注于选择技术堆栈并在项目开发阶段实施设计。我们根据产品待办事项列表和项目经理创建的用户故事进行冲刺。 选择技术栈 随着设计阶段的进展，我们研究了哪些技术最适合我们想要构建的网站。我们的开发人员能够根据前几个阶段的结果来确定这一点。 在当今世界，选择正确的技术堆栈变得比以往任何时候都更加重要，因为有很多选择。我们考虑了各种标准，例如项目的要求、团队的专业知识、资源的可用性、成本、性能、安全性和可扩展性。 我们想要为这个项目设计一个简单、快速且美观的网站。 我们采用了模块化方法，将网站的组件、特性和功能分解为更小的、可重用的组件。这种方法使我们能够在网站的不同部分重用组件，促进开发人员和设计人员之间的协作，使测试和维护开发的内容变得更容易，并最终提高性能并减少页面加载时间。 我们的开发人员提倡使用  ，这是一种用于快速、以内容为中心的网站的一体化 Web 框架。他们期待尝试最快的以内容为中心的框架。三件事引起了我们团队的注意：服务器端渲染、性能结果和灵活性。 Astro 对于我们想要的简单网站，我们不需要成熟的内容管理系统 (CMS)，但我们希望让非技术团队成员能够在网站上工作。我们广泛研究了不同的 CMS 选项，并最终选择了 Sanity，因为它具有强大的功能和易用性。  还拥有出色的文档和非常慷慨的免费套餐。 Sanity 除了 Astro 和 Sanity 之外，我们还决定在我们的项目中使用  。嗯，我们总是这样做。 Netlify 的无缝部署和托管功能通常是我们首选的内容交付网络 (CDN)。我们还使用了各种动画库，我们在另一篇博客文章（即将发布）中对此进行了更深入的讨论。 Netlify 需要改进的一方面是我们为潜在客户与我们联系创建的表格。我们使用了 Netlify 的表单，但由于表单与 Astro 的问题，这并不是最佳选择。我们找到了一个解决方案（热修复）并为我们的联系表单创建了一个页面。我们仍在考虑未来如何改变这种情况。 开发流程 在开始开发阶段之前，项目经理创建了一份产品待办事项列表，其中包含团队要构建的所有特性和功能的详细信息。这些用户故事使开发过程变得顺畅和透明。在构建网站之前，团队必须优先考虑第一个网站交付的特性和功能。 对于代码存储库，我们使用 并利用其项目管理板和冲刺计划功能。 GH 通常是我们版本控制系统的选择，但我们已经开始使用  ，并且喜欢用它来进行项目管理。 GitHub (GH) Notion Projects 我们开始实施设计。我们遵循敏捷方法并进行冲刺工作，以确保我们步入正轨并在设定的时间内交付结果。一点小提示：这是一个内部项目，我们的主要优先事项是客户的项目。这意味着冲刺将在我们的团队从其他项目中休息后不久进行。这通常不是我们的工作方式，但这是我们的管理方式，我们吸取了教训，不要重蹈覆辙。 使整个开发过程透明和敏捷的另一个关键点是从项目一开始就有一个临时链接。参与该项目的每个人都可以访问它，我们可以看到正在取得的进展，提供反馈，并在我们认为需要时进行更改和小的调整。 在开发阶段，营销团队能够开始插入内容。这帮助他们习惯了理智，并有助于更现实的反馈轮次。总体而言，开发阶段是整个团队共同努力实现项目目标的协作努力。 质量保证 在开发过程中，一两个开发人员测试了每个特性和功能。所有代码都经过了代码审查，最后，我们进行了最后的冲刺测试并确保网站正常运行。 如上所述，可用性和可访问性测试已经在设计阶段完成。对于一般测试，我们使用项目经理创建的用户故事和验收标准来指导我们。 功能测试：确认所有功能均按预期工作。 性能测试：使用Lighthouse检查速度负载等得分。 跨浏览器和跨设备测试：在各种网络浏览器（例如 Chrome、Firefox、Safari、Edge）和设备（台式机、移动设备、平板电脑）上测试网站，以确保兼容性和一致的用户体验。为此，我们使用了  。他们的产品使用起来非常直观，并且允许进行大量测试。 BrowserStack 上线准备 我们已经准备好让网站在临时链接上上线，但在继续之前，必须仔细考虑两个关键的事情 - 重定向到新域和 SEO。由于我们计划更改域名，因此确保我们的 SEO 排名不会受到影响至关重要。 因此，我们决定使用 301 重定向来通知搜索引擎和浏览器原始 URL 已被新 URL 永久替换。这是我们所做的： 当前网站的所有页面列表： 如果页面的 URL 结构保持不变，请确认 301 重定向正常工作。 当旧页面 URL 不在新网站上时，创建重定向到最合适的页面。 列出在 Google 中索引的页面，以确保我们对所有这些页面都进行了重定向。 使用 Netlify 重定向所有内容，按照其中的步骤进行操作 。 Netlify 文档 通知 Google 有关控制台上的更改 工具。 地址变更 要求 Google 重新索引新域，这样旧页面就不会出现。这是直接在 Google Console 中完成的，遵循 谷歌控制台文档。 最后但同样重要的是，我们花时间确保我们考虑了更好的 SEO 排名的最佳实践，并指出了需要改进的地方。营销团队确保完成以下工作： 为了优化新网站的相关关键词，希望在搜索引擎结果中排名更高并吸引自然流量，我们使用 Google Keyword Planner 或 SEMrush 等工具进行关键词搜索，以发现热门和竞争力较弱的关键词 我们尽可能地优化每个网页上的元标题标签和元描述，结合相关的关键字和引人注目的号召性用语，以吸引用户从搜索引擎结果页面（SERP）中点击 确保 URL 干净、简洁，并包含目标关键字 替代文本：为图像提供描述性替代文本，在适当的情况下使用关键字 确认页面速度优化（使用我们使用的堆栈，这里很难不得到很好的结果）。 结果 好吧，我们的网站上线之前经历了一段漫长的旅程。但猜猜怎么了？这项工作在发布后仍在继续。 第一阶段是我们想要实现的目标的坚实基础。采用模块化方法构建还使我们能够灵活地迭代、更改和调整网站以适应新的趋势和需求。我们对结果感到满意，并为我们取得的成就感到自豪。我们希望通过分享我们的旅程，您知道在构建新网站或重新设计网站时会发生什么。 为了总结我们在这里分享的所有内容，我们准备了一个小备忘单，以便您可以在您的项目中使用它。  也发布 。 在这里

該音頻是用故事的原始語言製作的！

优秀网站设计的 4 个阶段（附备忘单！）

About Author

註釋

標籤

这篇文章刊登在

Related Stories

看不见的层面：为什么用户访谈是不可替代的资产

架构师指南：构建 AI/ML 数据湖参考架构

Claude Sonnet 3.5 系统提示泄漏：法医分析

成功云迁移的完整指南：策略和最佳实践

看不见的层面：为什么用户访谈是不可替代的资产

架构师指南：构建 AI/ML 数据湖参考架构

Claude Sonnet 3.5 系统提示泄漏：法医分析

成功云迁移的完整指南：策略和最佳实践

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps