設計和實施我們公司的市場推廣網站：從內容到實施的旅程

如果你是 Logto 的用戶，你可能會發現我們公司的網站最近被更新了。 如果你不是，請查看這個網站，logto.io，然後猜猜我們投入了多少資源來實現這個目標。

你可能會想，你們是不是要自我宣傳一下說，這需要大量的工作、努力和精心設計，只是為了展示你們執行力的優秀？

不！

相反，我們想展示的是如何聰明地利用工具和方法來提升產品質量，並為用戶提供最佳產品和服務。

我們收到了社群的一些正面反饋，也想知道我們是如何做到的。這次更新不同，因為我們在迅速變化的環境中完全重塑了一個新的工作流程。我們想介紹我們的最佳做法，並深入了解我們的團隊合作和協作文化。

背景#

我們是一個技術團隊，專注於提供廣泛的客戶身份相關的開發服務和基礎設施工作。交付壓力非常大。同時，我們需要支持各種講故事和操作任務，比如建立品牌市場推廣網站、寫博客、推廣我們的項目，以及和用戶互動。

一個吸引人的登陸網站是非常重要的，因為它通常構成了受眾對你產品的第一印象，幫助他們理解你的產品旨在解決的問題，包括價格和任何突出的客戶以提供社會證明。

此外，它可以實現多個業務目標：

• 展示產品的品牌和價值主張。
• 產生潛在客戶。
• 作為內容中心，特別是對於專注於以產品驅動或開發者驅動增長的公司來說尤為重要。
• 提供一個優化 SEO，獲取用戶並追蹤常規流量的地方。

在我之前的工作中，我曾參與過一個網站項目。讓我們看看一個典型的工作流程包括了什麼：

1. 首先，產品市場推廣經理和產品經理定義內容和需求。
2. 產品設計師和 UX 作家完善內容。
3. 我們將進行中的工作，通常是低保真版本，轉交給視覺和品牌設計師進行最終潤色，再進行生產。
4. 工程師和產品經理然後開始實施，專注於動畫和響應式網頁設計。

這一過程繁瑣且涉及許多人和利益相關者，使其不適合快速變化的環境。

即使我們最初只有兩個人維護這一點——一個產品設計師和一個工程師——管理網頁性能、上傳圖片、確保響應設計、處理圖片格式和更新內容的任務仍然需要大量的反饋和溝通。

這個工作流程效率低下。我經常思考如何騰出工程資源專注於核心產品工作，同時由我管理其餘的部分。

使用工具提升生產力是我們團隊的關鍵理念。因此，我開始研究可以幫助簡化這些過程的工具。

確定需求#

要開發一個成功的 SaaS 市場推廣網站，讓我們分解所需的基本要素：

1. 內容：任何市場推廣網站的基礎是知道要展示什麼。這需要深入理解你的目標客戶、他們的典型用例和你的產品價值主張。沒有工具可以替代這種理解。值得慶幸的是，我參與產品設計和市場進入策略使我能夠創造滿足用戶需求的內容。
2. 設計：網站應該有一個精緻而光滑的視覺吸引力。儘管我的 UX/產品設計背景不如專業的創意設計師那麼廣泛，但它使我能夠勝任這一方面的工作。
3. 工程：關鍵技術考量包括託管網站、確保響應式設計和實施流暢的微交互。還需要將網站無縫集成到其他組件中，如鏈接重定向和產品的身份驗證頁面。

經過一些研究，這是我計劃用於設計方面的工具包：

產品和市場內容#

ChatGPT 3.5，ChatGPT 4.0，Gemini Advanced，Jasper，或類似的 AI 應用作為助手。

這是為了細化和優化我的市場內容和信息。明確目標和意圖背後的目的很重要。AI 只是個助手，而不是決策者。在我寫任何市場信息前，我會問自己幾個問題：

1. 誰會讀到這個信息？
2. 他們是否需要一些額外的背景？
3. 你想在信息中解決的關鍵點是什麼？
4. 你希望用戶的下一步行動是什麼？
5. 這個信息是為了教育還是驅動某個特定行動？
6. 這有沒有可能導致誤導或誇大？

然後，我會寫出我想要傳達的要點草稿。

