Image Image Image Image Image Image Image Image Image

26 四月

By

網站作品 – 個人部落格

2013/04/26 | By |

類型

專案型網頁 Pro Web │ 部落格型網站 架構規劃&建置

專案說明

部落格形式的網站,內容決定版面規劃的方向。

本作品部落格,屬於攝影為主,文字為輔的網站,因此版面重點在於乾淨簡單,強調圖片呈現方式,不用太多複雜元素,讓攝影畫面來襯托整個網站。

因為較無固定頁面,所以架構規劃比內容編排更重要。
且如何讓作者好上手,也是整體網站規劃的重點。

本作品中,製作時間比重多在於企劃溝通階段,從研究作者舊站文章分類&內容,到規劃屬於作者風格的版型,進一步,草擬建議的網站架構,最後,再藉由初步上稿編排,讓網站雛形更明確,以作為參考範例,來對照說明後台操作方式&對應位置。

另外一方面,這樣的方式,可以讓作者直接從「修改」面著手,改字改圖,降低從零開始上稿的困難度。

網站連結 Link聯絡我們 Contact

16 四月

By

活動網站 – 品牌行銷

2013/04/16 | By |

類型

標準型網站 Standard Web │ 新包裝宣傳活動網站 提案&製作

專案說明

因應產品新包裝,規劃「豆陣來作伴,回味9久久」,週週抽獎宣傳活動網站。

期望結合網友旅遊經驗,票選最回味的花蓮景點,營造「珍藏伴手禮,回憶花蓮味」的氛圍。

投票機制中,運用花蓮特色景點照,搭配產品風味文案,創造「景點視覺」與「產品味覺」的聯想,同時加深「伴手禮」的品牌形象。

同時,置入Fb串連推播與粉絲團連結,提供社群互動的管道,也提昇網站的能見度與成效。

合作對象

攝影素材:洄瀾網有限公司

網站連結 Link聯絡我們 Contact

25 二月

By

網站作品 – 個人部落格

2013/02/25 | By |

類型

專案型網頁 Pro Web │ 部落格型網站 後台建置&Responsive 行動版設計

專案說明

網站主要分享好吃、好玩、好東西,將舊站主要是旅遊x美食的部落格,轉變為一個「分享型」網站。應用 Responsive 設計,使網站可在行動裝置上獲得較好瀏覽,且可直接透過行動裝置,輕鬆撥打電話訂位、洽詢。
※ Anismile是970Px的分站,想了解970Px的攝影作品,歡迎到 Anismile 看看喔!

愛美食、享玩樂、蒐好物,三大類別分頁清楚,各有獨立頁面。獨立頁面,分區撈取文章,並限制呈現內容,用排版上的留白,減少過去文字過多的擁擠感。

anismile.com-old

內頁文章,版頭置入google地圖應用,可以移動縮放,讓使用者能輕鬆了解文中所提到的地點位置。另外,還有一個小小的行動裝置應用,點擊【電話號碼】連結,就可以直接撥打電話,好方便阿!

整體來說,這次改版重點,主要就是讓各頁面、分區清楚呈現,內容保持簡單乾淨的畫面,將焦點聚焦圖文。同時,兼顧網頁版跟行動版的需求,避免功能或頁面上產生衝突、干擾。下階段改版目標,期望可朝向行動版地圖功能作延伸應用進行。

網站連結 Link聯絡我們 Contact

25 二月

By

平面 – 桌墊插畫

2013/02/25 | By |

類型

平面設計 Graphic Design │ 餐墊紙設計&手繪素材

專案說明

依11種實際起司產品照,手繪風格的西餐餐墊紙作品,並配合產地,對應義大利地圖呈現。

起司,印象中長得幾乎都差不多要如何畫出有區別性的11種起司素材,一開始,真的有點難度,一度畫出好幾個相似圖。幸好產品照上有包裝跟起司本身的標示紋路,才可以衍生出這麼多種造型。

「起司家族Say Cheese」,除了表達「說起司的故事」意思外,也是取一個拍照時常常要人「Say Cheese」,來展現微笑的意義,希望用餐的消費者,能夠愉悅的用餐,也對正在享用的料理,有更多了解。

聯絡我們 Contact

18 十月

By

Demo – 一頁式網站

2012/10/18 | By |

類型

基本型網站 Simple Web │ Parallax scrolling 網站效果呈現

專案說明

想擁有一個有質感的網站,用照片來「說故事、秀產品」嗎?

網站中使用「Parallax scrolling」效果,當滑鼠往下移動捲軸,或是點選左側選單,視覺上多了一種「層次感」的推移。

而這樣以照片為主體的呈現方式,較適用於需要「強調產品、環境空間」的網站類型。

例如:「想秀出產品用文字無法表達出的細節,讓消費者看仔細」,或「想用大圖呈現裝潢、設施,第一時間吸引消費者的目光」。當然,整體網站的效果,就會取決於「圖片」。

每個頁面不一定只用一張圖片,當使用者停留在頁面上觀看文字內容時,頁面會自動換圖,加上「Full Browser」的功能,網站內容也可依視窗大小作縮放。

網站連結 Link聯絡我們 Contact