9個網頁製作步驟建構新網站

Home >> Blog >> 9個網頁製作步驟建構新網站

9個網頁製作步驟建構新網站

在這篇文章中，我們將逐步介紹如何設計網站。從定義您的網站範圍到啟動和擴展，我們將涵蓋所有內容。

任何人都可以設計網站。是的，任何人！然而，設計一個新網站並不是你直接跳進去的事情。下面提供了一個完整的網頁設計步驟指導 - 從您的網站的概念、發布、發布後管理和擴展。

學習如何設計一個新網站需要一些獲得的知識、耐心和堅定不移的動力，這對於有效學習新技能至關重要。

如果您有這些特質中的任何一個並且幻想自己是一名有抱負的 Web/UX 設計師，或者發現自己很想知道一個人是如何踏上網站設計之旅的，那麼這篇學習文章適合您。

2022 年設計網站的 9 個步驟

讓我們回顧一下您在設計網站時將經歷的 9 個階段：

1. 定義您網站的範圍和目標

無論您是為自己還是為客戶設計網站，始終有必要首先明確定義網站的目的和目標。充分充實您網站的目的和目標是您獲得受眾並最終發展的方式。這是網站存在的主要原因。公司和品牌在他們的社交媒體、品牌、內容和網站上投入巨資，以接觸他們的目標受眾並建立關係。

有時，客戶會帶著他們的目的、目標、目的、品牌和內容來找您，並準備好在CMS中實施（內容管理系統）中。但是，偶爾也會有客戶需要您的專業知識來協調對其當前網站、內容和品牌的全面重新設計。無論在何種情況下，這些客戶都會為您提供一張空白畫布，讓您可以將知識和品味的顏料傾注到作品中。

因此，我們發現更有必要啟動本指導，以解決網頁設計之前的定義和規劃階段。這可能是網頁設計中最重要的階段，因此，如果我們在進入手頭的核心主題之前不探索這個階段，那將是不公平的。

但是，你是一個有抱負的網頁設計師，而不是用戶體驗、內容或品牌戰略家——那麼，你從哪裡開始呢？

為什麼

你的目的只是你的“為什麼”。

如果您不清楚網站存在的目的，那麼將您的時間和金錢投入到網站上是沒有意義的。

定義你的原因就是定義你的“問題、解決方案和市場”，但對於一個網站。如果您的任務是設計電子商務網站或線上商店，您必須首先為您想要聯繫和成長的目標受眾找到問題和解決方案，並懇求他們為什麼要找您？

也就是說，在回答這個問題時，您將從兩種用戶體驗中使用的方法中提取和業務戰略中使用的方法。我們談論的是用戶體驗問卷、項目計劃、機會研討會、聆聽之旅等等。這些計劃和發現方法遠沒有聽起來那麼複雜，因此值得努力去發現它們。

當您要建立品牌標識並稍後設計您的網站時，它們將是有用的工具。此外，它們將為您提供更好地了解網站預期目的和目標的方法。

什麼

一旦你定義了你的原因（即你的網站的目的），你就需要解決你網站的目標：這個網站將要實現什麼？

在這裡，您將重溫從問卷、機會研討會和聽力之旅中記下的筆記。閱讀“字裡行間”並檢查答案。您的筆記中的問題、解決方案和市場在哪裡？價值是什麼？

你的東西會讓你知道你的方法。

它完成了你的原因。它也為您識別受眾的方式以及為他們提供價值的可能機會（通過您的目的）鋪平了道路。

這就是你的目標，或者更確切地說，你的目標：在目標受眾中找到機會。

所以這給我們留下了最後一個問題，如何？

如何

在這裡，您可以從您的原因和內容中獲取您的發現，並將它們轉化為網站的形式。

耶！設計過程終於可以開始了！

但首先，您需要微調您的目標。

舉個例子，你的客戶有一家小企業，他們來找您製作電子商務網站以產生更多潛在客戶（為什麼）。在與他們和他們的團隊坐下來之後，你們都重新定義了他們的目標，不僅是銷售陶器，而且還為陶器愛好者創建一個線上社群（什麼）。

