設計新網站時要遵循的步驟

已發表: 2021-04-19

出色的網頁設計就是將出色的美學與出色的功能相結合。要實現一個設計精美的網站，您一開始就需要一系列技能、一點創意天賦和一些組織！

本指南旨在幫助您創建一個出色的網站。一款看起來很棒，效果更好的產品。我們將介紹您需要採取的一些關鍵步驟，以盡可能實現最佳網站。讓我們開始吧！

目的和研究

在開始網頁設計過程的創意部分之前，您應該首先建立一些東西。關鍵是了解您的目標受眾。這是至關重要的。畢竟，將時間和金錢投入到不滿足目標人群需求的網站上是沒有意義的。

這第一步可能非常棘手。很容易假設你知道你的觀眾想要什麼。然而，在一開始就花時間真正研究這一點可以在項目的後期節省很多來回，並增加您的網站成功的機會。而且不要忘記，如果您正在為客戶設計網站，請確保讓他們參與此過程！

您可能需要考慮的一些關鍵點，特別是如果該網站是針對客戶的，如下所示：

該網站本身是一個獨立的項目，還是構成更全面的營銷策略的一部分？
是否已經有一個強大的品牌——如果有，網站反映這一點很重要。有時這可能是一件很難做到的事情，因為誘惑可能是專注於現代設計趨勢，這些趨勢不一定與品牌已經確立的風格並駕齊驅。雖然重要的是新網站從一開始就不會顯得過時，但它也不能偏離品牌已經確立的核心設計原則（除非品牌願意對其形象進行全面改革）。
查看您或您的客戶的競爭對手也非常重要。確定他們的優勢和劣勢，以確保您的新網站包含成功所需的一切。查看比賽也可能會有所幫助，因為它可以確保您不會錯過潛在的重要特徵或功能。

完成研究後，您現在應該確信您設計的任何新網站都將滿足您的客戶（當然還有您自己！）的要求。研究有時會讓人覺得乏味，尤其是當你覺得自己充滿了創意，並且開始在屏幕上看到一些有形的東西的願望可能會讓人不知所措時。不要跳過這一步，無論多麼誘人。它可以在未來為您節省大量時間。

時間線

強烈建議為完成網站所需的工作制定時間表，雖然不是強制性的。時間線上的里程碑可以幫助您闡明從空白頁面到完成網站所需的流程，並有助於在一開始就準確地為項目報價。對於較大的站點，帶有里程碑的時間表將使您能夠更有效地在團隊成員之間分配工作，每個人都可以看到他們的工作（和截止日期！）如何適應整體情況。

使用像 Asana 這樣的工具來幫助完成這個過程會很有用。仔細地將網站構建的每個元素分解為任務將確保沒有任何東西漏掉，並讓您更自信地為客戶提供網站的完成日期。如果新網站要取代現有網站，那麼不要忘記及時構建以管理“上線”過渡，您可能需要將舊頁面重定向到新頁面等等。

最後，永遠記住承諾不足和過度交付。網站，就像大多數項目一樣，總是需要比你最初估計的更長的時間，所以一個好的經驗法則是在最初估計的基礎上再增加 20% 的時間，以幫助確保你不會陷入發現自己正在運行的古老陷阱從一開始就沒有時間（因此可能會錯過最後期限）。

設計過程的下一步是創建站點地圖。即使您的網站很小，擁有一個也很不錯。站點地圖不僅可以幫助您完全可視化新網站的佈局（從而確保您不會錯過任何重要的內容或導航結構混亂），而且它們最終還可以幫助 Google 在您的網站上線時抓取它，這有助於提升您的網站搜索引擎優化。

一些設計師很樂意使用他們最喜歡的插圖工具來繪製站點地圖，但您可以使用專用的站點地圖工具（例如 WriteMaps）來讓您的生活更輕鬆。

線框、模型和原型

維基百科將網站線框定義為“代表網站骨架框架的視覺指南”。創建網站線框通常是設計網站的第一步，因為它們可以幫助您在網站佈局上獲得一些重要的清晰度。在與客戶和您的團隊討論新網站時，線框也是一個很好的工具，因為它們提供了提議設計的更切實的可視化，但至關重要的是，它可以比真正的頁面模型更快地創建。這允許利益相關者在投入大量時間之前對設計進行批評。

模型將線框提升到一個新的水平。一些設計師可能會選擇創建一個網站的“基本”模型，這是一個稍微充實的線框版本（可能堅持灰度），而其他設計師則選擇創建包含圖像、顏色甚至某些功能的完整模型。你想把你的模型推多遠取決於你對你提出的設計有多自信。如果您覺得客戶可能仍想更改網站設計的重要部分，那麼保持模型盡可能簡單以傳達建議的設計/功能顯然是有意義的。

