綜合網站規劃指南（第 3 部分）

在第 2 部分中，我介紹了評估計劃、選擇網絡專業人員和確定網站結構的詳細信息。 為什麼網絡規劃與規劃與您的業務相關的任何其他事情一樣重要的問題已在第 1 部分中討論過，因此請繼續閱讀該部分，以防您錯過了它。 在本指南今天的最後一部分中，我將從任何初始設計中最常見的一些方法開始。

初始設計：三種常用方法

當然，還有其他的，包括結合每個元素的混合體，每個設計團隊和每個項目都是不同的，但有創建網頁設計的核心方法。

1. 經典的 Photoshop 樣機方法

通常在 Adob​​e Photoshop（行業標準）或 Sketch 等其他設計軟件中創建，初始設計將包括主頁的視覺準確圖像（“模型”）和至少一個內部頁面。

您的企業的視覺品牌元素應該在這裡應用。 如果除了徽標之外還有定義明確的圖形，它們將決定網站的設計。 但是，如果您的品牌缺乏細節，設計師將盡最大努力創建準確反映業務的作品，並以您現有的圖形作為起點。

以下是成功模型的關鍵點的簡短列表。 我們假設設計師在 Photoshop 中工作，但是，這些指南也適用於其他設計程序。

• 從帶有預先繪製的像素精確參考線的預製網格開始。 一些設計師創建自己的，而其他人可能會堅持預設的網格系統。 無論如何，有一個乾淨的模板開始是很重要的。 使您的畫布比您設計的寬度更寬，這樣您就可以在一側添加註釋並感受網站在寬瀏覽器窗口中浮動時的感覺。
• 在畫布的邊緣添加調色板和基本品牌元素（即字體），以便您在屏幕上或打印時查看它以供參考。
• 將所有內容繪製到精確的像素，並圍繞設計元素繪製清晰的參考線和/或切片。 當前端開發人員稍後從模型創建 HTML 時，這一點變得至關重要，但是，您的設計只有在“大屏幕”設備上顯示時才能達到像素精度。
• 使用邏輯文件夾/子文件夾結構組織所有設計元素，並清楚地標記每個項目。
• 如果設計人員將他們的文件交給 HTML 開發人員，這一點尤其重要。 為其內容命名您的文件夾和圖層，這樣以後就不會混淆。 例如：“Sidebar - events header”是明確的，“Layer14 Copy Copy Copy”不是。

• 明確說明字體、對齊方式、重複背景元素、漸變以及任何需要使用 CSS 技術實現的內容。 在 Photoshop 中，便簽功能對此很有用。 如果不清楚，請詢問將您的設計轉換為工作頁面的人員。
• 如果對整個站點中出現的標題、導航或其他設計元素使用通用樣式，請考慮為它們製作單獨的 Photoshop 文檔。 一些設計師發現“分塊”更容易，尤其是在大型項目中。
• 使用真實的內容。 設計師經常使用希臘語（“lorem ipsum”）來填充空間，這對於正文來說是可以的。 但是，對於標題、標題、事件等，盡量使用逼真的文案。 考慮以下兩個標題。 佈局注意事項各不相同：
  • “Widgets, Inc. 榮獲綠色製造獎”
  • “Widgets, Inc. 員工贏得具有里程碑意義的法庭案件，確認員工有權在培訓與工作角色相關時申請大學學費報銷”

這種方法的問題

當您設計像素完美的模型時，您可以放心，該網站的外觀在桌面網絡上將非常接近 - 但僅此而已。 一旦你切換到不同的設備，它就會改變。 因此，至少，您需要通過顯示具有相似佈局的網站向企業傳達設計在較小屏幕（平板電腦、智能手機）上查看時將如何變化，或者設計其他常見屏幕尺寸的模型。 正如您可以想像的那樣，這是很多額外的設計工作，如果您在以桌面為中心的模型上更改一個元素，您也必須在其他模型上進行更改。 這是智能手機視圖。

2. 在瀏覽器中設計

隨著響應式網頁設計的興起，一些設計師正在遠離 Photoshop 模型方法，轉而使用像 Bootstrap 或 Foundation 這樣的響應式框架，或者像 Froont 或 Typecast 這樣的工具。 這些工具允許非常快速的迭代設計，讓您可以看到網站在不同設備上的外觀。

