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

網頁設計公司常用的版面設計軟體有哪些？ ; Setch App · Sketch App 官網>> ; Adobe Illustrator · Adobe Illustrator 官網>> ; Adobe Photoshop · Adobe ... 網頁設計作品公司網站分類ALL上市櫃公司集團官網產品代工公司網站生產設備公司網站加工技術公司網站客製服務公司網站生技醫療公司網站消費零售品牌官網學校教育單位網站宗教文化事業網站網頁設計分類ALL形象網站企業網站客製化系統平台RWD網頁設計多國語言版本商品及形象拍攝網路行銷優化最新網頁設計作品達洛維門窗形象官網設計ChenSource企業官網設計Klaymor形象官網設計通嘉科技集團網站設計LEX企業官網設計HarvestOne品牌形象網站認識網站設計洽詢網站報價前有哪些準備事項？網站製作會如何進行？有哪些流程？RWD響應式網頁設計是什麼意思？形象拍攝為什麼可以提昇網站價值？CMS網站後台有什麼行銷優勢？網站完成後如何進行SEO優化工作?RWD網頁設計什麼是RWD響應式網頁設計RWD響應式網頁設計作品案例RWD響應式網頁設計的趨勢與特點網頁設計服務形象網站設計企業網站設計客製化網站系統網站設計流程網站設計費用設計專欄網站企劃討論網站之前的5個準備工作官網設計有哪些重點？網站製作有哪些流程？公司網站要規劃哪些內容？網站架構表(範例檔下載)>>所有網站企劃文章網頁設計如果沒有RWD，手機版網頁會如何呈現？RWD常見的設計形式企業網站有哪些新的設計趨勢？透過攝影提昇網站質感>>所有網頁設計文章網站建置CMS系統建置網站有什麼好處？客製化、套版網頁設計比較網站建置重點工作網站改版前項目檢查>>所有網站建置文章數位行銷網站行銷SEO入門網站後台有哪些必備的SEO工具？SEO文章要怎麼寫？企業網站SEO網頁設計重點>>所有數位行銷文章聯絡我們 2021-03-09 EricWang 網頁設計公司常用的版面設計軟體有哪些？ 現在網頁設計公司到底都使用什麼軟體？如果對網頁設計工作有興趣，應該學習哪些軟體？我們將自身的經驗分享給大家，希望對有心想進行網頁設計這個領域的新朋友們，對於要熟悉哪些軟體有基本概念。

目錄網頁有哪些常見的版面設計？形象頁版面設計簡介頁版面設計功能頁版面設計版面設計的靈感來源網站推薦網頁版面設計會用到哪些軟體？SetchAppAdobeIllustratorAdobePhotoshop網頁切版會用到哪些軟體？SKETCHAPPVisualStudioCode網頁設計工作還會用到哪些軟體？FileZilla網頁續傳軟體   講到網頁設計軟體，大家最有印象的就是傳說中的Dreamweaver。

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

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

當然每間網頁設計公司所使用的軟體不盡相同，設計流程和工作習慣也未必一樣，列舉的這些軟體僅供參考。

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

    網頁有哪些常見的版面設計？     形象頁版面設計 首頁就是最常見的形象頁版面設計之一。

形象頁經常會以一頁式網頁(滿版長頁式)的設計方式，運用具主題性有氣勢的視覺情境圖來吸引網路訪客。

形象頁通常會是一個主題頁面，設計師們經常會將整個形象頁分成幾個區塊，個別以不同視覺表現方式介紹這些小主題，就像是一份5~7頁的PPT簡報，透過視覺來和目標客戶群進行溝通。

形象頁這種一頁式版面設計模式經常運用在首頁、公司簡介、品牌故事、產品優勢、企業優勢等頁面設計。

  延伸閱讀：什麼是一頁式網頁？     簡介頁版面設計 相較於形象頁著重在視覺張力、後續鮮少更新內容，簡介頁較為重內容圖文資訊的呈現，需要更為直接清楚傳達內容資訊。

簡介頁的圖文內容較常更動，為了後續的維護方便，通常會採用較為簡單的編排設計，盡可能使用後台圖文編輯器而較少用到原始碼來編輯網頁，以便於讓不懂網頁原始碼的行銷人員方便維護網頁內容。

  功能頁版面設計 功能頁很好理解，從字面上來說，指的就是像新聞列表、產品列表、聯絡表單等這種需要撰寫程式介接資料庫的功能頁面。

