与直接学习编写HTML / CSS相比，进行完整的图像模拟是否有优势？

过去，许多公司和网页设计师的工作流程至少是两到三个部分，即设计，标记和后端。这些是概括性的，线条可能会有点模糊...但是我敢肯定，你的主旨是。

网页设计师通常只是“可视的”，只负责在图像编辑软件（例如Photoshop或Fireworks）中构建非常详细的模型。样机将显示网页的每个可能方面，从颜色和类型选择到背景，图标，照片和要使用的其他图像。但是“设计者”从不关心实际的现场构建和实施。他们只专注于外观。

一旦设计获得批准（通过查看这些图像文件），便进入第二阶段-将图像文件转换为实时HTML / CSS。

• 在单座或自由职业者环境中，Web设计人员可能已使用切片，并通过一些内部应用程序选项将其导出为HTML。在极少数情况下，设计人员可能会构建基本的HTML / CSS页面框架。

• 在某些公司环境中，对于网络设计人员而言，这些模型将保留为分层图像文件（.psd，.png [for Fireworks]）的形式，并且设计人员将永远不必担心实现任何标记或代码。“设计者”从不必考虑如何构造HTML或CSS来实现他们创建的此图像模型。将图像文件移交给“开发人员”，然后由其负责构建与图像文件匹配的HTML / CSS 。

我想这种方式仍有很多工作要做。但是，随着CSS3等标记语言的发展以及浏览器支持的改进，在许多情况下，花费大量时间精心构建完整网页的栅格表示形式在许多情况下可能毫无用处。

使用当前标记，可以很容易地直接通过HTML / CSS来实现许多Web设计需求，并且图像应用程序的使用仅限于生成可能需要的小图像资产或照片。（诸如Bootstrap之类的库和/或模板进一步推动了这一概念。）

在我自己的工作流程中，除非特别要求，否则我已经远离了整页模型。我这样做是为了提高设计速度，并确保批准的内容接近最终将在浏览器中呈现的内容。实际上，多年来，我还没有创建完整的页面模型。但是我知道仍然有工作流使用这种方法。

在直接进入HTML / CSS进行设计构建之前，在图像编辑应用程序中构建全页模型是否有真正的好处？

构建完整的页面模型的好处是分工。

在既有设计师又有（前端）开发人员的大型公司中，设计师的工作是设计，开发人员的工作是编写代码。

拥有此部门可以使设计人员将所有时间都花在网站的外观，感觉和界面上，而不必了解网站的创建方式。他们可以创建更高质量的设计，并通过更长时间的思考来进行决策，因为他们不致力于使代码同时执行所需的工作。

它还使开发人员无需考虑任何细节（包括小细节和变化的状态），就可以编写更多的代码。他们会在给定的时间内尽最大可能实施设计，然后继续进行其他项目。

如果设计师也是开发人员，我认为大多数人或多或少都开始与您站在一起，因为他们会创建更粗糙的产品并快速迭代以进行测试。与创建像素完美的photoshop文档相比，这可以快速测试创意。

但是，没有代码的粗略的迭代设计也是一种有效且非常有用的方法，尤其是对于布局和工作流程。标记语言和新技术并未发明出具有粗略想法的方法：)

我将用这个答案选择Guffa。需要明确的是，我并不是想将Guffa选出来，而是说，这些要点是我听到的非常普遍的观点。我也想提供一些对策。我并不是说古法是错的，我是对的。我只是提供一个对策。

1. 如果花时间试图弄清楚如何在HTML和CSS中做不同的事情，则设计过程中的创意部分会受到影响。

如果人们不认为代码具有同等的创造力，这就是事实。Photoshop和HTML / CSS / JS都是艺术家工作的媒介。就像涂料像木炭一样具有创意，Photoshop可以像HTML / CSS / JS一样具有媒介创意。

直接在HTML / CSS / JS中工作的最大好处是它的多维性。归根结底，Photoshop是一块平坦的画布。HTML / CSS / JS是具有流动性，交互性，动画等的动态画布。

最重要的是，在这种情况下，我认为代码是更具创造力的媒介。

2. 当设计人员和编码人员是不同的人时，即使设计人员非常擅长HTML和CSS，但他们很少真正擅长编码。结果是（在不同程度上）效率低下的代码that肿且难以维护。

令人遗憾的是，与此相反的是，我经常遇到这样的情况：大多数从事专门角色的开发人员都在较大的组织中工作（在专门组织中，规范的角色更为常见），并且由于缺乏跨学科知识（且通常完全缺少表示层代码）使大多数肿的人难以维护我所见过的前端代码。

重点是，我不会认为自己的视觉设计能力能说明他们的编码能力。我会更进一步，说一个知道设计和编码的才华横溢的通才，即使他们不是最好的设计师或最好的编码员，通常也可以比高度隔离的团队创造更好的整体产品他们可以在创作时看到更大的图景。翻译损失少得多。

3. 如果您在清楚了解设计外观之前就开始编写代码，那么您将在如何构造代码方面做出无知的选择。这样做的风险是会使代码更糟，并限制设计的可能性。

但是用代码进行设计并不意味着这就是您的生产代码。我从事的项目中，我们创建的大多数代码纯粹是为了完全设计，然后进行一些原型制作。完成后，我们将进行干净的重写。这具有我们可以在第一轮编码中找到很多“陷阱”的额外好处。

4. HTML和CSS代码在设计中进行很小的更改就可以进行很大的更改，这会使设计过程更加静态。您有将自己限制在仅易于在代码中进行更改的风险。

与之相反的是，设计人员将自己限制为仅在Photoshop中易于进行的更改。无论哪种方式，这都不是一个很好的论据。

不首先执行Photoshop样机的唯一原因是设计人员不了解代码的局限性。您永远都不想给客户一些他/他在决赛中所没有的东西。

只要PSD表示可以在CSS / HTML中非常接近地复制的内容（考虑到跨浏览器和跨媒体的限制），我就可以在Photoshop（或InDesign中这样做）。操作图像更快，更容易。如果可以的话，在我编写代码之前，先在CSS中模拟我。

将设计元素与代码生成元素分开的原因有很多，例如：

• 如果花时间试图弄清楚如何在HTML和CSS中做不同的事情，则设计过程中的创意部分会受到影响。

• 当设计人员和编码人员是不同的人时，即使设计人员非常擅长HTML和CSS，他们也很少真正擅长编码。结果是（在不同程度上）效率低下的代码that肿且难以维护。

• 如果您在清楚了解设计外观之前就开始编写代码，那么您将在如何构造代码方面做出无知的选择。这样做的风险是会使代码更糟，并限制设计的可能性。

• HTML和CSS代码在设计中进行很小的更改就可以进行很大的更改，这会使设计过程更加静态。您有将自己限制在仅易于在代码中进行更改的风险。