随着网页设计领域越来越多地向技术知识有限的设计师开放，开发网站的前景似乎是一项令人震惊和可怕的壮举。如果你是第一次与开发人员合作，他们将根据你的设计规范来设计网站，这似乎会更加困难。在本文中，我们将研究其中的一些基本提示和技巧帮助您与开发人员合作，确保您的设计像素完美。
我假设你将使用Photoshop，但无论你使用什么设计工具，所有这些原则都适用。
我将快速地跨越几个主题，所以请随意补充你自己的建议请在评论区留言。
1.有一个扎实的计划
“计划失败就是计划失败”这句话在网页设计和开发中听起来太真实了。在创建成功的网站时，制定一个游戏计划是必不可少的，但更重要的是，要确保开发者理解你的期望。避免这种误解的一个好方法是，在你投入任何时间进行设计之前，让开发人员检查你的线框图。
在这个阶段，你可以问开发者一些问题，比如“这在我们的预算之内吗?”或者“你认为[在这里写上你的关心是个问题吗?”
2.交出一个好的网页设计模型
在启动Photoshop并开始设计之前，有一些图形元素需要注意。
网格系统
我们想确保我们的网站在不同的分辨率下兼容，所以使用960px网格系统是一个伟大的方式，以避免任何意外，当完成的网站在不同的显示器上查看。使用网格系统还将为您和您的开发人员提供一个结构，以确保您的设计保持完美一致。
使用网格布局是获得像素完美的网页设计的最简单和最好的方法。基于网格的布局还为您提供了一种简化设计过程的方法，因为从工作流程中删除了许多猜测和强迫性调整。
随着网站的增长和变化而扩展的布局
需要注意的重要一点是，你的网站一旦上线，就会有自己的生命。
无论客户是否想要添加额外的内容，还是网站已经准备好进行下一阶段的开发，了解您的网站将如何扩展和增长是很重要的。如果再增加五段文字，你的布局会受到怎样的影响?您的导航是否允许添加其他页面?
这些都是你需要问自己的问题，一旦你开始与你的开发人员合作，你就会得到答案。
模型的组织
关于一个组织良好的Photoshop文档有很多要说的。以清晰一致的方式组织文档可以让开发人员轻松地定位和拆卸设计。
这可以通过组织你的Photoshop文档与web相关的命名类来完成。例如，您可能希望将设计分解为标题、主内容区、页脚和侧边栏等元素。您可能还希望以逻辑方式对图形进行相应的分组。
此外，一个精心安排和模块化的Photoshop文档意味着你应该意识到尽可能多地将元素分成图层;没有什么比试图隔离设计的一部分，却发现它与其他设计元素融合在一起更糟糕的了。这似乎是显而易见的，但您可能会惊讶地发现，保持组织将节省多少开发时间。在这一点上，你还必须确保在发布时为开发者提供设计所需的所有图像和链接。
这些项目可以包括导航系统的各种状态(正常状态和悬停状态)，界面按钮(如Call to Action按钮)等动画调用动作按钮）.
如果您想要分享任何其他您认为对您的设计至关重要的特定注意事项，您可能需要使用诸如Skitch与．
草图允许你用笔记标记你的设计，这些笔记可以帮助你传达那些难以用语言表达的要点。(请参阅其他列表基于web的协作工具你可以用)。
3.了解UI功能
在设计具有特殊行为和动作的元素时，要花时间查找示例和支持文档，让开发人员了解您在谈论什么。
开发人员不会读心术，如果您以零符号的静态状态呈现元素，他们可能无法满足您的期望。到处搜索一下，几乎每一种行动和行为都有很棒的文档、演示和教程——你会很高兴你这样做了，即使它只是为了你的启发。
(要获得灵感，请查看这个庞大的清单接口技术和教程）.
4.给予良好的反馈
一旦你的开发人员完成了你的设计编码，你和你的客户可能会进行修改。很少有人能在第一次尝试中就成功，现在你的任务是以一种清晰的方式呈现修改。为了避免混淆，你要尽量做到具体。
密切关注修改的次数将有助于你和你的开发人员密切关注版本控制．(请阅读下面的终极指南针对设计人员的版本控制）.
结论
花时间和精力保持条理最终会有回报的。
如果你是一个网站开发的新手，永远不要让一个学习新东西的机会从你身边溜走。向开发者提问，从错误中吸取教训，确保你的下一个项目能按计划进行，你的设计也能按计划完成。
相关内容
- 网页设计的演变
- 如何在设计中使用复古色彩
- 来自设计师的灵感提示和工具
