設計一個網站從來都不是一件容易的事。如果你去詢問一位在該行業有豐富經驗的網頁設計師，他會告訴你以前根本沒有太多關于Web設計/開發的資源、文章和各種溝通交流平臺，更不用說高質量免費教程了。
如果您打算建立自己的個人網站或者重新設計您的博客的主題，現在看來已經不是很難了。這要感謝那些慷慨的設計師和撰稿者們，現在互聯網充滿著各
種很棒的教程來幫助你逐步建立自己的網站界面及導航。這篇文章只是讓大家淺嘗輒止，更多的學習資源大家可以自行尋找。我們以前曾發表過40個非常棒的網站界面設計PHOTOSHOP教程。而今天讓暴風彬彬和您一同分享這31個網站界面設計實踐教程吧。
您還可以參考彬Go的相關網頁設計教程類文章:
《推薦20個關于網站可用性及界面設計的網站》
《網頁設計教程:使用Photoshop設計一個高檔時尚的網頁》
《視頻教程:非常酷的3D效果網頁設計》
彬Go會經常更新網頁設計/前端開發類教程，如果您想所示關注本博客的最新更新教程，歡迎RSS訂閱本博客，以便您能第一時間瀏覽彬Go的最新網頁設計教程。
頁頭及導航設計
為網站創建有效的導航對于網站瀏覽者的瀏覽及導航起到至關重要的作用。我們為您精選了以下時尚且簡單的導航設計教程，當您掌握這些教程之后，進行各種調節及變化將變得非常容易。
1.Retro Dark Blue Header Design
教您如何設計一個深藍色復古圓角網站頁頭。
2.Wii Web Header
教您如何設計一個WII風格的網站頁頭。
3.Colorful Design Studio Header
如何設計一個色彩艷麗的工作室頁頭布局。
4.Metallic Header Design
5.Nature Theme Header
6.Professional Dark Header
如何為您的網站創建一個簡單且有效的網站導航欄。
7.High-Detailed Plastic Navigation Bar
導航菜單可以使用不尋常的文本鏈接到結構復雜的下拉菜單。這個教程詳細描述了設計”塑料”風格導航菜單的過程。
8.Curled Corner
教您如何設計一個光滑的內容區。
9.Green Navigation
如何設計一個綠色發光效果的導航。
10.Blue On Black Navigation Bar
如何結合幾種圖層樣式來設計漂亮而簡單的導航欄。
11.Clean White Navigation Bar
簡潔是漂亮網站的關鍵，學習如何使用PHOTOSHOP繪制一個漂亮的導航欄。
12.Modern Web Search Bar
如何設計一個流行的帶下拉菜單的搜索欄。
13.Dark Navigation Box
如何使用更多的效果和工具來設計更高級的導航。
14.Clean Blue Navigation Box
如何使用一些工具和效果為網站布局設計一個導航，這種方法同樣適用于設計其他內容區等。
15.Create A Professional Gaming Header
如何設計一個專業的游戲網站導航欄。
16.Volkswagen Inspired Navigation
大眾汽車風格的導航欄。本教程需要你足夠了解PHOTOSHOP。你需要了解圖層調色板和如何添加圖層樣式，并且會使用自定義圖形和剪切遮罩。
17.Design A Unique Bookmark Box
如何為您的博客設計獨特且專業的書簽板塊，當然也可用于您的網站。
網站整體布局設計
對于那些想要獨立設計自己的網站有沒有什么頭緒的站長，這里有一些教程能夠幫你您從頭到尾合計網站的布局。
1.The Art Institute Photoshop Template
簡單幾步創建時尚的網站模板。
2.Talkmania Arhitecture Layout
3.Creative Studio Web Page
創建工作室網站頁面
4.Clean Black And Green Webdesign
簡潔的黑色和綠色網頁設計
5.Unique Grungy Website Layout
如何設計獨特的有破舊感的網站布局
6.Clean Business Layout Tutorial
簡潔的商業網站布局設計教程
7.Web 2.0 Blog Layout
本教程包含了一些比較新穎的技術，比如使用有趣的投影元素。
8.The Ultimate Grunge Design Tutorial
本教程將討論如何使用PHOTOSHOP設計美妙的破舊風格網站布局，其中使用的一些技術是我在其他地方沒有看到過的。
9.Real Estate Web Design
設計簡潔且有當代風格的房地產相關類型網站。
10.Agency Layout
11.Vibrant Modern Blog Design In Photoshop
使用Adobe Photoshop設計一個色彩鮮明的流行博客布局。
12.Photography Portfolio
設計一個攝影類網站。
13.Konvicted Art
14.Unique Desktop Layout
設計一個獨特的桌面布局網站，包括一些常用的辦公工具元素。
英文原文:31 Practical (Web) Interface Design Tutorials
翻譯原文:精選31個網站界面設計實踐教程
轉載聲明:
原載:彬Go
本文鏈接:http://blog.bingo929.com/31-practical-web-interface-design-tutorials.html
如需轉載必須以鏈接形式注明原載或原文地址，謝謝合作