设计与代码——不用PS！
在几乎没有修改的前提下，客户通过了我的线框图布局设计方案。随后我就开始了设计了第一版的首页页面，并使用HTML和Bootstrap配合Sass编写了第一套模板，在此过程中没有使用PS来做任何事情。
广州网站建设,广州网站设计,广州网站制作,网站建设,网站设计,广州网站建设公司,广州网站设计公司,品牌网站建设
当我和客户在线框图上达成一致之后，就真的不太需要PS来制作高保真的效果图了。由于用户在Logo和网站配色上已经无需与客户进行深入讨论了（考虑到他们已经认可了我的方案了），所以从这个阶段开始，网站会设计成什么样子我已经有明确的概念了。
为新的Overskrift.dk网站写代码
如此一来，最爽的事情莫过于，当客户希望按钮换个颜色的时候我无需在PSD文件中找到那堆按钮的图层一个一个修改了，我仅仅只需在Sass中修改对应的hex/rgba参数，整个项目的所有的按钮样式都可以一次性修改过来，不用导出jpg文件也无需重新打印设计稿了！爽！
广州网站建设,广州网站设计,广州网站制作,网站建设,网站设计,广州网站建设公司,广州网站设计公司,品牌网站建设
在Overskrift.dk的Sass项目中，修改颜色是一件非常方便的事情。在开发过程中，我使用subline text 2作为文本编辑器。
第一版完成！
经过一段时间的奋斗之后，第一版的模板出来了，下面是首页：
Overskrift.dk的首页模板设计完成之后，我和客户又见面接洽了一次。我们做下来之后，我用带视网膜屏幕的笔记本向客户展示了新的布局，全部的icon设计以及文本在网页上的显示效果。客户非常赞同我对于网站外观的整体设计，他们喜欢按钮不同状态的显示效果，转场动画，以及图标和字体效果。现场展示实际操作的效果为这次的交流加分不少，这样的方式让客户对于新网站有更直观的感受。
广州网站建设,广州网站设计,广州网站制作,网站建设,网站设计,广州网站建设公司,广州网站设计公司,品牌网站建设
悬停状态Demo
这样设计的妙处在于，如果客户同意了我的设计，我也不用像以前一样再在PS中切图，然后再开始写代码了。因为这次我的代码已经写好了。这次的设计流程比以前简化了许多，节省了双方的时间。
同客户分开之前，我将首页的测试站的链接给了客户，这样他们回去之后可以仔细感受一下这一版本的设计。这种处理方式令他们非常满意，这也间接促使最终版的首页设计并没有在此基础上修改多少。
完成全站！
如此一来，我向下推进就容易多了。因为客户给首页定稿之后，整个模板中多数的元素就都定下来了，这也是Twitter Bootstrap的方便之处——这些设定好的元素我可以在余下页面中反复使用，非常省事！以下是其余部分的最终设计稿：
销售页
搜索结果页
广州网站建设,广州网站设计,广州网站制作,网站建设,网站设计,广州网站建设公司,广州网站设计公司,品牌网站建设
话题页面
登录后的管理页面
编辑搜索关键词
现在你可以直接访问www.overskrift.dk看看这个网站完成后的样子。
广州网站建设,广州网站设计,广州网站制作,网站建设,网站设计,广州网站建设公司,广州网站设计公司,品牌网站建设
结语
如果你习惯于使用PS来设计网站，并且知道如何使用HTML/CSS来写代码，不妨试试我的思路，尝试一下新流程和新方法。经过几次练习之后，你会看到使用在浏览器中设计、编辑的好处，你会逐渐开始探索使用它创建响应式页面，设计更流畅跟漂亮的动效……
那么，你该如何开始呢？
1、建议从基本的元素开始着手：色彩，字体
在这个项目中，尽管我还用了其他的颜色，但是我使用的汉族要色色彩还是黑白灰和橙色，其他的色彩也是在此基础上作为辅助。
字体我是在开始设计之前就有了想法，但是在设计过程中依然可以进行修改和调整。有的时候，你会在设计过程中会发现表现力更好的字体，替换上它们很简单。
2、同客户讨论、分析并且完成线框图的设计
同客户交流的过程中，了解他们的需求，并同他们商讨你能考虑到的所有细节。如果他们有原始站点，那就更好了。同客户探讨老站的得失，并将这些东西应用在新站中。如果他们使用过第三方的网站监测工具，那么可以同他们一同分析数据并在新站中根据这些数据来进行优化。当一切都讨论清楚之后，你可以直接在纸上画出线框草图，以及移动版的基本布局线框图，当然，重在传达信息，并不需要多好看。如果客户想要“更专业的视图”，那么你不妨用Axure再画一个。
广州网站建设,广州网站设计,广州网站制作,网站建设,网站设计,广州网站建设公司,广州网站设计公司,品牌网站建设
3、在浏览器中完成设计
当配色、字体、线框图都已经具备，我认为你就应该开始在浏览器中实现你的设计了。如果你有开发经验，自然明白什么能实现什么不能实现。如果你对Sass有过实操经验，那就更完美了——借助Sass你可以轻易构建网站，并且随时修改。
现在网络上有大量的Sass的学习资料，善用搜索，你行的。
