寫在前面的話：互聯網的時代，總想學點與時俱進的技能。偶然看到這篇文章，覺得還不錯，愿與讀者共享之，以圖共同學習共同進步。
從對網頁設計一無所知，到接受各種公司或飲食店的網頁設計工作，大概花了一年時間。我試著總結了一下這一年當中所用的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個原則的解說，即使是初學者也明白易懂。只要注意遵守這幾個原則，設計水平將大幅提升。
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
