設計和實施我們公司的行銷網站:從內容到實施的旅程
我們最近更新了公司的網站。這篇博客文章詳細介紹了我們用來改善網站的工具和方法。
如果你是 Logto 的用戶,你可能會發現我們公司的網站最近進行了更新。 如果你不是,請查看我們的網站 logto.io,來猜猜我們為了實現這一目標投入了多少資源。
你可能會想,你們是否在自我宣傳,展示優秀的執行力需要大量的工作、努力和精心設計?
不!
相反,我們想展示我們如何巧妙地利用工具和方法來提高產品質量,並為用戶提供最佳的產品和服務。
我們從社群中收到了正面的反饋,並在思考我們是如何做到這一點的。這次的更新不一樣,因為我們在飛速發展的環境中完全重新設計了一個新的工作流程。我們願意介紹我們的最佳實踐,也希望更深入地了解我們的團隊合作和協作文化。
背景
我們是一支技術團隊,專注於提供各種客戶身份相關的開發服務和基礎設施工作。交付的壓力不小。與此同時,我們需要支持各種講故事和運營任務,例如構建品牌化市場行銷網站、撰寫博客、推廣我們的項目以及與用戶互動。
一個引人注目的登陸頁面至關重要,因為它通常是觀眾對產品的第一印象,幫助他們了解產品要解決的問題,包括定價和任何著名客戶的社會證明。
此外,它還可以滿足多個商業目標:
- 展示你的產品品牌和價值主張。
- 生成潛在客戶。
- 作為內容中心,特別是對於專注於產品主導或開發者主導增長的公司來說,尤為重要。
- 提供一個優化 SEO、獲取用戶並跟踪常規流量的地方。
在我之前的工作中,我曾參與過一個網站項目。讓我們看看一個典型的工作流程包含什麼:
- 首先,產品行銷經理和產品經理定義內容和要求。
- 產品設計師和 UX 編寫者完善內容。
- 我們將正在進行的工作,通常是低保真版本,交給視覺和品牌設計師進行最終修改後投入生產。
- 工程師和產品經理然後開始實施,重點是動畫和響應式網頁設計。
這個過程繁瑣,涉及很多人和利益相關者,這使它不適合快節奏的環境。
即使我們最初只有兩個人維護這個——一個產品設計師和一個工程師——管理網站性能、上傳圖片、確保響應式設計、處理圖片格式和更新內容的任務仍需要大量往返溝通。
這種工作流程效率低下。我一直在考慮如何釋放工程資源,以專注於核心產品工作,而我負責管理其餘的。
使用工具提高生產力是我們團隊的核心理念。因此,我開始研究可以幫助簡化這些過程的工具。
分析需求
要開發一個成功的 SaaS 行銷網站,讓我們分解所需的基本元素:
- 內容:任何行銷網站的基礎是精確知道要展示什麼。這需要對目標客戶、他們的典型用例和你產品的價值主張有深入的了解。沒有任何工具可以替代這種理解。幸運的是,我在產品設計和市場進入策略方面的參與使我能夠創建滿足用戶需求的內容。
- 設計:網站應該具有精緻和光滑的視覺吸引力。儘管我的 UX/產品設計背景不如專業設計師那麼廣泛,但我能夠勝任這方面的工作。
- 工程:關鍵的技術考慮因素包括託管網站、確保響應式設計和啟用流暢的小互動。還需要將網站無縫集成到其他組件中,如鏈接重定向和產品的身份驗證頁。
進行了一些研究後,這是我計劃用於設計方面的工具包:
產品和行銷內容
ChatGPT 3.5、ChatGPT 4.0、Gemini Advanced、Jasper 或類似的 AI應用作為輔助駕駛。
這是為了微調和優化我的行銷內容和信息。清楚它們背後的目標和意圖非常重要。AI只是輔助駕駛,不是決策者。在我撰寫任何行銷信息之前,我會問自己幾個問題:
- 誰會讀這個信息?
- 他們是否需要一些額外的背景資料?
- 你想在信息中解決的關鍵點是什麼?
- 你期望用戶下一步要做什麼?
- 這個信息是為了教育還是推動特定行動?
- 這有可能誤導或誇大其詞嗎?
然後我會寫下我想交流的要點的初步草稿。
有時候 AI 可能會引入看起來陳舊的詞彙或扭曲你原本的意圖,使其感覺合乎邏輯。但是,你必須重新強調你的意圖並堅持你的目標。你必須建立標準,以確保提供給受眾的文字清晰、簡潔、樸實且透明。在我們的產品領域中,這一點尤其重要,因為它服務於許多企業和開發者。
設計
Figma、Framer 用於互動和視覺設計,以及動畫和原型設計
我有設計背景,主要集中在產品設計上,這涉及到設計 UI 和 UX。雖然設計精美的 UI 對我來說不是挑戰,但我的工作不如專業的精緻。然而,擁有一些基本的視覺設計和插圖技能,並選擇合適的工具,你可以提高工作的質量。我在這個創作過程中使用 Framer 和 Figma。
這是我們的舊設計,完全由 Figma 建成
我們的原始設計在 Figma 裡創建。我用了官方的 Framer 插件,"Framer to HTML",來複製並粘貼基本設計到 Framer 裡,這提供了良好的起點。
下一步是設計。如果你之前使用過 Figma,轉換到 Framer 是一個流暢的過程,因為整體用戶體驗非常相似。我將突出一些顯著提高生產力的有趣互動。
佈局
Figma 用戶喜歡自動佈局,因為它節省了很多時間來佈置和放置元素。然而,Framer 的佈局功能更智能,更符合前端思維。在 Framer 中,你可以選擇使用方格佈局或堆疊佈局,定義列,設置最大寬度,並在需要時自動換行到另一行。這種功能通過模擬元素在真實網頁環境中的行為來提高設計過程。
響應式設計的斷點
通過聰明地設置斷點和寬度設置(如填充、固定、相對和適合內容)以及定義不同的畫布,你可以輕鬆且精確地實現各種響應式設計。這種方法讓你能夠有效地針對不同的屏幕尺寸和設備調整佈局。
動畫
Framer 提供各種預先構建的動畫,包括 ticker
動畫,我們在網站上 廣泛使用來展示我們的作品。你可以設置組件並嵌入此小工具中。它允許你定義速度、方向、間距等不同的配置,讓你掌控網站上動畫的行為。
Framer 另一個有用的功能是能夠自定義滾動動畫。例如,你可以具體設置物品在滾動過程中如何顯示。設置滾動動畫使你能夠控制元素顯示的時間和樣式,提升用戶體驗和內容的互動性。
快速發布
我的關鍵需求之一是能夠:
- 快速設計多個登陸頁面,以進行 SEO 優化和行銷活動。速度必須。
- 頻繁更新內容。產品登陸頁應反映最新的發展和當前的產品定位。過時的內容意味著錯失市場機遇,無法與客戶的需求保持同步。
在我之前的工作流程中,每當需要更新內容時,我要麼要求一名工程師來做,要麼自己提交拉取請求。我們的工程團隊遵循嚴格的流程以確保代碼質量,這可能耗時並限制我快速更改的能力。
Framer 為我解決了這個問題。現在,每當我做出更改並點擊發布,它就立即在生產環境中顯示。這項功能大大簡化了過程,使快速更新和更大的內容管理自主性成為可能。
工程
由於由 Framer 託管,我們不需要進行任何實施或技術工作。我們的工程師只需約 10 分鐘就能將其與我們其餘的網站集成。
我們當前的網站由 20-30 頁組成; 有些是使用 Framer 開發的,而其他是通過 傳統軟件開發方法創建的。我們正在選擇最佳工具來維護我們的頁面。例如,對於開發者文件,Framer 很難管理,使用面向開發者的文檔框架來託管內容是最佳選擇。今後,我們將評估需求,並決定是繼續自我託管還是完全轉向 Framer。
它如何改變我們的工作流程
我們完全改變了我們的工作流程,讓行銷網站的製作變得毫不費力。它可靠、可維護且高效。
我寫這篇博客是為了分享最佳實踐。如果你有使用 Framer 設計美麗網站的經驗,我很想聽到。讓我們交流並互相學習。
現在是時候查看我們的產品了!訪問我們 logto.io。