2013 年,手心為台南府城的帆布老店合成帆布行重新建置官方網站,範圍從需求訪談、歷史研究、現場進駐、網站企劃、形象攝影,一路到網站設計與建構,前後將近一年完成。新網站要幫忙解決店面繁忙的問題,也要讓沒到過店裡的您,在網路上就能感受老店樸實、帶有歷史感的氛圍;最主要的設計選擇,是把購物商城做成店裡的老儲櫃,讓多樣的帆布包款與配件一目了然。
合成帆布行為什麼需要一個新網站?§
合成帆布行是府城台南的知名老店,
成立於1957年,至今已有近一甲子的年頭,
在業界已累積了豐厚且一致的口碑,
合成帆布行原有的網站是手心設計的客戶謝先生所製作,
2009年網站架設完成,老店的來客數及業績開始因為由網站慕名而來的客戶蒸蒸日上,
合成帆布行的知名度也在網路上迅速累積了許多的口碑與好評,
2013年,因應時代與技術的變化,且店裡的生意越來越好,
原有的網站在功能及內容上已不堪負荷,
經由手心設計的客戶好友謝先生的介紹,我們與合成帆布行開始有了第一次的接觸,
並開始進行新網站建置的計畫與討論,
每次前往合成帆布行許老闆總是會用台南人特有的超級熱情款待我們,
許老闆的女兒 許芮翎小姐在日本學成歸國後,回到家中協助許老闆處理店裡日漸暴增的訂單,
許芮翎小姐對於店裡的發展與革新有許多創新的想法,
在多次的討論後,我們慢慢的了解,
合成帆布行所需要的並不只是一個網站,
我們也逐漸了解了許小姐的願景與抱負,
我們體認到,合成帆布行真正需要的,
是一個能夠解決店面忙碌問題,延續店裡一貫以來的樸實及歷史,以及品牌永續發展的平台,
帶著兢兢業業的心情,
從需求訪談、歷史研究、現場進駐、網站企劃、形象攝影乃至最後的網站設計與建構,
前前後後新網站歷時將近一年才完工,
由於謝先生所建置的舊網站不僅讓合成帆布行的網站在各大搜尋引擎中獨佔鰲頭,
更透過網站為老店帶來了源源不絕的客戶,
也為我們設下了難以超越的門檻,
在與合成帆布行許勝凱老闆及 許芮翎小姐反覆的討論,
並多次前往現場感受店面的運作氛圍與歷史氣息,
對於網站設計的想法也因而開始有了雛形,
手心設計設下了建構新網站的目標與願景:
期盼新的網站能夠解決合成帆布行老店現場繁忙的問題,
也希望不曾到過合成帆布行的客人,能夠藉由網站感受到老店獨特的、細膩的且帶有歷史感的樸實氛圍,
希望網站的設計,能讓使用者有親臨現場的感覺,
面對多樣化的客制化包款,也能藉由網站所呈現的頁面,一目了然的了解各種帆布包的款式與配件的選擇,
因此我們將購物商城的形式以店裡的老儲櫃呈現,
為了能夠忠實呈現每個包款放置在櫃上的真實性,
每張圖片的色彩、尺寸、花色甚至是擺放的角度、方式及順序,我們反覆進行了無數次的調整,
只為了能讓網站的使用者感受到手心設計所感受到的相同感動,
在製品櫥窗的頁尾,我們運用了在老店二樓的一隅拍攝到的影像,
那是帆布在製作及打版過程中裁切下來所剩餘的布邊,
這原本是被棄置的廢棄物,我們發現了她的美,
並用於網站的視覺設計上,
就是希望網站上的所有元素,都能傳達帆布的特殊質感與情感,
2013年底,我們與 許芮翎小姐一同努力、一同刻劃打造的網站正式上線,
帶著感動與感激的心情,我們一同歡慶網站的落成,
網站上線後,獲得了許多不錯的口碑與迴響,
也協助許老闆及 許芮翎小姐簡化了部分店裡的工作與業務,
面對如此用心的客戶,讓手心設計倍感窩心,
看見許小姐對網站滿意的笑容,也讓我們感動於辛苦的代價總算有了最甜美的回報。
然而生命和人生總是如此的難以預測,
2015年的5月,因為一場難以預料的意外,
許芮翎小姐撒手人寰,離開了我們也告別了這個世界,
我們從這個網站的點點滴滴,拼湊出許多彼此共同努力的回憶,
也延續 許芮翎小姐的理想讓網站持續穩定的運作,
這個網站有太多的細節,有太多的情感,
都是許小姐的心血結晶,
手心設計期盼能永遠延續與許小姐共同打拼出的靈魂與精神,
將這個網站做為許芮翎小姐永遠的紀念,
也願 許芮翎小姐在天國的那端,
永恆 安息
期待不遠的將來,在世界的彼端,
能與 許芮翎小姐再會,
再度攜手合作並共同描繪一同完成彼此的理想與憧憬。
新網站怎麼把老店搬到線上?§
從下方的頁面設計稿可以看到,主選單分成「關於合成」「記事手札」「製品櫥窗」「特別訂製」「聯絡我們」「網站地圖」六區,並以中英對照標示。「製品櫥窗」把帆布包陳列在木製老儲櫃的層架上,點開單一包款可以看包型、尺寸、材質與花色,再放入購物車,依六個步驟完成結帳;「特別訂製」則分成公司行號、學校機關、婚禮小物三類。
合成帆布行網站的老儲櫃與布邊影像,各自是為了什麼?§
合成帆布行網站的主要設計,各自對應手心建站時設下的一個目的:
- 購物商城以店裡的老儲櫃呈現,用意是讓帆布包的款式與配件一目了然。
- 反覆調整包款圖片的色彩、尺寸、花色及擺放方式,是為了忠實呈現每個包款放在櫃上的樣子。
- 製品櫥窗頁尾使用在老店二樓拍攝的帆布布邊影像,用來傳達帆布的質感與情感。
哪些老店或門市品牌適合參考合成帆布行的網站做法?§
如果您的老店或門市品牌有以下情況,合成帆布行這個案例的做法可以參考:
- 如果您店面忙碌,想用網站承接部分詢問與訂購,可以參考購物車與六個步驟結帳的做法。
- 如果您販售的商品款式與花色多,可以參考在單一包款頁面列出包型、尺寸、材質與花色的做法。
- 如果您有公司、學校或婚禮的客製訂單,可以參考「特別訂製」分成三類的做法。
可以參考的順序是:先到現場了解店的運作與需求,再依需求決定網站功能,最後用店裡既有物件與影像做視覺。
若您也想讓品牌的氣味延伸到網站,可以參考手心的品牌網站設計。
官方形象網站


後台管理系統
商品管理
購物車
部落格系統
形象攝影











