关于设计师为何以及怎样学写代码(入门)

Hóng 2015-02-21 07:12:28
2015年4月22日更新:
写这篇文章的初衷并不是让设计师去当程序员,也没有说设计师可以替代程序员,这篇文章完全是给设计师提供一个了解网页前端代码的入门途径,前提是:设计师本身对这个有兴趣。

希望大家发表一些意见/偏见/建议之前,阅读一下文章前三段,可以避免不必要的争执。

感谢大家对这篇文章的鼓励!:D

——————————————————————————————————————————

两年前我在豆瓣写了一篇给自己看的日记:http://www.douban.com/note/257552951/ 写这篇日记的初衷源于当时非常风靡的一万小时定律,如果一个人每天致力于某件事8小时,每周5天,那么你成为这个领域的专家需要五年时间(一万个小时)。我当时一看五年就吓尿了,我平时连锻炼身体做做深蹲都是三天捕鱼两天晒网,五年岂不要了我老命,我相当有自知之明地直接把一万小时缩减到十分之一,于是就有了那篇文章。

两年过去了,一千小时的目标还远远没有达到,可能只完成了十分之一,也就是说是一万小时的一百分之一,但是我在自学前端代码的这条路上继续缓慢前进着,支撑着我的两个原因分别是:1.暗恋了两年的基友是码农(也是当年开始学习的原因之一);2.升级技能(想转行想多赚点钱)。

如果你是(平面/UIUX/其他)设计师,并且想自学前端代码的,可以看一下我是如何开始的。如果你还在疑惑为什么要学习代码,这里有一篇不错的短文可以读一下:http://e-r-h.tumblr.com/post/98944147852/should-designers-learn-to-code (《设计师应该学习代码吗》希望读完能对你有所启发。)作为设计师,可以不会写,但是一定要对其有所了解,和学习一门外语的道理是一样的。当然我只是个半瓶水晃荡的初级小白,这篇文章是写给想入门的朋友们的,专业级的读者请不要嘲笑我。

最基本的一点也是最重要的一点:你需要有一个project。也就是说首先你有一个想要实现的东西,为了实现这个作品,学习的动力就会来。和很多人一样,我最初是想给自己建一个作品集网站,我当时还在用cargocollective,挺好用的,干净简洁,缺点是很多人都用一样的模版,那个时候cargocollective还没有developers feature,没有办法上传自己的代码,只能改模版,对于设计师来说,和别人做得一样应该是很多人想要尽量避免的一点。有了建作品集网站的想法之后,我就开始学习写静态网页的代码,HTML+CSS严格来说不算是编程语言,只是网站结构与样式表而已,上手不难,这里我推荐这本书http://book.douban.com/subject/21338365/, Jon Duckett的HTML+CSS,国内的翻译速度真是令我吃惊,此书没出多久就有了中文翻译版,非常适合入门,推荐零代码基础的新手使用,绝对手把手,边读边写,按照顺序一页一页读完之后你的第一个静态网站差不多也写出来了,基本能保证你的代码是相对干净整洁的(符合代码界的dry principle),以及各种tag的正确使用(虽然前端看上去一样,但是码有不同的写法),简言之就是专业码农看到不会大撇嘴的那种。我第一个网站写完发给码农好基友看的时候,还是被他指出了tag错误,通俗地说就是咱们说英语的时候词汇运用不当,虽然老外能理解咱的意思。所以这事真要做得完美,也得多练,多给专业人士检查。

利用暑假时间做完个人网站以后,我就投入了正常学业的怀抱,平时有空的时候看看人家的网站,都是动态的酷炫帅,加上好基友偶尔的指点,我开始inspect人家的代码(使用浏览器的developer>view source功能,或者chrome右键点击inspect element),这个时候你就会发现Javascript/jQuery等,虽然js属于前端的代码语言,但是相比较html/css,难度真不是一个档次的,如果想大致了解js是什么,推荐一个现在很火的在线代码学习网站codecademy.com,这个网站能帮你有个初步了解,但是要真的学会,我可以很负责任的告诉你——不可能。哈哈哈,不要伤心,我真不知道这个网站为啥这么火呀。鉴于我的智商+能力水平,我目前只能复制黏贴别人的js/jquery代码,小作修改(针对指向html的部分),买了Jon Duckett的Javascript and jQuery http://book.douban.com/subject/20022383/,和我上面推荐的书是一个系列,我还没有读完,不做评价。建议大家对Javascript和jQuery稍作了解,这样至少能读懂别人的代码,能复制黏贴。对于大部分不想当码农的设计师来说,能复制黏贴+微改,已经足够了。

