我想自己做網站,該用甚麼網頁設計軟體?

Author: 路卡斯特
web-design-software-ok

無論是網頁設計的初學者,或是好奇想知道網站設計是如何從無到有,都可以從本文可以了解基本的網站設計流程,網站設計可以分成三個設計階段,分成網站視覺設計、網站前端設計(切版)、網站後端設計(程式設計),不同設計階段使用的網頁設計軟體也不一樣。


先搞懂網站製作流程

暫時先不討論租用型套版網頁設計或是獨立型套版網頁設計,也不討論用Bootstrap套用網站的作法,因為以上幾種作法無法體現真正的網頁設計流程,本文以完整的客製化網站設計流程做說明,網站設計需要有三個設計階段,分屬於三個不同技術背景的網站設計師,有「視覺網頁設計師」、「前端工程師」、「後端設計師」,只要能學習其中一種,打好設計基本功,要進入網站設計產業並非難事,有了基本功以後才有能力運用更多的網頁設計工具、修改套版網站的程式碼,像是wordpress、joomla、Bootstrap...適合有底子的網站設計師。
延伸閱讀:網站建置費用? 網頁設計報價為何這麼亂?
 
甚麼是租用型套版設計? 
租用型套版網站就是像是WIX、Weebly、Wordpress(網站版)、91app、Shopline、QDM、Shopify...付費後就會給你一組帳號密碼,然後登入平台去組裝你的網站,租用型套版網站是不需要真正的前端、後端工程師,只要會設計網站素材就可以輕易完成網站,不需從無到有製作網站。
延伸閱讀:套版網站看起來都很像,到底差在哪?
 
甚麼是獨立型套版設計?
獨立型套版就是是每一個網站都是獨立的,像是Wordpress、XOOPS、Joomla、Drupal…都是免費的獨立型套版網站,租用套版是所有網站都綁在一起,獨立型套版則是每一個網站都是獨立的,網站已經是成品是空白沒資料的網站,再從後台把資料上架到網站,不需要從無到有的製作網站。
延伸閱讀:企業用Wordpress網頁設計好嗎?
 

第一階段: 網站視覺設計

網站設計的第一階段是進行網站視覺設計,網頁設計師要把網站需要的畫面以圖的方式繪製出來,眼睛看得到的畫面都要設計,單元有首頁、產品資訊、最新消息、常見問答、購物車、會員專區、檔案下載、部落格、聯絡我們…,這時候已經可以看到網站雛形,但這些畫面都還只是「圖片」,還不是有HTML內碼的網站,但已經可以交給客戶進行設計確認了。
延伸閱讀:如何成為專業的網頁設計師?

具備能力: 視覺美感、圖片設計、RWD邏輯、使用者體驗(UX)、SEO觀念、溝通能力...
網頁設計軟體:  Fireworks(向量繪圖)、Photoshop(圖片處理)、Illustrator(向量繪圖)、Adobe Dreamweaver(網站軟體)、Lightroom(圖片去背景)...


 
為什麼盡量不用Adobe Dreamweaver設計網站?
Adobe Dreamweaver是「即見即所得」的網頁設計軟體,早期很流行用Adobe Dreamweaver設計網站,近年專業分工之後,Dreamweaver對視覺設計師來說已經不是那麼重要,因為視覺設計師不用切版,而且用Dreamweaver進行網站切版會產出多餘的HTML、CSS、JS... 會影響網站SEO架構的效率。
延伸閱讀:SEO架構的網頁設計,SEO成功率才會高
 

第二階段: 網站結構設計

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

具備能力:html程式撰寫、CSS撰寫、RWD設計能力、javaScript程式撰寫、解決網站相容性、溝通能力…
網頁設計軟體: Visual Studio Code、Notepad++、IntelliJ、Vim、Eclipse、Sublime Text...
 

網站設計軟體使用率


第三階段: 網站系統設計

早期的網站都是一頁一頁做的靜態網站,現代網站必須有內容管理系統,就是透過程式與資料庫建置的「內容管理系統」,就是大家常說的網站後台(CMS),後台將網站變成可以方便管理資料的系統,後台讓網站上架資料更有效率,改資料不用等網頁設計公司改,而設計網站後台系統的工程師,我們稱他們「程式設計師」,也有人稱「後端工程師」,由他們來主導第三階段的網站設計。
延伸閱讀:成功網頁設計的關鍵 -網站後台 CMS

具備能力:程式撰寫、熟悉HTML、JS程式撰寫、API程式撰寫、串接第三方系統API、檢測程式錯誤、資料庫建置、溝通能力…
網頁設計軟體: Visual Studio Code、PHPStorm、Notepad++、IntelliJ、Eclipse、Sublime Text、Adobe Dreamweaver...


結論

學習網頁設計的第一件事,就是想一想自己適合哪一種網站設計階段?一個網站從無到有,需要經歷三個網站設計階段,網頁設計(視覺設計)、網站切版(前端設計)、程式設計(後端設計),每個網站設計階段的設計師對網站來說都很重要,每個階段使用的網頁設計軟體也不一樣,網路上的網頁設計教學的資料很多,選定一個專業不斷精進學習,就能邁向網站設計的專業之路,而網頁設計軟體的選擇貴精不貴多,只要能擅用1-2種就能勝任工作,網頁設計軟體沒有好壞只有熟練,只要能完成網站設計的任務就可以了。
延伸閱讀:如何選擇網頁設計公司? 7個秘訣過濾設計公司

(本文為達文西數位科技所有,轉載文圖請註明出處)
  馬上諮詢網頁設計
喜歡探索,常常埋首於新奇的事物裡,總是希望給您最適切的解決方案。

超值套版網站,優惠特價 $ NT 62,000

請與我們聯繫
線上客服 TOP