您仍然可以使用 Photoshop 或其他圖形設計工具來創建風格化元素以放置在設計中，但大部分設計將在這些工具之外進行。 沒有好的方法可以“準確地展示業務的外觀”，因此對於習慣於為桌面網絡製作像素完美模型的設計師來說，瀏覽器內設計可能不是最好的方法。 對於許多人來說，這種方法也代表了他們流程的重大變化，可能需要一段時間才能掌握。 大多數人認為這是一種必要的演變，因為 Photoshop 模型只能代表顯示您網站內容的眾多“框架”之一，而網絡世界從一開始就迅速朝著為多個平台設計的方向發展。

當需要編寫構成網站的 HTML、CSS 和 Javascript 時，您可以堅持使用最初用於創建設計迭代的框架，調整其代碼，或者從頭開始編寫自己的框架，使用您的框架設計作為指引。

3.元素拼貼（也稱風格拼貼、風格拼貼）

使用這種方法，設計師將組裝構成網站的一系列元素，包括標題、導航、圖標、示例照片、插圖、表格、交互元素以及任何其他認為必要的東西，以更好地了解網站的外觀和感覺. 此外，根據設計工具的不同，這些元素的佈局方式可能會顯示它們的外觀將如何隨著屏幕尺寸的變化而變化。 這通常與至少主頁和一些內部頁面的某種圖形模型相結合。 （企業很難僅根據元素拼貼來想像網站中頁面的外觀。）

注意：這些示例圖像不是按比例繪製的——我們的 Photoshop 版本的元素拼貼是一頁長的，1500X4500 像素，所以我們不能把它放在一起。

對於長期使用 Photoshop 模型方法的設計師（和企業）來說，這也是一個新領域，需要改變視角。 使用樣式原型，您不是試圖準確地佈局頁面，而是顯示網站的關鍵部分並獲得關於總體外觀和感覺的反饋。 因為響應式網站的外觀必須隨著屏幕尺寸的變化而發生根本性的變化，所以這種方法更多地是關於網站的各個部分，並了解設計的方向。 您沒有將網站作為一個整體進行展示，更不用說對每個頁面的外觀做出像素完美的表示了。

這可以節省大量時間，但同樣，如果業務不夠舒適（或信任），無法讓設計師稍後做出結構性決策，那麼這種方法可能很難賣。 也就是說，它確實可以創建一個靈活的環境，在其中為無數平台快速創建網頁設計。

雖然平面設計的原則是永恆的，但用於網站設計的方法會隨著時間的推移而改變和發展。 我強烈建議您觀看“後競爭時代的設計交付物”，以發現這種方法的價值。

當使用這種元素拼貼方法時，企業必須接受給定頁面沒有準確、精確、最終的草稿，只有同意的佈局指南。 響應式站點的本質是使其內容適應每個設備的功能，因此企業不能期望在開發階段之前批准固定佈局。 使用經過批准的樣式原型，設計師可能希望返迴線框或工作原型來製定項目所需的所有佈局。 然後在構建網站時，您會將拼貼畫的元素組合到每個獨特佈局的視覺結構中。

設計界有很多關於創建網頁設計的最佳工具、方法和流程的討論和辯論。 設計師往往對哪種方法是“最好的”方法有非常強烈的感覺，雖然這是可以理解的，但使用最適合項目和業務的流程很重要。 對於設計師來說，在項目允許的情況下熟悉使用一系列方法和系統並拓寬視野是很明智的。

作者註
我非常猶豫是否要包含以下一些內容，因為它突出了業務設計師關係中的嚴重緊張局勢。 雖然它似乎對企業主過於挑剔，但我相信它對企業來說具有很大的價值，因為在網站項目中存在如此多的時間和金錢風險。
出於外交和維護客戶關係的利益，設計師可能不會向企業主表達這些挫敗感，但以下問題可能並且確實會使項目脫軌。

設計批准和修訂

無論為項目選擇哪種設計方法，當設計完成時，結果都會與業務部門共享以供批准，並且通常會有一個（希望是簡短的）修訂過程。 修訂過程涉及設計師和主要利益相關者來回幾次，嘗試對設計進行不同的編輯，直到設計獲得批准。

委員會設計：不要這樣做。

在這個階段，一個常見的（並且完全可以避免的）問題是考慮了太多的意見，只是在數字廚房中有太多的廚師。

為了幫助確保流程順利進行，企業必須指定一個人作為設計團隊的聯繫人。 該人負責與設計師溝通並就設計方向做出最終決定。

