無代碼網頁設計的 Webflow 優勢 - 案例研究

無數的設計工具插件被構思出來，以幫助消除設計師-開發者合作的坎坷道路。 然而，典型的網頁設計工作流程仍然充斥著低效率和扼殺創造力。 新一代無代碼、可視化網頁設計工具承諾將設計師從傳統網頁開發的創意枷鎖和乏味中解放出來。

許多無代碼 Web 開發平台最近登陸設計領域，就好像來自天堂的甘露一樣。 渴望“打破代碼障礙”的設計師終於能夠認識到烏托邦式無代碼未來的現實。 如果星星對齊，將設計交給具有詳細規格的前端開發人員的需求將結束。 設計師可以自由地在畫板上以視覺方式排列元素，然後鬆一口氣地點擊“發布”。

在沒有代碼設計工具出現之前，設計人員不得不依靠前端開發人員來實現一切。 將網站上的一段文本更改為不同的字體大小可能需要幾天時間。 即使對於一個小型營銷網站或一個簡單的登陸頁面，設計師也會將設計發送過來，坐下來，交叉手指，祈禱一切都能完美像素化。 這個過程就像看著油漆變乾一樣。

感覺到機會，“無代碼”網站建設者現在無處不在。 有些是實驗性的，有些是健壯和有能力的。 然而，在提供無限創意控制方面，許多人仍然表現不佳。 幾乎所有平台都是不靈活的、模板驅動的平台，面向中小型企業。

大多數專業設計師一直渴望能夠快速設計和構建響應式網站，具有絕對的創意控制且無需接觸代碼。 那一天可能很快就會到來，因為沒有代碼霸權的戰場現在擠滿了少數嚴肅的競爭者：Editor X、Bubble、Ceros 和 Webflow。

Webflow於 2013 年進入競爭，多年來，已經發展成為一個成熟的產品。 作為 Y Combinator 創業加速器的畢業生，Webflow 希望顛覆無代碼網頁設計領域，並設想一個“每個人都可以像創建文檔一樣輕鬆創建強大、靈活的網站”的世界。

如何獲得利益相關者的支持

隨著設計師發現這些平台的功能，他們很快意識到各種規模的公司都可以從採用無代碼網頁設計工具中受益。 好處可能是巨大的，尤其是對於資源有限的小型團隊。 儘管如此，僅僅迷戀一種新的網頁設計工具是不夠的。 需要說服利益相關者批准轉換。

設計師如何做到這一點？ 我是一家 B2B 初創公司的產品設計師，只有一名開發人員專注於核心產品。 該公司需要一個營銷網站，但沒有開發人員資源。 我們面臨一個難題：我們如何在沒有開發人員的情況下構建網站？ 在探索 Webflow 並精通它之後，我意識到我可以一個人做。

我花了一個週末在 Webflow 中為周一的利益相關者會議實施設計。 在會議期間，我描述了 Webflows 的優勢，並展示了從設計到代碼、創建響應式設計以及快速更改某些東西是多麼容易。 設計和啟動網頁只需要幾天時間。

我還展示了 Webflow 的 CMS 功能以及整合 SEO 的難易程度。 接下來，我列出了單個設計師在不增加開發人員參與成本的情況下實現所有內容所節省的成本。 他們被賣了。

這也是一個重新獲得完全創意控制的機會。 我不再只是一個在 Sketch 中創建模型並將設計傳遞給開發人員的設計師。 這種新的範式把我變成了一個 Web 開發強者：我可以設計、構建、測試、調整、整合 SEO、A/B 測試和發佈網站。 它賦予了我權力，它讓我在公司中有更強大的發言權。

Webflow 設計案例研究

在 Upvest，除了設計公司的核心產品，我還負責視覺品牌。 這包括公司的響應式網站，該網站需要適應頻繁的更新。 Upvest 是一家早期創業公司，產品仍在不斷發展。 因此，我們需要在此過程中製作和 A/B 測試各種營銷頁面。 我們還需要使用 CMS 系統發布博客文章，並針對不同的促銷活動推出專門的登錄頁面。

