奧比斯 2012 夜行俠公益健走

夜行俠
  • 夜行俠
  • 2012夜行俠
  • 活動說明
一個活動網站在視覺上有巧妙運用,卻不一定是票房的保證啊.........(煙)

敝團隊的接案,向來多以公益組織的官網為主,活動網站的委托相對較稀罕,這回初次與奧比斯基金會合作,就是要為奧比斯的夜走活動打造一個活動網站。只打造一個一次性使用的網站其實還滿可惜,所以在發想時,本團隊就想得比較遠,希望能跳脫活動網站一次性的宿命,今年打造的資料庫,明年還能繼續用,或者至少能呈現出這個年年舉辦的夜走活動具有的傳承精神,讓今天第一次參與的報名者,也能回味往年,著眼今朝,期待來年~(好勵志啊!)各位看官不妨連到網站體會一下 :P

在功能面上相對單純,有訊息露出,報名等頁面,為了增強互動性,我們還設計了臉書參與功能,讓「夜行俠」在活動網站上利用臉書帳號登入,上傳照片同時許一個夜行俠的救盲心願,再發佈到參與者的塗鴉牆。同時為了讓活動網站更活潑有趣,還特別在主選單上玩個把戲,讓游標滑過選單項目就切換不同畫面,讓活動報名網站不只有功能性,還增添了趣味性。

前端工程

奧比斯公益健走這個活動網站版面採用滿版設計,有別於CMS常見的二欄或三欄式版型,滿版設計能藉由圖像傳達出強烈的視覺衝擊,並且有大氣之感。前端工程需要將版型檔案改寫為滿版適合的架構,而較有挑戰的是首頁輪播的部份。Drupal現在已有蠻多Slideshow相關的模組,建置一般網站時可直接挑選適合的拿來用,只要再套套樣式便能達到需求,快速又方便,然而本網站首頁輪播多出了許多動作,無法單靠設定模組完成,於是便寫了一支首頁輪播客製化用的Javascript,來處理大圖切換時的過場、導覽區隨視窗放大縮小進行彈性變動以及其滑鼠事件等特效。

另外在圖片樣式上也有新的嘗試。一般網站使用imagecache的時機通常就只是管控圖片大小(縮放或裁剪),這次因應需求則多使用了幾個效果,包括轉換圖片格式,浮水印以及文字,讓所有元素最後重新輸出成一張圖,而不是彼此分開的。

部份連結及活動照片則應用colorbox維持不換頁切換不同資訊,最後套上CSS便大功告成。

感想

網路宣傳活動的參與度不如預期,算是本網站較為可惜的地方,除了可能活動本身不夠好玩之外,規劃時也得多注意宣傳工作,因為沒有什麼網站是一做好、人就會來的。一個活動網站在視覺上有巧妙運用,卻不一定是票房的保證啊.....(煙)

視覺關鍵字: 
活潑、動態
主要色彩: