重新設計網站的 8 個步驟 2023 年網站順利改造的清單

Tooltester 受到像您這樣的讀者的支持。 當您透過我們的連結購買時，我們可能會賺取聯盟佣金，這使我們能夠免費提供我們的研究。

您的網站是否看起來陳舊、醜陋、笨重？ 無法正常工作？ 那麼網站可能需要重新設計。

當然，這說來容易做來難。

完美的範例就是我們最近改版的 Tooltester 網站。 重新設計工作花了我們1.5年的時間。 毫不誇張。

在您奔向山丘之前，我們應該提到，作為重大品牌重塑活動的一部分，我們重新設計了我們的網站。 這可能使重新設計過程比一般的網站重新啟動工作更加複雜。

不過，在這個過程中，我們獲得了有關盡可能順利地重新設計網站的寶貴見解。 我們將所學到的知識整理成一個可靠的 8 步驟網站重新設計路線圖，如果您打算重新設計自己的網站，您會發現該路線圖很有幫助：

分析

1. 分析您目前的網站
2. 分析您的競爭對手

規劃

1. 設定重新設計的目標
2. 檢查您網站的技術設置
3. 委派網站重新設計的責任

實現

1. 為重新設計做好準備
2. 發射日！
3. 不斷改進您的網站

我們也將分享如何將這些步驟應用到我們自己的網站重新設計專案中。 但首先，讓我們解決一些基本問題。

即：為什麼您需要重新設計網站以及需要花費多少費用？

為什麼要重新設計網站？

重新設計網站的原因包括：

• 您的網站設計已經過時：您最初可能喜歡您網站的外觀。 但現在，您發現它的視覺元素難看或與最新的網頁設計趨勢不同步。 或者您的網站可能沒有響應式設計，導致行動裝置上的使用者難以瀏覽您的網站。
• 您的網站基於過時的技術構建：如果您網站的內容管理系統 (CMS) 陳舊且很少更新，則可能存在嚴重的安全缺陷。 在這種情況下，您實際上是在邀請駭客竊取您的資料或關閉您的整個網站。
• 您需要新的網站功能和功能：隨著時間的推移，您可能需要網站做比最初建立它更多的事情。 例如，如果您要在部落格中新增線上商店，那麼您需要重新設計您的網站以包含此類商店功能。
• 薄弱的網站設計會影響您的搜尋排名：例如，自2019 年7 月以來，Google 採取了行動優先的方法對網站頁面進行索引和排名。未針對行動裝置進行優化的網站可能會導致搜尋排名較低，因此需要重新設計。 確保您使用的網站建立器或 CMS 非常適合 SEO。
• 您正在重塑品牌：您的公司正在進行重大品牌重塑，並徹底改變其品牌價值、商標、顏色等。 作為此過程的一部分，您需要重新設計您的行銷材料 - 其中包括重新設計您的網站。

最後一個原因尤其引起我們的共鳴。

我們決定重新設計我們的網站，因為我們覺得我們的設計不再代表我們作為一家公司的身份。 作為上下文，我們的舊主頁如下所示：

我們之前的網站設計

我們的舊網站看起來好像是由 3 人操作的，這在我們歷史上的某個時刻是準確的。 但現在，Tooltester 由超過 10 人的優秀團隊經營！

因此，我們希望我們的網站更加完善，並傳達經驗豐富的團隊如何經營網站，致力於幫助小型企業找到滿足其需求的完美工具。

網站重新設計要多少錢？

如果您正在聘請專業人員來為您處理整個工作，您可以預期花費以下費用來重新設計網站：

• 設計頁面模板（包括行動網站的模板）：每頁 100-300 美元
• 撰寫 8 頁 WordPress 網站主題： 1,500 美元–3,000 美元
• 取得虛擬主機、網域名稱和電子郵件地址：每月 10-30 美元，取決於您每月的網站流量

或者，您可能更喜歡 DIY 網站創建方法，並使用網站建立器從頭開始建立新網站。 在這種情況下，您的重新設計成本可能僅為每月 10 至 25 美元，具體取決於您選擇的網站建立器。