您，作為一流的設計師，回顧您的採訪後筆記，並通過將他們的陶器線上商店理念轉變為更多的線上品牌，發現另一個與他們的觀眾建立聯繫的機會。不，更好的是，這種體驗將使他們在競爭中脫穎而出並建立忠誠的消費者群。這需要的不僅僅是網站，還需要內容、品牌、配色方案和調色板等等。這將僅從他們的線上商店和SEO搜尋引擎優化中產生潛在客戶。

這就是你的方式——你如何著手實現你的原因和目標。

但這提出了下一個問題，我將如何去創造這種下一級的品牌體驗？

在向客戶確認您的願景將增加潛在客戶、驗證他們的投資以及您自己的努力的同時，您從哪裡獲得靈感？

設計始於發現，後來通過完善的研究實現。

2.研究計劃你的內容

您已經明確了網站的目的、目標和目標，那麼您將如何將它們呈現給您的目標受眾？您如何將您的網站與您的市場聯繫起來？

通過研究計劃您的內容

這種特殊類型的網頁設計不需要用戶體驗研究，而是需要一些用戶界面研究。看看你或你的客戶的競爭對手，他們在做什麼，他們的市場是誰？您如何通過既吸引人又令人難忘的設計來吸引他們的觀眾？

相關閱讀：UX vs UI：每個設計師都應該知道的關鍵區別

研究您的競爭對手，提取他們網站上的有效內容，並通過查看設計趨勢和市場研究來增強這些組件，從那裡獲得您的靈感。這是設計師的劇本。

此外，請有意使用您的副本。當你是一個單獨的網頁設計師時，設計既包括視覺設計元素，也包括書面設計元素。確保研究您的客戶或您的競爭對手的部門和/或行業中使用的語言。利用這些發現，就像在研究階段對視覺元素所做的那樣。

創建情緒板

從這項研究中收集筆記和見解後，創建一個情緒板。情緒板是理想的，因為它們可以讓您鞏固您的發現並將其轉化為更直觀的表示。它們可以作為您建立品牌形象的基礎。

3. 建立您的網站（或品牌）身份

品牌標識，設計的最終前兆。無論您是否決定起草情緒板，您都必須建立品牌標識。

這就是上述耐心發揮作用的地方。充實您的品牌標識將使您的作品與其他作品區分開來，吸引您的市場，讓您的網站令人難忘，並為您自己或您的客戶帶來那些甜蜜的潛在客戶。

有時客戶已經建立了他們的品牌標識並尋求您的服務以在網站構建器中實施。然而，總有一天您會被尋求更“完整”的服務。因此，了解品牌識別的重要元素是設計師頭銜的一部分就像了解設計原則一樣，是設計師頭銜的一部分。

配色方案

顏色可能對品牌的身份產生最深遠的影響，因為它決定了品牌在用戶到達網站後立即對用戶的整體基調和情緒。我們都知道這一點——鮮豔的色彩傳達快樂，柔和的色彩傳達一種嚴肅，缺乏色彩會使焦點集中在信息而不是品牌上。

顏色背後有一種心理學，所以如果你的客戶有機會，請熱衷於利用顏色來發揮你的優勢。選擇配色方案可以在一定程度上增強品牌的身份和消費者體驗。有許多顏色工具可以幫助您確定要使用的正確配色方案。

排版

字體和字型構成排版，它們不是彼此的同義詞。字體是你使用的，而字型是你看到的。

雖然這些術語之間的區別對大多數人來說可能是微不足道的，但作為設計師，這是需要牢記的。例如，Times New Roman 是字體家族 Times 的成員。

當戰略性地使用時，排版可以用作傳達意義的創造性工具。不僅僅是你的話，還有字體本身。排版可以塑造和建立品牌的身份和對用戶的認可。它可以吸引他們的注意力並傳達整體色調和情緒，就像顏色一樣。

有人說排版比顏色有更深遠的心理影響，有人認為顏色是更強大的競爭者。無論您屬於哪個範圍，排版都是富有表現力的，並且對人類心理產生了令人信服的影響。

意象

網站品牌標識的最終視覺元素，圖像。它可以作為您品牌標識的核心設計元素，以及社交媒體或部落格的內容。

您將使用圖像與您的配色方案、排版和副本一起工作。圖像還可以超出照片的使用範圍；它包含了網頁上的各種元素。圖標、插圖和動畫可以彌補網站上的圖像。有時這可能是宏偉的，有時，微妙的添加只會在設計師的眼中脫穎而出。

