能力建设指南

Web developers: Email potential or current clients to this article for help clarifying your process, and suggest improvements in the comments!

Web开发人员：通过电子邮件将潜在客户或当前客户发送到本文，以帮助您澄清流程，并在注释中提出改进建议！

When you’re looking to create a website for your business, it’s important to choose the right design and development team to do it for you. A website is your primary interface with your customers in the online world. Just like any other business asset, your website needs to generate a good return on the investment you put in, in terms of both money and time.

当您要为您的企业创建网站时，选择合适的设计和开发团队来为您做到这一点很重要。 网站是您与在线世界中客户的主要界面。 就像任何其他业务资产一样，您的网站需要在金钱和时间方面都产生良好的投资回报。

That’s why it’s important for you, as a client, to make the effort to understand what it really takes to create a good website. Understanding this process will help you better evaluate the returns on your investment, choose the right kind of freelancer or firm to create your site, and enable you to engage with them better. So let’s get started and walk you through the various phases of a website project.

这就是为什么对您(作为客户)来说，重要的是要努力了解创建一个好的网站真正需要什么。 了解此过程将帮助您更好地评估投资回报，选择合适的自由职业者或公司来创建您的网站，并使您更好地与他们互动。 因此，让我们开始，逐步引导您完成网站项目的各个阶段。

1.项目定义 (1. Project Definition)

This is the first step, where the client and agency discuss what’s required. While some established businesses may have a clear idea of what they want, many clients, especially new or small businesses, do not have a clear definition of what they want at this stage.

这是第一步，客户和代理商讨论要求的内容。 尽管一些老牌企业可能对他们想要的东西有清晰的想法，但是许多客户，尤其是新的或小型企业，在此阶段并没有对他们想要的东西的明确定义。

Here’s what you should work through in this phase:

这是您在此阶段应完成的工作：

• Business and Website Goals: Explain your business, your values and your vision to the agency. Clearly define the audience you want to target with your website, and the goals you want to achieve with your site. It’s not enough to merely put a sophisticated-looking website out there. It’s pointless if the site doesn’t engage with your core audience and help you generate revenues, directly or indirectly. Here’s how to set some SMART goals for your website.

  业务和网站目标：向代理商说明您的业务，您的价值观和愿景。 明确定义您要通过网站定位的受众群体以及要通过网站实现的目标。 仅仅建立一个外观复杂的网站是不够的。 如果网站不与您的核心受众互动并帮助您直接或间接地创收，那是没有意义的。 这是为网站设置一些SMART目标的方法 。

• Features and Specifications: At this stage you’ll discuss the technical aspects of your requirements — do you need the website optimized for a certain browser or device type? Do you want a static website or do you want a blog, podcast or video series to go with it? Are you planning to create an active community on your website or will you do it via other social media channels? Do you plan to sell a product or service from your site? Do you need commerce integrated? Here’s a list of sticky features you may want to consider using to engage your readers. A good agency will walk you through the various possibilities and work out the best fit for you.

  功能和规格：在此阶段，您将讨论需求的技术方面-您是否需要针对特定​​浏览器或设备类型优化的网站？ 您是否想要一个静态网站，或者想要一个博客，播客或视频系列？ 您是否打算在您的网站上创建一个活跃的社区，还是通过其他社交媒体渠道来做到这一点？ 您打算从您的网站出售产品或服务吗？ 您需要整合商务吗？ 这是您可能要考虑用来吸引读者的粘性功能列表 。 一个好的经纪公司将带您经历各种可能性，并为您找到最合适的代理。

• Content Sourcing: If you already have brand collaterals, you should share those with the agency. Otherwise you may want to commission the agency to also create your logo and other matching collaterals as part of the package. Work out what kind of content, company information, images and videos you’ll be providing the agency, versus the content they’ll have to create.

  内容采购：如果您已经拥有品牌抵押品，则应与代理商共享。 否则，您可能希望委托代理商也将您的徽标和其他匹配的材料作为包装的一部分进行创建。 找出您将为代理商提供的内容，公司信息，图像和视频的种类，以及他们必须创建的内容。

