ISS U E
2
|
Vol .2
設 計 對 談 集
DESIGN DIALOGUES
謝 孟 宸 作 品 集
11 WORKS, 11 DIALOGUES.
Design of Johny Hsieh
十一件作品．十一則設計與人的對談
02
03
JOHNY HSIEH
W O RK
ABOUT
謝 孟 宸
2015 - 2017
pla in-me Co. , L td. 樸然子有限公司
2009 - 2011
Ryohin Keikaku Co. , L t d . 台灣無印良品股份有限公司
ED UC AT IO N
2009 - 2013
Master's Degree: D epa rtment of I ndustr i al D e s i g n, T u ng h a i Uni ve r s i t y 東海大學工業設計研究所
2005 - 2009
Bachelor's degree: D epa rtment of I ndustr i al D e s i g n, T u ng h a i Uni ve r s i t y 東海大學工業設計系
2002 - 2005
Kaohsiung Senior High S ch o o l 高雄中學
DISSERT AT IO N
2013
“The Rela tionship between Urba n Wa terfront Space Regenera tion a nd Tour i s t A t t r act i o n - T h e C as e o f Lo ve R i ve r ” 《都市水岸再造與地方觀光魅力形塑之關係 – 以愛河為例》
EX C H ANGE ST UDENT
2011 - 2012
Chiba University, J apa n 日本千葉大學
04
05
CONTENTS
WEB
6
DIGITAL
96
06
07
WEB 網 頁
08
品牌官網 Official Website
pla in-me 官網整合專案 pla in-me Official Website Project
Executive Producer: Akko Liu Project Ma nager: Meng-Chen Hsieh Web Design: Meng-Chen Hsieh Front-end Developer: FliPER Crea tive Inc., Meng-Chen Hsieh Back-end Developer: Maxwell Lin, Elise Lee
Client: pla in-me Co., Ltd. Yea r: 2016
國 外 大 型 服 飾 購 物 網 站 多 建 立 在 清 晰、 簡 單 的 版 面 構 成 與 動 態 U I 設 計 上， 讓 商 品 與 模 特 兒 成 為 全 站 的 視 覺 重 心， 因 此， 讓 大 量 圖 片 自 行 表 述 ， 成 為 改 版 的 要 點。 透 過 內 容 細 節 的 解 構， 重 新 規 劃 出 全 站 的 流 程、 框 架、 組 合 元 件 與 色 彩 計 畫 ， 考 量 RWD 與 動 態 效 果， 改 善 後 台 的 操 作 與 邏 輯， 並 建 立 標 準 作 業手冊。嶄新的網站不僅讓顧客使用更流暢， 維 護 管 理 也 更 具效率。
09
10
SITE NAVIGATION
Home
Product List
Product Detail
Brand List
Brand Introduction + Product Detail
Search
Search Detail
News List
News Information
Event List
Event Information
Snap Wall
Snap Detail
Instagram Wall
Instagram Detail
Store List
Store Information
Epaper Register
Epaper Register Success
Service
Quick Service Q&A
Sign In
Privacy Contact Us Sign In
Forgot the Password
Create Account Shopping Cart
Shopping Payment
Account
Member Details Edit Password Edit Address Book Edit Order History List Wish List Coupon List Bonus List
Media
Journal
Journal Content
11
Event Page
Quick Service Success
Shopping Confirm
Order History Detail
Shopping Success
12
GUIDELINE
Color / Ma in
Icon
Color / Grey Tone
#C8BE AF
#FFFFFF
#A 99474
# E 2621B
#776956
#AAAAAA
#222222
# 777777
13
Color / Light Tone
#B4C6CC
#CE 262A
#D B7979
#E5E6E7
#FF5B00
# E A 9277
#2B9D 58
# 63BA 90
#0055B8
# 60A 3B2
14
UI ELEMENT
Tag / Item
新品
嚴選單品
SALE
期間限定優惠
熱銷
企劃選品
Button
購物按鈕
訂閱按鈕
不可點選
< 返回按鈕
更多
Input Text Box
請輸入帳號
Select Menu
排序 - 新到舊
1
Select Menu / Color & Size
S
M
L
XL
15
Tag / News
新 聞 標 籤
Button / Pages
1
...
3
4
5
...
15
CheckboxRadio
不拘
Accordion
1. 標題 ． 內容 ． 內容 2. 標題 3. 標題 4. 標題
上午 09:00-12:00
下午 12:00-17:00
晚上 17:00-20:00
16
17
MENU ⁄ 分類選單
18
HOME ⁄ 首頁
19
20
PRODUCT LIST ⁄ 商品總覽
21
22
PRODUCT DETAIL ⁄ 單一商品介紹
23
24
NEWS INFORMATION ⁄ 單一情報資訊
25
26
STORE INFORMATION ⁄ 門市資訊
27
28
29
SIGN IN ⁄ 會員登入 CREATE ACCOUNT ⁄ 加入會員
30
SHOPPING CART ⁄ 購物車
31
32
SHOPPING CART ⁄ 購物車
33
34
ORDER HISTORY LIST & DETAIL ⁄ 歷史購買記錄
35
36
DESIGN STANDARDS MANUAL ⁄ 圖片標準尺寸規範手冊 OPERATION MANUAL ⁄ 後台操作手冊
37
38
台北。自信啟程 City Traveler
URBAN RESEARCH × pla in-me 聯名活動網頁 URBAN RESEARCH × pla in-me Ca mpa ign Website
Project Ma nager: Wednesday Wu Web Design: Wednesday Wu Front-end Developer: Meng-Chen Hsieh Back-end Developer: Maxwell Lin
Client: pla in-me Co., Ltd. Yea r: 2016
網 頁 往 往 承 載 大 量 資 訊 ， 如 何 有 效 安 排 次 序 與 層 次， 成 為 設 計 師 與 前 台 工 程 師 的 重 大 課 題 。 透 過 與 設 計 師 的 溝 通， 建 立 頁 面 的 整 體 框 架 與 比 例， 在 設 計 師 開 始 製 作 素 材 的 當 下 ， 網 頁 就 可以開始編寫，大幅降低 了製作期程。
39
40
Allrover™ 翻轉背包 FlipBag™ by Allrover™
Allrover™ 商品預購暨正式販售網頁 Allrover™ Ca mpa ign Website
Project Ma nager: Wednesday Wu Web Design: Wednesday Wu Front-end Developer: Meng-Chen Hsieh Back-end Developer: Maxwell Lin
Client: pla in-me Co., Ltd. Yea r: 2016
透 過 前 導 與 正 式 上 市 的 頁 面 組 合， 大 幅 增 加 上 市 後 的 頁 面 效 益 ， 除 了 廣 告 導 流 的 瀏 覽 數 之 外， 更 能 精 準 鎖 定 目 標 客 群 ， 也 增 添 上市前的神秘與期待感。
41
42
43
44
雨天自信生活 Happy Ra iny Day
pla in-me 雨季活動網頁 pla in-me Ra in Ca mpa ign Website
Project Ma nager: Meng-Chen Hsieh Art Direction: Meng-Chen Hsieh Web Design: Meng-Chen Hsieh Front-end Developer: Meng-Chen Hsieh Back-end Developer: Maxwell Lin
Client: pla in-me Co., Ltd. Yea r: 2017
雨 天 專 案 涵 蓋 了 系 列 介 紹 、 合 作 品 牌 露 出、 情 境 故 事、 商 品 導 購， 是 個 內 容 龐 雜 、 商 品 分 類 與 品 項 都 很 多 的 網 頁。 透 過 兩 層 級 的 安 排， 第 一 層 LANDI NG PAGE 帶 出 開 場、 系 列 簡 介 與 合 作 品 牌 ， 再 透 過 第 二 層 頁 面， 以 故 事 情 境 說 明 如 何 解 決 雨 天 狼 狽 的 窘 境 ， 並 展 開 商 品 品 項， 搭 配 流 暢 的 U I 動 態 效 果，創造愉悅的購物體 驗。
45
46
47
48
49
Happy Rainy Day 從來沒有這麼期待雨天
50
51
外 套 C OAT
背 包 BAG
長 褲 PANTS
休 閒 鞋 SNEAKERS
#01
雨天也要從容自在
告 別 狼 狽 的 潮 濕 氣 候
防 潑 水 彈 性 2 Way外 套
防 潑 水 彈 性 2 Way外 套
外 套 C OAT
背 包 BAG
防潑水彈性 2 Way外套
長 褲 PANTS
防潑水彈性 2 Way外套
休 閒 鞋 SNEAKERS
#02
永 遠 晴 天 的 背 包
多 種 背 法 順 應 每 日 生 活
防潑水多口袋側背包
防潑水多口袋側背包
防潑水多口袋側背包
防潑水多口袋側背包
52
53
#BRANDS
雨 天 推 薦
雨 季 搭 配 推 薦
雨 衣 推 薦
雨 靴 推 薦
ＨＯＭＥ
自信雨天
© 2 0 1 7 pl ai n - me C o. , Ltd .
雨 天 準 備 推 薦
54
55
56
57
防 潑 水 背 包
布料經防潑水加工，可阻擋小雨 及水珠。休閒都會的外型，適合 每天穿著。可搭配防水噴霧加強 使用。
FlipBag 翻轉背包
FlipBag 翻轉背包
FlipBag 翻轉背包
NT 4800
NT$ 3780
NT$ 3780
FlipBag 翻轉背包
FlipBag 翻轉背包
FlipBag 翻轉背包
NT 4800
NT$ 3780
NT$ 3780
FlipBag 翻轉背包
FlipBag 翻轉背包
FlipBag 翻轉背包
NT 4800
NT$ 3780
NT$ 3780
等材質，讓鞋子完全不受水分及
FlipBag 翻轉背包
FlipBag 翻轉背包
FlipBag 翻轉背包
髒汙侵襲。
NT 4800
NT$ 3780
NT$ 3780
防 水 背 包
布料底層的防水貼膜，較具耐久 性，可阻擋較大雨水；車縫線內 的防水膠條，可完全避免水分浸 入。
防 水 抗 污 噴 霧
獨家開發的特殊配方，使奈米粒 子在鞋面形成保護膜，達到防水 抗污的效果，適用於皮革、布料
ARCHIVE
#01
#03
#04
雨 天也要從容自在>
快適的一年四季>
乾爽的城市行者>
ＨＯＭＥ
自信雨天
© 2 0 1 7 pl ai n - me C o. , Ltd .
58
自信夢想家 Ma n's Wa nna Be
pla in-me 西裝活動網頁 pla in-me Suits Ca mpa ign Website
Project Ma nager: Meng-Chen Hsieh Web Design: Meng-Chen Hsieh Front-end Developer: Meng-Chen Hsieh Back-end Developer: Maxwell Lin
Client: pla in-me Co., Ltd. Yea r: 2017
西 裝 在 台 灣 仍 是 個 不 易 入 門 的 服 裝 類 別， 透 過 一 系 列 的 頁 面 提 供 不 同 西 裝 款 式 的 搭 配 ， 建 議 其 穿 著 場 合， 帶 領 消 費 者 了 解 搭 配 要 點 ； 整 合 線 上 官 網 、 實 體 門 市 的 視 覺， 減 少 設 計 上 的 重 複 作 業， 更 讓 客 人 在 不 同 載 體 上 都 擁 有 一 致 的 購 物 經 驗 ， 降低資訊焦慮、並成就愉 悅的購物體驗。
59
60
61
62
63
64
65
2017
Styling 01-04
正 裝 系 列
A L L V I E W
STYLISH SUITS
休閒西裝
CASUAL SUITS
SEMI-FORMAL SUITS
風格西裝
半正式西裝
FORMAL SUITS
正式西裝
Man's Wanna Be
自信夢想
SUITS
COLLECTION
66
67
BUSINESS FORMAL
FORMAL BANQUET
商務與面試的重要場合
正式宴會
正 式 西 裝
SUITS COORDINATE
Styling 01 成套黑色西裝成熟俐落 襪子與褲子或鞋子同色
建議穿搭場合
面試．上班．期末發表
彈性合身西裝外套
彈性合身西裝外套
彈性合身西裝外套
彈性合身西裝外套
NT 4680
NT 4680
NT$ 4680
NT$ 4680
68
69
ARCHIVE
半正式西裝
休閒．風格西裝
自信夢想家
SEMI-FORMAL SUITS >
CASUAL & STYLISH SUITS >
MAN‵S WANNA BE >
ＨＯＭＥ
更多提案
© 2 0 1 7 pl ai n - me C o. , Ltd .
70
夏日彩 TEE 提案 Tee Guide
pla in-me 夏日活動網頁 pla in-me Summer Ca mpa ign Website
Project Ma nager: Wei Chen Art Direction: Meng-Chen Hsieh Web Design: Meng-Chen Hsieh Front-end Developer: Meng-Chen Hsieh Back-end Developer: Maxwell Lin
Client: pla in-me Co., Ltd. Yea r: 2017
「 夏 日 專 案 」針對台灣氣候推薦搭配 ，以清涼的介面色彩、 整 合 大 量 資 訊，成為邏輯清晰的圖文 版面，涵蓋機能介紹、 商 品 分 類 與 比 較 ， 不 論 透 過 電 腦 或 各 種 行 動 裝 置， 都 可 以 擁 有 相 同 便 利的購物體驗。
71
72
73
74
75
夏日彩 TEE 提案 豐 富 你 的 搭 配 色 彩
期
間
限
定
送
好
禮
2017彩TEE提案，透過不同材質與版型的組合，創造更多可能。全新推出的吸濕快乾系 列，從實用的機能著手，讓你搭配美好的一天！
多 樣 版 型 、 多 種 材 質 ， 滿 足 你 的 各 類 需 求
3M™吸濕快乾技術，輕薄的魚鱗狀內裡，不
100%美國棉織造而成，柔順舒適，立體的華
100%純棉，柔軟舒適，厚度適中，流汗也不
特別訂製的純棉重磅布料，紮實硬挺的手感
沾黏肌膚，適合夏日穿著。
夫格凹凸紋理，質感豐富。
透膚。
，單穿也很有份量。
76
77
風格寬版
修身長版
清爽無袖
OVERSIZED
LONGLINE
SLEEVELESS
舒 適 的 寬 版 剪 裁 ， 輕 鬆 營 造 個 人 風 格
棉質拼接長版TEE
棉質拼接長版TEE
棉質拼接長版TEE
棉質拼接長版TEE
NT 990
NT 990
NT$ 990
NT$ 990
78
79
# S U M M E R
S T Y L E L O O K
夏日彩TE E 指定單品 COP0018-重磅棉質口袋寬版TEE．COP0020-華夫格五袖寬版TEE．COP0114-吸濕快乾口袋寬版TEE． COP0115-吸濕快乾拼接長版TEE．COP0116-吸濕快乾無袖長版TEE．COP0117-棉質落肩寬版TEE． COP0118-棉質拼接長版TEE．COP0120-彈性棉質拼接條紋BIG TEE
ＨＯＭＥ
更多提案
© 2 0 1 7 pl ai n - me C o. , Ltd .
80
81
82
褲款選購指南 Pa nts Guide
pla in-me 褲款商品網頁 pla in-me Pa nts Ca mpa ign Website
Project Ma nager: Wei Chen Art Direction: Meng-Chen Hsieh Web Design: Meng-Chen Hsieh Front-end Developer: Meng-Chen Hsieh Back-end Developer: Maxwell Lin
Client: pla in-me Co., Ltd. Yea r: 2017
網 路 購 物 透 過 不 同 裝 置 的 螢 幕 做 為 載 體， 如 何 在 有 限 的 螢 幕 大 小 中， 傳 遞 無 限 的 內 容， 清 晰 的 邏 輯 與 明 確 的 目 的 顯 得 格 外 重 要。 選 擇 障 礙 是 很 多 人 的 難 題， 在「 選 購 指 南 」 專 案 中， 以 消 費 者 最 關 心 的 版 型 加 以 分 類， 比 較 褲 長、 材 質 、 彈 性 的 差 異 ， 提 供 容 易 吸 收 、 清 晰 明 瞭 的 商 品 資 訊， 開 創 了 跳 出 率低、轉換率高的長壽頁 面。
83
84
85
86
87
PANTS GUIDE 褲 款 選 購 指 南
春
季
新
品
登
４ 種 必 備 的 完 美 褲 型 透 過 鬆 身 到 合 身 的 版 型 分 類，W I D E 、 T A P E R E D、S L I M 三 種 褲 型 任 你 自 由 搭 配，多 樣 風 格 滿 足 你 的 各 類 需 求，在 p l a i n - m e 挑 選 最 滿 意 的 褲 子 吧！
場
88
89
鬆身寬版
上寬下窄
合身線條
WIDE
TAPERED
SLIM
上寬下窄的輪廓，讓 Oversize 的搭配，也能維持好比例的必備褲款
水洗棉質抽繩多口袋軍褲 有彈性
全
長
水洗棉質抽繩多口袋軍褲 西裝布料
有彈性
水洗棉質抽繩多口袋軍褲 西裝布料
長
有彈性
全
長
水洗棉質抽繩多口袋軍褲 西裝布料
有彈性
全
長
NT$ 2880
NT$ 2880
NT$ 2880
NT$ 1980
NT$ 1980
NT$ 1980
NT$ 1980
水洗棉質抽繩多口袋軍褲 有彈性
全
NT$ 2880
全
長
水洗棉質抽繩多口袋軍褲 西裝布料
有彈性
全
長
水洗棉質抽繩多口袋軍褲 西裝布料
有彈性
全
長
水洗棉質抽繩多口袋軍褲 西裝布料
有彈性
全
長
NT$ 2880
NT$ 2880
NT$ 2880
NT$ 2880
NT$ 1980
NT$ 1980
NT$ 1980
NT$ 1980
ＨＯＭＥ
更多提案
© 2 0 1 7 pl ai n - me C o. , Ltd .
西裝布料
西裝布料
90
91
水 洗 棉 質 抽 繩 多口袋 軍 褲 有彈性
全
長
NT$ 2880
NT$ 1980
西裝布料
92
秋季層次穿搭 Autumn Tee Style
pla in-me 秋季形象網頁 pla in-me Autumn Ca mpa ign Website
Project Ma nager: Wei Chen Web Design: Meng-Chen Hsieh Photography: Pin-Chun Fa ng / TODAY TODAY Styling: Wei Chen Model: Cia n-You Peng Front-end Developer: Meng-Chen Hsieh Back-end Developer: Maxwell Lin
Client: pla in-me Co., Ltd. Yea r: 2016
台 灣 的 秋 天 很 短 ， 往 往 日 夜 溫 差 大， 正 午 出 門 用 餐 時 會 流 汗 ， 晚 上 回 家 卻 又 轉 涼 ， 一 不 小 心 就 感 冒 了， 因 此， 洋 蔥 式 的 穿 搭 成 為 重 要 的 課 題 。 透 過 10 款 素 TE E ， 衍 伸 出 10 種 不 同 的 搭 配 風 格， 引 導 顧 客 利 用 手 中 單 品， 輕 鬆 度 過 秋 天 的 冷 熱 之 際。
93
94
95
96
97
DIGITAL 數 位 媒 體 行 銷
98
品牌電子報 EDM
pla in-me 年度電子報策略規劃 pla in-me EDM Stra tegic Pla nning
Project Ma nager: Sea n Wa ng Visual Design: Meng-Chen Hsieh Front-end Developer: Meng-Chen Hsieh
Client: pla in-me Co., Ltd. Yea r: 2015-2016
對 於 信 箱 充 斥 廣 告 信 件 感 到 煩 躁， 因 此 在 進 行 電 子 報 改 版 規 劃 時 ， 透 過 調 查 顧 客 期 望 獲 得 的 資 訊 與 頻 率， 並 研 究 國 際 購 物 網 站 電 子 報 的 形 式 與 內 容 ， 規 劃 出 首 購 電 子 報、 新 品 週 報 、 活 動 快 訊 3 種 模 組 。 分 類 不 同 發 送 內 容， 且 重 新 檢 視 發 送 對 象後，成功在 5 個月內大幅降低取消訂閱比例， 讓 電 子 報 帶 來的業績提升 300％。
99
HEADER
TITLE
IMAGE
CONTENT
CTA FOOTER
100
101
HEADER
WINTER SALE 即將登場
TITLE
眾多單品下殺折扣
IMAGE
不論大衣、襯衫、毛衣、長褲，所有驚喜折扣福利都在這裡！
CTA #1
SHOP SALE >
CONTENT
探索折扣!!!
SALE!!!
即刻入手!!!
CTA #2
MEDIA
FOOTER
102
103
HEADER 軍綠色，讓人不可忽視的存在 PANTS GUIDE 挑件完美褲子吧 >
TITLE
CITY TRAVELER 台北。自信啟程 >
NEWS
NEW ARRIVALS
TITLE
ITEM #1
棉質斜紋 M-65 軍裝無領外套
更多軍風
CTA #1
IMAGE
本 週 新 品 >>
搭 配 提 案
CTA #2
TITLE
EVENT
男生必備的 4 種完美褲型
馬上逛逛>
#plainmelife
CTA #3 TITLE
IMAGE
CTA #4 MEDIA FOOTER
104
聖誕折扣拉霸機 Xmas Casino Slot
JumpFromPaper 數位行銷專案 JumpFromPaper Ca mpa ign Project
Project Ma nager: Chung-Ming Hu / JumpFromPaper Art Direction: Meng-Chen Hsieh Visual Design: Meng-Chen Hsieh Photography: Po-Chao Hua ng / Qua rter Studio
Client: JumpFromPaper Yea r: 2015
105
106
107
108
新品促購 Product La unch Promo
Visual Design: Meng-Chen Hsieh Photography: 13.Thirteen Studio Styling: Wei Chen Model: Cia n-You Peng
Client: pla in-me Co., Ltd. Yea r: 2015
透 過 實 體 影 像 、 圖 像 化 、 比 較 式 的 內 容 設 計， 以 簡 單、 清 晰 的 視 覺 排 版 ， 可 以 符 合 品 牌 性 格， 又 能 讓 顧 客 輕 鬆 地 吸 收 大 量 商 品 資 訊 ， 連 帶 提 升 商 品 銷 售， 在 線 上 購 物 對 市 場 營 收 佔 比 不 斷提高的年代，這是電商刻不容緩的促購方向。
109
110
111
CONTACT
johnyhsieh.design@gma il.com