ENsearch btn

2021-03-09
Eric Wang

網頁設計公司常用的網站製作軟體有哪些?

現在網頁設計公司到底都使用什麼軟體?如果對網頁設計工作有興趣,應該學習哪些軟體?我們將自身的經驗分享給大家,希望對有心想進行網頁設計這個領域的新朋友們,對於要熟悉哪些軟體有基本概念。

網站建置流程圖 - 凱士網頁設計

 

講到網頁設計軟體,大家最有印象的就是傳說中的Dreamweaver。時至今日,Dreamweaver真的已經成為傳說,大約在10多年前,用Dreamweaver軟體製作網站還算是主流,用軟體做網站也比寫code方便,但隨著網頁設計技術的演變,像是RWD技術、JS Framework的使用,許多應用程式推陳出新,在實務工作中,網頁設計所採用的軟體已經跟以前有很大的不同。

 

那麼現在網頁設計公司到底都使用什麼軟體?如果對網頁設計工作有興趣,應該學習哪些軟體?我們將自身的經驗分享給大家,希望對有心想進行網頁設計或網頁製作這個領域的新朋友們,對於要熟悉哪些軟體有基本概念。當然每間網頁設計公司所使用的軟體不盡相同,設計流程和工作習慣也未必一樣,列舉的這些軟體僅供參考。

 

那麼,一間網頁設計公司在工作會採用哪些軟體?我們以網頁設計分工的方式來介紹,讓你知道在網頁設計流程工作中,會用到的軟體有哪些。

 

網頁版面設計會用到哪些軟體?

 

software pic01

 

在專案開始前,通常會有網站規劃報價、建立網站架構表。而開始進行網站專案的第一件事,就會是「開版」。什麼是開版?開版就是為網站設計出網頁的版面,通常是先從首頁開始,開版出來的畫面,會輸出成JPG檔,供客戶及網站專案相關人員進行討論。
開版會用到哪些軟體?其實開版沒有特定使用的軟體。有人用Photoshop開版、有人用Illustrator開版,而我們是採用UI設計專用的SketchApp進行網頁版面設計。

 

 logo sketch

Setch App

在UI編排設計軟體上屬於容易上手,界面管理工具上也能快速適應,擴充套件資源很多,裡面也有類似Photoshop以及Illustrator簡易基本的處理工具,目前只支援mac系統,另外它在輸出圖片也都非常方便,提供了基本圖片格式,提供快速格式轉檔和尺寸大小輸出,開板和切版工作間都能運用自如,提升工作效率。

Sketch App 官網 >>

  

logo ai

Adobe Illustrator

Adobe Illustrator,俗稱「以拉」,它的長項是用來進行向量圖的繪製,我們偶爾會用Illustrator來畫icon、製作svg檔,但不太會用它來開版。

 

Adobe Illustrator 官網 >>

 

logo ps

Adobe Photoshop

Adobe Photoshop,俗稱「PS」,它的長項是用來進行圖片後製相關工作,所以圖片後製的工作也「PS」。我們偶爾會用Adobe Photoshop來進行照片後製、影像合成、廣告圖像製作,但不會用它來開版。

Adobe Photoshop 官網 >>

 

 


 

網頁切版會用到哪些軟體?

software pic02

 

網頁各頁都開版完成後,就會接著做切版。什麼是切版?簡單的說就是把開版的網頁設計稿,做成「網頁檔」。這個過程主要是先在SketchApp裡,將所需要的圖片以「切圖」的概念將需要的圖檔切出來,然後再經由「原始碼編輯器」如:Visual Studio Code、Sublime Text進行原始碼編輯,俗稱「寫code」。有些人認為這就是寫程式,但不完全是,寫程式和切版還是不一樣,只是都會用原始碼編輯軟體進行寫code的工作。

 

logo sketch

SKETCH APP

Sketch App 同樣可以用在切版,因此如果在視覺介面設計和切版都採用同一套軟體,就可以整合兩段的工作流程,讓工作溝通更順暢。

Sketch App 官網 >>

 

logo sketch

Visual Studio Code

Visual Studio Code是由微軟所開發的一套開源軟體。有內建的cmd, terminal、整合GIT、內建Emmet,有很多額外的擴充功能可以下載,例如:一鍵快速整理code、多款顏色主題模式…等,把開發常用的軟體整合到vs code對開發人員來說是很方便的軟體,省去要開很多軟體的時間。
Visual Studio Code 官網 >>

 

 


 

網頁設計工作還會用到哪些軟體?

 

logo sketch

FileZilla 網頁續傳軟體

FileZilla是一種網頁檔案續傳軟體,通常用來將檔案更新到伺服器。
FileZilla 官網 >>

 

 

 

 

 

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

延伸閱讀:推薦網頁設計師自學常用的線上教學課程、網頁設計範例網站 

 

 

* 歡迎分享這篇文章,分享時請加入文章來源:凱士網頁設計公司

 

 

網站設計服務諮詢

為什麼推薦台中網頁設計公司凱士數位?位於台中的凱士相對有機會接觸到各種不同的產業面向,擁有各種產業的網站設計經驗,幫助企業提升網路品牌形象,建立良好的使用體驗。如果您有形象網站、企業網站、客製化網頁、網站改版相關需求,歡迎聯絡我們。

 

您可以直接填寫諮詢表單,或撥打諮詢電話 04-22210688

 

 

 

cadiis

Eric Wang

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

 

 

 

好的形象網站設計,可以幫助公司提升品牌形象與企業價值,透過清楚的網站架構與視覺設計,造就良好的使用者體驗與企業形象。

 

需要網站設計服務嗎?

凱士為您設計優質的

形象網站、公司網站、企業網站、
客製化網頁設計

 

立即填表諮詢

想進一步了解網頁設計服務?