例如，Wix 網站建立器的 Combo 套餐每月收費 16 美元，其中包括 2GB 儲存空間和免費 SSL 憑證。 另一方面，在 Squarespace 的個人套餐上建立新網站的費用為每月 16 美元，該套餐提供無限頻寬、電子商務功能、高級網站分析等。

（我們還提供了完整的網站費用指南，您可以查看！）

在我們的情況下，我們決定聘請一家品牌代理商來監督我們的網站重新設計流程。 該機構幫助我們為近 20 種頁面創建了新徽標和自訂網頁設計模板。

他們的服務並不便宜：我們預留了 5 位數的預算與他們合作。 但他們做得非常出色，我們對結果非常滿意！

即使您沒有這樣的預算，您也會發現您網站的重新設計過程將包括與我們非常相似的步驟。

分析

網站重新設計工作可分為三個主要階段：

1. 分析
2. 規劃
3. 實現

首先，讓我們深入分析流程...

1. 分析您目前的網站

您現有的網站有多少需要更改 - 您需要重新設計整個網站還是僅部分網站？

考慮以下事項：

• 技術設定：如果您現有的網站非常過時或難以使用，也許您需要更改網站建立器或 CMS。 或者，也許您只需要重新編碼主題即可提高網站效能。
• 搜尋引擎優化 (SEO)：對您的網站進行 SEO 審核，以檢查是否存在可能損害其搜尋排名的問題。 具有內建 SEO 審核功能的 SEO 工具，例如 Screaming Frog 和 Ahrefs（網站審核，可免費使用），可以幫助您在決定下一步之前識別此類問題。 例如，如果審核報告您的網站上有 404 個錯誤頁面，您可能需要將指向這些頁面的連結重新導向到其他地方。
• 設計：您網站的設計元素（仍然）現代且專業嗎？ 它們準確地反映了您的品牌嗎？ 如果您要新增新的網站功能，您可能還需要重新設計您的網站以適應它們（如前所述）。 這裡有一些尋找靈感的技巧。
• 導航和使用者體驗 (UX)：隨著時間的推移，您可能會收到使用者抱怨網站的某些部分如何難以導航，或者某些功能如何難以找到。 優先重新設計這些有問題的介面，以改善使用者體驗。

有多種工具可以在您的網站上執行此類「健康檢查」。 以下是一些可以幫助您入門的內容：

• Google Analytics ：用於監控您的網站流量和著陸頁指標
• Hotjar ：一種熱圖工具，用於追蹤使用者行為並了解網站訪客如何與您的網頁交互
• Saber 回饋：在您的網站上嵌入回饋按鈕，供使用者針對他們發現的任何網站問題提交回饋

2. 分析你的競爭對手

檢查完您的網站後，將注意力轉向競爭對手建立的網站。

對您所在行業的領導者及其網站的功能進行市場調查。 他們做對了什麼？ 您競爭對手的網站可能具有值得竊取的功能 - 咳咳，我們的意思是，適應您自己的網站。 您也可以考慮讓您的網站比他們的網站更好。

也就是說，不要將自己限制在您所在空間的網站上。 其他行業可能擁有與您的網站類似的網站，並採用獨特的方法來服務目標受眾。 將此類方法從其他行業「移植」到您的網站可能是幫助其在您的領域脫穎而出的關鍵！

當我們分析網站的競爭時，我們的品牌代理商要求提供我們的競爭對手名單以供他們審查。 他們還從其他行業的網站中獲取了很好的重新設計範例。 例如，既然我們幫助用戶比較網站工具，該機構還分析了酒店預訂平台如何幫助用戶比較酒店。

在進行所有這些研究之後，品牌機構根據我們領域的其他品牌制定了我們的定位。

由於我們的許多競爭對手對工具評論採取非個人化的方式，並且不與讀者進行太多互動，因此我們決定 Tooltester 將成為我們讀者的“數位專家夥伴”，成為權威而友好的評論來源。

