可以用photoshop样机开始网站布局吗？

Question

这是一个最佳实践主题。

我认为它是某些Web开发人员的首选方法。他们不是从头开始进行CSS布局，而是首先启动一个photoshop模型，然后将其解码为CSS。

您如何看待这种方法？

最好的，

Answer 1

样机很棒，但我不知道photoshop是否是你想要达到目的的第一件事 - 一开始，当你只是试图为各种各样的逻辑布局该网站的页面（在根据外观和c进行精炼之前），带有干擦标记和便利贴的白板为早期头脑风暴提供了非常快速，重复的模拟重新排列。一旦（或极少数）可能的信息安排有一些合理的协议，然后在视觉上更准确的工具进入游戏。

顺便说一句，只是不要忘记在更换之前拍摄白板（任何体面的手机都会这样做，你不是在这里尝试高质量;-)任何时候有想法或建议你可能想要重温或思考在将来！

Answer 2

很快。这就是为什么我总是使用这种方法。在实际设置布局之前，您不希望花时间构建跨浏览器CSS。

Answer 3

大多数网页设计图形艺术家都是这样工作的。

许多程序员只是觉得浪费时间。

它有优点和缺点。

优点：

• 许多图形艺术家比他们做Dreamweaver更多地了解photoshop / illustrator 。

• 客户预览最终产品无处不在：mac，pc，firefox，即safari，等等。使用firefox和使用MSIE的客户在开发早期阶段发送html预览总是会引发麻烦。
  
  并且不要认为是聪明的一面，涂抹MSIE驱动的HTML。从非标准html开始并转换为标准比用另一种方式做更痛苦。
  还有一个问题：许多网站客户倾向于使用Mac并使用Safari 。网络提交者对图形的兴趣往往高于平均水平，因此在这一领域遇到Mac疯子的机会要高于其他人。

• 可以准备更多的设计备选方案，花费更少的时间。这可能是一个巨大的优势，同时处理客户方没有指定决策者的高层管理人员。替代模型将直接传递，直到就一种设计或另一种设计达成普遍共识。

缺点：

• 将图形设计“剪切”为html会变成额外的工作，并且不清楚谁会为这段额外的时间付费。

• 它支持以图形为中心，严格的设计工作流程。客户在给定的预览上先发制人地同意这是他们通过合同获得的。每个图形修改都意味着金钱，行为和编程往往不会被模型定义得很好，或者最差，定义错误。

• 追求像素完美跨浏览器遵守模型可能会让您感到疯狂。如果您与客户就某一严格的设计达成一致，那么这可能成为一个可怕的问题。

• 肮脏的CSS欺骗进入您的设计。使用HTML模型，客户可能已经批准了一个由代码驱动的设计，而且技巧更少。

无论如何，我不建议使用photoshop作为模型，但 inkscape 。 （或插画家，如果你通过在午夜将一堆钱烧成魔法圈来崇拜土坯）

在与客户讨论合同时，涂鸦阶段也很好。

我更喜欢铅笔和纸张，以及网络摄像头拍摄存档和电子邮件转发的想法。谈到涂鸦，任何人都会感觉更自然。

没有做任何事情并依赖于示例站点示例和截图以供图形参考始终是一种选择。

Answer 4

如果你这样富有成效，为什么不呢？并不是每个人都能完美地设想他们的网站，因为他们正在输入一堆尖括号。

更严肃地说：这是你的工作，所以你有责任以一种允许你有效地做到这一点的方式来做。

Answer 5

在进行原型设计时，选择正确的保真度非常重要。 This article from BoxesAndArrows为各种选项及其用途提供了很好的介绍。

我特别喜欢Bill Buxton这一行引用文章：

  

没有高保真或低保真度，只有适当的保真度。

在this TechTalk by the Facebook Design Team中，他们提到了他们如何在设计过程中使用Photoshop（IIRC在中途的某个地方，但我似乎无法通过视频转发）。

Answer 6

我是一名非常了解html和css的网络程序员。我可以使用图形程序来获得它的基本功能，但是设计一个完整的图形网站不是我的事。

我让平面设计师使用他或她的图形程序来创建漂亮的布局，而不是用html和css手工编写网站。

它适用于我，并为我的客户提供他们喜欢的设计（因为图形设计师总是会比大多数网络程序员做出更漂亮的外观设计）。

Answer 7

Agile methodology建议在与客户协商后轻松修改。 Agile Web Development with Rails 中的Dave Thomas建议在纸上涂鸦。但是除非你真的知道自己想要什么，否则任何东西都必须比直接用手工制作的CSS更好。

我正在考虑说“涂鸦可能不会为正式演示而削减它”但是那些令人敬畏的SO人群在评论中击败了我......

Answer 8

就个人而言，在我工作的每个webdev公司，我总是先在photoshop中嘲笑。直接进入CSS和标记更像是一种自下而上的方法，对许多程序员来说都是有意义的，但在网络开发中，你必须记住要考虑的美学和要遵循的创造性方向。您的产品功能不足，需要专业的创意总监/图形设计师的投入才能让产品看起来和使用都很愉快。

根据我的经验，这个问题始终与团队成员的不灵活性有关。美学的平面设计师专注并拒绝妥协他们的设计完整性;这有时会导致不可能或极其困难和非语义的布局。开发人员断然拒绝在有可行解决方案的情况下破坏代码的完整性 - 这可能不那么优雅。关键是要有一个非常熟悉CSS的创意团队，什么是不可能的，以及一个了解设计和美学重要性的工程团队。

在我的自由职业生涯中（曾在两个阵营中工作过）我发现首先在photoshop中模拟更容易，因为我知道我能做什么，不能做什么。与CSS和标记相比，photoshop模型在客户端反馈上更容易更改。此外，如果你可以向你的客户展示一个模型，他们会觉得更安全，因为他们知道他们的资金正在进入一个有明确方向的精心策划的项目。

希望这有帮助！