功能頁的設計需考量程式功能如何執行(如：最新消息一頁12筆，下方會有分頁功能)、網頁在RWD如何走位(例：電腦畫面和手機畫面的呈現數量與比例)。

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

    版面設計的靈感來源網站推薦 著手版面設計工作時，會需要先找相關主題的版面設計參考，由於不同屬性的網站會需要不同的視覺風格(例如品牌形象網站可能需要強烈的獨特風格，而企業網站則追求穩重優雅)，因此，一開始所選定的版面設計風格會影響後續整個網站風格的發展。

Behance、awwwards、Pinterest這些都是網頁設計師們最常逛的設計網站。

  延伸閱讀：如何找公司網站、形象網頁設計參考？推薦5個熱門的網頁設計網站         網頁版面設計會用到哪些軟體？     在專案開始前，通常會有網站規劃報價、建立網站架構表。

而開始進行網站專案的第一件事，就會是「開版」。

什麼是開版？開版就是為網站設計出網頁的版面，通常是先從首頁開始，開版出來的畫面，會輸出成JPG檔，供客戶及網站專案相關人員進行討論。

開版會用到哪些軟體？其實開版沒有特定使用的軟體。

有人用Photoshop開版、有人用Illustrator開版，而我們是採用UI設計專用的SketchApp進行網頁版面設計。

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

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

  AdobeIllustrator官網>>   AdobePhotoshop AdobePhotoshop，俗稱「PS」，它的長項是用來進行圖片後製相關工作，所以圖片後製的工作也「PS」。

我們偶爾會用AdobePhotoshop來進行照片後製、影像合成、廣告圖像製作，但不會用它來開版。

AdobePhotoshop官網>>       網頁切版會用到哪些軟體？   網頁各頁都開版完成後，就會接著做切版。

什麼是切版？簡單的說就是把開版的網頁設計稿，做成「網頁檔」。

這個過程主要是先在SketchApp裡，將所需要的圖片以「切圖」的概念將需要的圖檔切出來，然後再經由「原始碼編輯器」如：VisualStudioCode、SublimeText進行原始碼編輯，俗稱「寫code」。

有些人認為這就是寫程式，但不完全是，寫程式和切版還是不一樣，只是都會用原始碼編輯軟體進行寫code的工作。

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

SketchApp官網>>   VisualStudioCode VisualStudioCode是由微軟所開發的一套開源軟體。

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

VisualStudioCode官網>>       網頁設計工作還會用到哪些軟體？   FileZilla網頁續傳軟體 FileZilla是一種網頁檔案續傳軟體，通常用來將檔案更新到伺服器。

FileZilla官網>>           延伸閱讀：常用的網頁設計程式語言有哪些？網站前端後端程式怎麼區分？  延伸閱讀：網頁設計自學線上教學課程、推薦網頁設計範例網站      ＊歡迎分享這篇文章，分享時請加入文章來源：凱士網頁設計公司     網站設計服務諮詢 為什麼推薦台中網頁設計公司凱士數位？位於台中的凱士相對有機會接觸到各種不同的產業面向，擁有各種產業的網站設計經驗，幫助企業提升網路品牌形象，建立良好的使用體驗。

如果您有形象網站、企業網站、客製化網頁、網站改版相關需求，歡迎聯絡我們。

  您可以直接填寫諮詢表單，或撥打諮詢電話 04-22210688       EricWang 凱士網頁設計公司專案經理Eric，擁有設計、理工、管理等跨領域背景，樂於和不同領域的專業工作者進行分享與討論。

在專案工作外，同時也兼任大學行銷系業界講師及企業內訓課程講師，長期致力於「網頁設計白話文運動」。

      網頁設計 相關文章 企業網站如何設計？讓網站為你提高企業品牌價值！ 2021常用網頁設計中英文對照、英文網頁設計用詞 【公司架站必讀】推薦5個與網站公司討論的準備重點 好的形象網站設計，可以幫助公司提升品牌形象與企業價值，透過清楚的網站架構與視覺設計，造就良好的使用體驗與企業形象。

  需要網站設計服務嗎？ 凱士為您設計製作優質網站 形象網站、公司網站、企業網站、及各類型客製化網站系統平台   立即填表諮詢 首頁 / 設計專欄 / 網頁設計公司常用的版面設計軟體有哪些？ 想進一步了解網頁設計服務？ 立即洽詢