• Scope Definition: Some agencies provide only the designs or wireframes, some agencies create only static sites, some will integrate forums or ecommerce for you and some will even run your blog and social media channels. It usually works out better to get the complete package, but if not, clearly spell out the deliverables you want the agency to deliver. Also take the time out to define how you want the handoff to happen after launching the site, and whether you require the agency to take up longer term maintenance. This is the most important phase since it sets the tone for the rest of the process. Ensuring clear communication and covering all details at this stage is good for both parties. It also helps the agency make a better estimate of the effort and budget required.

  范围定义：有些代理商仅提供设计或线框，有些代理商仅创建静态网站，有些代理商将为您集成论坛或电子商务，有些代理商甚至可以运行您的博客和社交媒体渠道。 通常，获取完整包装会更好，但是，如果没有，请清楚说明您希望代理商提供的可交付成果。 另外，还需要花一些时间来定义启动站点后要如何进行交接，以及是否需要代理商进行长期维护。 这是最重要的阶段，因为它为其余过程定下了基调 。 在此阶段，确保清晰的沟通和涵盖所有细节对双方都有好处。 它还可以帮助该机构更好地估算所需的工作量和预算。

Engage an agency who makes the effort to understand your business and can help translate your vision to the online world. Once you’ve engaged an agency, trust them and give them the creative license to work their magic.

与一家致力于了解您的业务并可以帮助您将愿景转变为在线世界的代理商建立联系。 聘请代理机构后，请信任他们，并授予他们创作许可证以发挥其魔力。

2.研究与计划 (2. Research and Planning)

Based on the project definition we’ve chalked out above, the agency can now move on to the planning phase. This usually involves quite a bit of research and brainstorming sessions to outline the ideas and concepts for the website. At times we may request the client for additional details or ask for feedback regarding certain ideas.

根据我们上面列出的项目定义，代理商现在可以进入计划阶段。 通常，这需要进行大量的研究和头脑风暴会议，以概述网站的想法和概念。 有时，我们可能会要求客户提供其他详细信息，或要求您提供某些想法的反馈。

We map out the following during this phase:

在此阶段，我们将规划以下内容：

• User profiling: Normally the clients give us a brief about their target audience. We then do the research and work out the online profile of this audience — what kind of behaviour do they exhibit online, what kinds of designs, colors, templates and content are likely to appeal to them.

  用户配置文件：通常，客户会向我们简要介绍其目标受众。 然后，我们进行研究并计算出该受众的在线个人资料 -他们在网上表现出什么样的行为，什么样的设计，颜色，模板和内容可能会吸引他们。

• Architecture: This is a basic definition of the content structure and how users will access it. It includes details like which pages the website should have, how they should be layered and how a reader should navigate through them.

  体系结构：这是内容结构以及用户访问方式的基本定义。 它包括详细信息，例如网站应具有的页面，应如何分层以及读者应如何浏览它们。

• Page Layout: Here we chalk out the kind of layout most suitable to each type of page. This is based on the kind of flow we want the user to experience. It includes what kind of menu to have, whether or not to have sidebars, positioning of the various types of contents — text, media, forms and so on. Here’s a quick overview of the steps to creating a good page layout

  页面布局：这里我们列出最适合每种页面类型的布局。 这是基于我们希望用户体验的流程。 它包括要具有的菜单种类，是否具有边栏，各种类型的内容(文本，媒体，表格等)的位置。 这是创建良好页面布局的步骤的快速概述

• Mockup/Wireframe: Once the basic structure and layout is planned, we map it on to a mockup or a wireframe. This gives the client a feel for how things would be structured on the site and it also helps convey the designer’s vision to the developers clearly.

  样机/线框：计划好基本结构和布局后，我们将其映射到样机或线框 。 这使客户对网站上的内容结构有一种感觉，也有助于将设计师的愿景清楚地传达给开发人员。

• Infrastructure: The infrastructure decisions include things like grabbing a domain name, getting server hosting, choosing which CMS to use, what programming languages and tools to use.

  基础架构：基础架构决策包括诸如获取域名，获取服务器托管，选择要使用的CMS，要使用的编程语言和工具之类的内容。

3.设计 (3. Designing)

Once the basic planning is done, the designer uses this data to develop the look and feel of the website. Design isn’t all abstract art, it’s more of a science — how visual elements impact the viewer and the emotions evoked.

完成基本规划后，设计人员将使用这些数据来开发网站的外观。 设计并不仅仅是全部抽象艺术，而是一门科学-视觉元素如何影响观看者和引起的情感。

The design part of the process includes the following steps:

该过程的设计部分包括以下步骤：

• Color Scheme: The color scheme sets the tone for the user’s experience. Vibrant colors, multi-chrome hues work well for a young active audience. Dapper colors and subtle hues work better for financial, legal and other such cerebral businesses.

  配色方案：配色方案设置了用户体验的基调 。 鲜艳的色彩，多色的色相适合年轻活跃的观众。 简洁明快的色彩和微妙的色调更适合金融，法律和其他此类脑力业务。

