与图形设计师合作的正确方法是什么？[关闭]

最近，我们与一位图形设计师（由客户安排）合作，为我们构建的Django + Bootstrap应用程序提供了外观。设计师提供了新布局的一系列静态图像，以及描述一些技术属性（字体大小，颜色，一些尺寸等）的文档。

事实证明，实现此目标非常耗时。尽管整个站点基本上都是首页，索引页和六个详细页面，但我花了至少5天时间才实现CSS和HTML更改。所以我会弯腰称这为错误的方式。

我的基本方法是：

1. 比较静态图像和当前渲染，并注意差异。
2. 猜猜在CSS / HTML中需要进行哪些更改
3. 做出改变
4. 转到步骤1。

我不了解某些特殊问题，因为该设计包括将8列更改为12列，某些图像格式错误（.png在不同的浏览器/平台组合上可能呈现不同的图像），麻烦于尝试撤消Bootstrap的样式，通常的CSS角力，以达到像素完美的渲染等效果。有时，我不得不重新组织HTML模板以获得某种行为。

正确的方法是什么？

在我的公司里，有一些专门从事这项工作的人。

他们是设计师。他们知道HTML。它们可以成为设计师和前端工程师之间的桥梁。他们通常是。这样，我们只需要集成他们的HTML。

这是一项艰巨的工作。像“在24小时内将PSD转换为HTML”这样的网站运行良好，是有原因的。我们公司的解决方案是请专业人员进行此操作。对我们来说，使用HTML轻而易举。

没有银弹。

我不确定是否有“正确的方法”，但是与设计师合作的合理有效的方法是首先构建一个使用模板并允许所有模板轻松互换的无样式系统。然后，一旦有了一个功能齐全但未样式化（或样式最少的样式）的界面，便可以将结果交给设计人员进行样式化。

jQueryUI（http://jqueryui.com/）是这种设计模式的一个很好的例子。

首先，我必须承认，到目前为止，我从未使用过Web前端。

但是我认为对于您和设计师来说，写出最终设计的外观散文可能是一种好习惯。这样，您可以更确定它是一致的，因为如果为每个页面描述不同的表，它会闻起来。Prose可以使您的实现更容易，因为您实际上是在编写代码，比图像更接近实现。

还应尝试使设计人员专注于组件，而不是整个页面。如果正确使用了页面的各个组成部分，则将它们组成整个页面是一个容易得多的步骤。

我一直在与数位设计师一起开发HTML / CSS，并且如上所述，没有“银弹”。我曾经与之合作的设计师对html / css并不了解。他们中的一些人具有网页设计方面的经验，我必须说，当他们拥有这些知识时，尤其是在涉及到UX的响应性时，它总是最终更易于开发和“更好的网站”。

我猜有些寻找网站的公司不知道/不知道是什么：任何人都可以说他是一位图形设计师/ webdevelopper / webdesigner / UI设计师，在其中任一方面都具有基本知识（甚至没有，我已经看到了）。而“真正的”可以付出更多努力，并产生可维护的有效网站。我试图“教育”客户，并解释说网页设计涉及图形设计师没有的“仅打印”技能。当这种方法有效时，我通常会把客户带给我已经合作过并拥有共同工作流程的设计师。

这就是说，通常由于多种原因而导致您最终建立具有图形技能但没有网站设计技能的人员来构建网站。在这种情况下，我发现节省编码时间并且不会以无法开发的布局结束的最佳方法是参与设计过程，并与设计人员进行交流，并说明您可以/不能做的事情以及更简单/更好的事情从您的角度来看。

尽管在某些情况下很难组织起来，但还是有必要向客户和设计师解释说：“如果您认为Web设计构成了Web项目的优势，那么您最终将节省时间，金钱和资源”，并且您将很高兴参加设计过程，以节省时间和金钱。

这是我在大多数项目中都会遵循的工作流程：

1. 如果不存在图形设计标准，则设计人员会建立图形标准（我通常不在这里参与。我只是试图向设计人员暗示使用与Web兼容的字体，例如：谷歌字体）
2. 设计师制作的Mokup。我在这里参与进来，并与设计师一起在客户看到 Web布局之前（特别是响应式布局）进行构建。
3. 客户验证mokup
4. 我编写代码

在编码过程中，我节省了与设计师沟通和​​合作的时间，最终得到了更简单，更易于维护和更简洁的代码。

这并不能使您摆脱一个快乐的设计师在星期五晚上给客户打电话的非常漂亮的样板，客户已经看到了，现在想要这样一句话：“嘿，鲍尔，您能帮我编码一下，截止日期是……昨天！ ” 然后，整个理论就会瓦解，如果您当时正在寻找工作，那么整个周末的学习都很有帮助。

结论：

我认为这与与非项目相关的任何代码都没有太大不同，与他人合作的最佳方法是与他们沟通。

作为一名平面设计师转变为全栈Web开发人员，对我而言，到目前为止，这一直很容易。我发现很多时候，UX设计团队与实现该产品的开发人员之间存在沟通鸿沟。当然，文档会有所帮助，但是一旦发生一些有关战略的面对面对话，流程就会变得自然而然。另外，我知道每个人的时间都很少，但是请尝试在设计和布局阶段参与其中。当需要设计师和开发人员之间的沟通时，这可以提供极大的帮助。该项目需要更多的团队协作，而不是“很好，我已经尽了自己的本分”。我发现并行进行设计和开发工作非常有益，鼓励设计团队在此过程的早期为您提供线框。这样，您可以进行一次只处理布局和位置的样式传递。然后，随着设计变得更加丰富和完整。进行外观和其他样式属性的另一次CSS传递。至少这使您不必一次专注于所有事情。

我正面临类似的问题。我的想法是可以将Greasemonkey或Tampermonkey之类的工具用于该目的。就在上周，我征求有关此想法的评论：如何外包动态Web应用程序的UI？，但没有得到满意的答复。

使用这些工具，您可以将CSS，HTML和Javascript注入页面。我的想法是，将工作站点的URL提供给设计者，并期望Greasemonkey脚本作为回报。从理论上讲，您应该能够将它们快速集成到现有站点。这样，设计人员的工作就是编写HTML和CSS，并使网站真正起作用。但是，这需要在设计人员方面更多的编程技能。

我知道这个想法需要很多阐述。但是我还没有尝试过，也不知道是否有人在这样做。实现可能存在一些问题。