分享如何從商標製作到後續Guideline，完成帕格的整套規範。 從訪談中該如何得到真實該被傳達的形象與理念，並且也細述如何完成商標、識別系統、產品UI設計規範...等製作物的方法、時程、困難點。

1. Chang
Joan
Copyright©JoanChang.Allrightsreserved.
2017.10.26 20:00

2. Chang
Joan
Copyright©JoanChang.Allrightsreserved.
Visual
Designer
Freelancer
Branding
Designer
專注於品牌設計
品牌能為個⼈人、產品、企業
與TA建立起信任與價值
制定彈性統⼀一準則凝聚內部
節省層級溝通成本
曾任職於廣告技術業、品牌顧問、設計公司

3. Chang
Joan
ASK
01 | 10

4. Copyright©JoanChang.Allrightsreserved.
Chang
Joan
Brand Guideline
Visual Identity
Ask Analysis Focus Design
最初的狀狀況

5. Copyright©JoanChang.Allrightsreserved.
Chang
Joan
Brand Guideline
Visual Identity

6. Copyright©JoanChang.Allrightsreserved.
Chang
Joan
Brand Guideline
Visual Identity
Ask Analysis Focus Design
溝通
老闆
同事
協⼒力力廠商
客⼾戶
內部客⼾戶
潛在客⼾戶
股東
投資⼈人
⼀一般⼤大眾
媒體
夥伴
競爭者

7. Copyright©JoanChang.Allrightsreserved.
Chang
Joan
Brand Guideline
Visual Identity
Ask Analysis Focus Design
開發⼀一套新 V I

8. Copyright©JoanChang.Allrightsreserved.
Chang
Joan
Brand Guideline
Visual Identity
Ask Analysis Focus Design
企業服務內容擴充與升級

9. Copyright©JoanChang.Allrightsreserved.
Chang
Joan
Brand Guideline
Visual Identity
Ask Analysis Focus Design
20 個問題以內

10. Copyright©JoanChang.Allrightsreserved.
Chang
Joan
Brand Guideline
Visual Identity
Ask Analysis Focus Design
業主對重塑品牌的期望
了了解帕格的業務範疇
了了解優劣勢
後續識別系統應⽤用的範疇

11. Copyright©JoanChang.Allrightsreserved.
Chang
Joan
Brand Guideline
Visual Identity
Ask Analysis Focus Design
⾼高層管理理群
客⼾戶經理理們
設計師
⼯工程師

12. Copyright©JoanChang.Allrightsreserved.
Chang
Joan
Brand Guideline
Visual Identity
Ask Analysis Focus Design
品牌的產品與服務項⽬目？
對品牌的期望？
品牌與其他競爭對⼿手的優勢區隔？
潛在對⼿手是誰？
業主對商標的喜好
品牌代表的精神？

13. Chang
Joan
ANALYSIS
02 | 10

14. Copyright©JoanChang.Allrightsreserved.
Chang
Joan
Brand Guideline
Visual Identity
a. 業主與相關⾏行行業在意的價值
b. 數位廣告的⽤用詞
c. 搜集相關⾏行行業的圖像符號
d. 搜集相關對⼿手的 Logo 圖⽰示
Ask Analysis Focus Design

15. Copyright©JoanChang.Allrightsreserved.
Chang
Joan
Brand Guideline
Visual Identity
Ask Analysis Focus Design

16. Copyright©JoanChang.Allrightsreserved.
Chang
Joan
Brand Guideline
Visual Identity

17. Copyright©JoanChang.Allrightsreserved.
Chang
Joan
Brand Guideline
Visual Identity
Ask Analysis Focus Design

18. Copyright©JoanChang.Allrightsreserved.
Chang
Joan
Brand Guideline
Visual Identity
Ask Analysis Focus Design
⼼心智圖

19. Chang
Joan
FOCUS
03 | 10

20. Copyright©JoanChang.Allrightsreserved.
Chang
Joan
Brand Guideline
Visual Identity
Ask Analysis Focus Design
精準、領先

