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

在同时拥有设计师和（前端）开发人员的大公司中，设计师的工作是设计，而开发人员的工作是编写代码。

有了这个部门，设计师可以把所有的时间都花在网站的外观、感觉和界面上，而不必知道它是如何创建的。他们可以创建更高质量的设计并更长时间地思考决策，因为他们没有同时致力于让代码做他们想做的事情。

它还允许开发人员编写更多代码，而不必考虑任何代码的外观，包括小细节和变化的状态。他们在给定的时间内尽可能地实施设计，并可以继续进行另一个项目。

如果设计师也是开发人员，我认为大多数人或多或少都开始支持你，因为他们创建了一个更粗糙的产品并快速迭代以测试事物。这允许快速测试想法，而不是创建像素完美的 Photoshop 文档。

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

我将用这个答案来选择 Guffa。需要明确的是，我并不是想把 Guffa 单独列出来，而是说，项目符号点是我听到的非常常见的点。我也想提出一些反对意见。我并不是说 Guffa 是错的，我是对的。我只是提供一个对立面。

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

如果人们不认为代码同样具有创造性，这是正确的。Photoshop 和 HTML/CSS/JS 都是艺术家工作的媒介。就像油漆和木炭一样有创意，Photoshop 也可以像 HTML/CSS/JS 一样具有创意。

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

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

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

可悲的是，与此相反的是我经常遇到的问题：大多数担任专门角色的开发人员在更大的组织中工作（专门的角色更常见），并且由于缺乏跨学科知识（并且通常完全缺乏表示层代码）使我见过的一些最臃肿且难以维护的前端代码。

重点是，我不会认为一个人的视觉设计能力表明他们的编码能力。我会更进一步，认为一个了解设计和编码的才华横溢的通才——即使他们不是最好的设计师或最好的编码员，通常也可以创造出比高度隔离的团队更好的整体产品，这仅仅是因为事实他们可以在创作时看到更大的画面。翻译中丢失的东西少了很多。

3. 如果您在清楚地了解设计应该是什么样子之前就开始编写代码，那么您会在如何构建代码方面做出不知情的选择。风险在于它会使代码变得更糟，并限制设计的可能性。

但是用代码设计并不意味着那是你的生产代码。我参与过的项目中，我们创建的大部分代码纯粹是为了完全设计，然后进行一些原型设计。完成后，我们将进行干净的重写。这带来了额外的好处，我们能够在第一轮编码中找到很多“陷阱”。

4. HTML 和 CSS 代码可以随着设计的微小变化而发生很大变化，这将使设计过程更加静态。您冒着将自己限制在代码中易于进行的更改的风险。

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

不先做 Photoshop 模型的唯一原因是设计师不了解代码的局限性。你永远不想给客户一份他/她在决赛中不能拥有的东西。

只要 PSD 代表的东西可以在 CSS/HTML 中非常接近地复制（考虑到跨浏览器和跨媒体的限制），我会在 Photoshop（或 InDesign——我认识一些在这方面进行比较的设计师）中进行。处理图像更快、更容易。如果这有意义的话，在我编码之前用 CSS 模拟对我来说就是编码。

将设计元素与代码生成元素分开有几个原因，例如：

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

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

• 如果您在清楚地了解设计应该是什么样子之前就开始编写代码，那么您会在如何构建代码方面做出不知情的选择。风险在于它会使代码变得更糟，并限制设计的可能性。

• HTML 和 CSS 代码可以随着设计的微小变化而发生很大变化，这将使设计过程更加静态。您冒着将自己限制在代码中易于进行的更改的风险。