设计师如何与前端配合好，网站制作

    网站设计师，您喜欢设计工作的前端工程师吗？您的一些习惯可能无法很好地转换为代码，这使得前端工程师更难以与您一起完成项目。想成为更好的同事吗？然后我们将学习如何更好地进行沟通和设计，让前端工程师通过对工作方式进行微妙的改变来爱上你的工作。这将加快项目进度，使工作更轻松。

    1、让前端工程师尽快启动项目

    网页设计师和前端工程师之间的最大问题是他们经常在设计初稿完成之前安静地工作，个人或团队开始谈论项目。这不是正确的工作方式，网页设计师和前端工程师应该从一开始就讨论如何组装项目。虽然网页设计师可能会关注颜色、字体和图像，但前端工程师可以深入了解可用性、的功能和性能。

    网站设计师和前端工程师应该很好地了解彼此的外观。网站设计人员应该了解足够的代码和可用性，以便与前端工程师进行沟通并了解挑战：前端工程师应该对设计理论有一点了解，以便在设计概念不适合网络时提出建议。

    2、文件结构清晰

    Web设计人员可以做的最重要的事情之一是每次都以相同的方式准备和打包文件。您有多少次打开包含数百个未命名图层的Photoshop文档？不要将此类文档提供给前端工程师。无论您使用哪种软件，都应该适当地命名每个图层和样式。样式、颜色、样本和布局在整个设计过程中应保持一致。

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

    3、使用浏览器字体

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

    对于数字项目，请选择“浏览器字体排版”。这意味着您可能需要为Web找到与打印内容匹配的类似字体。不要让前端工程师为您做这件事。选择可比的浏览器字体并从一开始就使用它们。您甚至可以在样式指南中注意到打印和数字字体。这背后的原因很简单：嵌入字体可能很棘手。此外，浏览器字体可以免费确保您不会产生额外的项目成本。（当你这样做时，考虑使用图标来做同样的事情，使用像字体这样的好包装，所以前端工程师可以使用CSS样式的图标而不是导入一堆图像文件！）

    4、打包的图像资产

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

    这可确保您获得所需的图像并压缩文件以帮助您快速加载网站。

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

    5、考虑环境

    在设计网站和移动应用程序时，需要考虑许多设备大小和宽高比。作为网页设计师，您需要知道画布大小、边距、填充等，以创建实际可用的模型。

    在开始绘图之前，请咨询前端工程师，以确保在开始之前了解设计环境的外观。没有比在Photoshop或Sketch中看起来更好的设计更糟糕的了。

    你需要提前知道这些事情：

    如果框架具有不同尺寸的特定填充规格。

    列之间的凹槽宽度（如果不同）

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

    6、提出更多问题

    它已被多次提及，但设计师和前端工程师之间的沟通是所有这些工作的关键。沟通可以创建或破坏项目，影响截止日期，并影响最终项目的设计和功能。

    与前端工程师共进午餐并了解它们。在这个过程中有许多问题要问。如果您不确定某些内容是否有用，请询问。前端工程师并不是一个坏人，在过程早期回答问题比重新思考和整个概念容易得多。

    7、了解一些开发基础知识

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

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

    HTML和CSS（您应该能够更改字体大小或颜色，并了解两者是不同的）常见用户模式（针对用户与内容的交互方式而设计）

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

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

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

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

    8、使用“常规”样式指南

    设计过程也扩展到开发，网站网站设计师，您需要意识到前端工程师对您的设计过程同样重要。

    考虑到这一点，创建一个“常规”样式指南，不仅包括颜色和字体，还包括组件。项目启动时，每个人都应该能够访问和更新文档。

    良好的样式指南将帮助项目中的每个人保持与可视元素的一致性，为设计选择提供上下文，为项目提供协作点，以及帮助标准化代码。

    将以下信息放入样式指南中以充分利用：

    标志风格

    调色板

    字体面板

    图标面板

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

    不同页面的布局选项。

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

    9、使用网格

    网格尊重。在响应式网站设计中，网格不仅仅是将元素放置在屏幕上的指南，它还确定了元素在不同屏幕尺寸下的位置，以及列的堆叠和混洗。

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

    可以这样想：您的设计在屏幕上的全屏桌面显示屏上有四行内容（屏幕上的宽度相同）。然后在slab上，将块转换为两列，每行两列。在移动设备上，它们被转换为一行四行。

    了解网格如何影响对象的大小以及如何在不同的设备上转换对象非常重要，因为它决定了如何设计您拥有的内容。再想一想同样的情况。如果有五个内容块怎么办？需要重新设计以确保您创建一致的视觉轮廓。

    10、友好的网站设计师

    确保项目顺利进行的真正关键是灵活性。网页设计技术和标准不断变化。虽然有些项目确实让你成为一个细节而且是一个不动的人，但响应式设计却不是这样的。易于使用的网站设计师将赢得更多尊重并与前端工程师建立更好的关系。这将带来更好，更成功的项目。应该说，但是太多次，会有很多无意识的行为。不要陷入那个陷阱。与您的前端工程师讨论您的项目，他们会爱你。