任何一個網站從開發到最終上線， 都是需要團隊協作且謹慎的一個過程，而實際中往往會遇到各類問題，所以網頁設計師通常需要扮演多種角色，除了掌握必備的網頁設計技能外，更應該對后期的開發流程及內容有所了解，以便從全局來把握網頁的美觀與實用。這里小編總結了一些實用易懂的設計與開發教程，大家先睹為快吧！

（一）網頁設計教程

1.響應式設計

響應式設計師由著名網頁設計師Ethan Marcotte最初提出來的設計概念，隨后席卷前端和設計領域，如今已成為網頁設計的大趨勢之一。響應式設計的網頁現在已經很多了，而相關的教程也是數不勝數：

響應式網頁設計：它是什么以及如何使用？

推薦指數：★★★★★

這是一篇很不錯的入門基礎教程，作者Kayla Knight將會引導你逐步了解響應式設計的基礎知識，并讓你明白它的基礎原理。如果你對網頁設計感興趣，這篇文章不容錯過。

響應式網頁設計指南

推薦指數：★★★★★

對于需要更進一步了解響應式網頁設計理論，及實際的產品設計、界面設計及與交互設計的不同點，這篇文章都會告訴你。

2.扁平化設計

現如今，扁平化設計比起最初的風格已經沒有那么“平”了，更清晰的層次，更豐富的細節，以及更優秀的視覺體驗，使得它依然占據主流，而且跟響應式設計有著極高的契合度。

35個扁平化網站設計靈感

推薦指數：★★★★

這篇文章列舉了大量扁平化設計實例，并對應將其設計的亮點做說明，幫助你更好地了解如何排版、配色以及網頁布局等等。

扁平化是否已經失寵？10個案例告訴你答案

推薦指數：★★★★★

這篇文章追根溯源將扁平化設計的發展史及現狀進行介紹，同時列舉和對比了它的優缺點，對于想要已經入門或正想嘗試扁平化設計的小伙伴來說，有很好的引導價值。

3.字體設計

受限于技術的原因，網頁設計中的字體，并不像平面設計中使用那么自由，除了比較固定的一些字體（例如雅黑、宋體、黑體等）外，很多特殊字體的設計也只能通過圖片的方式進行呈現。

23款網頁設計師必備經典私藏英文字體

推薦指數：★★★★★

這里總結了23個網頁設計中，可能會經常用到的英文字體，部分有些粗細的變化，但能在網頁中作為文本展示，有比較好的自由度和延伸性。

全球知名的5大頂尖字體及其用法

推薦指數：★★★★★

這里搜羅了全球各地的網頁設計中，最常用的6中字體，包括：Google字體、Open Sans字體、Montserrat字體等，每款字體中都附有下載鏈接和貼心的用例示范。

4.表單設計

網頁表單是訪問者與網站擁有者主要的溝通途徑，因此確保網頁表單容易理解和使用的重要度，自然不必多說。然而要做到不讓表單乏味，還是有很多獨特且有趣的小技巧的。

網頁后臺設計：列表設計、表單設計

推薦指數：★★★★

這篇文章詳細介紹了，網頁后臺中的表格和表單的設計細節，從菜單/導航、數據/圖形展示、表格，到表單、控件/組件以及彈窗等，都有涉及。

3個表單設計的最佳技巧

推薦指數：★★★★★

你可以知道，設計師、商人甚至普通的訪客對表單設計的不同想法，以及應該避免的雷區和提高用戶體驗的小心機。

（二）網頁開發教程

下面是針對網頁開發及建設內容的站點，其中包括對CMS（比如WordPress）的討論，CSS和HTML教程代碼等。

1. Instant Shift

這個站點在國外的網頁設計師和開發人群中很流行，里面有很多關于網站搭建工具、CSS，教程等高質量的博文。

2. CSS-Tricks

這是由Chris Coyler創建的只涵蓋CSS內容的博客站點，其中包括網頁開發與設計的各個方面，以文章、視頻、代碼片段、教程等形式進行呈現。

3. Mockplus

作為簡潔高效的原型設計工具，Mockplus的博文提供了豐富的設計開發教程，涵蓋前端開發人員需掌握的技能、建站模板、初級iOS開發、UI開發與前端開發的不同等內容，支持訂閱推送。

4. Six Revisions

這個網站是Jacob Gube在2008年創建，包括構建網站及應用程序的整個工作流程。每周發布更新教程、新聞及指南，針對的讀者人群，包括PS到自由職業者。

5. Smashing Magazine

這個站點轉為設計師和開發人員打造，提供了一系列相關的文章和教程，內容包括代碼、移動應用程序和設計、圖形等。當然，也有不少的網站主題、PS、CSS等。

（三）網頁開發與設計工具

正所謂“工欲善其事，必先利其器”。想要成為一個優秀的設計師，工具的使用也是至關重要的一個因素。這里小編也準備了網頁設計與開發中需要用到的工具清單，不妨試試。

1.UI設計工具

• PS：又名Adobe Photoshop CS，是目前公認的很好的通用平面美術設計軟件，主要功能包括：圖像處理和繪圖。
• Adobe Illustrator：一款不錯的矢量圖形處理工具，可應用于網頁、多媒體圖像以及印刷出版等頁面的制作，適合小到大型的復雜項目。
• Fireworks：類似于于Illustrator，不僅具備編輯矢量圖形與位圖圖像的靈活性，還提供了一個預先構建資源的公用庫。

2.交互原型工具

• Mockplus：強大易用的快速原型制作工具，一鍵拖拽創建交互，海量UI資源與封裝組件，團隊協作省時省力。
• Sketch：一款輕量的在線矢量設計工具，可以基于制作好的視覺設計稿做交互，周邊的插件及教程比較豐富。
• InVision：主要針對原型設計和團隊協作提供服務，也是將預先做好的視覺設計稿上傳后，添加鏈接來生成在線原型。

3.網頁開發工具

• Dreamweaver：目前公認的專業級網頁制作程序，支持HTML、CSS、PHP、JSP及ASP等眾多腳本語言的語法著色顯示，是初學者或專業級網站開發人員必選工具。
• FrontPage：一款輕量級靜態網頁制作軟件，適合開發靜態網站的新手使用。
• CSS Design：適用于對CSS對進調試的專業級應用，也支持即時查看樣式功能，方便程序的調試和效果的對比。

其實，沒有所謂最好的工具、只有最適合的，選工具其實是make a balance的過程。最重要的，還是自己經過學習與思考后沉淀下來的經驗和創造力，設計之路一起加油！