圖像是一個有趣的元素，因為它也可以是網頁上空白的簡單遊戲，以在佈局中創造更好的平衡或進一步突出 CTA（號召性用語）。

確保您選擇使用的圖像與網站對瀏覽者的外觀和感覺方式一致。不恰當的圖像或庫存照片在其“類似股票”方面如此坦率，可能會完全打折整個品牌的身份（為什麼研究對於了解客戶所需的品牌身份至關重要）。

功能性

功能很容易被忽視，但它可以為增強網站的體驗並將其與競爭品牌區分開來創造奇蹟。

例如，我們最喜歡的網頁設計師之一Niccolò Miranda使用功能在網頁中創建催眠虛擬體驗。這不僅確立了他們作為創意網頁設計師的標誌性風格，而且還在目標受眾的潛意識中鞏固了客戶的品牌（Niccolò 通過 Webflow 將這些一流的體驗變為現實）。

功能性不是必需品，但如果有效整合，它可以將品牌提升到新的高度。但是，並非每個品牌都需要在其網站中進行自定義和样式化。在創建超風格化的功能模型之前，了解您客戶的品牌和目標受眾。

嗓音

像圖像一樣，語音是一種將在網站和社交媒體上使用的元素。它具有內容和設計元素的雙重功能。大多數來找你的公司都已經預先建立了他們的文案，因為文案通常是內部或外包文案的工作。但是，如果您的任務是創建副本，請使其與視覺設計元素的個性和風格保持一致。

風格與個性

顏色、排版、圖像、功能和聲音共同傳達品牌的整體風格和個性。作為網頁設計師，您的工作是將這些設計元素組合在一起，以網站的形式為您的客戶展示所需的身份。

就像發現和研究方法所做的和將要發生的那樣，上面列出的每一個元素都可以相互提供結構。令人興奮的部分是看到這些元素結合在一起，為品牌及其用戶建立了高質量的用戶體驗。

4. 創建你的線框和內容

在您定義了項目範圍和目標、收集了您的內容並充實了您的品牌之後，是時候構思您的網站佈局了。是時候進行線框圖了。

當您想到線框時，請考慮與建築師的草圖有關。它是概念性的。它的目的是給出結構和方向。但是，它不是成品。線框將被迭代。它們幾乎用作指導，因此它們並不完全是有限的，因為它們只是網站或移動應用程序預期設計的藍圖。

然而，這並不是說線框圖是不必要的。這是完全不真實的。即使您決定在您選擇的 Web 構建器中使用模板或可複制模板繼續前進，您仍然需要某種方向或願景，以允許您概念化和可視化網站設計的內容和佈局。

無論您在進行線框設計時使用何種媒介，至少有一個草圖設計（或使用您首選的設計工具進行線框設計，想想 Figma、InVision、Adobe Xd 等）符合您的最大利益。

線框圖後和設計前優化您的內容

我們快到了，抑制你的興奮再多一點！如果您在開始設計之前優化內容，我們希望解決可能出現的潛在 SEO 機會。

回想一下，存在一個網站來產生潛在客戶並將這些潛在客戶轉化為新客戶。這在理論上是可以實現的，“做一個網站，人就會來”。然而，僅谷歌就有超過44.5 億個網站被收錄……

您的網站適合哪裡？更好的是，如何在谷歌或任何其他搜尋引擎的首頁上找到並列出網站？

很簡單，通過預先調整您網站的副本、內容和頁面（即站內 SEO），使其與您預期的站外 SEO保持一致。

在最終確定您的品牌標識後，坐下來組織一個站點地圖（或將包含在您的網站中的所有預期網頁的列表）。現在列出這些頁面中的所有內容和副本，然後列出與所述內容和副本相關的關鍵字和關鍵字短語。此外，請務必查看您網站的 URL 和替代圖片，並指定可以在其元標題和描述中使用的關鍵字。

關鍵詞？我如何知道要為我的網站和內容使用哪些關鍵字？

研究，當然。

與競爭對手的網站和內容相關的短語和關鍵字組合是什麼？你會輸入什麼來查找你的內容？

你的目標受眾使用什麼語言，具體來說，谷歌的趨勢是什麼？

