优界网

首页 > 教程经验 > 我可木开玩笑!教你不用PS也能完成网站制作

我可木开玩笑!教你不用PS也能完成网站制作

99

0

1

2015-04-23 17:00:29

 青青莲子

分享一下,又不会怀孕!

本作品为转载作品,版权为作品原作者所有,感谢上传者的分享!

编者按:设计原型,使用PS来设计网站,切图,代码实现,确实是多数网站设计的基本流程。可是在Bootstrap这样的平台以及各种开发/设计工具大量涌现的今天,不用PS来完成网站设计并不是一件很难的事情——只要你选对工具,优化好流程,同客户沟通好。接下来我们看看UI/UX设计师Peter Assentorp是如何进行“无PS设计建站”的~

延伸阅读:
《让客户爱上你!取悦客户的的24条建议》
《使用 Adobe Illustrator 做 UI 设计——多重填充与多重描边》
《使用AI做UI设计系列教程:效果、外观面板和质感表现(上)》
《使用AI做UI设计系列教程:效果、外观面板和质感表现(中)》
《使用AI做UI设计系列教程:效果、外观面板和质感表现(下)》

当我开始设计网站的时候,Photoshop始终是我最喜欢的工具。随后的设计流程几乎成了固定的习惯:打开Photoshop => 新建一个带栅格的文档,差不多控制宽度在1400px => 开始作图。

我是如何无需PS完成网站设计的

但如此一来还是存在问题。首先,我无法通过静态的图片来呈现动态效果,而在浏览器中展示的时候,观看者则常常忍不住去点击图片上的按钮(点击之后当然不会有任何变化)。其次,这样的静态图片无法随着平台和分辨率的改变而随之响应,就更加没法解释这种响应是如何发生的。想想当你将整个iPhone版的手机网站页面用PS做下来,然后跟客户一一解释,那是多么蛋疼的一件事情啊!

总的来说,这种体验非常差!正如乔布斯所说:

Design is not just what it looks like and feels like.Design is how it works.
设计不仅是外形和感觉,设计关乎如何运作。

所以,在几周以前,我开始尝试用新的方法来设计网站。当时我正准备基于Twitter的Bootsriap平台为overskrift.dk这个网站重新设计UI,并且重构全站。我会先完成前端的工作,之后他们会对应完成后端的优化,并将其语他们自己的系统集成。我那时候注意到一个问题:他们原本并未打算针对移动端做优化。

Overskrift.dk是丹麦的一家提供社交媒体监测服务的网站,他们从Twitter、Facebook、博客以及其他媒体搜集数据,并显示相关内容的简介。

Logo设计

在重新设计网站之前,我开始重新设计网站Logo。客户表示,他们希望新的Logo更加干净明了,但同时能让用户一眼看出它延续自老版的Logo。

我是如何无需PS完成网站设计的

我使用Adobe Illustrator制作新的Logo(坦率的说,AI还是优于Sketch)。去掉.dk之后,将overskrift的字体设置成加粗的Noto Sans,看起来比之前更加清爽了。以下是效果:

我是如何无需PS完成网站设计的

我为网站选择的配色主要是白色、橙色、黑色瑜灰色。网站头条我使用的字体是Source Sans Pro,而正文字体则使用的是经典的Helvetica Neue。客户对于上图中的Logo非常满意,所以在确定以上的设计之后,我开始推进到下一个阶段。

线框图

在设计开始之前,有些网站布局我与用户必须达成一致才行。以下是老版本网站的布局图:

我是如何无需PS完成网站设计的

在使用Axure绘制线框图之前,我对不同页面进行分析,同客户进行深入讨论,随后我确定了新版的整体布局并在纸上绘制了草图。用Axure的原因主要还是我手绘草图的效果惨不忍睹到一定境界了……以下就是惨不忍睹的手绘草图——使用Axure绘制的线框图中,导航与登录按钮的位置稍有不同:

我是如何无需PS完成网站设计的

首页草图

我是如何无需PS完成网站设计的

销售页面草图

我是如何无需PS完成网站设计的

话题页面草图

设计与代码——不用PS!

在几乎没有修改的前提下,客户通过了我的线框图布局设计方案。随后我就开始了设计了第一版的首页页面,并使用HTML和Bootstrap配合Sass编写了第一套模板,在此过程中没有使用PS来做任何事情。

当我和客户在线框图上达成一致之后,就真的不太需要PS来制作高保真的效果图了。由于用户在Logo和网站配色上已经无需与客户进行深入讨论了(考虑到他们已经认可了我的方案了),所以从这个阶段开始,网站会设计成什么样子我已经有明确的概念了。

我是如何无需PS完成网站设计的

为新的Overskrift.dk网站写代码

