FOLLOW這八個簡單步驟,設計出最強的網站!

更新於 發佈於 閱讀時間約 8 分鐘
根據調查,38%的網站造訪者會純粹因為網站不美觀而離開網頁,可見網站設計的重要性。要如何一步一步打造出超強的網站呢?今天,哈利熊為大家整理了網站設計的八大步驟。

HoliBear - 網站設計


網站設計八步驟

38%的網站造訪者會因為網站設計不美觀而離開網頁,可見網站設計的重要性。今天,哈利熊為大家整理了網站設計的八大步驟。

網站設計的八大步驟

網站設計的八大步驟

  1. 定義網站的目標和策略
  2. 研究最新的網站設計趨勢
  3. 選擇平台
  4. 選擇模板並開始客製化
  5. 選定品牌策略
  6. 增加並優化內容
  7. 發布網站
  8. 分析並改進


一、定義網站的目標和策略

要訂定目標是在我們幾乎所有網路行銷策略中最重要的一步,網站設計也不例外,在埋頭開始創作前,你必須先弄清楚這個做這個網站的目的是什麼。這會為未來網站設計的方向訂下重要的基礎。

網站目標有非常多種,以下只是一些常見的例子:

  • 單純陳列資訊?
  • 增加營收?
  • 打造品牌?
  • 收集聯絡資訊?
  • 成為產業具權威性的指標?
  • 與現有或潛在客戶增進互動?

如果今天製作的是針對單一產品的登陸頁面,那麼可以遵照SMART原則,訂下一個明確的、可衡量的、可達成的、相關的及有時限的目標。


二、研究最新的網站設計趨勢

網站設計的趨勢變化快速,但也有一些恆久不變的設計趨勢,你可以參考2020年五大設計趨勢,以及2020年網站設計趨勢,比如說動圖、聊天機器人等。

但記得,非常新穎、流行的趨勢不一定是最適合你的品牌的。

48%的人認為一個網站最重要的因子就是網站設計!所以在設計上絕對不能馬虎,除了研究最新的網站設計趨勢外,也可以看看競爭對手、業界的設計,決定你是要符合產業的設計趨勢,還是打破傳統的設計風格,做設計上的先鋒者。


三、選擇平台

想到網站設計,大部分的人可能會想要雇用專業人士,但有時候純客製化的網站成本非常非常高。但是還好,現在有非常多已經架好的網站以及電商平台供選擇,讓你能夠在完全不懂任何coding的情況下,快速的架出一個好網站。

架網的平台選擇非常多元,有Wix、Shopify、BigCommerce、Squarespace、GoDaddy等。

Website Builder Expert針對不同的平台做了品質上的比較,不同的平台可以因應不同的需求。

Website Builder Quality Scale

Website Builder Quality Scale

而針對有一些基礎coding知識的人來說,可以選擇WordPress。WordPress是網站設計最熱門的平台,可以幾乎客製化你想要的版型與風格、免費的使用,還可以插入一些非常有用的小工具。

哈利熊上也有許多優質的賣家,可以教你快速的架網,回答你網站設計中遇到的問題。


四、選擇模板並開始客製化

現在你已經確立了網站的目標、查清楚了最新的設計趨勢,並且選定了理想的平台,就可以開始選擇網站的模板。網站模板,也有些人稱之為網站的主題(Website Theme)是你網站的頁面配置。就有點像是一個房子的基本結構,牆面、地板、隔間等等,在你把沙發、床這些家具搬進來前的樣貌。

如果你選擇的是市面上常見的平台,那麼其實會內建非常多模板供選擇,通常這些模板也會根據不同產業進行分類,在篩選起來應該是蠻容易的。

比如說Wix,是非常適合架設登陸頁面的平台。

你可以根據網站目標以及產業進行選擇,可以選擇「線上商城」、「設計師」、「部落格」、「美妝」、「餐廳」、「健身」、「攝影」等。

選擇模板並開始客製化

選擇模板並開始客製化

接著,就可以選擇不同的版型。

選擇不同的版型

選擇不同的版型



五、選定品牌行銷策略

現在,我們要開始進入真正的設計階段!

在設計的時候,你應該把整體的品牌策略納入考量,這包括了品牌的顏色、風格、字體、圖片等等,在設計的時候,非常重要的一點就是保持品牌的一致性,每一個頁面、每一個元素都應該是要圍繞著品牌的策略進行的。

1. 品牌顏色

品牌的顏色是設計中非常重要的一環,不同的顏色會有不同的心理效果,刺激不同的情緒反應,所以在選擇顏色的時候就是至關重要的了。你可以參考這篇,顏色使用大全:不同性別、年齡層分別該用什麼顏色呢?

品牌顏色

品牌顏色

通常品牌會有一個主要的顏色,再加上兩到三個輔助色,而數據顯示,最受歡迎的顏色是藍色,在品牌最愛用的顏色中,有幾乎1/3的品牌都會選擇用藍色。

男生、女生分別最愛的顏色

男生、女生分別最愛的顏色

2. 字體風格