一旦您和您的客戶對設計充滿信心，您就可以創建一個完整的模型，充分展示頁面或整個網站的設計。

有許多在線工具可以顯著加快模型製作過程。其中包括 Mockflow 和 Moqups，它們都可以將您從線框帶到完整的網站模型。

即使模型無法讓您充分傳達網站的功能，但它確實可以確保您、您的團隊和客戶在網站設計方面 100% 處於同一頁面上。而且，正如我們任何以編寫網站為生的人都知道的那樣，在樣機中更改網站的設計比在最終網站本身中更改要容易得多！

您可能要採取的最後一步是建立一個原型網站。傳統上，這將非常耗時（並且與構建最終站點本身幾乎相同）。然而，多虧了像 Framer 這樣的工具，通過在模型設計中引入功能元素，讓客戶真正“感受”網站的工作方式，現在比以往任何時候都更容易將您的模型提升到一個新的水平。

作為本節的最後一點，值得記住的是，太多的選擇可能是一件壞事。最終，無論客戶怎麼說，您都是設計專家，並且與您的團隊一起可能最了解什麼將在網站設計中提供最佳結果。正因為如此，有時最好通過提供一系列可供客戶選擇的選項來呈現您認為效果最好的顏色和佈局，而不是混淆事物。這避免了客戶端最終從可能不兼容的元素中“挑选和選擇”。更少的時候肯定會更多！

寫出精彩的內容

無論網站設計多麼出色，如果網站上的文案沒有傳達出想要的信息，最終將毫無意義。因此，從一開始就讓撰稿人參與項目是一種很好的做法。他們可以幫助創建真正吸引讀者的內容，然後您可以與他們合作以確保以最佳方式將其放置在網站上。

例如，文案可能會想出一個很棒的標語，用一句話來傳達產品/服務。這顯然是重要的信息，但如果您只在項目的最後階段讓文案人員參與，您可能會發現您沒有在合適的位置設計來顯示此文本。顯然那將是一個很大的錯誤。

文案是網站中經常被忽視的元素。我們都被視覺吸引力所吸引，但副本最終可能成為“最後一分鐘”的補充，這對任何人都沒有任何好處。

從一開始就讓撰稿人參與其中的另一個原因（如果您有疑問）是確保從 SEO 角度優化網站。文案可以成就或破壞網站的 SEO，所以如果您認為它不重要，那就再想一想！通過正確使用關鍵字和關鍵短語，您的搜索引擎更有可能在 SERP 中為您提供更高的優先級。有一些很棒的工具可以幫助您改善 SEO，例如 Google Keyword Planner、Screaming Frog 的 SEO Spider、Google Trends 等等。

如果您沒有聘請文案的奢侈，並且正在考慮“單幹”，那麼您可能需要查看一些可以讓您的生活更輕鬆的寫作資源和工具。第一個值得一看的工具是 Grammarly，它是一個易於使用的寫作助手。 Grammarly 可以幫助您避免拼寫錯誤，還可以改進文本的格式（從語言學的角度來看），幫助確保您的副本盡可能易讀。

我們建議看的第二個不是一種工具，而是一種稱為 Storybrand 的營銷資源。 Storybrand 舉辦研討會，幫助您“澄清您的信息”。這樣做，可以通過以清晰、明確的方式提升網站傳達的關於您的業務的信息，從而使您的網站取得巨大成功。如果他們的工作坊太貴，那麼請查看有關他們營銷框架的書。

視覺效果

網站訪問者可能首先想到的是網站上的視覺效果！不用說這些因此非常重要。

毫無疑問，作為一名設計師，你會對你想要使用的視覺效果有具體的想法。這些範圍可能從動畫圖紙到產品照片或代表品牌及其產品的照片。無論您選擇使用什麼，請確保這些視覺效果是高質量的，否則您的所有其他努力都將付諸東流。

視覺效果是您希望真正從競爭中脫穎而出的關鍵領域。不要讓這個機會白白浪費！在報價和接受項目之前，請確保您討論了您希望與客戶一起使用的視覺效果。了解他們是否有您可以使用的內部圖像庫，或者他們是否計劃拍攝照片以獲得必要的圖像。如果他們不是，並且手頭沒有質量合適的圖像，你能從像 Shutterstock 這樣的照片庫中找到合理的“通用”圖像嗎？

最後，在開發階段，請務必注意這些圖像的大小，並確保它們經過優化，以免降低網站速度。使用 TinyPNG 之類的工具非常值得，或者您的主機可能會提供等效服務，例如我們在 Pressidium 使用的 Image Smacking 工具。

