可以用photoshop模型开始网站的布局吗？

Question

这是一个最佳实践主题。

我把它看作是一些网页开发者的首选方法。他们没有从头开始做CSS布局，而是首先启动一个photoshop模型，然后将其解码为CSS。

您对这种方法有什么看法？

最好，

Answer 1

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

Answer 2

Agile methodology会建议一些与客户协商时容易修改的内容。戴夫托马斯在Agile Web Development with Rails建议在纸上涂写。但是，除非你真的知道你想要什么，否则任何事情都必须比直接用手工制作CSS更好。

我还想着说：“涂鸦可能不会削减它的正式演示”，但真棒SO人群在评论打我吧...

Answer 3

如果你生产的是这样，为什么不？并不是每个人都能够完美地设想他们的网站，因为他们正在输入一串尖括号。

更严重的是：这是你的工作，所以你有责任以一种有效的方式来完成它。

Answer 4

样机非常棒，但我不知道photoshop是否是您想为此目的尝试的第一件事情 - 在一开始，当您只是试图获得逻辑布局时该网站的各个页面（在按照外观& c改进之前），具有干擦标记和便利贴的白板提供用于早期头脑风暴的非常快速，重复的模型重新排列。一旦对一个（或几个）可能的信息安排达成一些合理的协议，然后视觉上更准确的工具进入。

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

Answer 5

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

我特别喜欢这行Bill Buxton文章引述其中：

有没有这样的东西作为高或低的保真度，只有适当的保真度。

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

Answer 6

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

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

它有优点和缺点。

优点：

• 许多图形艺术家神交的Photoshop /插画比他们多一点的Dreamweaver。

• 客户得到无处不在的最终产品预览：mac，pc，firefox，即safari，不管。在开发者使用firefox和使用MSIE的客户使用MSIE时，在生产的早期阶段发送html预览总是会引起麻烦。
  
  而不要认为是在聪明的一面，涂写MSIE驱动的HTML。以非标准html开始并转换为标准比以其他方式做起来更加痛苦。
  还有一个问题：许多网站客户都倾向于使用Mac并使用Safari。网络犯罪分子对图形的喜好往往比平均水平更高，所以在这个领域碰到Mac疯子的机会比其他人高。

• 更多的设计替代品可以准备花在每一个更少的时间。在处理客户方面没有指定决策者的高管云层时，这可能是一个巨大的优势。替代性的实体模型将会在一个设计或另一个设计上达成一致的共识。

缺点：

• “切割”的图形设计成html成为额外的工作，它目前还不清楚谁是对多余的时间要工资。

• 它倾向于图形为中心，刚性，设计工作流程。客户同意预先进行预览，这就是他们通过合同获得的结果。每个图形修改都意味着金钱，行为和编程倾向于不明确，或者最差，由模型定义。

• 追求像素完美的跨浏览器坚持模型可能会让你疯了。如果您与客户达成了一个严格的设计，那么这可能会成为一个可怕的问题。

• 肮脏的CSS技巧鞋在到您的设计。使用HTML模型，客户应该已经批准了一个由代码驱动的设计，其中包含更少的技巧。

无论如何，我不会建议的Photoshop的样机，但Inkscape中。 （或插图画家，如果你在午夜时刻通过燃烧成堆魔法圈来崇拜土坯）

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

我更喜欢铅笔和纸毡尖，我的摄像头拍摄想法归档和电子邮件转发。说到涂鸦，任何人都会什么感觉更自然。

没有做任何工作，依靠示例站点示例和屏幕截图进行图形参考始终是一种选择。

Answer 7

就我个人而言，在我工作过的每个webdev公司，我总是先在photoshop中嘲笑。直接跳入CSS和标记是更多的自下而上的方法，对许多程序员来说很有意义，但是在Web开发中，您必须牢记，有一些美学需要考虑，并且要遵循一个创造性的方向。您的产品功能性还不够，它需要专业的创意导演/图形设计师的投入，才能使产品看起来更舒适。

根据我的经验，这个问题一直与团队成员的不灵活性搏斗。美学专注于平面设计师并拒绝妥协他们的设计完整性;这有时会导致不可能或非常困难和非语义的布局。开发人员在可行的解决方案中坚决拒绝损害其代码的完整性 - 这可能不太优雅。关键是要有一个非常熟悉CSS的创意团队，什么是和不可能的，以及对设计和美学的重要性有多少赞赏的工程团队。

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

希望这会有所帮助！

Answer 8

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

我让一个平面设计师使用他或她的图形程序来创建一个漂亮的外观布局，并且在html和css中手动编写网站。

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