我們如何在 Articulate Marketing 建立網站

已發表: 2022-04-12

首先,我們建立 HubSpot CMS 網站。 如果您不知道 HubSpot 是什麼,請不要擔心。 前往此處進行簡單介紹。 對於那些仍然和我們在一起的人,今天我們將概述為我們的客戶構建網站的過程。

本文基於我們的一次網絡研討會,該研討會由我本人主持,Articulate Marketing 工作室負責人 Ioana Negulescu。 您可以觀看視頻並下載以下幻燈片:

下載幻燈片

網站建設挑戰

在構建新網站(或遷移現有網站)時,通常有一個初始步驟。 我們需要減輕一些恐懼。 客戶因之前代理機構的經歷而被燒毀的情況並不少見。

當我們聽到...

“我們擔心建立一個新網站,因為上一個網站太痛苦了。”

我們這樣做...

我們已經聽過很多次了。 所以,我們努力做得更好。

例如,我們喜歡使用里程碑,而不是使用甘特圖。 我們關注的一件事是擁有一個透明的流程,並不斷更新進度。 這讓我們的客戶有安全感。

在網頁設計過程中,對我們來說非常非常重要的一件事是:通過電子郵件進行視頻通話。 這很重要,因為我們可以衡量客戶的反應。 如果他們有點安靜,如果他們非常興奮,等等。 這樣,我們就可以提出符合他們期望的建議。 當然,還要回答他們可能提出的任何問題。

當我們聽到...

“我們多次試圖追捕開發商,他們就是不會再找我們。”

我們這樣做...

為了標記進度,我們使用定期的項目管理電話,我們從第一天起就在日曆中。 在這些項目管理電話會議中,我們展示了新工作並確定了阻礙因素。

設計人員和開發人員需要時間來真正完成工作,因此他們參加每個此類電話會議並不總是有意義的。 我們在相關時將它們引入。

當我們聽到...

“如果新網站不能滿足我們的期望怎麼辦?”

我們這樣做...

在我們開始任何網站設計項目之前,我們都會了解他們的營銷策略基礎。 這非常重要,因為在這個階段,我們了解客戶的客戶、買家的旅程和企業的營銷目標。 這將為我們做出關於網站的許多戰略決策提供信息,從一開始就設定期望。

然後,我們轉向品牌架構。 在這裡,我們列出了網站的基本原理。 顏色、圖像或插圖、UX/UI 元素、字體——網站的整體美感。 這是一個非常協作的過程。 我們的客戶參與了每一步,因此他們的輸入和要求都包含在最終產品中。

新的號召性用語

一個例子:HTG

我們為 HTG 建立了一個屢獲殊榮的網站,因此我們將在整個過程中使用它們作為示例。

當我們第一次與他們交談時,他們表達了這些恐懼並概述了他們的挑戰。 這些是 B2B 技術公司中非常常見的問題:

  • 雄心勃勃的業務增長目標
  • 過時的網站(和品牌)
  • 很少有潛在客戶捕獲機會
  • 笨拙的導航
  • 用戶體驗差
  • 網站性能不佳

如果這聽起來像您,那麼請到這里為您的網站評分。

銜接過程

簡而言之,這是我們的流程。 單擊此圖像以查看更多詳細信息:

我們如何在 Articulate Marketing 中建立網站 - 網站流程圖

讓我們回到HTG的例子。 與他們一起,我們遵循了通常的七個階段流程:

1. 開球

啟動是網站項目的第一次互動。 在那次電話會議中,我們試圖衡量客戶對設計和品牌抱負的偏好。 我們希望將這些偏好從戰略上與任何 Articulate 網站的最終目標保持一致:建立一個運作良好的營銷引擎。

2.情緒板和網站結構

我們如何在 Articulate Marketing 中建立網站 - 網站導航結構 這裡我們運行兩個內部進程。 一種是將情緒板、字體推薦、顏色推薦、圖像等放在一起。

另一個是,與我們的營銷文案團隊一起,我們將網站地圖推薦放在一起。 這是導航結構和我們需要構建的頁面。

然後,我們有一個客戶審查電話,這是我們的第一個重要里程碑。 在每個階段結束時,我們都會進行審核電話。 如果一切都獲得批准,我們將進入下一階段。 如果不是,我們返回並迭代。

3. 初始設計和線框圖

我們如何在 Articulate Marketing 中構建網站 - 顯示主頁模塊的 4 個初始設計選項 在這裡,我們將主頁設計為展示網站美感的一種方式。 通常,我們會創建一些不同的選項供客戶選擇。 當我們以模塊化方式設計時,我們認為這是展示一些最重要的“樂高積木”外觀的步驟。

同時,我們圍繞頁面結構制定策略。 也就是說,什麼樣的內容會出現在哪個頁面上? 我們需要哪些樂高積木?

然後我們的團隊構建線框,就像沒有設計元素的網站頁面的粗略草圖。