• Visual elements: Visual elements on the site include buttons, menus, boxes, typography and more. These need to subtly convey the brand message. Sharp edges, heavy fonts convey a certain formal gravity. Rounded boxes and buttons, quirky distressed boxes and funky fonts may appeal to a younger crowd.

  视觉元素：网站上的视觉元素包括按钮，菜单，框，版式等。 这些都需要巧妙地传达品牌信息。 锋利的边缘，沉重的字体传达了某种形式上的引力。 圆形的框和按钮，古怪的心疼的框和时髦的字体可能会吸引年轻的人群。

• Media: This includes the images, the videos and the audio content on the site. What kind of images to use, how to present them, whether they should slide in or fade out, or have a border are some of the decisions taken here. Of course, all the elements of the design must tie in with the logo and other aspects of the brand’s visual identity. Otherwise it creates a dissonance for the end customers. Here’s some data from HubSpot highlighting why you need to have media on your website

  媒体：包括网站上的图像，视频和音频内容。 使用哪种类型的图像，如何呈现它们，它们是应该滑入还是淡出还是带有边框是这里要做出的一些决定。 当然，设计的所有元素都必须与徽标以及品牌视觉形象的其他方面联系在一起。 否则，会给最终客户带来不和谐。 以下是HubSpot的一些数据，重点介绍了为什么需要在网站上放置媒体

4.发展 (4. Developing)

This is where we go behind the scenes and do all that magic (aka coding) that brings your requirements and the designer’s vision to life. This is normally done on an internal server, not a live host — the rest of the world can’t access your site yet.

这是我们在后台进行的工作，并执行所有使您的需求和设计师的愿景变为现实的魔术(aka编码)。 通常，这是在内部服务器上进行的，而不是在实时主机上进行的-世界其他地方仍无法访问您的站点。

• Framework/CMS: Depending on the requirements, we choose whether to use a framework, a pre-built template, a standard content management system such as WordPress, or to just hand code the website.

  框架/ CMS：根据需求，我们选择是使用框架，预构建模板，标准内容管理系统(如WordPress)，还是仅手动编写网站代码。

• Web standards & Programming languages: Based on the framework and the kind of functionality required, we put together a toolkit of the right tools and programming languages best suited for these features. While coding, we need to take care to comply with web standards for HTML, CSS and JavaScript.

  Web标准和编程语言：基于所需的框架和功能类型，我们组合了最适合这些功能的正确工具和编程语言的工具包。 在编码时，我们需要注意遵守 HTML，CSS和JavaScript的网络标准 。

• Database: The web pages, templates, layouts, images and code are stored in a database. This can be a SQL or other database that needs to be configured and managed appropriately.

  数据库：网页，模板，布局，图像和代码存储在数据库中。 这可以是需要适当配置和管理SQL或其他数据库。

• Features: Once we have the framework and database ready, we can get to coding the features. Different developers have their own set of coding guidelines. Larger teams of developers follow Agile or other methodologies to ensure proper coordination, and use a variety of development and debug tools.

  功能：一旦我们准备好框架和数据库，就可以对功能进行编码。 不同的开发人员有自己的一套编码准则。 较大的开发人员团队遵循敏捷或其他方法，以确保适当的协调，并使用各种开发和调试工具。

• Security: Security is a key aspect of your website. It’s important to keep not just website and its content safe, but also to ensure security of any user data such as email addresses, password or credit card information visitors key in to your site.

  安全性：安全性是您网站的关键方面。 重要的是，不仅要确保网站及其内容的安全，而且还要确保任何用户数据(例如电子邮件地址，密码或访问者的信用卡信息)的安全性，它们都可以访问您的网站。

• Performance: While adding in extensive features or high-resolution images has its own merits, it can considerably slow down your webpage. Page load time is one of the most crucial factors for customer retention. We analyze the performance and optimize it best we can.

  性能：虽然添加了广泛的功能或高分辨率图像各有千秋，但它可能会大大降低您的网页速度。 页面加载时间是保留客户最重要的因素之一 。 我们会分析性能并尽力对其进行优化。

All this is usually done on an internal server. A good agency will keep you involved in the process. They’ll show you features as and when they’re developed and keep you posted of any delays, bottlenecks or changes.

所有这些通常在内部服务器上完成。 一个好的代理机构将使您始终参与其中。 它们将在开发时向您显示功能，并向您发布任何延迟，瓶颈或更改。