這些查詢只是您如何以及在何處為您的新網站和網路內容尋找SEO 機會的一小部分。在您的設計過程中，您可能還需要解決 SEO 的許多其他方面（取決於您的客戶是否有內部 SEO部門或外包 SEO專家或代理機構），但這是另一篇文章。

在直接進入設計之前，花點時間投入到優化內容的過程中。Webflow 的 Designer 平台使這樣做成為一項相當簡單的任務（尤其是與競爭的 Web 構建器平台相比），但是，如果您在啟動後才訪問此任務，Webflow 的編輯器還允許您輕鬆優化您的內容而無需打開設計師。

是否會要求您優化網站和內容將始終取決於客戶。同樣，有些人可能已經預先外包了一名 SEO 專家，有些人可能有一個SEO內部團隊，而有些人可能兩者都沒有。儘管如此，您最好了解 SEO 的基本原理，因為它是 Web 和 UX 設計的一個組成部分。

您會在發布後感謝自己。

5. 選擇您喜歡的 Web 構建器平台

確定您的身份並收集內容後，您現在可以進入下一個階段，選擇您的網路構建器平台。WordPress、Wix、Squarespace 和 Shopify 是用於網頁設計、網頁開發、CMS 和電子商務的常用平台。然而，值得注意的是，這些平台中的每一個都有其局限性和缺點。這些對大多數設計師來說是一個重大的障礙和最終的煩惱。

WordPress

WordPress 最適合寫部落格。但是，在購買 WordPress 主題和外掛以增加其功能時，它既可以用作靜態 CMS，也可以用作動態 CMS，但這樣做的成本相當低。管理和維護很快就會變得繁瑣，詢問任何選擇離開平台使用 Webflow 的設計師，他們會給你一個完整的綱要。

相關閱讀：WordPress 用戶遷移到 Webflow 的 5 個原因

WIX 和 Squarespace

Wix 和 Squarespace 可能僅限於其平台的主題或用戶操作所選主題腳本的能力。通常使用這兩個平台製作的網站缺乏原創性。這種對真實性的無能嘗試對任何品牌的目標受眾來說都是顯而易見的。用戶和消費者都可以很快發現網站明顯的“類似批發庫存產品”的藉口。雖然他們可能仍然會一次性購買你的產品，但發現一個既真實又有吸引力的競爭品牌只是谷歌搜尋或 Instagram 發布而已。

Shopify

Shopify 非常適合電子商務，但同樣，它根據用戶的意願定制主題的能力太有限了。使用 Shopify 製作的網站也可能陷入 UI 和功能看似同質化的陷阱。結果，品牌的身份變得混亂，由於缺乏原創性而丟失，部分原因是網站建設者的局限性和/或設計師不知道代碼——這對設計師來說沒有錯，設計師的工作是設計，開發人員的工作是開發。

Webflow

如果您能夠設法在這些平台提出的障礙內進行設計，那麼您將獲得更多力量。然而，對於那些希望自己設計的人來說，Webflow 是一個平台。該平台擁有超過 200 萬用戶，可以迎合任何可能出現的設計奇思妙想，該平台傾向於您的藝術性，擺脫了設計師和藝術家等上述平台帶來的強加。

Webflow 的設計團隊從更常見的網站建設者和內容管理系統中汲取了所有最佳功能，並為像您這樣的專業人士和有抱負的設計師簡化了它們。該平台被稱為“為 web 構建的現代方式”，就是這樣一種為 web 構建、發布和擴展您的品牌的現代方式。

6. 在 Webflow 中創建您的高保真模型

在我們深入研究 Webflow 的界面和功能之前，了解網站的基本結構非常重要（尤其是如果這是您第一次涉足網頁設計）。

網頁設計迷你速成課程

網站有三種不同的形式：HTML、CSS 和資料庫。

為簡潔起見，HTML（超文本標記語言）是網頁上的內容和網頁上該內容的結構，CSS（級聯樣式表）是內容的樣式和呈現方式（想想字體、顏色、定位等），資料庫是存儲內容的地方。

通常，您需要將這些元素轉換為網頁的代碼，然後再轉換為整個網站以及存儲此代碼的資料庫。但是，Webflow 通過在 Webflow 設計器和編輯器中合併這些組件來為您做到這一點。

注意：在 Internet 上請求網站還需要 Web 服務器、瀏覽器、主機、DNS 等。這些都預先集成到 Webflow 的平台中。

