Why is design guidelines necessary now?

1. Why is design guidelines
necessary now?

2. Contents
1.
- Branding Design
- Human Centered Design
2. IT
- Apple Human Interface Guidelines
- Material Design
- Microsoft Design

4. =

6. NASA Graphics Standard Manual
10
https://vimeo.com/161045768

7. Coca-Cola Design Principles
Coca-Cola

8. Human Centered Design
IT 80 90 …

9.
Design Thinking
UX

10. Desirability
Feasiblity
Viability
IDEOのイノベーションの要素
引用http://www.ideo.com/about/

11. Designer
Engineer Business
Platform
PC
Smartphone
Tablet
etc…
User
IT
!

12. IT

13. IT

14. Apple Human Interface Guidelines

15. 1989 Apple
Human Interface Guidelines Desktop Interface
OS

16. 1987 Apple HIG
Philosophy
“
Apple
”

17. 1987 Apple HIG 10
• (Metaphors)
• (Direct Manipulation)
• (See-and-Point)
• (Consistency)
• WYSIWYG (WYSIWYG – What You See Is What You Get)
• (User Control)
• (Feedback and Dialog)
• (Forgiveness)
• (Perceived Stability)
• (Aesthetic Integrity)

18. • (Metaphors)
• (Direct Manipulation)
• (See-and-Point)
• (Consistency)
• (WYSIWYG)
• (User Control)
• (Feedback and Dialog)
• (Forgiveness)
• (Perceived Stability)
• (Aesthetic Integrity)

19. macOS HIG (2017)
“Design Principles”

20. WWDC2017
“Essential Design Principles”
• (Wayfinding)
• (Visibility)
• (Mental Model)
• (Grouping)
• (Affordance)
• 80:20 (80/20 Rule)
• (Feedback)
• (Consistency)
• (Proximity)
• (Mapping)
• (Progressive Disclosure)
• (Symmetry)

21. • (Wayfinding)
• (Feedback)
• (Visibility)
• (Consistency)
• (Proximity)
• (Mental Model)
• (Mapping)
• (Grouping)
• (Affordance)
• (Progressive Disclosure)
• 80:20 (80/20 Rule)
• (Symmetry)
UI
UI
/
20%

22. “Design is not just what it looks like and
feels like. Design is how it works.”
-Steven Paul Jobs
デザインとは単にどのように見えるか、どのように感じるかということではない。
どう機能するかだ。- スティーブ・ジョブス
問題を解決へ導くための「設計」と「表現」を行うこと。

23. Material Design

24. 2014 Google
•
Visual Language ( )
• PC
https://www.youtube.com/watch?v=rrT6v5sOwJg

25. Material Design 3
1. Material is the metaphor - Material ( )
2. Bold, graphic, intentional -
3. Motion provides meaning -

26. Z 3D

27. Microsoft Design

28. 2017 Microsoft
Fluent Design System
Microsoft
Fluent 3D
https://www.youtube.com/watch?v=vcBGj4R7Fo0

29. Fluent
Light Depth Motion Material Scale 5