5.发射 (5. Launching)

• Beta testing: This is the final stage of testing where we extensively check the functionality, performance and security. We normally have the client involved here to confirm that it matches their requirement and the user experience they want.

  Beta测试：这是测试的最后阶段，我们在此阶段广泛检查功能，性能和安全性。 通常，这里有我们的客户参与，以确认它符合他们的要求和他们想要的用户体验。

• Transfer deliverables: Once the site’s functionality is verified, we transfer the code, database and other assets to the client’s domain name and hosting. We add in the necessary code to enable various web analytics services (such as Google Analytics) that the client may want to use. At this point we transfer control to the client, including for the hosting, control panel and other administration (unless we have a maintenance clause).

  转移可交付成果：验证站点的功能后，我们会将代码，数据库和其他资产转移到客户的域名和托管中。 我们添加了必要的代码以启用客户端可能想要使用的各种Web分析服务(例如Google Analytics(分析))。 此时，我们将控制权转移给客户端，包括托管，控制面板和其他管理(除非有维护条款)。

• Training & documentation: Depending on the client’s needs and complexity of the project, we can also provide documentation and training on how to manage basic aspects of the website upkeep.

  培训和文档：根据客户的需求和项目的复杂性，我们还可以提供有关如何管理网站维护基本方面的文档和培训。

6.保养 (6. Maintenance)

Some clients (and agencies!) may be tempted to believe that there’s nothing more to it after the site is launched. But really, like any other asset, a website needs regular maintenance. Unless you’re technologically savvy enough to do it yourself, it’s usually better to ask the agency to provide the support to maintain your site.

网站启动后，有些客户(和代理商！)可能会认为没有其他东西。 但实际上，与其他资产一样，网站需要定期维护。 除非您精通技术，自己动手做，否则通常最好请该机构提供支持来维护您的网站。

This could include:

这可能包括：

• Support and Troubleshoot: This is quite a broad area and can include any kind of issues a user encounters on your website, or issues with the hosting, security and other aspects.

  支持和故障排除：这是一个相当广泛的领域，可以包括用户在您的网站上遇到的任何类型的问题，或有关托管，安全性和其他方面的问题。

• Periodic Renewals: Depending on your initial purchase, you may need to update your domain name, hosting and other licences periodically. It is also advisable to update the content on your website, such as company or product information or other changes from time to time, perhaps once every year.

  定期续订：根据您的初次购买，您可能需要定期更新域名，托管和其他许可证。 还建议您不定期(例如每年一次)更新您网站上的内容，例如公司或产品信息或其他更改。

• Blog / Live content: If you really want to engage your customers and have them return to your website, it is advisable to have a blog or other new content such as podcasts or videos posted regularly. Check out the benefits of having a blog

  博客/实时内容：如果您真的想吸引客户并让他们回到您的网站，建议定期发布博客或其他新内容，例如播客或视频。 了解拥有博客的好处

• Optimization: In order to make your website ‘visible’ online, you will have to employ some Search Engine Optimizations techniques, and other methods to drive up the traffic. Once your site has been live for a period of time and you can use the web analytics data to optimize your website for conversions or other goals.

  优化：为了使您的网站“在线”可见，您将不得不采用一些搜索引擎优化技术和其他方法来增加访问量。 网站启用了一段时间后，您就可以使用网络分析数据来优化网站以实现转化或其他目标。

Phew! And this is just the overview. There are many layers and details to each of these steps. Each of these is crucial to ensuring your website brings in the desired results for your business — right from defining the website features and goals, the behind the scenes research and planning to ascertain the right architecture and visual impact of your site; to actually coding the details and making sure it all works well together. Don’t skimp on these. It may take time for you and your development firm to work through the details, but it’s better to front load the work in order to get the results you want.

！ 这只是概述。 每个步骤都有许多层和细节。 所有这些对于确保您的网站为您的业务带来理想的结果至关重要–从定义网站的功能和目标，进行幕后研究和计划，以确定网站的正确架构和视觉效果； 实际编码细节并确保所有细节协同工作。 不要ski这些。 您和您的开发公司可能需要花费一些时间来仔细研究细节，但是最好提前进行工作以获取所需的结果。

Have you had difficulties with your website design? What other questions do you have about the process?

您在网站设计方面遇到困难吗？ 您对过程还有其他疑问吗？

翻译自: https://www.sitepoint.com/clients-guide-actually-takes-create-website/

能力建设指南