新的一年才剛開始,正是適合來點網站大翻新的時候!不過想為網站帶來新年新氣象,事前的準備工作可不能少。這次 Webflow 官方專訪他們的網頁設計部長 Maria Gonzalez,與大家分享 4 種超實用的方法,照著這些步驟就能在開發網站的過程中更順暢無阻!

1. 先以 Brief 釐清基礎專案架構

網頁設計部長 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 書摘】 如何幫網站打造一個靈活的內容管理系統?(上)
Webflow 的白皮書針對如何打造一個完善的後台內容管理系統提出見解:建構及維運網站應該要是團隊合作,但在一般企業裡,應該掌管網站管理的行銷、設計、資訊部門的的合作往往受到隔閡。而傳統的內容管理系統(CMS)未能滿足消費者對於參與度高和個性化線上體驗日益增長的期望。
Webflow Localization 多語系功能全面開法!快速打造國際網站
Webflow Localization功能已於昨日全面開放!作為 no-code / low-code 架設網站的龍頭,多語系功能真的不能沒有啊!
Share this post