我想進行網頁製作，該用甚麼網頁設計軟體?

具備能力：網站流程邏輯能力、使用者體驗、操作軟體、動線設計、溝通能力、熟悉網站流程… 原型設計軟體: Adobe XD、Sketch、Figma、OmniGraffle、InVision ... BLOG 首頁 部落格 我想進行網頁製作，該用甚麼網頁設計軟體? 我想進行網頁製作，該用甚麼網頁設計軟體? 2020-11-03 Author:路卡斯特 Facebook Twitter Weibo Linkedin 無論是網頁製作的初學者，或是好奇想知道網站設計是如何從無到有，都可以從本文可以了解基本的網站設計流程，網站設計可以分成三個設計階段，分成網站視覺設計、網站前端設計(切版)、網站後端設計(程式設計)，不同設計階段使用的網頁設計軟體也不一樣。

先搞懂網站製作流程 暫時先不討論使用租用型套版或用獨立型套版製作網頁，也不討論用Bootstrap製作網頁的作法，因為以上幾種作法無法體現真正的網頁設計流程，本文以完整的客製化網站設計流程做說明，網站設計需要有三個設計階段，分屬於三個不同技術背景的網站設計師，有「視覺網頁設計師」、「前端工程師」、「後端設計師」，只要能學習其中一種，打好設計基本功，要進入網站設計產業並非難事，有了基本功以後才有能力運用更多的網頁製作工具、修改套版網站的程式碼，像是wordpress、joomla、Bootstrap...適合有底子的網站設計師。

〈延伸閱讀：網站建置費用?網頁設計報價為何這麼亂?〉   甚麼是租用型套版設計?  租用型套版網站就是像是WIX、Weebly、Wordpress(網站版)、91app、Shopline、QDM、Shopify...付費後就會給你一組帳號密碼，然後登入平台去組裝你的網站，租用型套版網站是不需要真正的前端、後端工程師，只要會設計網站素材就可以輕易完成網站，不需從無到有製作網站。

〈延伸閱讀：套版網站看起來都很像，到底差在哪?〉   甚麼是獨立型套版設計? 獨立型套版就是是每一個網站都是獨立的，像是Wordpress、XOOPS、Joomla、Drupal…都是免費的獨立型套版網站，租用套版是所有網站都綁在一起，獨立型套版則是每一個網站都是獨立的，網站已經是成品是空白沒資料的網站，再從後台把資料上架到網站，不需要從無到有的製作網站。

〈延伸閱讀：企業用Wordpress網頁設計好嗎?〉 設計前的溝通 網頁製作前的溝通是很重要的，結構單純的企業網站，也許一張紙一支筆就能做好溝通，如果是大型網站就可能需要大量的溝通，這時候有很多的UI的原型設計工具就可以幫助設計師、程式設計師、客戶之間的多方溝通，透過原型設計軟體讓流程圖像化、簡易表達、效果呈現...讓網站雛形先出現，彼此溝通後再進行設計，可以減少對於網站想像的落差，網站流程如果可以先用Prototype(原型)先溝通好，也能降低製作網頁時的錯誤。

具備能力：網站流程邏輯能力、使用者體驗、操作軟體、動線設計、溝通能力、熟悉網站流程… 原型設計軟體: AdobeXD、Sketch、Figma、OmniGraffle、InVision、Axure、proto.io、Framer、Framer、Balsamiq......   第一階段:網站視覺設計 網頁製作的第一階段是進行網站視覺設計，網頁設計師要把網站需要的畫面以圖的方式繪製出來，眼睛看得到的畫面都要設計，單元有首頁、產品資訊、最新消息、常見問答、購物車、會員專區、檔案下載、部落格、聯絡我們…，這時候已經可以看到網站雛形，但這些畫面都還只是「圖片」，還不是有HTML內碼的網站，但已經可以交給客戶進行設計確認了。

〈延伸閱讀：如何成為專業的網頁設計師？〉 具備能力：視覺美感、圖片設計、RWD邏輯、使用者體驗(UX)、SEO觀念、溝通能力... 可能會用到的相關軟體有例如: AdobePhotoshop(影像處理)、AdobeIllustrator(向量繪圖)、AdobeXD(UI設計)、Sketch(UI設計)、Figma(UI設計)、Fireworks(網頁設計)、AdobeDreamweaver(網頁設計)、AdobeLightroom(影像處理)...   為什麼盡量不用AdobeDreamweaver設計網站? AdobeDreamweaver是「即見即所得」的網頁設計軟體，早期很流行用AdobeDreamweaver設計網站，近年專業分工之後，Dreamweaver對視覺設計師來說已經不是那麼重要，因為視覺設計師不用切版，而且用Dreamweaver進行網站切版會產出多餘的HTML、CSS、JS... 會影響網站SEO架構的效率，如果無法專業分工，還是可以使用Dreamweaver達成RWD(Bootstrap)，只是網站效能比較差。

