网站设计师们，你的设计作品前端工程师们是喜欢的吗？很有可能你的一些习惯并不能很好地转化为代码，这就会让前端工程师在项目上与你一起工作变得更加困难了。想成为一个更好的同事吗？那我们今天就来学习如何更好地沟通和设计，通过对工作方式的细微改变来让前端工程师爱上你的作品，这样将会加快项目进度，使工作更轻松。

1、让前端工程师在早期开始接触项目

网站设计师和前端工程师之间最大的问题是他们经常在默默的完成自己的工作，直到设计的初稿完成，个人或团队才开始谈论一个项目。这不是正确的工作方式，网站设计师和前端工程师应该从一开始就讨论项目将如何组合在一起。虽然网站设计师可能关注颜色、字体和图像，但前端工程师可以提供对可用性、功能和性能的洞察。

网站设计师和前端工程师应该对对方的外观有一个很好的了解。网站网站设计师应该理解足够的代码和可用性，以便与前端工程师交流并理解挑战：前端工程师应该对设计理论有一点了解，这样他们就可以在设计理念不适合web的时候提出建议。

2、清晰的文件

网站设计师所能做的最大的事情之一就是每次都以相同的方式准备和打包文件。有多少次你打开了一个有数百个未命名图层的Photoshop文档？不要将这种类型的文件交给前端工程师。无论你使用什么软件，每一层和样式都应该适当命名。样式、颜色、色板和排版在整个设计过程中都应保持一致。

对于每个项目，以相同的方式命名文件和样式。以类似的方式分组，并使用一致的文件夹系统。这样，前端工程师就不必重新学习如何找到每个新项目的部件和元素。

3、使用浏览器字体

设计项目的最大挑战之一，包括印刷和数字作品是印刷管理。不要将桌面字体用于web或应用程序设计的打印项目，并假设它们会起作用。（通常他们没有。）

对于数字项目，选择浏览器字体排版。这意味着你可能需要为web找到类似的字体，以便与打印的内容相匹配。

不要让前端工程师为你做这些。挑选可比较的浏览器字体，并从一开始就使用它们。你甚至可以在你的风格指南中注意到打印和数字字体。

这背后的原因很简单:嵌入字体可能有点棘手。另外，浏览器字体是免费的，并且将确保你不会产生额外的项目成本。（当你在做的时候，考虑一下用图标做同样的事情，用一个像字体一样棒的包，这样前端工程师就可以使用CSS样式的图标，而不是导入一堆图像文件!）

4、包装形象资产

当我们讨论图像资产的时候，正确的导出和打包文件是非常重要的。前端工程师可以打开和导出所有的图像文件以满足他们的需求，你可以询问他们需要什么，并在过程中执行。

这可以确保你得到你想要的图片，同时压缩文件以帮助你的网站快速加载。

不要试图自己做这件事。询问前端工程师如何保存、命名和压缩文件以获得最佳使用。

5、考虑环境

在设计网站和移动应用程序时，要考虑的设备大小和纵横比都是如此之多，作为一个网站设计师，你需要了解画布大小、页边距、填充等，以创建实际可用的模型。

在开始绘图之前，请与前端工程师交谈，以确保在开始之前了解设计环境的外观。没有什么比一个在Photoshop或素描中看起来更棒的设计更糟糕的了。

你需要事先知道这些事情:

如果该框架具有不同大小的特定填充规格。

列之间的沟宽（如果不同）

最窄屏幕尺寸的前端工程师将编写代码。

6、多问问题

它已经被提到过几次了，但是设计者和前端工程师之间的沟通是所有这些工作的关键。沟通可以产生或破坏项目，影响截止日期，影响最终项目的设计和功能。

多与你的前端工程师去吃午饭，去了解他们。一路上要问很多问题。如果你不确定某件事是否有用，就问一问。前端工程师不是可怕的人，在这个过程的早期回答一个问题比需要重新思考和整个概念要容易得多。

7、学习一些开发基础知识

当你与前端工程师交谈并提出问题时，要深入挖掘。如果你在你的设计库中还没有这些技能，那就学习一些开发基础知识。

从事数字项目的网站设计师应该在以下方面进行自我介绍:

HTML和CSS（你应该能够改变字体大小或颜色，并理解两者是不同的）

常见的用户模式（为用户与内容交互的方式设计）

可访问性标准（因此你的设计将适用于更多的用户）

哪些类型的元素需要用作图像，哪些元素可以使用纯CSS来创建!

在响应式布局中，断点是如何工作的？

网站设计的趋势

你可能永远不会真正编写代码，但是学习开发原则将使你成为更好的网站设计师，因为你将了解工具和工作流的价值。

8、使用“常规”风格指南

网站设计过程也延伸到开发中，网站设计师，你需要认识到，前端工程师对设计过程和你一样重要。

考虑到这一点，创建一个“常规”风格指南，不仅包括颜色和字体，还包括组件。每个人都应该能够访问和更新文档，因为这个项目已经开始了。

一个好的风格指南将帮助每个在项目中工作的人保持与视觉元素的一致性，为设计选择提供上下文，为项目提供一个协作点，并帮助标准化代码。

将以下信息放入风格指南中，充分利用:

标识样式

调色板

字体面板

图标面板

导航菜单元素（它们链接到）

不同页面的布局选项。

在整个站点中重用的代码片段（例如按钮）

9、使用网格

网格的尊重。在响应式网站设计中，网格不仅仅是放置元素在屏幕上的指导原则，它还可以决定元素在不同屏幕大小下的位置，以及列的堆栈和洗牌。

网格可以帮助你设计和维护流。（挑战在于你不能随意打破设计规则。）

你可以这样想:你的设计有四个内容块在屏幕上排成一行（在屏幕上有相同的宽度），在全屏幕的桌面显示器上。然后在一个平板上，这些块转换成两列，有两行。在移动设备上，它们会转换成一行四行。

理解网格如何影响对象的大小，以及对象如何在不同的设备上进行转换，这一点很重要，因为它可以决定如何设计你所拥有的内容。再想想同样的情景。如果有五个内容块呢？它需要重新设计，以确保你创建一个一致的视觉轮廓。

10、友好的网站设计师

确保项目顺利进行的真正关键在于灵活，网页的设计技术和标准一直在变化，虽然有些项目确实让你成为一个细节和不动的人，但是响应性设计并不是这样的。

容易与人合作的网站设计师会赢得更多的尊重，并与前端工程师建立更好的关系。这将会带来更好更成功的项目。这应该不用说，但太多的时候，会有很多不自觉的行为。不要掉进那个陷阱。多和你的前端工程师讨论项目，他们会爱你的。