當然，徵求對設計的反饋很重要，項目利益相關者可以提供有價值的評論，幫助指導設計過程，使最終結果準確地代表他們的業務。

此外，在某些情況下，需要法律和/或技術人員進行審查。 然而，讓整個公司都提供意見，並對所有反饋給予同等重視，很快就會導致沒有人感到滿意。 確保設計混亂、沒有重點的最佳方法是讓每個人都參與進來，然後四處奔波進行所有提議的更改。

一般而言，在小型企業或組織中，提供設計反饋的人數超過五人會導致僵局。 越少越好，最多五個。 這五個（或更少）人將徵求他們的下屬或部門同事的反饋，但該輸入應由每個利益相關者彙編並作為統一的單一意見提出。 換句話說，不要邀請十五個人參加設計評審會議。 在您向設計師提供輸入之前，先排除所有的來回。 區分客觀設計關注點（“這種配色方案真的適合我們的麵包店嗎？”）與個人設計偏好（“我喜歡藍色 - 讓我們使用更多的藍色”）也非常重要。

設計不是一種武斷的追求。 設計有好有壞。 有要遵循的規則，要遵守的最佳實踐，而且只要規劃得當，設計決策幾乎從來都不是品味問題。 也就是說，設計師在那個確切的位置使用那個確切的藍色或那個大小的那個字體是有充分理由的。 所有這些小選擇都會向用戶傳達信息。 他們可能會覺得微不足道，但實際上，設計師所做的所有這些選擇都很重要。 它們會極大地影響網站的運作方式和接收方式。 不幸的是，許多企業無法理解，僅僅因為他們喜歡它並不意味著其他人都會，而做最能傳達企業靈魂的事情就是聘請設計師做的事情。 除非絕對必要，否則不應發表意見。

當自我統治

任何有經驗的設計師都曾與具有強烈自我意識和低劣設計感的可怕結合的決策者打過交道。 在最壞的情況下，設計師將被要求使用 CEO 在 Microsoft PowerPoint 中開發的標誌，或者完全不適合企業形象的顏色和字體。 不幸的是，這伴隨著成為設計師的領域。 有時，可以通過將有問題的藝術品與業內競爭對手或類似公司的專業設計材料放在網格中來消除這種情況——Pinterest 是一個很好的工具。

如果競爭性評論是您的需求評估的一部分，您可能需要參考他們的品牌以供參考。 希望企業能夠看到他們的版本在競爭中看起來多麼糟糕，並重新考慮他們對這個壞主意的承諾。 然而，最終，決策者可以並且確實通過堅持，與所有可用的證據相反，他們的設計意識應該優先於既定的設計原則，從而毀掉項目。

幫助！ 他們不會讓步！

本書早期版本的讀者詢問處理自我問題的方法。 我希望我有一個聰明或有用的答案給你。 可以說這是人的問題，而不是技術的問題。 為優秀設計的價值做出最好的證明，打出最好的戰鬥，然後準備好讓它休息。

設計張力：設計師與業務

設計師經常處理他們知情的設計概念和企業不知情的設計批評之間的緊張關係。 “壞主意”難題最能說明這一點。 企業將要求設計功能要么醜陋、不可行，要么只是一個壞主意。 （這很常見，以至於有許多網站記錄了無能的業務以及導致這種動態¹的頭痛。）設計師會在“這太可怕了，我們不會這樣做”和“好吧，如果那是你喜歡的……”。 這種反應取決於各種不斷變化的因素，包括：

¹ https://clientsfromhell.net, https://theoatmeal.com/comics/design_hell

• 當設計師希望得到報酬時。
• 設計師在項目中的投入程度。
• 設計師在設計階段投入了多少時間，以及實施這個壞主意會導致多少延遲。
• 風險有多大——這個壞主意會對整個網站造成多大的損害。
• 個性，企業願意就他們的想法採取建設性的建議。

每個項目都是不同的。 當設計師與不斷要求不明智的功能的企業打交道時，有時他們可能會完全取消項目。 在某一點上，不斷地解釋為什麼居中、粗體的紅色段落、全部大寫、瘋狂的 Flash 動畫或低質量的攝影會導致網站無效²實在是太累了。 設計師的態度迅速從“讓我們做出讓我們引以為豪的真正偉大的東西”轉變為“讓我們完成它，這樣我們就不必再看這個了”。

