Webflow 專案啟動不犯難！設計總監教你 4 招制勝秘訣
新的一年才剛開始，正是適合來點網站大翻新的時候！不過想為網站帶來新年新氣象，事前的準備工作可不能少。這次 Webflow 官方專訪他們的網頁設計部長 Maria Gonzalez，與大家分享 4 種超實用的方法，照著這些步驟就能在開發網站的過程中更順暢無阻！
1. 先以 Brief 釐清基礎專案架構
Webflow 網頁設計總監 Maria 表示「一切都始於 Brief。」Brief 能夠明暸專案的目標、要解決的問題、指標等等，以及 SEO 相關的思考也需要一起考量到。
這個 Brief 聽起來很簡要，但其實是需要包含足夠細節的。在定義客戶所面臨的問題時，現有的解決方案有什麼缺點？再來以清楚的方式溝通你的提案將如何解決客戶新網站或新頁面的問題。
而在溝通「如何」達成目標時，記得多多闡述專案的價值：這個新網站將為用戶解決哪些問題？如果你直接與他們交談，你會怎樣解釋呢？這裡的答案也會是之後撰稿團隊找 TA 定位及文案風格的參考依據。
同時，跟相關人員說明其中的風險及需求也很重要，讓客戶了解可能影響專案成功的外部因素。如果這些能夠事先提出，就可以制定有效的策略來消除專案中的障礙，以避免時程上的延宕與重工。
2. 專案規模需明確定義、確保利害關係人知情
一旦 Brief 準備好，利害關係人應該共同審查並定義專案規模。這個規模的定義應該以功能性的需求、新設計的需求、整體工作量來評估。專案是否有需要創建全新的視覺設計，還是有可以重複使用的模板再加上一些新的內容及創意元素來做微調變化？
「如果我們只是更新頁面上的內容或視覺效果，就是一天之內可以完成的小專案，但是如果像是大型項目—例如首頁—就很有可能是全新、需要從無到有生出來的設計。」Maria 表示。
如果能夠重複使用 components 組件（可參考第3項方法），其實大多數專案都不是全新、但也不是可以完全用重複組件做完的。 「如果我們已有一頁行銷解決方案，想多加一頁工程解決方案，就可以使用已經建立好的模板再加上新的文案、視覺下去製作。」Maria 也建議在這種情況下，她建議在設計上投入比開發更多的時間，例如安排設計做 2 週、開發做 1 週之類的。
規模出來之後，可以利用 Asana 這類的專案管理工具訂出執行時程，來追蹤專案中所有大大小小的任務，以利相關人士了解專案進度。
3. 盡可能重複使用 components 組件
為了加快交付速度以及維持視覺統一性，可以多加使用平台上已經有定義過、可重複使用的組件（components）。我們希望盡量避免「從零開始構建」，並利用已經存在的組件、模板、樣式等等。
如果專案的 Brief 一開始就有明確定義，客戶的問題及解決方案應該已經有清晰的方向，也讓設計師在利用 components 時更上手。甚至可以準備一個清單把可能可以重複利用的組件列出，來模擬出新頁面會與哪些現有頁面相似的外觀、 layout。
使用組件的另一個好處是，跨部門的夥伴也有辦法重複利用它們。Maria 解釋：「我們為了行銷部門的夥伴製作模板，之後他們就可以自行更新資源庫裡的頁面，不需要再依賴工程師、設計師了。」
4. 使用 Design Brief 作為後續對齊的工具
在開始開發之後，尤其是大型專案，總會出現一些沒有預料到的問題。即使已經盡可能的重複使用組件了，還是會有需要去填補設計師、工程師之間可能出現想像落差的地方。如果有這種疑慮，Maria 會建議先回顧簡報內容，釐清想為客戶解決的問題，接著去思考：要解決這個問題是否只能做出一個新的組件？是否有其他方法可以獲得相同的結果而不會動到專案的規模？
這也是為什麼預先讓所有人都檢視過 brief、確保所有人同意如此重要。這份 Brief 會是整個專案的核心標準，從設計師調整 wireframe、工程師測試新功能、文案寫作優化都能夠有憑有據。
一個細節足夠的網站規劃就是最好的規劃。
無論在進行什麼樣的網站專案，一份結構清楚的 brief 都能為後續的工作奠定成功基礎，也能確保專案進行時一切都照著軌道走。
你是設計師，或是你手上有網頁設計急件想要找專家快速開發完成嗎?
歡迎參考我們的 👉🏻 Webflow 開發服務
Webflow 網站規劃懶人包 FAQ
- 如何開始Webflow專案？
初學Webflow時，首先要明確專案的目標和需求，並製作一份詳細的計畫書（Brief）。 - Webflow專案的規劃有哪些重要步驟？
需要確定專案範圍、預算和時間表。進行市場和用戶研究也很關鍵。 - Webflow設計階段應該注意什麼？
設計階段應專注於用戶體驗和互動設計，並且要與開發團隊緊密合作。 - 如何有效管理Webflow專案？
使用專案管理工具，如Asana，定期檢視進度並與所有利益相關者保持良好溝通。
進一步了解如何開始Webflow專案，請參閱原文：如何開始一個Webflow專案.
延伸閱讀
EJ
EJ
