FOLLOW這八個簡單步驟，設計出最強的網站！
更新於 2020/08/21閱讀時間約 8 分鐘
根據調查，38%的網站造訪者會純粹因為網站不美觀而離開網頁，可見網站設計的重要性。要如何一步一步打造出超強的網站呢？今天，哈利熊為大家整理了網站設計的八大步驟。
網站設計八步驟
38%的網站造訪者會因為網站設計不美觀而離開網頁，可見網站設計的重要性。今天，哈利熊為大家整理了網站設計的八大步驟。
- 定義網站的目標和策略
- 研究最新的網站設計趨勢
- 選擇平台
- 選擇模板並開始客製化
- 選定品牌策略
- 增加並優化內容
- 發布網站
- 分析並改進
一、定義網站的目標和策略
要訂定目標是在我們幾乎所有網路行銷策略中最重要的一步，網站設計也不例外，在埋頭開始創作前，你必須先弄清楚這個做這個網站的目的是什麼。這會為未來網站設計的方向訂下重要的基礎。
網站目標有非常多種，以下只是一些常見的例子：
- 單純陳列資訊？
- 增加營收？
- 打造品牌？
- 收集聯絡資訊？
- 成為產業具權威性的指標？
- 與現有或潛在客戶增進互動？
如果今天製作的是針對單一產品的登陸頁面，那麼可以遵照SMART原則，訂下一個明確的、可衡量的、可達成的、相關的及有時限的目標。
二、研究最新的網站設計趨勢
但記得，非常新穎、流行的趨勢不一定是最適合你的品牌的。
48%的人認為一個網站最重要的因子就是網站設計！所以在設計上絕對不能馬虎，除了研究最新的網站設計趨勢外，也可以看看競爭對手、業界的設計，決定你是要符合產業的設計趨勢，還是打破傳統的設計風格，做設計上的先鋒者。
三、選擇平台
想到網站設計，大部分的人可能會想要雇用專業人士，但有時候純客製化的網站成本非常非常高。但是還好，現在有非常多已經架好的網站以及電商平台供選擇，讓你能夠在完全不懂任何coding的情況下，快速的架出一個好網站。
架網的平台選擇非常多元，有Wix、Shopify、BigCommerce、Squarespace、GoDaddy等。
Website Builder Expert針對不同的平台做了品質上的比較，不同的平台可以因應不同的需求。
而針對有一些基礎coding知識的人來說，可以選擇WordPress。WordPress是網站設計最熱門的平台，可以幾乎客製化你想要的版型與風格、免費的使用，還可以插入一些非常有用的小工具。
哈利熊上也有許多優質的賣家，可以教你快速的架網，回答你網站設計中遇到的問題。
四、選擇模板並開始客製化
現在你已經確立了網站的目標、查清楚了最新的設計趨勢，並且選定了理想的平台，就可以開始選擇網站的模板。網站模板，也有些人稱之為網站的主題（Website Theme）是你網站的頁面配置。就有點像是一個房子的基本結構，牆面、地板、隔間等等，在你把沙發、床這些家具搬進來前的樣貌。
如果你選擇的是市面上常見的平台，那麼其實會內建非常多模板供選擇，通常這些模板也會根據不同產業進行分類，在篩選起來應該是蠻容易的。
比如說Wix，是非常適合架設登陸頁面的平台。
你可以根據網站目標以及產業進行選擇，可以選擇「線上商城」、「設計師」、「部落格」、「美妝」、「餐廳」、「健身」、「攝影」等。
接著，就可以選擇不同的版型。
五、選定品牌行銷策略
現在，我們要開始進入真正的設計階段！
在設計的時候，你應該把整體的品牌策略納入考量，這包括了品牌的顏色、風格、字體、圖片等等，在設計的時候，非常重要的一點就是保持品牌的一致性，每一個頁面、每一個元素都應該是要圍繞著品牌的策略進行的。
1. 品牌顏色
品牌的顏色是設計中非常重要的一環，不同的顏色會有不同的心理效果，刺激不同的情緒反應，所以在選擇顏色的時候就是至關重要的了。你可以參考這篇，顏色使用大全：不同性別、年齡層分別該用什麼顏色呢？
通常品牌會有一個主要的顏色，再加上兩到三個輔助色，而數據顯示，最受歡迎的顏色是藍色，在品牌最愛用的顏色中，有幾乎1/3的品牌都會選擇用藍色。
2. 字體風格
顏色對於人類大腦的影響很大，而字體也同樣有很大的影響。平均網站造訪者會讀取頁面上約略20%的文字，所以必須將字體設計得妥當、吸引人。
基本上，白領階層的品牌會想要使用比較經典的字體，英文的話比如說Arial或是Helvetica，中文的話可能是黑體或是華文細體，給人一種比較穩重、專業的感覺。
如果是崇尚有趣、活潑、玩樂的品牌，就可以使用比較抽象的字體。但記得，字體的選擇必須找到有趣與可讀性的平衡，不要為了讓字體過於花俏，而失去本來想要讓讀者閱讀的初衷。
3. 圖片
圖片是網站設計中非常重要的一個元素，對於客戶的點擊與互動有極大的助益。且圖片的使用可以讓客戶對你的品牌印象更為深刻，也更容易吸收內容與資訊，研究顯示，對於一份資訊，當我們用聽的，只能記住10%的內容，但當我們用視覺圖片的方式呈現，就可以記住65%的內容！
但是要小心，也不要放置過多的圖片，而拖慢了網站的速度。在網站設計最重要的7大元素中，我們有大部分的用戶期待網站在2秒內就加載完成。
六、增加並優化內容
現在，你應該對於網站上要放入什麼樣的資訊有了大概的想法，那麼就該做這三件事：
- 版面配置
- 內容放置
- 內容優化
1. 版面配置
版面配置（Positionging）指的是每一頁上的內容要該如何擺放。
根據Nelson Study的研究，我們發現通常一般人在讀一個網頁的時候，會使用英文字母F的閱覽方式。所以這也是為什麼通常導覽欄會放置在頁面的最上方，因為這通常是用戶第一個注意到的地方。而網站中最重要的資訊也應該考慮「F格式」，放置在相應的位置。
2. 內容放置
內容放置就是要將所有的內容放置其中，包括文字、圖片等。
文案是一個非常重要的行銷元素，可以參考網路商品的介紹文案怎麼寫，才能抓住客戶的心？或是哈利熊文案系列文章。
3. 內容優化
內容優化（Content Optimization）指的是透過內容的優化，更好的讓用戶接收網站的資訊，也能進而轉換為較佳的網頁表現指標讓網頁在搜索引擎的排名更前面。
說到內容優化，也牽涉到了SEO（搜索引擎優化），透過對於頁面資訊的改進，來增加頁面在搜索引擎中的排行。網站中的每一個元素都有可能影響到網站的排名，包括文字、圖片、內部鏈結，甚至是在手機裝置上的反應，而對於SEO不熟悉的朋友，可以參考哈利熊的SEO系列文章。
七、發布網站
當網站網站有了一個雛形，就進入到測試網站的階段，展示給家人、朋友、同事看，看看是否有錯誤，或哪裡需要改進，一般需要注意的地方有：
- 測試所有的鏈結是否都正常運作，連結到正確的頁面
- 所有的內容是否可讀，方便被找到
- 離主頁不要超過3個點擊次數
- 網站在各個裝置都是可以運作的，包括桌機、手機、平板
- 任何頁面的加載速度不要超過5秒
八、分析成效並持續改進
在設計、放置內容、發布後，並不是結束！
網站發布完成後非常重要的一點就是要看網站的表現，很多平台都會有內建的分析器，或是類似的小程式可以插入，你也可以選擇使用Google Analytics，查看頁面的閱覽量、轉換率、每一頁的停留時間、跳出率等。
最後，再來總結一下網站設計的八大步驟吧！
- 定義網站的目標和策略
- 研究最新的網站設計趨勢
- 選擇平台
- 選擇模板並開始客製化
- 選定品牌策略
- 增加並優化內容
- 發布網站
- 分析並改進
為什麼會看到廣告
留言0
查看全部
你可能也想看
Google News 追蹤
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
入股後隨著時間的推進，我面臨到的不單是收入始終保持在一個水位，如魚力爭上游，不進則退，面臨到的是家人，我來自相對保持的鄉下家庭，父母心中還是保有玩股票傾家蕩產的思想，不只一次跟我說還是去工作，當然我能靠股市收入活下來他們也看在眼裡。
並非如想像中引發家庭革命，我心中的叛逆因子隨著年紀增長，轉化成以
虞希的演員之路順遂、可謂劇場界的一顆星，但他卻感到疲憊，該是任性停下來的時候了。也許會讓人失望，但他卻知道有個人——班，會陪伴著自己。
「還記得用身體回報你的約定嗎？」
班沒忘記那個約定，他從學生時代就一直等著虞希…！
來，在休息時聽聽過去的他們經歷了什麼，而27歲的現在又會迎接什麼樣的未來呢？
說來真是有緣！這暮榆之年，在芸芸眾生裡，因緣際會能與王老師相逢、相識，又有幸成了師生，一起提筆共寫作，找到樂齡自在的幸福。
想加強自己的英文寫作文筆，讓文字讀起來更有英文專業的感覺嗎？今天教的是學校課本幾乎都沒教過，但專業作家會用來潤飾的好用句型。未來也會多介紹國人鮮少知道也鮮少會用，但外國書籍有在用的句型，給大家吃一錠營養劑補一補自己的文筆。先來看「It follows that + 子句」到底是什麼意思、怎麼用？
相遇有其理由，謝謝宇宙讓我們在人海中遇見了！
那天聽著她驕傲且興奮的分享孩子出生後可以清楚表達的那刻，確定是孩子選擇父母而不是以往老掉牙聽到的「父母又不是我們能選擇的」想法。
這個故事我聽過很多遍，更多次是從許多心靈書籍裡頭看到的敘述。
青春期或更早之前，不能理解自己所處的環境，恨不得..
服役期間擔任領導士官的經驗對我格外重要，在步兵學校的士官訓期間，教官不斷灌輸我們身先士卒，士官幹部要懂得帶人帶心，面對部隊的老鳥士兵更是如此，幹部絕非是單純動口不動手，甚至是需要第一個付諸行動的人，如果我們沒有這樣的決心，根本帶不動人。雖然義務役當時只短短一年役期，但這樣的觀念一直深植我的內心，也大
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
入股後隨著時間的推進，我面臨到的不單是收入始終保持在一個水位，如魚力爭上游，不進則退，面臨到的是家人，我來自相對保持的鄉下家庭，父母心中還是保有玩股票傾家蕩產的思想，不只一次跟我說還是去工作，當然我能靠股市收入活下來他們也看在眼裡。
並非如想像中引發家庭革命，我心中的叛逆因子隨著年紀增長，轉化成以
虞希的演員之路順遂、可謂劇場界的一顆星，但他卻感到疲憊，該是任性停下來的時候了。也許會讓人失望，但他卻知道有個人——班，會陪伴著自己。
「還記得用身體回報你的約定嗎？」
班沒忘記那個約定，他從學生時代就一直等著虞希…！
來，在休息時聽聽過去的他們經歷了什麼，而27歲的現在又會迎接什麼樣的未來呢？
說來真是有緣！這暮榆之年，在芸芸眾生裡，因緣際會能與王老師相逢、相識，又有幸成了師生，一起提筆共寫作，找到樂齡自在的幸福。
想加強自己的英文寫作文筆，讓文字讀起來更有英文專業的感覺嗎？今天教的是學校課本幾乎都沒教過，但專業作家會用來潤飾的好用句型。未來也會多介紹國人鮮少知道也鮮少會用，但外國書籍有在用的句型，給大家吃一錠營養劑補一補自己的文筆。先來看「It follows that + 子句」到底是什麼意思、怎麼用？
相遇有其理由，謝謝宇宙讓我們在人海中遇見了！
那天聽著她驕傲且興奮的分享孩子出生後可以清楚表達的那刻，確定是孩子選擇父母而不是以往老掉牙聽到的「父母又不是我們能選擇的」想法。
這個故事我聽過很多遍，更多次是從許多心靈書籍裡頭看到的敘述。
青春期或更早之前，不能理解自己所處的環境，恨不得..
服役期間擔任領導士官的經驗對我格外重要，在步兵學校的士官訓期間，教官不斷灌輸我們身先士卒，士官幹部要懂得帶人帶心，面對部隊的老鳥士兵更是如此，幹部絕非是單純動口不動手，甚至是需要第一個付諸行動的人，如果我們沒有這樣的決心，根本帶不動人。雖然義務役當時只短短一年役期，但這樣的觀念一直深植我的內心，也大