²其他情緒殺手包括兒童書籍中最常使用的自動播放視頻和字體。

在考慮上述情況的同時，還要意識到這枚硬幣還有另一面。 人的問題也可能出現在設計師的末端。 一些設計師的技能可能達不到標準，他們可能拒絕聽取對其工作的有效批評，或者可能不重視業務的知情投入。 避免這種情況的一個好方法是從設計師過去的客戶那裡獲得好的參考。

考慮內容

考慮擴張。 例如，您可能有一個新聞部分。 首先，您有六個新聞項目。 沒關係。 您將創建一個帶有摘要的主要新聞頁面，並將摘要鏈接到詳細信息頁面。 但是當你有 10 條、20 條或 50 條新聞時會發生什麼？ 現在還有其他考慮。 你想存檔舊新聞嗎？ 創建分頁？ 只顯示最近的十項？ 這應該在設計過程中加以考慮。 在設計過程中盡可能多地規劃內容，並儘可能提前考慮——規劃你將擁有的內容，而不是你現在擁有的內容。

網頁風格指南

風格指南是適當規劃的亮點。 樣式指南將包含在一個位置在整個站點中使用的所有設計、佈局、交互（即 JavaScript）和類型元素。 這通常在 HTML 中完成，因此如果您是不編碼的設計師，您需要為您的樣式指南創建一個模型，並將其與您的其他設計一起交付給您的前端開發人員。 如果您使用過前面介紹的元素拼貼方法，則可能不需要在單獨的 Web 樣式指南中重複自己。 如果您使用的是經典的 Photoshop 模型方法，您將需要一個。 風格指南的元素包括但不限於：

• 導航樣式
• <h1> 到 <h5>，也稱為標題標籤
• 段落
• 列表
• 塊引號
• 斜體、粗體、下劃線
• 鏈接，包括活動、懸停和訪問狀態，即鏈接的外觀，包括鼠標懸停時的外觀
• 圖標
• 圖像和圖像風格的使用
• 使用背景圖像或“水印”
• 形式。

Canva 的這篇文章探討了 10 種知名公司的 Web 風格指南。 您還可以使用 Frontify 等在線工具。

使用模式庫

對於更大範圍的網站，您可以將 web 樣式概念擴展到更強大的模式庫，它解釋了各種元素如何出現以及如何處理它們。 這些元素的示例代碼通常是庫的一部分。 這不僅僅是它的圖片，而是事物本身。 例如，表單是什麼樣子，出現錯誤時視覺上會發生什麼，提交評論的過程是什麼等。

經批准的模型、元素拼貼和線框，以及樣式指南，被用作下一步開發的構建塊。

HTML/CSS 創建

使用設計和样式指南，HTML/CSS 專家（前端編碼器）將創建 HTML 模板，準確地表示已批准的設計。 在某些情況下，模板看起來與模型相同，但是，在使用 Photoshop 製作模型的情況下，可以預期會有細微的差異。

您的前端編碼人員可能還需要與設計相關的其他指南和資產，例如調色板、特定圖像、圖標，以及（如果尚未明確指出的話）設計規則，例如邊距和填充。 在開始發送文件之前，請確保您知道所有可交付成果。 如果設計和風格指南是在非常注重細節的情況下創建的，那麼在這個階段應該很少有問題或猜測； 工作應該伴隨著嗡嗡聲。

交互式元素創建

交互元素可以像下拉菜單一樣簡單，也可以像餅圖創建器一樣精細。 這些元素通常使用 JavaScript 開發，通常使用 jQuery 之類的腳本庫。 在最一般的層面上，這包括組裝（和編寫）一組與您網站上的頁面交互的指令。 站點和服務器之間也可能需要考慮交互性。 您可能正在連接 API ³ 、製作預訂或日曆系統等，或者使用來自第三方服務的小部件。

³本質上是一個或多個系統之間的橋樑。 例如，Facebook 提供了一個 API，允許您將帖子從牆上拉到不相關的網站。

終於，您出色的設計已轉換為代碼，並準備好集成到內容管理系統 (CMS) 中。 它正在成為一個網站！

負責將代碼“拼接”到 CMS 的個人或團隊將為您提供 CMS 控制面板的登錄名，允許您輸入內容，包括文本、照片、視頻和文檔。 大多數作家更喜歡從 Microsoft Word 中剪切和粘貼。

