网页设计师基本功

不少做平面的设计师想转行走网页设计这条路，做网页和做平面是完全不同的思维，加上html 写完后要交给F2E 套特效套程式，并不是平面可以怎么做、网页就能怎么做。就算是人畜共通疾病如口蹄疫、你可以把治疗猪的药方疗程直接套到人类身上吗？
 
如果你想转型成为网页设计师，请必备下列技能：
 
1.Photoshop
2.Illustrator
3.HTML
4.CSS
5.Responsive
加分：Bootstrap、Sass、Compass、Susy…等，会套用现成的jquery 包、JS 包之类也就差不多了。再深入就是F2E的领域。
 
Photoshop
基本中的基本，只要是任何单位是「PX」、给萤幕用的图稿我都建议用Photoshop 制作，Illustrator 是印刷用软体，对PX 支援度很差。
 
Grid
现在新开发的网页通常会要求制作Responsive ，为了要方便套用Bootstrap 或Susy ，Grid 就是一定要懂的观念，Grid 的运用：PS外挂能帮助你在PS 里快速建立参考线。
 
切图
当你会写Html、搞懂Div、Css 后，你就知道怎么切图了（无误），不会写Code 的视觉设计师切出来的图常常被退货也只是刚好…做个蛋糕需要糖和巧克力粉、材料供应却老给他盐和胡椒粉，是想逼写Html 的人从种甘蔗和可可树开始吗？
 
Illustrator
既然都是平面设计师想转型，这套一定用的非常熟悉，可惜我对这套的定义就是「送印刷厂」用。在我的制图过程中，所有能用向量绘制的部份我都会用向量??。 PS 的向量工具不太好操作，遇到比较复杂的图型我会在AI 里画好、贴进PS 为形状图层，再来调整图层样式。所以AI 只会用到画向量的功能，其他全进PS 处理。
 
HTML
推荐：HTML5
不会切图、不会手写Code 的不要说自己是网页设计师，做网页只靠Dreamweaver？和蒸饭箱蒸出来的便当感觉差不多，勉强能入口但很难吃。有的RD 会接受用Dreamweaver 之类视觉化软体产生的Code，这要看和设计师配合的RD 接受度到哪里。通常平面想转网页设计很大部份是薪水可以喊比较高，如果想拿更高的薪水就不要依赖DW ，老老实实的练英打吧。 （推荐：死亡打字员）
 
想当个网页设计师， W3C 是一定要懂的。当然非常多的元素不会每个都记得，把这个网址当目录用吧，不懂或忘记就跑来查一下。 All Standards and Drafts – W3C
 
补充：
W3Schools Online Web Tutorials
W3Fools – A W3Schools Intervention
 
CSS
推荐：CSS current work & how to participate
margin、padding 是初学者最容易搞混的两个值；Float 很常用但不小心就破版；熟悉Background 可以玩出很多花样…等等。在CSS 细节部份就可以偷懒一点用现成的了，虽然产出的Code 比较丑不优雅，但RD 比较少去动到这一块，所以还可以接受。我自己常用的偷懒工具如下：
 
圆角框：CSS Border Radius Generator
阴影：Box Shadow CSS Generator
按钮：Buttons – A button library built with Sass and Compass
可以看browser 对html、css 等等的支援度：Can I use… Support tables for HTML5, CSS3, etc
 
当然很有很多其他线上生成或是外挂包，欢迎大家补充，好让我能更偷懒一点…
 
Responsive
先把Html 和Css 练熟了再来看Responsive 这个大难题。要做好一个RWD 从Wireframe 就要规划好。在Wireframe 阶段我习惯先设计Desktop 版本，功能最多最完善。但在写Code 的时候会是反过来、先从Mobile 的尺寸开始刻。刚接触RWD 的先套Bootstrap 增加成就感和手感，等熟悉了觉得不够用绑手绑脚的时候，差不多该踏进Sass、Compass、Susy 的领域。
 
别用现成的软体做Responsive，除非是纯静态网页不需要和RD 合作，原始码脏就脏没关系反正不会有人看了。目前我看到「排排版就好」的软体产出的Code 没有干净的，只要是之后有人还要接手的产出、拜托维持它的干净整齐。有没有打开厕所门看到一团乱产生晕眩感脸色发青的经验？看到恶心的 Code 就是这种感觉。
 
结论
以上写的非常粗浅，只能算是给个方向让初学者知道要怎么学习。最好还是去找个F2E 拜师学艺一下，靠自己自学写出来的东西一定会被正规RD 嫌弃，我就被老公骂过「这是什么邪魔歪道」，边哭边学被他嫌弃了一整年才得到勉强及格的评语。
 
如果能把上述5 项都练起来，就能自己接案赚外快了。只要和程式无关的静态网页都难不倒你。网路上有些套装的特效包可以拿来改一改套用，看起来也很炫。 （遇到需要套程式接后台的可以两手一摊说这超出网页设计的领域要找RD 配合。）
 
网页设计和F2E 职务范围部份重叠，都要写Html、Css，注重使用者体验等等。最大的差别在于网页设计师要画Flow、Wireframe、Mockup、切图、（标示文件），会写JS 特效最好，不会写也没关系。但 F2E 就要对 JS 很熟悉了。网页设计师算是一脚踩在UI/UX 圈、另一只脚踩在F2E 边线上的角色。千万小心在Code 上不要和F2E 起争执，请谦虚求教，没事拿自己的弱项去撞别人的强项做什么？ RD 写 Code 输给设计师是哪门子笑话？设计师擅长的当然是视觉啊！

米饭工作室整理编辑，感谢原文作者：李茜。