21. Copyright©JoanChang.Allrightsreserved.
Chang
Joan
Brand Guideline
Visual Identity
Ask Analysis Focus Design

22. Chang
Joan
DESIGN
04 | 10

23. Copyright©JoanChang.Allrightsreserved.
Chang
Joan
Brand Guideline
Visual Identity
Ask Analysis Focus Design

24. Copyright©JoanChang.Allrightsreserved.
Chang
Joan
Brand Guideline
Visual Identity
Ask Analysis Focus Design

25. Copyright©JoanChang.Allrightsreserved.
Chang
Joan
Brand Guideline
Visual Identity
Ask Analysis Focus Design

26. Copyright©JoanChang.Allrightsreserved.
Chang
Joan
Brand Guideline
Visual Identity
Ask Analysis Focus Design

27. Copyright©JoanChang.Allrightsreserved.
Chang
Joan
Brand Guideline
Visual Identity
Ask Analysis Focus Design

28. Copyright©JoanChang.Allrightsreserved.
Chang
Joan
Brand Guideline
Visual Identity
Ask Analysis Focus Design
www.paganiniplus.com
Remi Lin
+886.926.615.090
remilin@paganiniplus.com
886.2.2717.0960 (#355)
54398098
886.2.2717.0950
台北市復興北路427巷36號

29. Copyright©JoanChang.Allrightsreserved.
Chang
Joan
Brand Guideline
Visual Identity
Ask Analysis Focus Design

30. Copyright©JoanChang.Allrightsreserved.
Chang
Joan
Brand Guideline
Visual Identity
Ask Analysis Focus Design

31. Chang
Joan
WHY
05 | 10

32. Copyright©JoanChang.Allrightsreserved.
Chang
Joan
Brand Guideline
Visual Identity
Why Who How Schedule Problem Advantage
www.paganiniplus.com
Remi Lin
+886.926.615.090
remilin@paganiniplus.com
886.2.2717.0960 (#355)
54398098
886.2.2717.0950
台北市復興北路427巷36號

33. Chang
Joan
WHO
06 | 10

34. Copyright©JoanChang.Allrightsreserved.
Chang
Joan
Brand Guideline
Visual Identity
製作⽬目的？
誰來來使⽤用，如何⽤用？
時間與限制條件。
Why Who How Schedule Problem Advantage

35. Copyright©JoanChang.Allrightsreserved.
Chang
Joan
Brand Guideline
Visual Identity
製作⽬目的？做⽣生意、形象、輔助⼯工作
誰來來使⽤用，如何⽤用？內部、外部 / 查詢
時間與限制條件。碎片時間 / ⼀一⼈人製作
Why Who How Schedule Problem Advantage

36. Copyright©JoanChang.Allrightsreserved.
Chang
Joan
Brand Guideline
Visual Identity
Why Who How Schedule Problem Advantage
⽣生意
老闆 客⼾戶

37. Copyright©JoanChang.Allrightsreserved.
Chang
Joan
Brand Guideline
Visual Identity
Why Who How Schedule Problem Advantage
形象
老闆 設計 公關 媒體

38. Copyright©JoanChang.Allrightsreserved.
Chang
Joan
Brand Guideline
Visual Identity
Why Who How Schedule Problem Advantage
產品開發
設計 ⼯工程

39. Copyright©JoanChang.Allrightsreserved.
Chang
Joan
Brand Guideline
Visual Identity
Why Who How Schedule Problem Advantage
提案業務
設計 ⾏行行銷

40. Copyright©JoanChang.Allrightsreserved.
Chang
Joan
Brand Guideline
Visual Identity
Why Who How Schedule Problem Advantage
協⼒力力製作
協⼒力力廠商

41. Copyright©JoanChang.Allrightsreserved.
Chang
Joan
Brand Guideline
Visual Identity
Why Who How Schedule Problem Advantage
老闆 同事
內部⼈人員
設計 ⼯工程 ⾏行行銷

42. Copyright©JoanChang.Allrightsreserved.
Chang
Joan
Brand Guideline
Visual Identity
Why Who How Schedule Problem Advantage
協⼒力力廠商
外部⼈人員
客⼾戶 媒體公關

43. Chang
Joan
HOW
07 | 10

44. Copyright©JoanChang.Allrightsreserved.
Chang
Joan
Brand Guideline
Visual Identity
Why Who How Schedule Problem Advantage
架構確定
Bootstrap
製作基礎元件
AI PS 做圖
寫 SCSS 調整細節
⽂文案撰寫

45. Copyright©JoanChang.Allrightsreserved.
Chang
Joan
Brand Guideline
Visual Identity
Why Who How Schedule Problem Advantage
Material design
iOS HCI
Ant Design
Other Guideline

46. Copyright©JoanChang.Allrightsreserved.
Chang
Joan
Brand Guideline
Visual Identity
Why Who How Schedule Problem Advantage

47. Copyright©JoanChang.Allrightsreserved.
Chang
Joan
Brand Guideline
Visual Identity
Why Who How Schedule Problem Advantage
時間與限制條件。

48. Copyright©JoanChang.Allrightsreserved.
Chang
Joan
Brand Guideline
Visual Identity
Why Who How Schedule Problem Advantage

49. Copyright©JoanChang.Allrightsreserved.
Chang
Joan
Brand Guideline
Visual Identity
Why Who How Schedule Problem Advantage
UI ElementBrand Style Guide
Logo
Color
Typography
Imagery
Writing
Buttons
Elements
Icon
Panels
Tabs
-
Static Tables
Data Tables
Sketch
PS
AI

50. Copyright©JoanChang.Allrightsreserved.
Chang
Joan
Brand Guideline
Visual Identity
Why Who How Schedule Problem Advantage

51. Copyright©JoanChang.Allrightsreserved.
Chang
Joan
Brand Guideline
Visual Identity
Why Who How Schedule Problem Advantage

52. Copyright©JoanChang.Allrightsreserved.
Chang
Joan
Brand Guideline
Visual Identity
Why Who How Schedule Problem Advantage

53. Copyright©JoanChang.Allrightsreserved.
Chang
Joan
Brand Guideline
Visual Identity
Why Who How Schedule Problem Advantage

54. Copyright©JoanChang.Allrightsreserved.
Chang
Joan
Brand Guideline
Visual Identity
Why Who How Schedule Problem Advantage

55. Copyright©JoanChang.Allrightsreserved.
Chang
Joan
Brand Guideline
Visual Identity
Why Who How Schedule Problem Advantage

56. Chang
Joan
SCHEDULE
08 | 10

57. Copyright©JoanChang.Allrightsreserved.
Chang
Joan
Brand Guideline
Visual Identity
Why Who How Schedule Problem Advantage
6 個⽉月 ～ 1 年年

58. Copyright©JoanChang.Allrightsreserved.
Chang
Joan
Brand Guideline
Visual Identity
Why Who How Schedule Problem Advantage
評估規劃
製作⽬目的？
誰來來使⽤用，如何⽤用？
時間與限制條件。
參參考資料蒐集 確定架構 設計製作
material design
iOS HCI
Ant Design
other Guideline
VI
UI
⼿手繪草圖
AI PS 做圖
Bootstrap 製作
細節調整
0 30 60 90 天

59. Chang
Joan
PROBLEM
09 | 10

60. Copyright©JoanChang.Allrightsreserved.
Chang
Joan
Brand Guideline
Visual Identity
Why Who How Schedule Problem Advantage
缺少教學
不⽤用、不會⽤用
沒有後續設計師維護與調整
內容永遠不夠詳盡
資源短缺

61. Chang
Joan
ADVANTAGE
10 | 10

62. Copyright©JoanChang.Allrightsreserved.
Chang
Joan
Brand Guideline
Visual Identity
Why Who How Schedule Problem Advantage
線上保留留品牌資產
有作品可以來來分享

63. Chang
Joan
Copyright©JoanChang.Allrightsreserved.
QA
Designer
www.facebook.com/joanvisualdesign
joankaminari@gmail.com
https://medium.com/@joankaminari