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

文章推薦指數: 80 %
投票人數:10人

具備能力:網站流程邏輯能力、使用者體驗、操作軟體、動線設計、溝通能力、熟悉網站流程… 原型設計軟體: 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個秘訣過濾設計公司〉 (本文為達文西數位科技所有,轉載文圖請註明出處)   路卡斯特 邁入網站與SEO已經超過17年,喜歡探索新知與研究技術,總是希望給您最適合的解決方案。

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



請為這篇文章評分?