Shiatzy Chen Offical Website
www.shiatzychen.com夏姿 陳,官方網頁設計
,融合東西方時尚,用極簡的設計風格,賦予夏姿摩登、時尚的品牌形象,簡約明亮且直覺性 UI/UX 設計帶給瀏覽者不同的感官體驗。
![Shiatzy Chen image](photos/image_01_hover.jpg)
![Shiatzy Chen image](photos/image_01.jpg)
![入口網站頁設計 Cover Page](photos/image_01_low.jpg)
Cover Page
Image and Navigation Strategy
在網站入口頁面,多用途的影像與影片區塊,除了能夠傳達品牌形象,也可配合行銷策略,發佈當下最新行銷主題。 我們垂直整合網站單元與內容,讓網站選單變得簡單扼要。
![Shiatzy Chen image](photos/image_17_over.jpg)
![Shiatzy Chen image](photos/image_17.jpg)
![入口網站頁設計 Shiatzy Chen image](photos/image_17_low.jpg)
Cover Page & Video
![Shiatzy Chen image](photos/image_20_hover.jpg)
![Shiatzy Chen image](photos/image_20.jpg)
![入口網站頁設計 Shiatzy Chen image](photos/image_20_low.jpg)
RWD Cover Page
![Shiatzy Chen image](photos/image_21_hover.jpg)
![Shiatzy Chen image](photos/image_21.jpg)
![入口網站頁設計 Shiatzy Chen image](photos/image_21_low.jpg)
RWD Navigation
Marketing Strategy in Block
我們開發多功能行銷區塊機制,區塊的形式、位置、順序、內容皆可以透過CMS自行設定,讓夏姿可以自由配置行銷區塊。
![Shiatzy Chen image](photos/image_02_hover.jpg)
![Shiatzy Chen image](photos/image_02.jpg)
![Shiatzy Chen image](photos/image_02_low.jpg)
Top Page
Cover Page
![Shiatzy Chen image](photos/image_20.jpg)
![Shiatzy Chen image](photos/image_20_low.jpg)
Block 1
![Shiatzy Chen image](photos/image_27.jpg)
![Shiatzy Chen image](photos/image_27.jpg)
Block 2
![Shiatzy Chen image](photos/image_28.jpg)
![Shiatzy Chen image](photos/image_28.jpg)
Block 3
![Shiatzy Chen image](photos/image_29.jpg)
![Shiatzy Chen image](photos/image_29.jpg)
Block 4
![Shiatzy Chen image](photos/image_30.jpg)
![Shiatzy Chen image](photos/image_30.jpg)
Block 5
![Shiatzy Chen image](photos/image_31.jpg)
![Shiatzy Chen image](photos/image_31.jpg)
Block 6
![Shiatzy Chen image](photos/image_32.jpg)
![Shiatzy Chen image](photos/image_32.jpg)
Footor
![Shiatzy Chen image](photos/image_33-2.jpg)
Footor
![Shiatzy Chen image](photos/image_33.jpg)
![Shiatzy Chen image](photos/image_33.jpg)
scroll me
RWD Cover Page and Top Page
A Type
![Shiatzy Chen image](photos/image_22.jpg)
![Shiatzy Chen image](photos/image_22_low.jpg)
B Type
![Shiatzy Chen image](photos/image_24.jpg)
![Shiatzy Chen image](photos/image_24_low.jpg)
C Type
![Shiatzy Chen image](photos/image_23.jpg)
![Shiatzy Chen image](photos/image_23_low.jpg)
D Type
![Shiatzy Chen image](photos/image_25.jpg)
![Shiatzy Chen image](photos/image_25_low.jpg)
E Type
![Shiatzy Chen image](photos/image_26.jpg)
![Shiatzy Chen image](photos/image_26_low.jpg)
Block Type of Top Page
![Shiatzy Chen image](photos/image_19_hover.jpg)
![Shiatzy Chen image](photos/image_19.jpg)
![Shiatzy Chen image](photos/image_19_low.jpg)
Block in Top Page
Fshion & Collection
以獨立活動網站的概念設計,獨立的 Collection Page 可以自訂網址名稱,透過 CMS 設定,輕鬆創造多種不同的組合的配置。
![Shiatzy Chen image](photos/image_03.jpg)
![Shiatzy Chen image](photos/image_07.jpg)
![Shiatzy Chen image](photos/image_07_low.jpg)
Fashion Overview
Light Style
![Shiatzy Chen image](photos/image_07.jpg)
![Shiatzy Chen image](photos/image_07_low.jpg)
Dark Style
![Shiatzy Chen image](photos/image_03.jpg)
![Shiatzy Chen image](photos/image_03_low.jpg)
Layout A
![Shiatzy Chen image](photos/image_05.jpg)
![Shiatzy Chen image](photos/image_05_low.jpg)
Layout B
![Shiatzy Chen image](photos/image_06.jpg)
![Shiatzy Chen image](photos/image_06_low.jpg)
Fashion Style Guide
LookBooks Association Collection
讓 LookBooks 可以關聯相關的 Collection 物件,因應不同系列 LookBooks Style,頁面也能彈性設定黑或白風格。
![Shiatzy Chen image](photos/image_11.jpg)
![Shiatzy Chen image](photos/image_10.jpg)
![Shiatzy Chen image](photos/image_10_low.jpg)
Fashion LookBook
LookBooks Header
![Shiatzy Chen image](photos/image_34_hover.jpg)
![Shiatzy Chen image](photos/image_34.jpg)
![Shiatzy Chen image](photos/image_34_low.jpg)
LookBooks Footor
![Shiatzy Chen image](photos/image_35_hover.jpg)
![Shiatzy Chen image](photos/image_35.jpg)
![Shiatzy Chen image](photos/image_35.jpg)
scroll me
Fashion LookBooks Overview
Brand Story & Brand Blog
符合原創設計品牌的理念,我們以創新的UI設計,忠實地記錄夏姿的品牌故事與企業沿革。我們呼應品牌經營策略,設計專屬的Brand Blog,讓夏姿可以不定時發佈品牌動態與時尚潮流相關訊息
![Shiatzy Chen image](photos/image_04.jpg)
![Shiatzy Chen image](photos/image_04_low.jpg)
The Shiatzy Chen Story
![Shiatzy Chen image](photos/image_13.jpg)
![Shiatzy Chen image](photos/image_13_low.jpg)
Blog Detail
![Shiatzy Chen image](photos/image_12.jpg)
![Shiatzy Chen image](photos/image_12_low.jpg)
Blog Overview
Locate A Store
全球門市據點資訊,我們整合Google Map API,提供離瀏覽者最近的門市據點資訊。
![Shiatzy Chen image](photos/image_36_hover.jpg)
![Shiatzy Chen image](photos/image_36.jpg)
![Shiatzy Chen image](photos/image_36_low.jpg)
RWD Store Locator
Search Store
![Shiatzy Chen image](photos/image_14.jpg)
![Shiatzy Chen image](photos/image_14_low.jpg)
Store Google Map
![Shiatzy Chen image](photos/image_16.jpg)
![Shiatzy Chen image](photos/image_15.jpg)
![Shiatzy Chen image](photos/image_15_low.jpg)
Find A Store