有時候 AI 可能會引入一些陳舊的詞彙或扭曲你原本的意圖，使其感覺在邏輯上正確。然而，你必須重申你的意圖並堅持你的目標。你必須建立標準以確保傳遞給受眾的詞語清晰、直接、簡潔和透明。這在我們的產品領域中特別重要，因為我們服務許多企業和開發者。

設計#

Figma，Framer 用於交互和視覺設計，以及動畫和原型製作。

我有設計背景，主要專注於產品設計，包括製作 UI 和 UX。雖然設計精緻的 UI 對我來說不是問題，但我的工作不像專業設計師那麼光滑。然而，通過一些基本的視覺設計和插圖技能，並選擇合適的工具，你可以提高工作的質量。我在這個創意過程中使用 Framer 和 Figma。

這是我們的舊設計，完全由 Figma 構建

我們的原始設計是在 Figma 中創建的。我使用了官方的 Framer 插件，“Framer to HTML”，來複製和粘貼基本設計到 Framer，這提供了一個良好的起點。

下一步是設計。如果你之前使用過 Figma，過渡到 Framer 是一個流暢的過程，因為整體用戶體驗非常相似。我將重點介紹一些顯著提高生產力的有趣互動。

佈局#

Figma 用戶喜愛自動佈局，因為它節省了不少在排版和放置元素上的時間。然而，Framer 中的佈局功能更智能，與前端思維更加一致。在 Framer 中，你可以選擇使用網格或堆疊佈局，定義列、設置最大寬度，並且如果需要，它將自動換到另一行。此功能通過模擬元素在實時 Web 環境中的表現來提升設計過程。

響應式設計的斷點#

通過智能地設置斷點和寬度設置（例如填充、固定、相對和適合內容）並定義不同的畫布，你可以輕鬆準確地實現各種響應式設計。這種方法允許你有效地根據不同的屏幕尺寸和設備調整佈局。

動畫#

Framer 提供了各種預製動畫，包括我們在網站上廣泛使用的 ticker 動畫。你可以設置該組件並將其嵌入到該小工具中。它允許你定義各種配置，如速度、方向、當分鐘額，更多，讓你擁有靈活的控制和控制動畫在網站上的行為方式。

Framer 的另一個有用功能是自定義滾動動畫的能力。例如，你可以指定項目在滾動時進入視圖的顯示方式。設置你的滾動動畫允許你控制元素顯示的時間和方式，提升用戶體驗和內容參與度。

快速發布#

我的一個關鍵要求是能夠：

1. 快速設計多個登陸頁面 用於 SEO 優化和市場推廣活動。速度是必須的。
2. 經常自己更新內容。你的產品登陸頁面反映了最新的發展和你的當前產品定位。過時的內容意味著錯過市場機會，無法跟上客戶的需求。

在我之前的工作流程中，任何時間我需要更新內容，我要么請工程師來做，要么自己提交一個請求。我們的工程團隊遵循嚴格的流程來確保代碼質量，這會耗時並限制我快速更改的能力。

Framer 解決了這個問題。現在，無論我何時做出更改並點擊發布，它立刻會反映在產品中。這種能力已大大簡化了流程，允許迅速更新和更大自主權來管理內容。

工程#

由於 Framer 托管，因此不需要我們負責任何實施或技術工作。我們的工程師只需要大約 10 分鐘就能將其與我們網站的其餘部分整合在一起。

我們目前的網站由 20 到 30 個頁面組成；一些是使用 Framer 開發的，而其他則是通過傳統的軟件開發方法創建。我們正在選擇最佳工具來維護我們的頁面。例如，對於開發者文檔，這是使用 Framer 管理有挑戰性的，使用開發者友好的文檔框架來托管你的內容是最優選擇。接下來，我們將根據需求評估並決定是自己托管還是完全過渡到 Framer。

它如何改變了我們的工作流程#

我們完全改變了工作流程，讓市場推廣網站的生產變得輕鬆。可靠、可維護且高度高效。

我寫這篇博客是為了分享最佳實踐。如果你有使用 Framer 和設計漂亮網站的經驗，我很想聽聽。讓我們交談並向彼此學習。

現在，是時候看看我們的產品了！請訪問 logto.io。