這種定位極大地影響了我們網站的重新設計。 例如，我們決定在網頁上突出 Tooltester 團隊的成員，以喚起個人和相關的工具審查方法。

只要查看我們的「關於」頁面，您就會明白我們的意思！

規劃

確定您的網站需要改進的部分？ 接下來，您將計劃如何重新設計它們。 這涉及：

3. 設定重新設計的目標

列出您希望透過重新設計網站實現的整體業務目標。 這些目標將指導您的網站重新設計策略。

總體目標的範例包括：

• 在明年內將您的自然流量加倍
• 刷新部落格上的所有內容
• 減少用戶在線上商店下訂單時面臨的摩擦

接下來，將您的總體目標分解為更小的、可操作的目標。 這些是您為實現總體目標將採取的實際步驟。

例如，為了實現明年自然流量翻倍的總體目標，您可能需要設定子目標，例如：

• 為您的網站設定關鍵字跟踪
• 更新某個部落格文章以更好地定位某個關鍵字
• 將 Google Analytics 連接到您的網站以追蹤您的每月自然流量

另一方面，為了實現減少電子商務摩擦的總體目標，您的子目標可能包括：

• 將多頁結帳表單重新設計為一頁表單
• 建立一個按鈕，讓用戶在將商品加入購物車後直接進入結帳
• 新增安全儲存客戶信用卡資訊以供將來使用的功能

最後，計劃何時執行每個子目標。

嘗試將總體目標分解為盡可能多的單獨的子目標，然後將它們分開。 這樣，您就可以更好地控制變更（如果有）對搜尋引擎排名的影響。

4. 檢查網站的技術設置

您的網站需要建立在強大的技術基礎上才能實現有效的效能。 藉此機會檢查您網站的技術規格是否仍然可以很好地為您服務或是否需要升級。

例如，您可能想要將網站的 CMS 或網站建立器變更為可提供更快頁面載入速度的內容。 或者，如果您想擴展網站的功能，請檢查安裝第三方外掛程式是否可以解決問題，或者您是否需要聘請網頁開發團隊為您編寫該功能。

網站技術設定的所有變更都會產生成本（請參閱上面有關網站重新設計成本的討論），因此請適當預算。

在我們的案例中，我們的網站使用了 WordPress CMS，並打算繼續使用它。 因此，我們「簡單」地需要建立一個新的 WordPress 主題並啟動它，以更改我們網站的外觀，而不是遷移 CMS。

（我們在這裡用引號表示“簡單”，因為創建這個新的 WordPress 模板比聽起來要困難得多！）

我們也嘗試不對網站的功能進行太多更改。 這是為了避免使我們的網站重新設計專案變得比需要的更加複雜（而且它已經非常複雜）。

5. 委派網站重新設計的責任

您已經制定了完成網站重新設計所需完成的目標。 現在，你會找到執行這些任務的人。

將目標分為兩類：

1. 由您的團隊內部處理的目標
2. 由招聘機構或自由工作者在外部處理的目標

如果您的團隊擁有處理某些目標所需的知識和經驗，那麼將這些目標分配給他們是理所當然的。 特別是，如果某些目標涉及處理機密業務訊息，您可能希望將某些目標委託給您的團隊而不是第三方。

但如果您想讓外人對您的網站重新設計專案有新的視角和專家意見，那麼引入第三方專業人士可能是一個不錯的選擇。 這就是我們為網站重新設計所做的：我們聘請了一家品牌代理商為我們的網站提供新的設計模板。 另外，我們聘請了一名程式設計師將這些設計實施到我們的新網站主題中。

如果您打算聘請自由網頁設計師和程式設計師來進行網站重新設計項目，您可以在 Upwork、Fiverr 或 LinkedIn 等平台上發布您的請求。 或者，您也可以在此處找到其他網頁設計服務。 您也可以向網路中的人尋求建議。