此外，更複雜的是，公司在早期做了一些支點。 它從銷售 API 到構建區塊鏈錢包，再到向房地產公司提供“資產代幣化”。 因此，隨著我們不斷前進，我不得不在 Webflow 中設計各種登錄頁面。

單擊以查看全尺寸圖像。

Webflow 的入門相對簡單。 教程由 Webflow 大學提供。 我在幾天內就設計並構建了我們營銷網站的第一個版本。 拖放界面使用簡單，只需單擊一下即可檢查不同屏幕尺寸的設計。 使用 Webflow，我還學到了很多關於使用盒子模型正確組裝頁面以實現響應式佈局的知識。

一旦每個人都對網站的視覺品牌達成一致，我就在 Webflow 中創建了一個我們都可以遵循的樣式指南。 我還為後續頁面構建設置了各種類和可重用符號。 Webflow 的符號的工作方式與 Sketch 的符號和 Adob​​e XD 的主組件類似。 更新符號時，項目中該組件的所有其他實例都會反映更新。

在第一個網站推出後，我對 Webflow 越來越熟悉了。 為了跟踪各種指標，我學習瞭如何安裝測量工具，例如 Google Tag Manager 和 Hotjar。 我組裝不同營銷資產的速度也有所提高。 隨著產品的發展，該公司需要測試各種佈局和內容，而 Webflow 使更改設計和快速上線成為可能，而無需依賴開發人員。

單擊以查看全尺寸圖像。

由於 Webflow 提供了一個臨時鏈接來預覽站點，因此利益相關者可以檢查設計的演變並提供即時反饋。 正式調整後，我可以直接在 Webflow 中進行更改——而不是回到像 Sketch 這樣的設計工具——並將網站發佈到登台。 輸出是所有代碼，立即發佈到暫存站點，準備進行另一輪審查。 當一切順利時，我將網站發佈到公司的域中。

與許多其他設計師一樣，我首選的設計工具是 Sketch。 準備好後，我會與各種利益相關者分享設計以供審查。 一旦他們批准了它們，我就會繼續在 Webflow 中實現它們。 一段時間後，我對 Webflow 感到很舒服，以至於不需要使用 Sketch。 每當有新項目時，我都會直接進入 Webflow。 這種新的工作流程為資金緊張的初創公司節省了大量時間和金錢。 例如，我完全在 Webflow 中創建了以下登錄頁面，用於營銷活動以產生潛在客戶。

對於我們的博客需求，我與利益相關者分享了一些 Webflow 基礎知識，並向他們展示瞭如何使用其 CMS。 一旦他們對它感到滿意，他們就會自己上傳博客文章。 利用 Webflow 的 CMS Collections 功能，我已經設置了系統； 他們只需要為文章添加內容並使其生效。

單擊以查看全尺寸圖像。

將 Webflow 納入設計過程

將 Webflow 整合到設計過程中很容易。 此外，可以消除許多傳統的設計步驟——尤其是在最後。 沒有開發人員交接。 僅消除最後一個階段就可以節省大量時間——不再需要“重新劃線”和為規範而努力。

如果設計師習慣於使用 Sketch/XD/Figma 進行線框圖、原型製作和 UI 設計，他們可能會更適應這種工作流程。 但是，他們可能想要考慮直接進入 Webflow ，組裝設計，並在瀏覽器中使用暫存鏈接對其進行實時測試——尤其是對於較小的項目。 這完全是為了平衡需求，因為根據范圍，在 Webflow 中構建項目可能需要比其他方法更長的時間。 對於設計實驗，例如 A/B 測試或多變量測試，直接進入 Webflow 也可能有意義——在那裡進行設計、構建和測試。

設計師可以通過從大量不同的 Webflow 模板中進行選擇並對其進行自定義來快速啟動項目。 所有模板都是使用 Webflow 構建的，無需編寫代碼，因此，它們可以通過 Webflow 的可視化開發界面完全自定義。

構成設計的組件可以轉換為 Webflow 符號，可以在幾分鐘內重複使用來組裝後續頁面。 與 Sketch 一樣，設計人員可以設置符號，為每個組件創建可綁定字段，並在每個實例上添加內容覆蓋。 這意味著設計人員可以創建帶有標題、圖像和文本塊的組件，並在具有不同內容的頁面之間重複使用它。