顏色對於人類大腦的影響很大,而字體也同樣有很大的影響。平均網站造訪者會讀取頁面上約略20%的文字,所以必須將字體設計得妥當、吸引人。

基本上,白領階層的品牌會想要使用比較經典的字體,英文的話比如說Arial或是Helvetica,中文的話可能是黑體或是華文細體,給人一種比較穩重、專業的感覺。

如果是崇尚有趣、活潑、玩樂的品牌,就可以使用比較抽象的字體。但記得,字體的選擇必須找到有趣與可讀性的平衡,不要為了讓字體過於花俏,而失去本來想要讓讀者閱讀的初衷。

3. 圖片

圖片是網站設計中非常重要的一個元素,對於客戶的點擊與互動有極大的助益。且圖片的使用可以讓客戶對你的品牌印象更為深刻,也更容易吸收內容與資訊,研究顯示,對於一份資訊,當我們用聽的,只能記住10%的內容,但當我們用視覺圖片的方式呈現,就可以記住65%的內容!

但是要小心,也不要放置過多的圖片,而拖慢了網站的速度。在網站設計最重要的7大元素中,我們有大部分的用戶期待網站在2秒內就加載完成。


六、增加並優化內容

現在,你應該對於網站上要放入什麼樣的資訊有了大概的想法,那麼就該做這三件事:

  1. 版面配置
  2. 內容放置
  3. 內容優化

1. 版面配置

版面配置(Positionging)指的是每一頁上的內容要該如何擺放。

根據Nelson Study的研究,我們發現通常一般人在讀一個網頁的時候,會使用英文字母F的閱覽方式。所以這也是為什麼通常導覽欄會放置在頁面的最上方,因為這通常是用戶第一個注意到的地方。而網站中最重要的資訊也應該考慮「F格式」,放置在相應的位置。

版面配置|F格式

版面配置|F格式

2. 內容放置

內容放置就是要將所有的內容放置其中,包括文字、圖片等。

文案是一個非常重要的行銷元素,可以參考網路商品的介紹文案怎麼寫,才能抓住客戶的心?或是哈利熊文案系列文章

3. 內容優化

內容優化(Content Optimization)指的是透過內容的優化,更好的讓用戶接收網站的資訊,也能進而轉換為較佳的網頁表現指標讓網頁在搜索引擎的排名更前面。

說到內容優化,也牽涉到了SEO(搜索引擎優化),透過對於頁面資訊的改進,來增加頁面在搜索引擎中的排行。網站中的每一個元素都有可能影響到網站的排名,包括文字、圖片、內部鏈結,甚至是在手機裝置上的反應,而對於SEO不熟悉的朋友,可以參考哈利熊的SEO系列文章


七、發布網站

當網站網站有了一個雛形,就進入到測試網站的階段,展示給家人、朋友、同事看,看看是否有錯誤,或哪裡需要改進,一般需要注意的地方有:

  • 測試所有的鏈結是否都正常運作,連結到正確的頁面
  • 所有的內容是否可讀,方便被找到
  • 離主頁不要超過3個點擊次數
  • 網站在各個裝置都是可以運作的,包括桌機、手機、平板
  • 任何頁面的加載速度不要超過5秒


八、分析成效並持續改進

在設計、放置內容、發布後,並不是結束!

網站發布完成後非常重要的一點就是要看網站的表現,很多平台都會有內建的分析器,或是類似的小程式可以插入,你也可以選擇使用Google Analytics,查看頁面的閱覽量、轉換率、每一頁的停留時間、跳出率等。


最後,再來總結一下網站設計的八大步驟吧!

  1. 定義網站的目標和策略
  2. 研究最新的網站設計趨勢
  3. 選擇平台
  4. 選擇模板並開始客製化
  5. 選定品牌策略
  6. 增加並優化內容
  7. 發布網站
  8. 分析並改進
