階段目標
根據上篇「開始設計工作室-2017改版紀錄(上)」所提出的五大改版方向,我們接下來就可以開始來擬定各項目應該要呈現的內容。以人體構成來做比喻,如果說製作方向是骨架的話,這篇所要描述的就是肌肉的形成。(如果有看過美國影集"西方極樂園"的開場影片大概就可以理解這個過程)
這階段的工作重點在於,如何產出適當的圖文說明,來呈現我們想要讓大家認同的理念。這可不是件容易的事啊,尤其對我們設計師這種圖像思考的動物來說甚是苦手,但該來的挑戰還是去面對,這時候我們就需要工具的輔助了。
輔助工具介紹
1.紙、筆
一開始我們只需要紙跟筆就可以了。不用開電腦或任何軟體,那些數位工具只會延滯你的思緒發想,定力差一點的甚至就開始上網閒晃去了。用最簡單的紙和筆把你所能想到的關鍵字或任何相關詞彙都記錄下來,發想階段我不會去設限條件,等下個階段再來篩選剔除即可。

2.圖表歸納
經過前面爆發性的思考發散之後,會記錄下許多對於這次改版的看法和意見,接下來就是一一將這些意見統整歸納,將不適合的剔除,保留有用可執行的想法來執行或撰寫成文案。在商業策略方面,我會借助《獲利世代》作者Alexander Osterwalder所提出的商業模式圖表來協助我進行工作室商業策略的調整,這張表清楚標示在一個商業活動中,所會包含的各種要素,你可以依序填入現在手邊擁有的資源及情況以便進行檢視與調整。

商業模式是什麼?其實就是你生存的本事!
3.架構整理
藉由商業模式圖的調整,現在也更能釐清自己的網站該由何種面向來去和消費者溝通,那如何建構適當的網站架構來讓訪客們瀏覽,這邊我則是使用XMind這套軟體來整理網站架構,列出網站分為那些單元、有哪些頁面,有了清楚的架構圖產生,對於下一步的版面規劃及動線邏輯設定則較好掌握。

4.版面規劃
到了這個階段,我們要來開始安排一個頁面上該出現的元素編排及資料區塊間的配置,也就是業界俗稱的「Wireframe 版面線稿」,這方面Balsamiq Mockups一直是我愛用的工具,不但介面簡單好上手,畫出來的線條也帶點手繪的味道,與一般生硬死板的線條不同增添了點"人味",我們可以在版面上任意擺放按鈕、圖框等元素,來檢視彼此間的呈現方式是否適當,頁面之間的跳轉瀏覽是否協調,整個網站Run過一遍後,一個網站的雛型也由腦袋中的模糊影像,逐漸在眼前清晰了起來。

前置企劃小結
以上四個步驟就是我們內部在開發一個網站前,所要執行的前置企劃作業流程,雖然過程繁複,製作時間也會隨著延長,但也是因為堅持這樣的企劃流程,才能確保我們在開發每一個網站時,能夠賦予它獨一無二的生命力,發揮它的最大價值,而不只是產出一個虛有其表的線上型錄而已。
正如我們工作室名稱叫做「開始設計」,我們在乎的是開始設計前挖掘那些隱藏背後、鮮為人知的故事、想法,若能夠藉由設計詮釋出來,都是一頁頁動人的篇章,也是公司最寶貴的資產。如果各位有關於網站開發的需求,歡迎隨時找我們聊聊,一起為公司網站創造一種新的可能。
下一篇我們將介紹進入設計階段後,我們會運用哪些方法來製作一個網站到完成上線的過程,敬請期待。