4. 設計所有模塊並編寫草稿網絡副本

我們如何在 Articulate Marketing 中構建網站 - 里程碑列表和為客戶構建網站的進度 在這個階段,我們的文案團隊開始起草副本,而設計團隊則繼續設計網站所需的所有模塊。 我們並非總是將所有副本都寫在客戶的網站上,但當我們這樣做時,我們會根據預先商定的站點地圖以透明的每頁為基礎收費

5. 開發網站

為了現場展示模塊設計,我們使用lorem ipsum 副本和占位符圖像開發和構建所有頁面,以便我們的客戶可以正確了解最終結果。

與開發人員合作時,任何開發人員,您都想問他們一些相關的問題:

  • 為了對我們的網站進行編碼,您採取了哪些主要步驟?
  • 你如何確保代碼整潔? (模板網站的一個主要問題。)
  • 您何時以及多久檢查一次速度和整體性能?
  • 網站開發後如何構建頁面? 對於構建頁面的人來說,這是否是一種友好的用戶體驗?

或者,如果您正在使用 Articulate,“您解決魔方的最快時間是多少?” 我們歡迎這樣的問題。

我們的開發過程從 Notion 開始,在那裡計劃我們的工作。 然後,我們設置導航和一些全局模塊的基本代碼。 接下來,我們為我們需要為該特定網站構建的每個設計元素和功能準備一份質量保證清單。 這將使我們在整個構建過程中保持正確。

我們在 HTML 中搭建所有模塊,然後開始查看樣式。 所以,想想磚、灰泥、繪畫和裝飾。

在整個過程中,我們測試一切,檢查性能並進行改進。 通常,我們會學習如何做得更好,並將這些專業知識帶入我們的下一個網站。

6. 填充頁面

我們如何在 Articulate Marketing 中構建網站 - 網頁的 HubSpot 編輯器 在這個階段,經過幾次迭代和客戶評論,我們用批准的副本和圖像填充頁面。 在這個階段,該網站幾乎可以啟動了。 我們經歷了另一個客戶審查階段,之後,我們運行了一個全面的發布前質量檢查清單。

7. 發射!

我們發布,然後我們運行另一個發布後質量檢查清單,因為確保網站正常運行並且從登台到上線沒有任何問題是非常重要的。

最後,當然,我們慶祝!

優秀網站設計的 10 個技巧

以下是我們多年來學到的一些規則,以及數十個網站構建:

  1. 將您的偏好放在第二位,然後將您的角色的痛點放在第一位。
  2. 專注於您如何幫助您的客戶,而不僅僅是列出您的服務。
  3. 不要試圖重新發明輪子。 什麼有效,有效是有原因的。 例如,只關注首屏區域是一個神話。 每個人都知道如何滾動。 甚至還有一個關於它的網站:http://abovethefold.fyi/
  4. 保持導航簡潔明了。
  5. 使按鈕以價值為導向。 盡可能避免通用副本。
  6. 如果存在具有更多上下文的頁面,請始終鏈接到相關頁面。
  7. 在關鍵頁面上,避免有太多的外部鏈接。 (你的博客是一個不同的故事。)
  8. 始終以一個或多個 CTA(號召性用語)結束頁面,​​將用戶帶到流程的下一步。
  9. 不要低估聯繫頁面的力量——它通常是一個退出點,但你真的非常想把人們留在那個頁面上。
  10. 少即是多!

獎勵:不要讓標誌決定一個糟糕的設計

當我們設計 HTG 的網站時,他們的標誌已經過時,不再適合我們想要的品牌。 我們通過一些簡單的更改對其進行了現代化改造:

我們如何在 Articulate Marketing 中建立網站 - 在 HTG 徽標之前和之後 這裡有一些值得深思的地方。 在我們的數字時代,您的品牌最有可能是您的網站,而不是您的徽標。 因此,首先考慮網站,其次考慮徽標。

發射後會發生什麼?

好的。 你有一個新網站。 怎麼辦? 正如我們所說,在 Articulate,我們將網站視為營銷引擎,因此我們的參與不必在發佈時就結束。 事實上,這只是我們大多數客戶旅程的開始。

從創建新內容(例如博客、支柱頁面、門控報價和“擠壓”頁面)到運行行為跟踪和多變量測試,您的網站可以做的還有很多。

潛行高峰:核

那麼如何獲得 HubSpot 網站呢? 有幾個選項,例如定製網站構建,但一種方法是使用 HubSpot 主題。 Nucleus 是 Articulate 自己的此類主題。

主題就像一個更複雜的網站模板。 我們自己的網站是建立在 Nucleus 之上的,我們已經將它用於具有大量設計風格的多個客戶。 我們將於 2022 年在 HubSpot 市場上推出它。借助 Nucleus,我們可以在幾週甚至幾天內為我們的客戶構建高度優化的網站。 這一切都相當令人興奮!

>> 點擊這裡探索 Nucleus <<

新的號召性用語