與設計師一起建造

現在，終於到了開始設計的時候了。如果您遵循本指導中提出的建議，首先充實您的網站的目的和身份，（不是為了“規則”，而是為了您自己），“樂趣”終於可以開始了！

*重定向*

重定向！

好的，讓我們打開構建器，或者更確切地說，設計器。

一塊空白的畫布。組件的側邊欄。選擇組件後，組件內的另一個側邊欄。現在這些類和佈局中的類和佈局設置以及更多選項？嗯。

從哪裡開始……

使用 Webflow，您可以直觀地構建。您在左側邊欄中看到的那些組件通常是通過 CSS、HTML 或 Javascript 實現的。然而 Webflow 是無代碼的，所以如果您想開始構建，只需將您選擇的組件拖放到畫布上即可。拖動組件後，您將在右側邊欄中看到進一步修改的選項（即所選組件中的組件）。這些是組件中的類，您可以在其中對所選組件進行樣式化。

但是讓我們回溯一下。使用 Webflow，您可以選擇從頭開始設計、使用我們數百個模板中的一個，或者使用可克隆的.

因此，與其問自己從哪裡開始，不如問自己，你想如何開始 ？

從頭開始

這實際上是從頭開始的。將此選項想像為空白畫布，側欄中的工具是您的油漆、底漆等。

對於新手設計師來說，從頭開始可能會令人生畏，因為您會看到一個可以轉換成任何東西的空白畫布，但與此同時，您沒有任何東西可以藉鑑。錢幣。

Webflow 大學也有關於Webflow 基礎的免費教程免費教程。這是一個 2 小時的速成課程，可幫助您在將隱喻的底漆倒在畫布上之前熟悉平台的界面和功能。如果您想體驗設計器界面中的一些功能，例如拖放組件，那麼您將能夠熟悉“冰山一角”。

但是對於那些通過更實際的起點或一些指導來學習的人來說，使用模板可能是一個更可行的起點。

相關閱讀：Webflow 教程：絕對的初學者指導

使用模板

無論您決定使用哪種 Web 構建器平台來構建您的網站，模板都是深入了解平台界面和功能的絕佳方式。

幸運的是，Webflow 擁有500 多個響應式網站模板，這些模板已經針對所有屏幕尺寸和移動設備進行了優化，從企業到投資組合、部落格、電子商務網站、UI 工具包、登錄頁面等等，供您使用。

作為新手，也許從我們的免費模板中進行選擇是一個很好的起點中選擇一個，然後從那裡開始試驗和使用 Designer 的界面，單擊所需的模板並在 Designer 中進行預覽。它不再那麼令人生畏了，是嗎？

在將鼠標懸停在每個元素或 div 框上時，您可以了解 Designer 中的界面是如何工作的。此外，如果您熟悉 Adobe 的設計平台，例如 InDesign 或 Photoshop，您應該能夠輕鬆地瀏覽界面。

到處玩。

您將能夠在左側邊欄中看到不同的功能，包括添加元素、佈局、頁面、更改網站以具有電子商務網站的功能、編輯模板中預裝的不同資產，甚至添加使用您自己的 CMS 集合來處理它。您在界面中玩得越多，瀏覽Webflow University上的免費教程就越多上提供的免費教程越多，Designer 的界面就越有意義，您將立即無限輕鬆地進行設計。所以玩！

這就是創建 Webflow 的原因。

提示：如果您打算使用模板（或可複制模板），在左側邊欄的資產文件夾中，您可以調整內容以與您網站的品牌標識保持一致。您還可以通過位於左側邊欄的 CMS 收藏文件夾添加其他內容。

使用可克隆

可克隆是奇妙的工具Cloneables 是Webflow 網頁設計師為您帶來不要與模板混淆，可克隆對象的用途相似，但它們不是模板。

選擇任何吸引您眼球的可克隆項目，然後在 Webflow 中單擊“打開”。系統會像使用模板一樣向設計器提示您。同樣的事情也適用於這裡。

再一次，到處試試。

探索左側的組件和右側的自定義。將鼠標懸停在畫布上的 div 框上，單擊，您將在左側和右側邊欄上看到提示。玩對齊，間距，大小，你有什麼。拖放頁面上已有的 div 框元素或添加您在左側邊欄中看到的新元素。