根據所選 CMS 的具體情況，您可以毫無問題地執行此操作，保留簡單的格式，如粗體、斜體和列表。 但是，CMS 可能會在您剪切和粘貼時刪除此格式，需要您將其添加回來。 雖然有時很乏味，但這可以確保您的內容保持整潔有序，從而使其更容易被搜索引擎索引，更容易打印、引用和轉換為其他格式。

儘管實際上這個過程非常複雜，但我忽略了細節，因為每個 CMS 的確切過程都是獨一無二的，並且要做好這件事依賴於 Web/CMS 開發人員的專業知識。

培訓和文檔

雖然現代 CMS 可以非常用戶友好，但為負責輸入內容的人員協調培訓非常重要。 如果可能，現場培訓是最好的，網絡會議是第二選擇。 培訓在非常小的團體中效果最好——5 人或更少。 此外，讓人們真正按照自己完成任務所需的步驟（而不是讓他們看著培訓師並在他們獨自一人時嘗試記住如何去做）會更有效。

培訓應有文件支持，文件可以採取多種形式：

• 分步視頻（“截屏視頻”）
• 帶有屏幕截圖的 PDF
• 印刷指南
• 上下文幫助（內置於 CMS）。

有時文檔結合了上述部分或全部內容。 無論您選擇什麼，請記住輸入內容的人員的技能水平。 許多在辦公室工作的人都能勝任 Microsoft Word 和電子郵件，但可能會受到基本但必要的“設計”任務的挑戰，例如調整圖像大小和裁剪圖像。 還要記住，企業可能沒有使用與設計師相同的一組專業設計工具，因此也要考慮到企業的技術問題。

將文檔的編寫保存到盡可能接近項目結束時是個好主意。 請記住，如果您在 CMS 中期項目中更改某些內容，您可能必須更新文檔以匹配。 這可能非常耗時（並且也令人困惑），因此請嘗試協調項目的各個部分，以便在內容輸入過程完成後編寫文檔。

把這一切放在一起……

在這一點上，按照前面的步驟，您現在應該坐在一個非常可靠的網站上。 無論您的項目規模如何，現在都是執行以下操作的好時機：

再次檢查您的內容，對照上面為網絡編寫的內容中列出的要點進行檢查。

請第三方校對您的所有內容。 這不是設計師或原作者的任務。 最好引進一個有新觀點的人。 不要校對自己的工作。

Beta測試

當您覺得您的網站幾乎可以讓公眾看到時，就該進行 Beta 測試了——這是一個遍歷網站各個方面的過程，確保所有內容都按預期顯示和運行。 至少考慮這個清單：

• 該網站是否在所有目標 Web 瀏覽器中都符合預期？ Web 瀏覽器包括常見的 Internet Explorer、Firefox、Safari 和 Chrome，以及常見的移動設備附帶的瀏覽器。 如果您到目前為止一直在桌面瀏覽器上查看該網站，那麼當您切換到平板電腦或智能手機時，您可能會發現意外的故障。 現在是時候在各種設備上徹底審查您的網站，然後才能將其視為可供公眾使用。 請記住——您網站的受眾將使用各種設備來查看您的網站，並且它需要在所有設備上都能正常運行。 您不必在所有可能的手機或平板電腦上對您的網站進行物理測試，但您應該在少數常用設備上進行嘗試。 請勿出於測試目的購買 5 年的黑莓手機。
  “仿真”網站和 Spoon.net 等服務將在幾乎所有人類已知的瀏覽器或設備上生成您網站的預覽，讓您很好地了解它在大多數情況下的外觀。
• 交互功能運行順暢。
• 聯繫方式或其他形式可預測地工作，並對所提交信息的用戶和接收者產生正確的響應。
• 錯誤消息很有幫助且人性化。
• 內部和外部鏈接功能。
• 圖像大小合適。
• 所有佔位符內容已被最終副本/圖像等替換。
• 內部和外部鏈接，包括電子郵件鏈接，都可以正常工作。
• 與第三方軟件（例如電子郵件服務提供商）的集成正在發揮作用。

在這一點上，徵集迄今為止沒有參與該過程的人是非常明智的，並要求他們有條不紊地瀏覽網站中的每個頁面和功能，並註意他們發現的任何錯誤或故障。 不要使用已經盯著該網站數月的人。 需要注意的問題可能包括拼寫錯誤、錯誤鏈接、圖像大小、特定移動設備上的故障或內容丟失或不完整。 （請務必告訴您的測試人員，此時網站的設計已經確定，因此他們不會浪費時間查看非內容方面的考慮。）