完成佈局、複製書面和合適的圖像後，您已經達到了一個激動人心的里程碑……發展！讓我們來看看這意味著什麼以及需要注意的一些陷阱。

發展

除非您自己處理構建，否則是時候將網站設計發送給您的開發人員，讓他們做他們的事情。您的設計以及您需要的任何附加功能的描述越清晰，開發人員就越容易交付您可視化的網站。這就是使用像 Framer 這樣的工具創建的原型網站可以真正發揮作用的地方。

在構建過程中，許多開發人員將提供可以傳遞給客戶端的開發鏈接，以便他們可以預覽構建過程是如何進行的。從表面上看，這似乎是一個好主意，因為能夠證明工作正在進行中總是很好的（特別是如果客戶正在施加壓力以完成網站！）。許多開發人員傾向於創建一些開發鏈接，以便向客戶展示工作正在進行中。

如果您想這樣做，不妨停下來考慮一下這是否真的是個好主意。大多數客戶不會理解開發人員將遵循的工作流程，並且最終可能會以任意數量的查詢甚至更改請求返回給您。在這個階段必須處理這些會適得其反，並且可能是一個實時的 sap，因此您最好等到最終站點準備就緒，然後再與他們坐下來進行全面測試。

質量測試

隨著最終站點準備就緒，現在是時候在考慮上線之前進行一些檢查了。這些可能非常廣泛，值得創建一個可重複使用的檢查列表，可以勾選以幫助確保沒有遺漏任何內容。您可能想要檢查的一些內容（不分先後）如下：

HTML 和 CSS 驗證：使用 W3C HTML 驗證器和 CSS 驗證器等工具驗證您的 HTML 和 CSS。 W3C 還提供了一個國際化檢查器，可幫助您檢查您的網站是否可以輕鬆翻譯成其他語言。
鏈接：在此步驟中必須檢查所有內部和外部鏈接是否正常工作。
語法和拼寫：希望文本是從您的撰稿人提供的文檔中復制和粘貼的，這應該沒問題。儘管如此，可能會出現失誤，因此重新閱讀是值得的。
表格：按預期檢查這些工作，並且任何提交都到達。建議您在網站上線後重新測試這些表格，然後指導客戶安排未來的測試，可能每月一次。
加載時間：一個快速的網站是必須的。 WebPageTest、GTMetrix、PageSpeed Insights 或 Pingdom 等工具可用於檢查加載時間是否良好且快速。如果您的站點託管在不會用作實時服務器的開發服務器上，那麼您需要在站點上線時重新測試。
移動響應：確保您的網站在各種設備上正確顯示。您可以使用 BrowserStack 之類的工具來執行此操作。
功能：如果您的網站上除了聯繫表單之外還有其他更高級的功能，那麼您將需要仔細測試這些功能。例如，如果您要啟動 WooCommerce 網站，那麼您的測試過程可能必須比宣傳冊風格的網站更加密集。以 WooCommerce 為例，測試支付網關、購物車功能、促銷代碼等工作方式等。測試測試再測試！
視覺檢查：看看你的調色板和間距、邊距、填充等的一致性。排版和圖像定位、分辨率和優化也是如此。
瀏覽器行為：列表中的下一個是檢查網站在多個瀏覽器和設備上的行為。
SEO：再次檢查您的 SEO！這包括語義結構的所有元素，如標題、段落、列表和您可能使用的其他類型的標籤，以及元標題和描述以及社交媒體的 Open Graph 設置。

當您對自己的網站按預期運行並且看起來與您希望的一樣好感到高興時，您現在可能認為您已經準備好啟動了。我們建議實際上您現在讓 5 名左右未參與該項目的人也來測試您的網站。理想情況下，這些用戶的“技術導向”也比您少。你會驚訝於一雙新鮮的眼睛能看到什麼。這樣做可以避免在發布後與“真實”客戶發生問題，並為您提供進一步改善網站流量的機會。

發射

就是這個！理想情況下，在一天中流量可能較低的時間啟動您的網站。使用像 Cloudflare 這樣的 DNS 提供商可以幫助避免任何 DNS 緩存問題。最好在您的開發人員在場時啟動，這樣他們可以在出現任何問題時介入並提供幫助。

現在您已經上線了，請確保您花一些時間重新檢查該網站，如果您發現任何故障，請不要擔心！幾乎不可能避免某些東西落入裂縫，但希望使用完整的檢查清單將有助於確保大多數主要項目按預期工作。

結論

設計一個好的網站是一項艱鉅的工作，而且很容易被手頭的任務嚇倒。將工作分解為可管理的部分，並在你陷入困境之前真正計劃好事情，真的可以幫助使這個過程更加成功和愉快。

祝你好運！