〈延伸閱讀：SEO架構的網頁設計，SEO成功率才會高〉   第二階段:網站結構設計 第一階段製作網頁視覺圖是「給人看」的設計，第二階段的網頁製作就是要把視覺圖轉成HTML，這是要「給電腦看」的設計，第一階段網站設計還只是圖，第二階段就是把很多的圖片變成真正具備HTML、CSS、Javascript內碼的網站，而把網站圖片變成HTML的設計師，我們稱他們「前端工程師」，這個過程叫做「切版」，像用刀子把圖片一片一片切開後重新組裝成網站，前端工程師在切版過程中也會把網站轉成RWD網站，讓網站可以在桌機、手機、平板呈現網站時，自動變成適合的網站大小，前端工程師還有一個任務，就是讓各種瀏覽器都能正常運作網站。

〈延伸閱讀：網頁設計為什麼需要前端工程師？〉 〈延伸閱讀：RWD比較好還是AWD?〉 具備能力：html程式撰寫、CSS撰寫、RWD設計能力、javaScript程式撰寫、解決網站相容性、溝通能力… 網頁設計軟體:VisualStudioCode、Notepad++、IntelliJ、Vim、Eclipse、SublimeText...   第三階段:網站系統設計 早期製作網頁都是一頁一頁做的靜態網站，現代網站必須有內容管理系統，就是透過程式與資料庫建置的「內容管理系統」，就是大家常說的網站後台(CMS)，後台將網站變成可以方便管理資料的系統，後台讓網站上架資料更有效率，改資料不用等網頁設計公司改，而設計網站後台系統的工程師，我們稱他們「程式設計師」，也有人稱「後端工程師」，由他們來主導第三階段的網站設計。

有哪些常用的網站開發程式呢？ 後端開發程式最常看到的三種程式是PHP、ASP.NET、Java，這三種程式碼佔了全部網站程式的9成，其中PHP是最多人使用的網站開發程式佔了79.2%，ASP.NET是第二名佔了8.8%，第三名是Java佔了3.5%，以上是W3Techs.com在2021年3月22日的統計，這三種程式碼有各自的優缺點，PHP最常跟unix-like作業系統搭配，然後跟My-SQL這類的開放工具組合，製作網頁的成本最低、限制最少的系統，所以網站設計公司最愛用，因此也最受歡迎，ASP.NET則是微軟開發的程式碼，所以也搭配了MS-SQL與微軟作業系統，因為成本較高，網站使用率較低，但很多較複雜的雲端系統喜歡採用已經大量模組化的ASP.NET，可減少網頁製作與開發的時間。

Java優點則有跨平台、效能佳的優點，但因為PHP、ASP.NET效能也越來越好，寫Java程式碼的工程師越來越少，工程師越來越難找，於是市佔率已經降不到10%，如果您想從事網站設計的程式工作，就可以根據市場需求去學習程式，會PHP機會比較多但找工作會比較競爭，學Java則是工作機會選擇比較少但也因為比較少人會有特殊的價值，三種程式工具都可以考量看看。

〈延伸閱讀：成功網頁設計的關鍵-網站後台CMS〉 具備能力：程式撰寫、熟悉HTML、JS程式撰寫、API程式撰寫、串接第三方系統API、檢測程式錯誤、資料庫建置、溝通能力… 網頁設計軟體:VisualStudioCode、PHPStorm、Notepad++、IntelliJ、Eclipse、SublimeText、AdobeDreamweaver...   結論 學習製作網頁的第一件事，就是想一想自己適合哪一種網站設計階段？一個網站從無到有，需要經歷三個網站設計階段，網頁設計(視覺設計)、網站切版(前端設計)、程式設計(後端設計)，每個網站設計階段的設計師對網站來說都很重要，每個階段使用的網頁設計軟體也不一樣，網路上的網頁製作教學的資料很多，選定一個專業不斷精進學習，就能邁向網站設計的專業之路，而網頁設計軟體的選擇貴精不貴多，只要能擅用1-2種就能勝任工作，網頁設計軟體沒有好壞只有熟練，只要能完成網站設計的任務就可以了。

〈延伸閱讀：如何選擇網頁設計公司？7個秘訣過濾設計公司〉 (本文為達文西數位科技所有，轉載文圖請註明出處)   路卡斯特 喜歡探索，常常埋首於新奇的事物裡，總是希望給您最適切的解決方案。

5個網站優化方法，改善網站PSI分數 網站建置前，你應該知道的6個網頁設計觀念 文章分類 網頁設計 網路行銷 SEO優化 工商服務 熱門文章 RWD比較好還是AWD? 網站建置費用?網頁設計報價為何這麼亂? 網站後台CMS-成功網頁設計的關鍵 網頁設計公司不會告訴你的5個真相 我想進行網頁製作，該用甚麼網頁設計軟體? 最新文章 網頁設計公司不會告訴你的5個真相 網站架設的方法有哪些？ 網站版面設計的7個重要觀念 網頁設計的使用者體驗(UX)如何執行？ UX/UI不一樣，UI/UX設計是什麼？ 文章關鍵字 網站製作 網頁製作 網頁製作工具 網頁設計 網頁設計軟體 製作網站 製作網頁 訂閱電子報 姓名 E-mail 立即訂閱 感謝您訂閱達文西電子報！ SEO套版網站，優惠$NT62,000(1年代管+SSL) 請與我們聯繫 線上客服 TOP