發射前協調

當您接近發佈時間時，您需要與公司的其他營銷工作進行協調。 如果您在社交媒體上很活躍，請編寫和校對新/重新設計網站的公告，並設置發佈公告的時間表。 準備更新您發出的語音郵件消息並協調印刷廣告——支持網站啟動所需的一切。

重定向來自“舊”站點的流量

如果您的新網站正在替換以前的版本，它可能具有不同的 URL 結構，您需要將舊結構映射到新結構。 這樣做有兩個原因。 首先，搜索引擎已將您舊網站的 URL 編入索引。 這種索引對於搜索貴公司提供的產品的人來說具有很大的價值。 當您啟動具有不同 URL 的新站點時，舊站點將中斷，用戶將收到“找不到頁面”消息（404 錯誤）。 您想在搜索引擎中保留您來之不易的位置。 其次，站點訪問者可能在您的舊站點中為頁面添加了書籤，並希望返回它們。 如果這些頁面的 URL 發生變化，您需要確保訪問者仍會收到與其需求相關的內容，而不是不再存在的頁面。

例如，您的舊網站可能有：

• https://oursite.com/company/history.html
• https://oursite.com/staff/california.html

而新網站有：

• https://oursite.com/company-history
• https://oursite.com/staff/california

差異是微妙的，但計算機是非常真實的東西——對於瀏覽器來說，“history.html”和“company-history.html”之間的差異可能就是火星和地球之間的距離。 您需要瀏覽舊站點的結構，並記下新站點中具有等效信息的每個頁面及其 URL。 如果您的舊網站有很多頁面，您可以使用 Powermapper 之類的工具來幫助自動化該過程。 有時新舊 URL 會排列得很好，就像上面的那些。 其他時候，舊 URL 可能在新站點中沒有等效項。 如果您關閉了公司的一個部門、中止了一個項目或重組了一個部門，這通常會發生。 無論出於何種原因，您仍然需要使用準確的 URL 才能進行下一步。 處理舊網址的三種方法：

• 如果它們具有與上述示例類似的等效項，則可以將舊 URL 指向新 URL。 為了暫時脫離技術，這是通過 301 重定向完成的，它告訴搜索引擎和用戶的網絡瀏覽器 URL 已永久更改。 它看起來像這樣： Redirect 301 /company/history.html https://oursite.com/company-history
• 如果鏈接沒有對應的鏈接，您可以將網站訪問者發送到一個頁面，該頁面顯示“抱歉，我們找不到您要查找的內容。我們已經重新設計和重組了我們的網站，並且某些內容已更改或移動。” 並提供站點地圖和搜索選項。
• 您還可以將所有不存在的 URL 指向主頁。

舊站點的規模越大，重新指向舊 URL 所需的工作就越多。 如果您在舊站點上運行分析，您可以選擇僅將前 10 或 20 個舊 URL 重新指向新 URL，並為所有其餘的 URL 設置一個包羅萬象，將它們指向“抱歉，我們可以'找不到你要找的東西……”頁面或主頁。 創建包羅萬象的重定向或匹配特定 URL 模式的重定向是一項技術工作，我們不會在此討論，但您可以輕鬆找到有關 .htaccess 文件（適用於 Linux 服務器）或 web.config 文件（適用於 NT 服務器）的信息) 在 Stack Exchange 或其他資源中。

永遠不要在星期五啟動

在星期五或假期前啟動網站絕不是一個好主意，尤其是許多人依賴的網站。 如果出現問題，當大多數辦公室工作人員、供應商和其他可能能夠提供幫助的第三方周末回家時，您可能沒有資源來修復它。 星期一最適合啟動一個新網站，因為這會給您整整一周的時間來解決可能出現的任何意外問題，並獲得大量支持來幫助您解決問題。

發射！

一旦您對網站進行了徹底的 Beta 測試，就該啟動了。 具體步驟因項目而異，但通常這意味著要么將站點（文件、數據庫、配置）從開發環境移動到公共環境，使其對世界可見，要么只是更新服務器設置以允許訪問yourcompany.com的訪問者查看新網站。

發布後

網絡統計

查看您的網站訪問者統計數據可以讓您深入了解人們如何使用您的網站。 您至少需要一兩個月的數據才能做出任何決定。 不要太拘泥於純粹的數字——它們都近似於一個程度或另一個程度。 趨勢應該是您的主要關注點。 以下是需要考慮的幾個關鍵點：