前面说了我是三天打渔两天晒网,Javascript还没懂呢我又开始学习WordPress/PHP,学习WordPress的主要原因是自己硬写的代码更新内容不方便,用PHP和CMS (Content Management System)的好处就是避免重复改码+更新方便。WordPress属于主流CMS,虽然后台很难看,但是适合上手,毕竟系统成熟,相关教程资源多,很多新兴的CMS相对资源少,自学有难度。现阶段的我各种关于前端代码的小文章/小窍门都会看一看,当然是有空的时候,每天不会超过两小时,推荐一个付费线上代码+设计学习网站Treehouse http://teamtreehouse.com/ ,不知道国内能不能使用,付费的还是比较有用,WordPress的学习速度比我之前自己在WP官网上找教程要快得多。而且我逐渐意识到难度稍高的东西,想要高效学习,还是需要上课,有专业老师指导是最好的,所以我过不久会去报班学习。。当然html+css我建议有时间的读者完全可以自学起来,因为这个真的不难!

楼主建议想要把基础打扎实的自学最好是买一本书系统学习,有一个粗浅却较整体的认知,然后再采用网络提问或者搜索的方法,对想解决的具体问题各个击破(比如网页背景颜色的动态变化,比如给网页加一个自定义滚动栏或鼠标等等)。因为是入门,我们的问题一般网上都已经有人提问并解决了,所以擅用谷歌也是一大技能。现在学代码已经比以前容易了,资源各种多,目测会越来越傻瓜,能否学会的关键在于能否持之以恒。当然只看书不实践是不行的,此文章写的时候是默认你边看教程边实践的。

附录A
最后,给有一点前端代码基础的朋友们贴上一些实用的编写/修改网站代码的小窍门:
http://type-scale.com/ 测试网页字体大小的
http://kerningjs.com/ 调整字距的Javascript
http://basehold.it/ 调整行距的Javascript
http://entitycode.com/ 特殊字符的html代码
http://css-tricks.com/ CSS窍门
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ responsive design
http://www.w3schools.com/ 教程
https://typekit.com/ Adobe出的web字体,付年费,出租。附注:各种设计工作室的web字体成百上千,水很深哟,有钱淫可以直接买喜欢的web字体。
http://chengyinliu.com/whatfont.html 浏览器插件,用来偷窥别人网站字体的。
https://wappalyzer.com/ Wappalyzer浏览器插件,用来偷窥别人网站代码语言的。想要进一步深入学习代码的朋友们推荐使用。
http://zh-h.info/100phrases/ http://zh-h.info/ 附两个自己手动码的网站,各位一定比我码得好

附录B 文中提到的书籍、网络教材
入门教材,强烈推荐:
HTML&CSS, JAVASCRIPT&JQUERY
HTML&CSS, JAVASCRIPT&JQUERY

在线教程,推荐:
treehouse
treehouse

查阅相关信息的好地方:
w3schools
w3schools

提问的好地方:
Stack Overflow
Stack Overflow


—————————————————会持续更新的分割线—————————————————

楼主的背景是平面设计出身,文章以我自己的观点和背景出发,此文包涵的内容绝逼是冰山一角,有任何建议和经验的豆友们请留言交流!祝大家学习愉快!

—————————————————2015.5.26更新———————————————————

其他关于网页设计的链接有兴趣可以戳:http://www.douban.com/note/498772964/

—————————————————2015.10.18更新———————————————————

很多人都会质疑为什么设计师要学代码,程序员为什么要学视觉设计?请看下图。


“懂艺术的程序员和会编程的美术师造就了Monument Valley。”
Hóng
作者Hóng
11日记 7相册

全部回应 53 条

查看更多回应(53) 添加回应

Hóng的热门日记

豆瓣
免费下载 iOS / Android 版客户端