前情提要
藉由前兩篇網誌「開始設計工作室-2017改版紀錄(上)」及「開始設計工作室-2017改版紀錄(中)」分別說明了這次網站改版的起因與企劃過程。總算來到了最後一篇,這次我們來聊聊一個網站究竟要如何完成。在完成了企劃階段的任務之後,接下來便是「版面設計」、「網頁製作」及最後的「上線測試」三個階段。下面接依序解說所需要的步驟流程...
版面設計
在企劃流程中的最後一個步驟,所產出的線稿經由不斷的討論與調整之後,便是我們這次版面設計的依據。我個人是習慣使用Adobe Photoshop來執行版面設計,加上一些擴充功能的輔助來幫助編排更有效率。在這次的首頁設計,我們希望能參考Landing Page的優點(引起注意、降低疑慮、增強信心、喚起行動),在一進入首頁上下捲動的範圍中就能將工作室的經營理念、接案類型、相關作品及聯絡方式等資訊傳達給訪客,快速建立起對於工作室的良好印象,而更詳細的說明內容則搭配"了解更多"的按鈕連結,讓整個版面動線無論在快速瀏覽或深入閱讀皆能順暢串聯。

網頁製作
來到網頁製作階段,則是使用Photoshop與Backets來搭配,由Photoshop來分解版面元素,再由Backets來彙整、編寫網頁,我個人是沒有在使用前端框架來輔助,完全使用手工編寫(天然的最好),一來可以徹底掌握自己網站的狀況,有問題可以馬上釐清。二來也藉由減少無用程式碼的載入,讓網頁效能能夠更加提升。手工編寫或許會有重複造輪子的疑問,但我也就過去的經驗,使用將重複性質高的程式碼模組化,來增進編寫網頁的速度,這也算是我們的經驗優勢之一。
這次網頁編寫的挑戰還有加上RWD響應式版面設定,除了固定的桌面版尺寸之外,還要兼顧平板及手機裝置上的瀏覽方便,如何使固定版面去應對多變的螢幕尺寸,著實令我苦惱了一下,但藉由這篇文章的提點,讓我得以掌握建立版面斷點的要訣,RWD設定也變得稍微上手了一些。

上線測試
網站做完之後,上傳到事前申請好的主機空間中,利用不同的瀏覽器(如Chrome、Firefox或IE等)來交互測試,看看不同核心的瀏覽器渲染出來的畫面是否會不同,再來進行調整。RWD測試方面,我會利用viewport-resizer這個外掛程式來執行,啟動後它可輕易變換視窗的尺寸來檢視版面的變化,算是十分方便的小工具。
歷經千辛萬苦完成的網站,當然要大肆宣傳告訴大家,這次我在網站上線前兩週,便準備好了六幅宣傳稿,每隔幾天便PO在社群媒體上宣傳新網站即將上線的消息,一方面有提醒的作用,另一方面也趁機宣傳新網站的特點,營造期待的心情。

另一個開始
利用短短三篇講完一個網站的開發過程,看似輕描淡寫,其實仍有許多的眉角細節無法一一說清楚。但也不會就此打住,一個網站上線後,仍要持續更新作品、文章,豐富它的生命力,我也會在往後的文章中慢慢補充沒有說到的過程細節或一些觀念技法,藉由一系列的文章撰寫,除了重整自己的邏輯思緒,也可以建立起屬於自己的設計論述。眼前的路還長得很,希望大家可以一直陪我走下去,下回見。