就像你從頭開始或使用模板一樣試試看，這裡唯一的區別是，當你完成並蔑視你的慾望並準備發佈時，點擊“克隆”，你就可以製作這個設計你自己。

是的，再一次，就是這麼簡單。

而且，如果您仍然因任何原因陷入困境，您總能從Webflow Showcase中找到靈感。才華橫溢！

提示：無論您是從頭開始、使用模板還是可克隆的，如果您單擊左下側邊欄上的攝像機圖標上的光標，您將看到視頻教程，詳細說明您開始理解所需的所有內容設計器中的功能。

提示：在單擊發布之前，請單擊位於攝像機上方放大鏡圖標正上方的複選框圖標，您將能夠對您的網站進行審核，以確保網站的可用性和性能沒有問題。

7. 進行用戶測試

不要對用戶測試這個術語感到沮喪。雖然這看起來像是很多或額外的步驟，但事實並非如此。用戶測試只是確保你的 I 點在你的 I 上並越過 T 的方法。這是額外的保證，即在發布後，您的網站界面在其設計和用戶流程上都足夠了。即使流程不像某些 UX 項目那樣複雜，執行此基本測試也會對您有所幫助。

花時間向您的同行或朋友展示您的網站。記錄他們的見解並提出問題以獲取反饋。這可以是有節制的或無節制的根據您的喜好和網站的複雜性，在本文的上下文中，也許對您的網站進行簡單的同行評審是最合適的。不過，請使用您認為最適合您的網站的方法。

8. 發布您的網站

你的設計完成了，已經被同行認可了，接下來怎麼辦？

如果您使用 Webflow 作為您的 Web 構建器平台，請單擊發布。

是的，你沒看錯，點擊發布。

Webflow 是一個生產就緒的網站設計器、CMS 和託管工具，具有內置的資料庫和託管，所以是的，繼續點擊發布。如果您還沒有這樣做，系統會提示您購買或註冊您的域名。接下來，如果有必要，系統會提示您選擇計劃或客戶計費選項。

好了，你的新網站應該已經上線了。

是的，就這麼簡單，就應該如此。

9. 相應地管理、擴展和迭代

需要迭代特定網頁上的內容？是否有新頁面要添加到您客戶的網站，以便他們下週推出新產品系列？或者想要管理或自動化您的 SEO？

編輯器讓您的內容管理變得簡單。任何內容更改、副本調整、部落格條目、SEO 添加、更新和自動化都可以在幾秒鐘內實現和發布，無需任何外掛、持續維護或站點迭代。

您可以與任何團隊成員、客戶或同事共享這些功能，而不必擔心他們會破壞網站，因為編輯器與設計器是分開的。是的，你可以呼氣。

Webflow Editor 的設計考慮了最終用戶，即您的客戶和/或同事。用戶界面很簡單，一口氣就能消化。

哦是的。

不要讓我思考！

您的客戶和/或同事可能對了解 Designer 的細微差別和復雜性不感興趣，因為這可能與他們的工作量無關。Webflow 的設計團隊牢記這些工作場所的現實，這就是我們擁有編輯器的原因。

項目移交、迭代和整體管理應該不會讓人頭疼或打嗝。沒有不可預見的學習曲線或幻滅的餘地。

任何人都可以設計網站。我沒有誇張或開玩笑。無論是靜態的、動態的、電子商務，對於企業、代理機構、投資組合、部落格、論壇——無論你或你的客戶的心願——任何人都可以設計一個網站，並且他們可以通過使用 Webflow 做得很好。

網頁設計應該是一個自由而引人入勝的創作過程。一個沒有界限的，就像它用於平面設計或插圖一樣，並且使用 Webflow，它就是。

Webflow 是設計師的遊樂場，它是您的遊樂場！

這個平台令人興奮，因為它通過為各種背景、知識和經驗的設計師提供探索他們想像力的終點並在此過程中給客戶留下深刻印象的工具來鼓勵創造力。它是一個平台，可以讓您成為專業的網頁設計師，增長您的知識，擴大您在客戶中的影響力，並發現其他有抱負的專業設計師網路。

Webflow 讓網頁設計再次變得有趣。它無限的能力培養了這樣一種觀念，即任何人都可以建立一個網站，而不必因為一個過時、平淡或複雜的網路構建器而損害他們的藝術性。