写在前面的话：互联网的时代，总想学点与时俱进的技能。偶然看到这篇文章，觉得还不错，愿与读者共享之，以图共同学习共同进步。

---

来自原文

从对网页设计一无所知，到接受各种公司或饮食店的网页设计工作，大概花了一年时间。我试着总结了一下这一年当中所用的8个STEPS（平面设计4个+网页设计4个），希望对你有用。

首先掌握平面设计的技能

1.下载平面设计的软件

推荐世界上最常用的Adobe的 Illustrator 和 Photoshop 。

Illustrator⇒用于图片和文字的排版。Photoshop⇒用于图片的加工和合成。

设计的基础是排版，可以优先学习了Illustrator之后，再学习Photoshop。

两者都可以从Adobe官网上下载一个月体验版，先试试吧。

关于使用方法，可以看一遍视频讲座「Learn Illustrator CS6 | Adobe TV」。

在学习Photoshop・Illustrator的使用方法阶段就已经放弃的人很多。如果想更顺利的掌握二者的使用方法，也可以在线上编程课程找老师学。

2.记住设计的基本原则

这个最好在一开始就掌握。只要遵守了几个简单的原则，会让你的设计看起来简练不少。这些原则，不论是网络设计，杂志设计，还是发表资料，都是一样的。要学习设计的原则，强烈推荐「Non-Designer's Design Book」。本书对于设计的4个原则的解说，即使是初学者也明白易懂。只要注意遵守这几个原则，设计水平将大幅提升。

Non-Designer's Design Book

3.下载自由字体

可以将排版・设计认为是「文字」・「图片」・「方形・圆形等对象」的集合体。相比图片，文字可以很简单的就能将其弄得很酷炫。从这里 可以看到大量的自由字体，碰到合适的下载下来备用。

4.试着做自创的名片和iPhone手机套

记住了基本的设计原则后，尝试着实际动手。比起漫无目的的尝试，推荐做名片和iPhone手机套。当自己的设计变成实物，是不是很有成就感很开心呢？我的话，做了一本60多页的杂志。当杂志到手时，喜悦无以言表。单凭这个不仅记住了软件的使用方法，设计技能也是扶摇直上。

※首先彻底模拟好的设计作品

从零开始思考设计的构图可能要花好几个月。与其单凭自己的灵感，首先从模拟好的作品开始更容易上手。从模拟排版，置换其中的文字和照片开始，到渐渐地将多个山寨版组合，直到最终无法看出是模拟的为止。

学习网页设计（编程设计）

来自原文

5.在Dotinstall上学一遍CSS和HTML的讲座

如今，网络上有很多地方可以免费学习编程。尝试了好几个，「Dotinstall」从基础中的基础开始教起，简单又好用。一个视频才3分钟左右，挺好进行的。一边实际动手一边看Dotinstall上的HTML、CSS的講座更好。另外，这里也可以找到网页设计的工具。

6.跟着书本上的代码尝试着做一个网站看看

按书上的代码，做一个网站看看。我用的是「HTML5&CSS3デザインブック（新版）」。刚开始，我做的仅仅只是，一边理解一边将书上的代码抄写到自己的编辑器。虽然只是靠这种方法做了一个网站，但是对于网页设计的理解，竟然比自己预想的加深了不少。

7.尝试着摆弄免费的HTML

从零开始制作网页也可以，我的话，下载免费的高品质的HTML模版，然后根据自己的喜好修改HTML和CSS的设定，做成自己对我网页。只要做好了上面的两个步骤，解读代码也没什么难度。如果有不懂的代码，谷歌一下大都能找到答案。通过编辑已有的好的代码，既可以把握网页设计的流程，又可以学到知识。

Photoshop VIP网站上可以找到激发灵感的好的免费HTML模版集，可以试着下载一些你喜欢的。

8.试着从零开始自己做网页

前面的步骤完成了之后，最后一个步骤，从零开始制作自己的网页应该很顺利。只要遵循设计的基础和原则，即便是用简单的代码也可以做出炫酷的网页。刚开始的时候，可以从最近流行的那种【一页完结型】着手会比较容易。

某种程度上习惯了网页设计之后，可以试着读一下关于UI・UX的书和文章。我个人推荐下面这本书，对于科学分析用户的喜好很有帮助。

图片来自网络

最后

谈几点我的经验。

・在苦斗代码的期间，不知不觉你的网页设计技能得到磨练。

・总会有办法的。即使有时候，感觉【完全搞不懂】，大体上也是总有办法的。

・技能是在你不断的练习当中得到提升的。有苦有乐，在经验的积累过程中，确确实实的会天天向上。

---

写作后面：本文属于译文，版权归原作者所有。查看原文请链接http://tsukuruiroiro.hatenablog.com/entry/2014/10/25/152932