網頁設計過程的 8 條誡命（適用於新手和無代碼）
已發表: 2021-11-01
了解如何通過遵循結構化網站設計流程來打造成功的網站。
我們的假設是您已經找到了一個域名和一個託管服務提供商。
如果您還沒有選擇您的主機，我們強烈推薦我們的合作夥伴Cloudways 。
在下面的示例中，為您自己創建網站的情況提供了步驟。 如果該網站是針對客戶的，則可能會在項目規劃、截止日期設置、合同等方面出現新的步驟。 但從根本上說，您仍然必須堅持以下步驟。
現在，這裡是步驟：
- 範圍識別：網站必須滿足什麼需求？ 該網站與誰交談？ 它的目標和動力是什麼？ 哪些企業的範圍和目標受眾與您相同？
- 定義網站的站點地圖：幫助企業和受眾實現目標的網頁和功能是什麼？
- 內容創作：為網站頁面準備副本；
- 創建視覺品牌：準備用於網站設計的調色板、字體和圖形，最終塑造你的視覺形象；
- 線框圖：繪製您的網頁佈局；
- 網站設計：創建實際網站，注意您使用的工具的局限性；
- 測試：確保一切正常，從鏈接到表單和按鈕。 在各種瀏覽器和設備上測試網站以確保其正常運行；
- 發布：使用精心策劃的溝通策略，在上線之前發出一些聲音。
讓我們一一介紹。
網站設計過程的步驟
一、範圍識別
在這個階段，您和您的團隊需要找出以下一些問題的答案：
- 網站是為誰準備的？
一個引人注目的網站可能有其好處，但是，如果您希望您的網站的訪問者投入他們的金錢或時間，這意味著您需要進行更多的挖掘，以使他們相信這種承諾是值得的。 為了令人信服，您需要了解您的目標受眾，了解其需求、內部和外部激勵因素。
這種挖掘還意味著您需要創建一個有用的產品並解決某人的需求。
例如，假設我有一個製作紙花的愛好，並想進一步發展並將其轉變為一項業務。 有人用紙做花嗎？ 我在哪裡可以找到這些人？
好吧，我可能認為婚禮策劃師和未來的新娘可能想要這樣的選擇。
但我必須走得更遠。 每個新娘都想要我的紙花還是只是一種新娘？
這意味著您需要進行一些研究並檢查您的競爭對手。 還有其他紙花商嗎？ 您還與優秀的老花店競爭。 那麼哪個是您的附加值，或您的獨特價值主張？
- 您的網站訪問者希望在您的網站上找到什麼？
回到我們的示例，您的訪問者可能希望看到各種產品、顏色、運輸信息（他們可能需要一些額外的照顧，因為紙花很脆弱）等等。一些提到紙張是可回收的呢？ ? 也許您的客戶非常清楚他們對環境的影響，並且他們關心這些細節
有人也可以租花嗎？
現在，如果您包含一些推薦信怎麼辦？ 也許你為朋友的婚禮設計了一些紙花。
看到我要說的了嗎？ 在進入網站設計之前，您需要進行研究。
- 轉化情況如何？
我們是在談論課程註冊、購買產品、訂閱時事通訊嗎？
在星期一的情況下，您可以輕鬆地從主頁上找出他們的轉化率。 
從“開始”號召性用語中可以明顯看出主要的轉換，它位於首屏正上方，在中心。
另一個微轉換是會議註冊，您可以從左上角的消息中註意到。
另一種微轉化是“聯繫銷售”。
你的網站呢，有主要轉化嗎？ 有一些次要的嗎？
- 客戶旅程如何？
客戶旅程地圖是訪問者從入口到您的網站到達預期目標並離開的路徑的可視化表示。
客戶旅程地圖應包括以下信息：被訪問的頁面以及訪問順序、網站訪問者實現其目標所需的步驟、貴公司與網站訪問者之間的交互點（表格、聊天等），潛在的摩擦點。
客戶旅程不是固定的。 你從一個假設開始，然後一路調整。 您可以使用Google Analytics 等工具來分析網站行為並根據真實見解進行優化。
2. 定義網站的站點地圖
來源
現在客戶旅程已經清晰，是時候創建站點地圖了。 網站的站點地圖用於建立網站的信息架構並解釋各個頁面之間的關係。
您可以使用從 Excel 到 Figma 的工具創建站點地圖。
3. 內容創作
現在網站的結構已經建立，是時候為各個頁面創建內容了。
以下是一些關於文案的最佳案例實踐：
- 使用理想用戶熟悉的詞語和概念；
- 不要吹毛求疵和行話；
- 嘗試像在正常的面對面交流中那樣進行交流。 這樣你會產生一種熟悉的感覺；
- 用現在時寫作，避免被動語態；
- 始終檢查您的可讀性。 為此，您可以使用Readable等工具。
- 與朋友、陌生人、同事一起測試你的頭條新聞。 正如大衛奧格威所說：
“平均而言，閱讀標題的人數是閱讀正文的人數的 5 倍。 當你寫好標題時，你已經花掉了 80 美分。”
這意味著標題在網站上至關重要。
嘗試針對您的受眾 (SEO) 圍繞某些相關關鍵字優化您的內容。 您可以使用Google 趨勢（免費）、 Ubersuggest （免費）或Ahrefs （付費）等工具。
- 利用 AIDA 文案框架。
A – 注意力：創建吸引註意力、激發好奇心的內容，並讓您的觀眾相信他們需要更多地了解您的品牌。
I - 興趣：給你的訪客一個保持參與的理由。 這裡的關鍵是讓問題變得個人化，這樣你就只和潛在客戶說話，而不是其他人。
D - 慾望：這是您向主頁訪問者展示您的產品如何為他們的問題/痛苦提供解決方案的地方。 在這裡，您可以開始解釋產品的功能，重點是這些功能如何改善他們的生活。
A – 行動：現在是說服潛在客戶採取行動的時候了：購買、訂閱、下載免費贈品、開始試用等。
4. 打造視覺品牌
這一步不一定是你的第四步。 您甚至可以在此過程中更早地開始。
視覺識別是指您塑造品牌感知的方式。
這本身就是一個完整的過程。
在這裡，您需要：
- 定義圖形的外觀。 你會使用形狀、3D 圖形、插圖嗎？
來源
- 定義您網站的排版；
來源
- 選擇一個調色板。 從調色板，您可以演變為樣式指南，您可以在其中建立鏈接、標題、按鈕、背景等的顏色。為此，您可以使用Adobe 色輪等工具。
來源
- 策劃能夠講述您的品牌故事的圖片；
來源： https ://convertsquad.com/blog/
- 設計你的標誌
來源
- 準備實物資產（產品包裝等）。
來源
上面的大部分元素都可以用來創建情緒板。 當您在情緒板上收集字體、圖形、顏色時，您將能夠更好地了解整個網站的情緒願景。 你的整體語氣和聲音是什麼：淺色還是深色？ 正式還是好玩？ 
來源
5.線框圖
來源
線框是網頁或應用程序的草圖。 您可以手動繪製它們，在 Google Docs、Sketch 或Figma中創建它們，具體取決於您網站的複雜性。 線框用於在頁面上佈局內容和功能。 它應該告訴設計師他應該在哪裡放置視頻、圖像、標題、內容塊、按鈕等。在開始設計之前使用線框是很好的，因為它們可以讓你更加靈活。 修改線框的結構比修改現成的網站更容易。
6. 網站設計
來源
現在我們在談生意！
我們已經有了我們的內容、線框、視覺元素，現在是時候開始工作了。
如標題所述，您無需成為網頁設計師或代碼極客即可創建網站。 有很多工具可以幫助您設計一個沒有代碼的網站。 它們被稱為頁面構建器。
它們中的大多數允許您自定義設計的每一寸，並使其具有響應性。
例如，在 WordPress 中，您可以使用我們自己的 Colibri 構建器或 Elementor。 在 WordPress 之外，Wix 和 Squarespace 非常受歡迎。 這些工具可以為您提供模板，您可以通過添加自己的部分、視覺效果和內容來豐富這些模板。
現在，如果您的設計需要某些動畫、效果，您可能需要添加一些代碼。
7. 測試
好的，假設您的內容和視覺效果都已啟動。 你的工作還沒有準備好。 是時候確保一切正常：您沒有任何導致無處可去的鏈接（也就是損壞的鏈接或 404），您的所有按鈕和表單都可以正常工作，該網站在大多數瀏覽器和設備上看起來都很好。
現在，在發布之前，您可以測試一下外部人員如何看待您的網站。 這樣你就可以避免陷入自己的偏見。 為此，您可以做一個簡單的用戶研究： 5 秒測試。 這是一種幫助您衡量用戶在查看主頁的前五秒內獲得的第一印象的方法，例如
8. 發射
現在，當您啟動時，您只需點擊發布即可。 不，你需要引起轟動，發起一些公關活動，在社交媒體上大喊大叫，讓人們知道你出局了！
這是一個包裝的人。 現在，您有了正確的網頁設計流程步驟。
快樂的網站建設！
如果您喜歡這篇文章，並且想了解有關如何設計 WordPress 網站的更多信息，請務必訂閱 Colibri 的Youtube 頻道並在Twitter和Facebook上關注我們！