網站首頁設計時有哪些準備重點?白話文一次報你知

2024-08-26

首頁規劃的版面區塊有哪些?

首頁是網站的門面,是第一次向訪客展示網站內容的地方。訪客在造訪網站時,首頁是他們最先看到的畫面,因此首頁設計對於網站整體風格具有決定性的影響。如果首頁設計能夠吸引訪客的眼球,並讓他們有興趣繼續瀏覽網站,可以進一步提升網站的使用者體驗。

 

以公司企業網站來說,首頁通常會規劃以下幾個區塊,可搭配下方圖片一起服用:

 

頁首(Header)

頁首通常是指網頁最上方的位置,包含企業的品牌LOGO、主選單、站內搜尋、語言切換等功能列。

 

主視覺

主視覺通常位於首頁的最上方,用來營造網站給人的第一眼印象。也可以採用輪播圖的方式,用來展示企業的產品、服務或活動。

 

主要內容區(公司簡介、產品或服務項目、最新消息)

主要內容區通常位於輪播圖下方,是網站首頁的核心內容,包括公司簡介、產品展示、新聞資訊等。

 

行動呼籲 (CTA)

CTA全名為Call to Action,顧名思義就是希望透過這個區塊可以促進使用者進行某一個舉動,例如說連結到「聯絡我們」,透過這個區塊促成使用者進一步與企業取得聯繫。

 

頁底(Footer)

頁底通常包含企業的聯絡方式、社交媒體連結、版權宣告等。

 

延伸閱讀網頁設計中的版權宣告(Copyright©)應該怎麼寫?

 

 

part of index

 

首頁設計通常會經歷哪些流程步驟?

 

1. 需求探索、蒐集提案資源

網頁設計師會先與客戶討論網站目標、目標使用者、功能需求等,以便瞭解網站首頁設計的目標期望。同時也會分析競爭對手的網站,以便瞭解市場的情況和最新的設計趨勢。

 

2. 製作首頁提案稿

完成需求探索後,網頁設計師會根據討論後的結果確立首頁的設計風格、版位配置,開始進行首頁提案稿的製作。由於提案稿的目的是用來和客戶確認網頁設計風格的方向目標,因此通常會採用版面剪貼的快速設計模式,依報價多寡提供出2~3個風格及版位配置不同的提案稿,讓專案相關人員及決策主管進行討論,決定網站的視覺風格、配色比重、設計元素、字體運用,決議後於下一階段進行正式的首頁設計稿。

 

3. 製作首頁設計稿

根據提案稿討論後的方向,設計師們在這個階段製作出與實際網頁相似度達90%的首頁設計稿。這個階段在設計圖稿中所採用的圖片、文字都將盡可能採用實際而不只是剪貼模擬的企業LOGO、產品圖、情境圖、文字。首頁設計的目的不只是用來定義網站的視覺風格,同時也將用來提供後續網站各內頁設計的依據,延續並建立網站一致性視覺設計的標準。

 

延伸閱讀:UI、UX是什麼?5分鐘快速看懂UI、UX設計差在哪!

 

website design layout

 

4. 首頁最終定稿

在設計及製作的過程中,多多少少會有一些調整和修改,修改次數以「事不過三」為原則,在3次的討論中完成所有修改。完成修改後,網頁設計師會製作最終設計稿,並與客戶簽署設計確認文件。

 

 

委託網頁設計公司進行首頁設計時,需準備哪些圖文素材?

 委託網頁設計公司進行網站首頁視覺設計時,您可能需要準備以下素材:

 

延伸閱讀:網站/網頁設計公司這樣挑不踩雷!5大原則教你找到專業設計公司

 

網站參考案例

每個人對於設計風格都有不同的主觀認定,你覺得生動活潑的定義,不一定跟別人一樣。如果你有喜歡的網站,可以提供給設計師參考,也讓設計師了解你對設計風格的感覺是什麼。提供參考網站案例除了可以用來溝通網頁設計風格外,也可以用來溝通你想要的介面設計或功能設計,透過視覺畫面的討論,可用來確認雙方面對網頁設計的想法或認知是否一致。

 

延伸閱讀:網站設計作品案例這麼多,該如何挑選網站參考範例?

 

企業品牌識別 / LOGO電子檔

企業品牌識別包含品牌標誌(LOGO)、色彩計畫、字體家族、圖像及相關設計元素運用等,準備完整的企業識別資料有助於讓設計師對你的企業品牌有完整的了解,並採用適合的設計方式運用到首頁設計中。如果你手上沒有完整的企業識別資料,至少提供LOGO電子檔(向量格式)給設計師。向量格式(通常是*.ai檔)的LOGO檔可以讓設計師自由縮放圖像尺寸而不失真,讓企業LOGO在網站上做最佳的呈現。

 

 

公司簡介文字

包括公司簡介(約200字內)、產品或服務介紹、目標市場說明等。公司簡介盡量提及企業所提供的產品項目及服務名稱,不僅能讓首次到訪的客戶確實了解公司的營業項目,同時也能讓google抓取進入索引資料庫,有助於提升公司網站搜尋排名。

 

延伸閱讀:SEO是什麼?網站SEO優化入門指南全解析!

 

 

產品圖片 / 形象圖片

如果你的公司主要銷售產品,那麼你需要準備品質好的產品圖片,讓設計師可以充份發揮。如果你有委託專業攝影師進行形象拍攝工作,那將會使整個網站視覺形象加分,不僅真實呈現公司形象,同時也能讓人感受到企業文化溫度。

 

延伸閱讀如何提昇形象網站的質感?談照片與攝影的重要性

 

 

網站首頁版面及功能需求

包括首頁的目標受眾、版面區塊配置、視覺風格需求、功能需求等。首頁設計就像是一頁式的公司簡介PPT,必須在短短幾個區塊完成公司介紹,至少讓訪客在首頁就能了解公司的定位、銷售產品或販賣服務、企業優勢為何。將預期的首頁版面區塊配置提供給設計師,或是與設計師共同討論首頁版面配置,透過首頁版面配置的巧妙安排,就能將公司特色呈現出來。

 

其他補充資料

如果有其他資料,如產品目錄、公司簡介PPT簡報、產業背景報告等,也可以提供給設計師。產品目錄可以讓設計師了解產品分類結構(兩層或三層)、產品頁文字資料多寡,用來思考未來與產品頁面設計的銜接。公司簡介PPT簡報和產業報告這兩項,可以讓設計師對於你的公司背景概況有基本的認識與了解,設計師不一定對每個產業都很了解,不同的產業在網頁設計上都有不同的設計慣例,透過這些補充資料可以讓設計師快速了解你的產業定位,將企業優勢突顯出來。

 

 


 

了解如何挑選網站設計案例後,你也可以參考凱士網頁設計作品,看看是否有合適的參考範例。若是打算將設計工作交給網頁公司,該如何在眾多的網頁公司找到適合自己的呢?

 

 

* 歡迎分享這篇文章,分享時請務必加入文章來源網址。

 

訂閱文章

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

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

 

想詢問網站設計方面的問題?

做為網頁設計公司的領導品牌,凱士深受B2B外銷公司、上市櫃公司及外商公司推薦,10年來累積超過200個網頁設計作品

我們很樂意用淺顯易懂的方式讓我們的客戶輕鬆了解網頁設計的各種疑難雜症。

 

如果您對網站設計規劃有任何問題,歡迎聯絡凱士,我們將會為您提供最適合的建議。

 

 

追蹤文章

想要收到網頁設計領域的相關訊息嗎?

我們會不定時在FB更新上面的網頁設計相關文章,歡迎追蹤凱士臉書專頁