如此一来,最爽的事情莫过于,当客户希望按钮换个颜色的时候我无需在PSD文件中找到那堆按钮的图层一个一个修改了,我仅仅只需在Sass中修改对应的hex/rgba参数,整个项目的所有的按钮样式都可以一次性修改过来,不用导出jpg文件也无需重新打印设计稿了!爽!

我是如何无需PS完成网站设计的

在Overskrift.dk的Sass项目中,修改颜色是一件非常方便的事情。在开发过程中,我使用subline text 2作为文本编辑器。

第一版完成!

经过一段时间的奋斗之后,第一版的模板出来了,下面是首页:

我是如何无需PS完成网站设计的

Overskrift.dk的首页模板设计完成之后,我和客户又见面接洽了一次。我们做下来之后,我用带视网膜屏幕的笔记本向客户展示了新的布局,全部的icon设计以及文本在网页上的显示效果。客户非常赞同我对于网站外观的整体设计,他们喜欢按钮不同状态的显示效果,转场动画,以及图标和字体效果。现场展示实际操作的效果为这次的交流加分不少,这样的方式让客户对于新网站有更直观的感受。

我是如何无需PS完成网站设计的

悬停状态Demo

这样设计的妙处在于,如果客户同意了我的设计,我也不用像以前一样再在PS中切图,然后再开始写代码了。因为这次我的代码已经写好了。这次的设计流程比以前简化了许多,节省了双方的时间。

同客户分开之前,我将首页的测试站的链接给了客户,这样他们回去之后可以仔细感受一下这一版本的设计。这种处理方式令他们非常满意,这也间接促使最终版的首页设计并没有在此基础上修改多少。

完成全站!

如此一来,我向下推进就容易多了。因为客户给首页定稿之后,整个模板中多数的元素就都定下来了,这也是Twitter Bootstrap的方便之处——这些设定好的元素我可以在余下页面中反复使用,非常省事!以下是其余部分的最终设计稿:

我是如何无需PS完成网站设计的

销售页

我是如何无需PS完成网站设计的

搜索结果页

我是如何无需PS完成网站设计的

话题页面

我是如何无需PS完成网站设计的

登录后的管理页面

我是如何无需PS完成网站设计的

编辑搜索关键词

现在你可以直接访问www.overskrift.dk看看这个网站完成后的样子。

结语

如果你习惯于使用PS来设计网站,并且知道如何使用HTML/CSS来写代码,不妨试试我的思路,尝试一下新流程和新方法。经过几次练习之后,你会看到使用在浏览器中设计、编辑的好处,你会逐渐开始探索使用它创建响应式页面,设计更流畅跟漂亮的动效……

那么,你该如何开始呢?

1、建议从基本的元素开始着手:色彩,字体

在这个项目中,尽管我还用了其他的颜色,但是我使用的汉族要色色彩还是黑白灰和橙色,其他的色彩也是在此基础上作为辅助。

字体我是在开始设计之前就有了想法,但是在设计过程中依然可以进行修改和调整。有的时候,你会在设计过程中会发现表现力更好的字体,替换上它们很简单。

2、同客户讨论、分析并且完成线框图的设计

同客户交流的过程中,了解他们的需求,并同他们商讨你能考虑到的所有细节。如果他们有原始站点,那就更好了。同客户探讨老站的得失,并将这些东西应用在新站中。如果他们使用过第三方的网站监测工具,那么可以同他们一同分析数据并在新站中根据这些数据来进行优化。当一切都讨论清楚之后,你可以直接在纸上画出线框草图,以及移动版的基本布局线框图,当然,重在传达信息,并不需要多好看。如果客户想要“更专业的视图”,那么你不妨用Axure再画一个。

3、在浏览器中完成设计

当配色、字体、线框图都已经具备,我认为你就应该开始在浏览器中实现你的设计了。如果你有开发经验,自然明白什么能实现什么不能实现。如果你对Sass有过实操经验,那就更完美了——借助Sass你可以轻易构建网站,并且随时修改。

现在网络上有大量的Sass的学习资料,善用搜索,你行的。

延伸阅读:
《让客户爱上你!取悦客户的的24条建议》
《使用 Adobe Illustrator 做 UI 设计——多重填充与多重描边》
《使用AI做UI设计系列教程:效果、外观面板和质感表现(上)》
《使用AI做UI设计系列教程:效果、外观面板和质感表现(中)》
《使用AI做UI设计系列教程:效果、外观面板和质感表现(下)》

原文地址:Medium
网翻译:@陈子木

本文由网原创翻译,请尊重版权和译者成果,转摘请附上链接,违者必究。谢谢各位编辑同仁配合。

【网 原创文章 投稿邮箱:2650232288@qq.com】

已有1人赞过

+1赞

认真评论的都成大咖了

还可输入1000个字

  • 刚刚
  • 登录优界网 ×