網頁設計自學線上教學課程、推薦網頁設計範例網站

網頁設計從20幾年前出現到現在，學校方面一直沒有一個獨立的學科，加上網路上可以找到各種網頁設計的學習資源，因此進入網頁設計這個領域的專業人士，幾乎都是從自學開始，沒有所謂的專業訓練。所謂的專業，就是從各種專案實戰經驗所累積而成。在這個企業網站即企業門面的時代，擁有一個網站幾乎是每個企業的生存基本需求，許多人也前撲後繼進入到網頁設計這個產業。不管你過去是念哪個科系、從事哪個產業，只要你對網頁設計這個領域有興趣，都有機會藉由自學的方式進入到這個產業。

 

從網路興起後，網頁設計這個領域就撐起了整個網路產業，幾乎每個需要透過網路來經營的公司企業，都會需要網路方面的專業人才，也會需要網頁設計的專業。從基本的形象網站、公司企業網站，大到客製化系統平台，政府組織公家機關的疫苗預約平台、政府採購標案平台，查詢資料用的維基百科，觀看親朋好友動態的臉書Facebook、拍照打卡的IG(Instagram)，都與網頁設計相關，這些網站的工作團隊都包含了網頁設計師。未來，將會有越來越多人力需要投入到網頁設計這個領域。

 

以實務工作來說，網站製作流程包含了網站規劃、網頁開版、網頁切版、程式撰寫、網站測試、網站上線。網頁設計師的工作則著重在網頁開版和網頁切版這兩件事。網頁開版，其實就是UI/UX設計，包含了所有的視覺設計工作，有些人會叫它「前端設計」。網頁切版，包含了所有把視覺設計稿透過CSS、HTML、JS等原始碼方式製作成實體網頁的工作，現在很多人叫它「前端工程」。早期很多網頁設計師是一人完成整個網頁工作，包含設計和切版，但隨著網頁工作的複雜化和分工精細，大部份的網頁設計公司已經將這些工作細分為前端設計和前端工程。有些人天生就很適合將抽象概念轉化成視覺呈現，有些人則喜歡沉醉在原始碼裡面建構出虛擬世界，響往網頁設計工作的你，當然也可以依自己的喜好來選擇適合的工作。選擇一個能持續投入熱情的工作領域，可以讓你在職場上走得更遠更深。

 

延伸閱讀：網站建置流程有哪些？網站架設前必看重點

 

 

 

下面介紹我們在學習網站設計常用的線上課程以及設計資源，希望對於有興趣進入這一行的朋友們能有所幫助。

 

 

 

網頁開版：去哪裡找網站版型參考？分享視覺設計師的口袋學習名單

網頁設計不是只有尋求技術上的精進，再精進的技術也沒辦法做出具美感的網頁，視覺美感同時是網頁設計的重點，但卻是另一個層面的能力。視覺美感沒辦法透過課程來訓練，必須經常瀏覽各種網頁設計範例、多看看網頁設計作品等方式，不斷累積自己的美感敏銳度。下面提供幾個我們的設計師常去的網頁設計網站，多看些其他設計師的作品，可以提昇自身的美感能力。

 

 

awwwards | 全球網頁設計精華、各種風格網站範例精選

awwwards是網頁設計界的權威，本身是專業的網頁設計和開發競賽的平台，而世界各地的網頁設計作品都能投稿，而awwwards會有請專業人士來評價票選，經過票選過後就能於網站曝光，這裡包含了世界設計潮流趨勢，包羅萬象的視覺風格，對於設計師的靈感提升是非常有幫助的。

awwwards >>

 

 

 

 

WebDesignClip | 日系網頁設計版型範例參考網站

WebDesignClip是日系風格網站的精選網站，日本網站數量較多，如果網站的風格主體想找些偏日系清亮的風格的或者沈穩低調來參考，這裡會是一個好選擇。

WebDesignClip >>

 

 

 

 

The Best Designs | 歐美網頁設計版型範例精選

The Best Designs偏歐美系的網站精選較多，另外也包含了WordPress主題樣式設計，精選的網站風格大多是用色大膽，對比強烈設計手法，網頁流行敏銳度也相當的高。

The Best Designs >>

  

 

 

 

 

延伸閱讀：常用的網頁設計程式語言有哪些？網站前端後端程式怎麼區分？ 

延伸閱讀：網頁設計公司常用的版面設計軟體有哪些？ 

 

 

 

網頁切版：哪裡有網頁設計線上教學課程？介紹幾個網頁前端教學網站

疫情之後，生活和工作上的許多不確定性讓線上課程如雨後春荀般出現。過去要學習網站設計專業技能或上課，需要由開課單位在特定的時間、特定的上課地點，現在透過線上課程，讓學習變得更有彈性，不需要牽就上課時間地點，只有撥出時間，就能透過網路打開線上課程開始上課。我們整理了下列幾個常用的線上課程平台，依你的學習需求選擇適合的課程去上課吧。

 

六角學院 | 豐富的網頁前端教學課程

六角學院擁有豐富的網頁前端學習課程，包含HTML/CSS、jQuery、Sass、Bootstrap、JS等前端開發各項技能，都能在六角學院找到你想要的線上課程。

六角學院 前端線上課程 >>

 

Hahao 好學校 | 讓你自學RWD響應式的線上教學網站

Hahao提供許多網頁設計線上課程，有Sketch、Adobe 等網頁設計軟體的相關教學，可以讓你熟悉 HTML、CSS、Javascript 等網頁語法，了解RWD響應式網頁設計概念。

Hahao > 設計 > 網頁設計

 

TibaMe 緯育 | 從前端開發到後端開發，完整的線上教學平台

TibaMe在網頁設計領域提供相當完整的課程，從前端開發到後端開發，包含各類軟體工程師所需的Java、.NET、iOS、Android、區塊鏈、物聯網、HTML、CSS、jQuery、Bootstrap、UI/UX、業界專案開發及網站開發主題。除了軟體開發外，還包含了行動應用、數位金融、數位商務、雲端技術、數位內容、物聯網、科技管理、數據分析，可以說是業界最完整的線上課程平台。

TibaMe > 軟體開發學院 

 

Hiskio 嗨 程式技能 | 程式線上課程教學網站

「程式線上課程的專賣店」，是 HiSKIO 給人的第一印象。我們認為學程式，就要學最專業、最正確、最實用。平台上的老師們，皆是專業的老師。且內容亦是經過嚴格的把關而成！

Hiskio 程式線上課程 >> 

 

 

Udemy 線上教學 | 包羅萬象的國際性的線上課程平台

Udemy 是國際性的線上學習平台，有許多程式設計、網頁設計、網路行銷、資料處理等相關課程。有提供繁體中文版操作介面，課程費用相對比國內的線上平台便宜。

Udemy 線上課程 >>

 

 

 延伸閱讀：網頁設計公司怎麼挑？網站公司挑選守則五要點一篇整理！

 

 

 

＊ 歡迎分享這篇文章，分享時請加入文章來源：凱士網頁設計公司

 

 

 

 

 

 

Eric Wang 凱士網頁設計公司 專案顧問 Eric，擁有設計、理工、管理等跨領域背景，樂於和不同領域的專業工作者進行分享與討論。在專案工作外，同時也兼任大學行銷系業界講師及企業內訓課程講師，長期致力於「網頁設計白話文運動」。