留言
avatar-img
留言分享你的想法!
avatar-img
哈利熊HoliBear的沙龍
142會員
199內容數
哈利熊的職場生存之道與專業技能分享!
2021/05/12
B2B行銷,也就是企業對企業的業務拓展,是一種常見的模式,但是市面上關於網路行銷的資訊,大部分都在B2C的面向上討論。其實網路行銷也可以對B2B行銷帶來很大的助益,尤其在Covid-19疫情肆虐的今天,網路行銷工具更是可以派上用場。今天我們邀請訪問到具有9年B2B行銷經驗的專家張毓瑋來為我們分享
Thumbnail
2021/05/12
B2B行銷,也就是企業對企業的業務拓展,是一種常見的模式,但是市面上關於網路行銷的資訊,大部分都在B2C的面向上討論。其實網路行銷也可以對B2B行銷帶來很大的助益,尤其在Covid-19疫情肆虐的今天,網路行銷工具更是可以派上用場。今天我們邀請訪問到具有9年B2B行銷經驗的專家張毓瑋來為我們分享
Thumbnail
2021/05/06
價格是行銷4P中最有趣的部分之一,有許多行銷策略都是憑藉著在價格上面動的一些小心思,而讓大大提升客單價、企業營收增長。今天我們就來跟大家分享許多商家都愛用的「誘餌效應」!
Thumbnail
2021/05/06
價格是行銷4P中最有趣的部分之一,有許多行銷策略都是憑藉著在價格上面動的一些小心思,而讓大大提升客單價、企業營收增長。今天我們就來跟大家分享許多商家都愛用的「誘餌效應」!
Thumbnail
2021/03/17
接觸網路行銷的人,相信對SEO(搜尋引擎優化)這名詞不陌生,那SEM(搜尋引擎行銷)又是什麼呢?和SEO的差別在哪裡?在網路行銷中有什麼不同的用處?我們將為你解答!
Thumbnail
2021/03/17
接觸網路行銷的人,相信對SEO(搜尋引擎優化)這名詞不陌生,那SEM(搜尋引擎行銷)又是什麼呢?和SEO的差別在哪裡?在網路行銷中有什麼不同的用處?我們將為你解答!
Thumbnail
看更多
你可能也想看
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
在這個數位時代,網站成為企業與個人展示品牌形象、提供資訊的不可或缺之一。然而,一個成功的網站不是一朝一夕就能完成的,而是需要經過精心的網站設計流程。本文將深入探討網站建置的7大步驟,從需求瞭解到網頁正式上線,帶您一窺網站設計的全貌。
Thumbnail
在這個數位時代,網站成為企業與個人展示品牌形象、提供資訊的不可或缺之一。然而,一個成功的網站不是一朝一夕就能完成的,而是需要經過精心的網站設計流程。本文將深入探討網站建置的7大步驟,從需求瞭解到網頁正式上線,帶您一窺網站設計的全貌。
Thumbnail
在現今這個數位時代,網站已成為品牌最重要的接觸點之一,並能夠協助品牌達成以下三個主要任務:1. 提供顧客所需的資訊 2. 建立顧客對品牌的印象 3. 協助品牌創造銷售
Thumbnail
在現今這個數位時代,網站已成為品牌最重要的接觸點之一,並能夠協助品牌達成以下三個主要任務:1. 提供顧客所需的資訊 2. 建立顧客對品牌的印象 3. 協助品牌創造銷售
Thumbnail
本文將總結網頁設計的重點,包括設計的基本要素、使用者體驗設計、色彩運用、版面設計,以及設計如何幫助提升轉換率等等。以下將提供一些關於網頁設計的技巧和建議,協助你設計出一個具有吸引力、易用性的網頁,並提高網頁的流量和轉換率,讓您更好地了解網頁設計的要素和技巧,設計出一個成功的網頁!
Thumbnail
本文將總結網頁設計的重點,包括設計的基本要素、使用者體驗設計、色彩運用、版面設計,以及設計如何幫助提升轉換率等等。以下將提供一些關於網頁設計的技巧和建議,協助你設計出一個具有吸引力、易用性的網頁,並提高網頁的流量和轉換率,讓您更好地了解網頁設計的要素和技巧,設計出一個成功的網頁!
Thumbnail
網頁設計風格代表你的品牌形象,同時首頁是接觸用戶的最前線,如何在首頁吸引用戶留下,繼續瀏覽網頁是最關鍵的一步,要如何留下他們甚至要轉換成你的客戶?請檢查一下你的網頁有沒有以下10點網頁必備元素,打造出最強的landing Page吧。
Thumbnail
網頁設計風格代表你的品牌形象,同時首頁是接觸用戶的最前線,如何在首頁吸引用戶留下,繼續瀏覽網頁是最關鍵的一步,要如何留下他們甚至要轉換成你的客戶?請檢查一下你的網頁有沒有以下10點網頁必備元素,打造出最強的landing Page吧。
Thumbnail
很多時候我們都在專注於擁有一個網站、追求能被搜尋引擎認可,但卻忘了到頭來網站視覺還得經的起使用者考驗。別說是使用者,今天若有兩種不同網頁設計視覺在你眼前,一個精緻但後台可能有問題,另一個粗糙卻有完整的後台功能,你會怎麼選?
Thumbnail
很多時候我們都在專注於擁有一個網站、追求能被搜尋引擎認可,但卻忘了到頭來網站視覺還得經的起使用者考驗。別說是使用者,今天若有兩種不同網頁設計視覺在你眼前,一個精緻但後台可能有問題,另一個粗糙卻有完整的後台功能,你會怎麼選?
Thumbnail
很多人有很棒的產品或服務,卻少了一個可以把路人轉換成消費者的高效銷售頁,本文分享銷售頁設計的5...
Thumbnail
很多人有很棒的產品或服務,卻少了一個可以把路人轉換成消費者的高效銷售頁,本文分享銷售頁設計的5...
Thumbnail
根據調查,38%的網站造訪者會純粹因為網站不美觀而離開網頁,可見網站設計的重要性。要如何一步一步打造出超強的網站呢?今天,哈利熊為大家整理了網站設計的八大步驟。
Thumbnail
根據調查,38%的網站造訪者會純粹因為網站不美觀而離開網頁,可見網站設計的重要性。要如何一步一步打造出超強的網站呢?今天,哈利熊為大家整理了網站設計的八大步驟。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News