It’s 2020. We’re supposed to have flying cars and space travel. We should at least have our process for design handoff nailed down at this point.

现在是2020年。我们应该有飞行汽车和太空旅行。 在这一点上，我们至少应该确定我们的设计移交过程。

From my experience at multiple agencies in the last few years, we don’t.

根据我过去几年在多家机构的经验，我们没有。

At my current job, I’ve had multiple conversations with our developers to better understand their needs, pain points and ways designers can help make the process better. Armed with all of this information, I started to make a checklist we use for every web design project we tackle.

在我目前的工作中，我与开发人员进行了多次对话，以更好地了解他们的需求，痛点和设计师可以帮助改善流程的方式。 掌握了所有这些信息后，我开始制作一份清单，用于我们处理的每个Web设计项目。

Here are some of the pieces of the process we often miss:

以下是我们经常错过的一些流程：

图像优化 (Image Optimization)

Web sites are files. These files vary in size. The larger a website, the slower it may load. This impacts page ranking, overall site performance, and the credibility of the site in the eyes of search engines.

网站是文件。 这些文件的大小各不相同。 网站越大，加载速度越慢。 这会影响页面排名，网站整体性能以及在搜索引擎看来网站的信誉。

About 21% of any given websites file size comes from images. Part of my workflow now is to compress images before sending them to developers.

任何给定网站的文件大小中约有21％来自图片。 现在，我的工作流程的一部分是压缩图像，然后再将其发送给开发人员。

I use a free tool called ImageOptim for this.

为此 ，我使用了一个名为ImageOptim的免费工具。

With this tool you can reduce image file size by 20–80%. Make sure all of your images are organized in a folders by page and named appropriately.

使用此工具可以将图像文件的大小减小20–80％。 确保将所有图像按页面组织在一个文件夹中并正确命名。

This step might seem insignificant, but every optimization you can make will help your website stand out from the competition, and speed is huge.

这个步骤看似微不足道，但是您可以进行的每次优化都会帮助您的网站在竞争中脱颖而出，而且速度非常快。

版式 (Typography)

First and foremost: Make sure you have the appropriate licenses.

首先也是最重要的： 确保您具有适当的许可证。

Most type foundries document licensing instructions on their site. If you can’t afford it, don’t try and steal it. The penalties hurt, and piracy is not a victimless crime. Just use a Google Font instead.

大多数类型代工厂在其站点上记录许可说明。 如果您负担不起， 请不要尝试偷它。 处罚很痛苦，盗版并不是无害的犯罪。 只需使用Google字体即可 。

Have the proper license? Good. Now get that font into the hands of your developers. To do this on a Mac:

有适当的执照吗？ 好。 现在，将该字体交到开发人员手中。 在Mac上执行以下操作：

Open Font Book, select the fonts you want to export, click “File” > Export Fonts and select where you want them to be saved on your computer. Then shoot these files over to your development team.

打开“字体书”，选择要导出的字体，单击“文件”>“导出字体”，然后选择要将其保存在计算机上的位置。 然后将这些文件发送给您的开发团队。

Not sure what font file type you should be using? Learn more here.

不确定应使用哪种字体文件类型？ 在这里了解更多。

文字样式 (Type Styles)

Licensing and getting developers the right fonts is the first step. The next step is proper documentation of your type styles. Apply them throughout your design file to ensure an efficiency and simple design & development process.

许可和使开发人员获得正确的字体是第一步。 下一步是正确记录您的字体样式。 将它们应用于整个设计文件中，以确保效率和简单的设计与开发过程。

Here’s how I do this in Figma. It’s not exactly the same in Sketch, InVision or Adobe, but it’s very similar.

这是我在Figma中进行的操作。 在Sketch，InVision或Adobe中并不完全相同，但是非常相似。

创建文字样式 (Create type styles