5 Easy Ways to Prepare Your Web Designs for Coding/五种方法让你的设计更好地编码

---------------------------------------译自Webdesigntuts+---------------------------------------

跟大家分享一些重点内容：

1、精确到像素

在设计稿中标明以下信息：

• Margins（外边距）: 两种元素之间的外边距要协调统一，如果你希望全部外边距都是25px，那就要保证它们是精确的25px；
• Padding（内边距）: 同外边距的原则；
• Font usage（字体选用）: 字体的类型，大小，行距等都应该标注清楚，保证精确。
• Colors（颜色）: 如果你确定要使用什么颜色，不管是用在字体，用在背景或者其他，确保使用准确的十六进制来表示颜色值。

2、在设计稿中写便签注释

3、加入交互效果

主要包括以下几种：

• 下拉菜单
• 链接按钮聚焦状态
• 图像滚动条
• 灯光效果
• 工具提示信息
• 表单元素

4、心中要有脚本

了解一些基本的脚本，知道某些效果的实现方法

5、了解你的设计要用到的技术

“ Far too often I’m given a gorgeous design that isn’t practical (or affordable) to code because it hasn’t been designed with practicality in mind.”

我经常设计一些在编码过程中显得不实际的华丽页面，因为我在设计过程中没有想过要做实际的设计。

了解一些基本技术，如HTML,Flash,PHP等，这将可以帮助你更好地设计合理的页面。

全文戳：5 Easy Ways to Prepare Your Web Designs for Coding