當您尋求外部協助時，我們的建議是找到專門從事您所需的特定服務的人員。 程式設計師通常不是優秀的網頁設計師，反之亦然。

實現

現在，您將親自參與實際的網站重新設計工作！

6. 準備重新設計

您的團隊和您聘用的外部專業人員將開始執行您先前確定的子目標。 他們的任務可能包括：

• 創建新的網站設計： Figma 是當今首選的標準介面設計平台
• 在登台伺服器上建立新網站：此伺服器為您提供測試環境，以便您在新網站上線之前預覽新網站的外觀並消除任何錯誤
• 測試所有內容以確保它們正常工作：點擊每個連結和每個按鈕。 檢查您的網站在桌面和行動裝置上的顯示方式。 進行測試線上訂單。 測試一切！
• 備份舊網站：不要跳過此步驟。 如果在啟動新設計的網站時出現問題，您將需要先前網站的備份以供參考。 您還應該下載舊網站的離線副本。
• 如果您要變更 URL，請設定 301 連結重新導向：這可以幫助使用者繼續造訪您的頁面，而不會遇到令人討厭的 404 錯誤。 從 SEO 的角度來看，設定連結重新導向還可以幫助搜尋引擎對新 URL 進行排名，並將舊 URL 頁面累積的「連結汁」歸因於新 URL 頁面。

當您完成每個子目標時，請將它們從您的清單中劃掉！ 這樣做會讓您在倒數計時時保持動力：

7. 啟動日！

在仔細檢查一切是否正常後，啟動重新設計的網站。 這可能涉及將新網站從登台伺服器遷移到生產伺服器（即託管即時網站的伺服器）。

即使在慶祝發佈時，也要密切關注新網站的表現。 訪客如何與您的網站互動？ 他們的使用者體驗是否與您計劃的一樣好？

如果您從搜尋引擎結果頁面獲得許多訪客，您也可能會遇到暫時的流量損失。 這是因為當您對網站進行重大更改時，搜尋排名下降是正常的。 但是，如果運氣好的話，您的排名以及流量數字應該會迅速恢復並變得更好。

8.不斷改善網站

新設計的網站上線後，您的網站重新設計專案就完成了。 但工作永遠沒有完成！

網頁設計趨勢隨著時間的推移而變化，因此您可能需要在幾年內再次重新設計您的網站，以使其看起來新鮮和現代。

除此之外，監控您的網站以找出更多潛在的改進領域。 分析工具（例如我們上面提到的那些工具）可以幫助解決此問題。

如果您遇到可以快速輕鬆修復的問題（例如被忽視的損壞連結），請立即解決它們。 相較之下，其他問題可能需要更多的時間和精力來解決。 即使您選擇此時不處理它們，也請將它們記下來。

當您決定下次重新設計網站時要做什麼時，它們會很有用！

重新設計網站：最後回顧

以下是在重新設計網站時追蹤待辦事項的便利回顧：

分析

1. 分析您目前的網站以了解需要更改的內容
2. 分析您的競爭對手以獲得網站改進的靈感

規劃

1. 設定重新設計的目標－實施重新設計的總體目標和可操作的子目標
2. 檢查您網站的技術設定以確定是否需要徹底修改
3. 委派網站重新設計的責任，讓您的團隊知道誰會做什麼。 如果需要的話也可以聘請外部專業人士

實現

1. 透過創建所有必要的設計資產、建立新網站等為重新設計做好準備
2. 啟動重新設計的網站並監控其效能
3. 當您發現需要改進的新領域時，不斷改進您的網站

如果您仍然對等待您的工作感到害怕，我們最後的建議是將您的重新設計專案分解為盡可能多的較小的子目標。 當您努力改造您的網站時，所有這些小進步都會加起來！

如果預算允許，並且您希望專家為您監督整個過程，那麼聘請每天處理網站重新設計專案的專業人員也沒有什麼壞處。

最後，如果您想獲得有關網站重新設計專案的回饋，我們很樂意捐出兩分錢。 請在下面留下您的評論和問題！