Webflow 也是構建設計系統的絕佳工具。 隨著最近發布的符號內容覆蓋，可以創建整個設計系統，幫助團隊更快地構建設計，而不會影響或削弱其品牌的視覺識別或核心價值。

沒有任何代碼工具可以減少將想法轉化為人們可以使用的東西所需的時間和編碼專業知識。 您不再需要成為一名程序員來構建事物，從而為來自不同背景和觀點的新一波創客賦能。 Product Hunt 的創始人 Ryan Hoover 在《無代碼的崛起》中

Webflow 對網頁設計的好處

在 Webflow 中創建響應式網站可以很快發生，因為該界面無縫集成了不同設備上的編輯和預覽。 只需單擊一下，設計人員就可以查看網站在桌面、平板電腦和移動設備上的顯示方式，並且可以調整每個屏幕的佈局、組件和字體。

網流優勢：

• 壓縮的時間線。 從構思到設計、原型製作和 MVP 的更快路徑。
• Webflow 彌合了設計與內容之間的差距。 它使作家、編輯和營銷人員能夠立即跨網站更新內容。
• 設計師可以在 Webflow、跳過 Sketch 或其他原型設計工具中創建低保真或高保真原型。 一旦原型經過測試，它們就可以迅速變成最終產品並在網絡上上線。
• 構建、託管和維護多個站點和登錄頁面。
• 結合測量工具，例如 Hotjar 或 Google Tag Manager。
• 降低營銷人員和其他非技術人員的進入門檻。
• 其他人可以通過 Webflow Editor 在頁面上輕鬆編輯內容。
• Webflow 電子商務支持在線業務的快速設計和擴展。
• Webflow 通過團隊模板提供設計一致性和速度。
• 設計人員可以構建具有真實內容的站點並利用 Webflow 的CMS集合——其他團隊無需技術技能即可使用的內容模板。
• 自動站點備份（版本控制）和暫存 URL。
• 網站不需要使用 Webflow 託管。 由於所有網站都以標準 HTML、CSS 和 JavaScript 編碼，因此可以將網站導出並上傳到任何主機。
• 離開 Webflow 時，可以將數據庫與 HTML 和 CSS 文件一起導出以供將來使用。

概括

通過取消 Web 開發代碼可以實現無數的商業利益。 Webflow 超越了不合標準的 DIY 網頁設計工具，提供了適合大多數專業網頁設計需求的引人注目的解決方案。 該平台不斷發展，並且還有更多令人興奮的發展。

在不到兩個月的時間裡，我單槍匹馬地用 Webflow 設計並推出了一個公司網站。 Webflow 在設計過程中提供了前所未有的靈活性，無需擔心代碼即可提供更多創意控制。 與傳統的 Web 開發相比，快速、無代碼的 Web 設計工作流程提供了更快的啟動途徑並將生產成本降低了一半。

學習曲線並不陡峭。 在幾週內，通過教程可以充分掌握 Webflow 的所有細節——足以開始構建一個成熟的網站。 一旦設計師學習了 Webflow，他們可能永遠不會回到傳統的 Web 開發方式。

沒有代碼網頁設計工具會留下來。 它們提供的價值和靈活性是毋庸置疑的。 無代碼運動基於這樣一個基本信念，即技術應該支持和促進創造，而不是成為進入的障礙。 Webflow 允許設計師在更短的時間內設計和構建精緻的產品。 它可以幫助設計師跟上業務的發展速度，並為那些不會編碼的人打開一個充滿機會的世界。 也許是時候跳上船了。

讓我們知道您的想法！ 請在下方留下您的想法、評論和反饋。

• • •

進一步閱讀 Toptal 設計博客：

• 後Flash時代的網絡動畫
• 簡單是關鍵——探索最小的網頁設計
• 響應式設計——最佳實踐和注意事項
• 粗野主義網頁設計、極簡主義網頁設計和 Web UX 的未來
• 所有的趨勢都值得嗎？ 網頁設計師最常見的 5 個用戶體驗錯誤