ENsearch btn

2021-03-09
Eric Wang

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

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

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

 

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

 

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

 

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

 

 

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

 cover 20200705 3

 

形象頁版面設計

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

 

延伸閱讀什麼是一頁式網頁?

 

 

簡介頁版面設計

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

 

功能頁版面設計

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

 

 

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

 

 

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

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

 

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

 

 

 

 

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

 

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 官網 >>

 

 

 

 

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

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

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

 

 

 

 

訂閱文章

想要收到CADIIS網頁設計公司的相關訊息嗎?

我們會不定期更新最新網頁設計相關文章,歡迎訂閱凱士知識+

 

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

 

 

 

網站設計服務諮詢

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

 

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

 

 

 

cadiis

Eric Wang

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

 

 

 

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

 

需要網站設計服務嗎?

凱士為您設計製作優質網站

形象網站、公司網站、企業網站、
及各類型客製化網站系統平台

 

立即填表諮詢

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