網頁設計公司常用的版面設計軟體有哪些？

 

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

 

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

 

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

 

 

網頁有哪些常見的版面設計？

 

 

形象頁版面設計

首頁就是最常見的形象頁版面設計之一。形象頁經常會以一頁式網頁(滿版長頁式)的設計方式，運用具主題性有氣勢的視覺情境圖來吸引網路訪客。形象頁通常會是一個主題頁面，設計師們經常會將整個形象頁分成幾個區塊，個別以不同視覺表現方式介紹這些小主題，就像是一份5~7頁的PPT簡報，透過視覺來和目標客戶群進行溝通。形象頁這種一頁式版面設計模式經常運用在首頁、公司簡介、品牌故事、產品優勢、企業優勢等頁面設計。

 

延伸閱讀：什麼是一頁式網頁？

 

 

簡介頁版面設計

相較於形象頁著重在視覺張力、後續鮮少更新內容，簡介頁較為重內容圖文資訊的呈現，需要更為直接清楚傳達內容資訊。簡介頁的圖文內容較常更動，為了後續的維護方便，通常會採用較為簡單的編排設計，盡可能使用後台圖文編輯器而較少用到原始碼來編輯網頁，以便於讓不懂網頁原始碼的行銷人員方便維護網頁內容。

 

功能頁版面設計

功能頁很好理解，從字面上來說，指的就是像新聞列表、產品列表、聯絡表單等這種需要撰寫程式介接資料庫的功能頁面。功能頁的設計需考量程式功能如何執行(如：最新消息一頁12筆，下方會有分頁功能)、網頁在RWD如何走位(例：電腦畫面和手機畫面的呈現數量與比例)。

 

 

 這三種版面設計概念不一定會單獨存在單一頁面，有時候也會看到形象、簡介、功能三種概念同時出現在單一頁面上，這就考驗網頁設計師的排版功力。

 

 

版面設計的靈感來源網站推薦

著手版面設計工作時，會需要先找相關主題的版面設計參考，由於不同屬性的網站會需要不同的視覺風格(例如品牌形象網站可能需要強烈的獨特風格，而企業網站則追求穩重優雅)，因此，一開始所選定的版面設計風格會影響後續整個網站風格的發展。Behance、awwwards、Pinterest 這些都是網頁設計師們最常逛的設計網站。

 

延伸閱讀：如何找公司網站、形象網頁設計參考？推薦5個熱門的網頁設計網站

 

 

 

 

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

 

 

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

 

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

  

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

 

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

 

 

---

 

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

 

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

 

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

 

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

 

 

---

 

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

 

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

 

 

 

 

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

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

延伸閱讀：網頁設計自學線上教學課程、推薦網頁設計範例網站 

 

 

 

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

 

 

 

 

 

 

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