• 遊客從哪裡來？ 搜索引擎，直接流量（即，有人剛剛輸入了您網站的。
• 瀏覽器中的 URL）、廣告、來自其他網站的鏈接等。
• 遊客住在哪裡？ 它們主要是本地的、區域的、國家的還是國際的？
哪些頁面最受歡迎？
• 訪客在網站上停留多長時間？
• 跳出率是多少，即有多少用戶在完全離開之前只訪問了網站上的一個頁面？

Google Analytics 是最常用的網絡統計軟件之一，您可以在它提供的高級數據中輕鬆找到這些問題的答案。 其他網絡統計軟件，如 KISSMetrics 或 Clicky 也應該很容易提供這些答案。

技術文檔

您還需要詳細說明網站的各個部分是如何在 CMS 上實現的。 這與提供給企業的文檔不同。 Much of your technical documentation will simply consist of the annotated elements discussed earlier in this document, including wireframes, style guide and Photoshop documents. Think about what information would be needed if you brought new people in to maintain the site, people who were not at all familiar with it. What do they require to pick up the project? They'll need:

• Credentials for the CMS, web server, and other services connected to the site.
• Written or video instructions on how to perform tasks in the CMS: adding news items, blog posts, swapping out photos — everything that someone can do to the site.
• Recommended technical maintenance — how often do the CMS and other services require updating?
• Notes on backups — what is being backed up, how often, and where is it backed up to?

Note: writing documentation of all kinds is one of a web professional's least favorite tasks, but it's very important. Don't slack on it. Think how terrible it would be to inherit a project without any technical documentation. Then use that dread as your inspiration! You don't want to leave anybody in a lurch down the line and doing this right will save time and frustration later on.

備份

This is often overlooked by businesses and designers alike. Schedule regular backups of the site's files and database. Daily is ideal. Your hosting company may provide an automated way to do this, but if they don't, there are plenty of effective services and tools available to facilitate this process. That way, if your files or database get hacked, erased, corrupted or otherwise damaged, you can restore them with copies from the previous day.

Depending on the size of your site, frequency of updates and some technical matters that vary with each site, you may want to schedule more frequent backups. Ideally, your site will be backed up off-site, that is, in a different place than where it is hosted. Services like Amazon S3 or Rackspace Cloud are ideal for this purpose. The idea is that if your website gets irrevocably damaged, a recent copy is stored in a different physical location, allowing restoration of the site to the last undamaged version.

維護計劃

Your maintenance plan, which should have been budgeted for before you started, should clarify roles and responsibilities for every aspect of the site. For example, if two articles per week are to be posted, who is responsible for this, and who is that person's backup? If your site requires photos or graphics to be created regularly, make sure this work is assigned and understood by all involved. Determine who will check links, re-size images, write blog posts, etc. Write a simple maintenance plan and share it with everyone involved in the site's care and feeding. Remember, a good website isn't a one-time event, but rather an extensible communication tool that requires regular updates to remain valuable, relevant and compelling to site visitors.

Solicit visitor feedback

After it's been online for a while, a great way to improve the impact of your site is to solicit visitor feedback. There are a variety of ways to do this, from simple online surveys to on-site focus groups. Site visitors often have trouble articulating what they like and don't like about their experience. With this in mind, it's important to craft very clear and specific questions when soliciting feedback. And remember, if you're going to take a significant amount of visitors' time, offer something in return — a product discount, prize, or simply a handwritten note thanking them.

鰭

OK, one more time for posterity: A good website isn't a one-time event, but rather an extensible communications tool. Once you've built a great website, keep the momentum going. Devote resources to regular maintenance, and check in with your site visitors regularly to identify areas for improvement.

推薦閱讀

• "Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability" by Steve Krug
  Helps readers understand the principles of intuitive navigation and information design.
• "Content Strategy for Mobile" by Karen McGrane
  Making the case for a mobile strategy, publishing flexibly to multiple channels, and adapting your workflow to a world of emerging devices, platforms, screen sizes, and resolutions.
• "Design Is A Job" by Mike Monteiro
  From contracts to selling design, from working with clients to working with each other, learn why navigating the business of design is just as important as the craft of it.
• "Grow your SEO" by Candy Phelps
  A beginner's guide to SEO.

定義