2012年11月27日 星期二

舒眠室 擁有皇室血統的百萬手工名床-網頁設計案例分享

大家好~這周的網站案例分享可是大有來頭,他是全世界第一個發明獨立筒彈簧結構的床墊公司,Vi-Spring民間俗稱「床墊界中的勞斯萊斯」! 100%英國製造,2012年英國女王頒贈「雙皇徽認證」不僅如此還是威廉王子與凱特王妃的新婚用床呢,而這款英國頂級手工名床就放心地把網站交給紅威,真是太有眼光了,我們當然也不負所託囉(插腰)!



負責此案的業務Laura是一位膽大心細的女子,平常總是笑口常開的她侃侃而談的跟大家分享跟客戶接洽的細節…………….


舒眠室這個客戶是從事頂級精品睡床業為全台灣第一家引進頂級床墊的品牌代理商,從舊網站裡看出他們的以前網站是個以強調品牌形象為導向的網站,但拜訪中慢慢了解原來之前並沒有後台可管理,先前的網站公司只開放最新消息可讓客戶更新,其餘部分只能透過前網站公司才能管理維護,並收取每年網站的維護費用的方式配合,讓客戶很困擾。由於他們很滿意之前的設計,所以我們就建議客人可以以搬站的方式,也就是提供之前原始檔案PSD檔搬移入我們的系統,除了保有原始設計順帶又可以進行資料新增與更新之外,可以自己進行後台管理。客戶也直接透過我們展示公司成功案例呈現的效果後,同意進行配合。


在進行一開始,由於客戶的空間已經到期,網站又才剛進行,所以會有一段空窗架設期間。但客戶非常強調品牌形象,不想讓網站直接停擺。所以先運用客戶的首頁動畫做了改版中形象頁,讓想了解舒眠室的消費者知道舒眠室正在改版中,不至於找不到網站。

 在配合的過程中,有新增的分類頁面,我們都是運用客戶原本網站存在的元素加以設計如新增影音專區以及聯絡我們
(直接運用現有版型背景進行設計)
由於客戶的品牌價值很高,對於網站非常要求設計美感,所以設計的過程中常常有對於字體、圖片、以及間隔距離做細部的調整,對案子時常得出動尺來丈量修改(真的是尺, 您沒看錯)。為了讓進行過程順利進行而不後續進度的情況下,會以引導客戶的方式來確定修改方向,例如客戶表示間隔距離過大,我們會以原比例的二分之一可以嗎?””或是參考某頁距離可以嗎?”的方式具體方式做溝通。或是直接請客人提供參考的網站直接了解想要呈現的感覺最直接。
此外,客戶為了配合整體畫面的色調,不想要原本系統生成的正在加載中的圖示,也特別請設計師加入語法取消。


 (關閉右上角正在加載中畫面)
 正如設計師所說,有些新增的頁面效果的呈現在維護上會動用到語法更新,所以客戶在學習的過程需要花點心思,最終花了兩天的時間教學完成。也要特別感謝設計師特別抽空時間別指導我們業務後台操作,才能讓客戶順利了解後台更新方式。
小編為大家介紹負責的設計師Jerry,由他經手的網站比小編吃過的飯粒還多,面對大客戶也能臉不紅氣不喘穩當當搞定!
Jerry請介紹一下這個案子的設計細節跟方向~

關於舒眠室這個案子,因為是屬於搬站型的網站,所以設計層面來講,基本上是沿用客戶舊站整個設計的風格,但部分頁面例如:影音專區,則是另外幫客戶設計的。

這個網站比較特別的地方,是在於整個網站幾乎使用大量了自訂模組去設計及套用,優點為:功能及特效可以比較多樣化;但缺點是客戶相當的不易修改。因為客戶也必須要懂語法(但多半絕大客戶很少會懂HTML語法),所以就必須仰賴業務們結案後續的教導,才利於客戶自行修改裡面的內容。
(最新消息採用了大量的自訂模組,但是特效十足)
在製作的過程當中,我們碰到了幾項的困難:其中以 字體的尋找 最為困難。因為此網站為搬站網站,所以基本上之前設計師所設計的元素及原始檔都沒有,在這個情況下,新增加的頁面,他的字體勢必要一致性,才能符合客戶的期待,所以我們使用了國外findfont來尋找字型,藉著圖片上傳的方式,也順利讓我們找到了字體,得以解決客戶的需求。
(相當特殊,但設計感十足的國外英文字型)
另外整個站還有一個蠻困難的地方,就是媒體報導專區。因為此頁面的設定是分為:封面->頁面,而且必須要在同一層類別,更要使用jQueryLightBox特效。所以這邊特效使用上相當的麻煩,必須完全仰賴語法的新增才有辦法克服,這點還好事先有與客戶先溝通,再加上業務結案後的教學,才得以此案順利結案。 

(點擊封面小圖彈跳lightBox視窗,還要能進到相簿的內頁,技術上困難重重)
(沒有三兩三,要看的懂密密麻麻的語法,實在不簡單)
真的不簡單,小編也與有榮焉!有業務同仁細心溝通以及設計部門超有效率的SOP才能讓客戶這麼滿意呢!


沒有留言:

張貼留言