编者按：设计原型，使用PS来设计网站，切图，代码实现，确实是多数网站设计的基本流程。可是在Bootstrap这样的平台以及各种开发/设计工具大量涌现的今天，不用PS来完成网站设计并不是一件很难的事情——只要你选对工具，优化好流程，同客户沟通好。接下来我们看看UI/UX设计师Peter Assentorp是如何进行“无PS设计建站”的~
广州网站建设,广州网站设计,广州网站制作,网站建设,网站设计,广州网站建设公司,广州网站设计公司,品牌网站建设
当我开始设计网站的时候，Photoshop始终是我最喜欢的工具。随后的设计流程几乎成了固定的习惯：打开Photoshop => 新建一个带栅格的文档，差不多控制宽度在1400px => 开始作图。
但如此一来还是存在问题。首先，我无法通过静态的图片来呈现动态效果，而在浏览器中展示的时候，观看者则常常忍不住去点击图片上的按钮（点击之后当然不会有任何变化）。其次，这样的静态图片无法随着平台和分辨率的改变而随之响应，就更加没法解释这种响应是如何发生的。想想当你将整个iPhone版的手机网站页面用PS做下来，然后跟客户一一解释，那是多么蛋疼的一件事情啊！
总的来说，这种体验非常差！正如乔布斯所说：
所以，在几周以前，我开始尝试用新的方法来设计网站。当时我正准备基于Twitter的Bootsriap平台为overskrift.dk这个网站重新设计UI，并且重构全站。我会先完成前端的工作，之后他们会对应完成后端的优化，并将其语他们自己的系统集成。我那时候注意到一个问题：他们原本并未打算针对移动端做优化。
广州网站建设,广州网站设计,广州网站制作,网站建设,网站设计,广州网站建设公司,广州网站设计公司,品牌网站建设
Overskrift.dk是丹麦的一家提供社交媒体监测服务的网站，他们从Twitter、Facebook、博客以及其他媒体搜集数据，并显示相关内容的简介。
Logo设计
在重新设计网站之前，我开始重新设计网站Logo。客户表示，他们希望新的Logo更加干净明了，但同时能让用户一眼看出它延续自老版的Logo。
我使用Adobe Illustrator制作新的Logo（坦率的说，AI还是优于Sketch）。去掉.dk之后，将overskrift的字体设置成加粗的Noto Sans，看起来比之前更加清爽了。以下是效果：
我为网站选择的配色主要是白色、橙色、黑色瑜灰色。网站头条我使用的字体是Source Sans Pro，而正文字体则使用的是经典的Helvetica Neue。客户对于上图中的Logo非常满意，所以在确定以上的设计之后，我开始推进到下一个阶段。
广州网站建设,广州网站设计,广州网站制作,网站建设,网站设计,广州网站建设公司,广州网站设计公司,品牌网站建设
线框图
在设计开始之前，有些网站布局我与用户必须达成一致才行。以下是老版本网站的布局图：
在使用Axure绘制线框图之前，我对不同页面进行分析，同客户进行深入讨论，随后我确定了新版的整体布局并在纸上绘制了草图。用Axure的原因主要还是我手绘草图的效果惨不忍睹到一定境界了……以下就是惨不忍睹的手绘草图——使用Axure绘制的线框图中，导航与登录按钮的位置稍有不同：
首页草图
广州网站建设,广州网站设计,广州网站制作,网站建设,网站设计,广州网站建设公司,广州网站设计公司,品牌网站建设
销售页面草图
话题页面草图
广州网站建设,广州网站设计,广州网站制作,网站建设,网站设计,广州网站建设公司,广州网站设计公司,品牌网站建设
