-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
212 lines (206 loc) · 9.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Design Thinking</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/black.css">
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="lib/css/monokai.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
</head>
<body>
<div class="reveal">
<div class="slides">
<section data-background-color="#1F1D1B" data-transition="concave">
<div class="grid-container">
<div class="grid-item p-40 bg-dune"><h1 class="title serif">What Is<br /> Design<br /> Thinking?</h1></div>
<div class="grid-item"><img src="lib/img/img-gorilla-thought.jpg" class="img" alt="Design Thinking eh?" /></div>
</div>
</section>
<section data-background-color="#FEEB2F" data-transition="concave">
<div class="grid-container">
<div class="grid-item p-40">
<h1 class="serif heading mt-250">INTRODUCCION</h1>
</div>
<div class="grid-item bg-dune">
<ol class="intro-list">
<li><strong>Design Thinking, eeh?!</strong></li>
<li><strong>Phases</strong></li>
<li><strong>Problem w/ Ingrained Patterns of Thinking</strong></li>
<li><strong>The Encumbered vs. The Fresh Mind</strong></li>
<li><strong>Power of Storytelling</strong></li>
<li><strong>DSGN THNKNG is for EVRYBDY</strong></li>
</ol>
</div>
</div>
</section>
<section data-background-color="#E74C36" data-transition="concave">
<div class="centered">
<h2 class="fragment visible text-italic serif">What is Design Thinking?</h2>
</div>
</section>
<section data-background-color="#1F1D1B" data-transition="concave">
<div class="centered">
<h2>An iterative process</h2>
<p class="fragment visible text-left">... seeks to understand the user ...</p>
<p class="fragment visible text-left">... challenges assumptions ...</p>
<p class="fragment visible text-left">... redefine problems ...</p>
<p class="fragment visible text-left">... identify alternative strategies and solutions that are not on our level of understanding</p>
</div>
</section>
<section data-background-color="#E74C36" data-transition="concave">
<div class="centered">
<h2 class="fragment visible text-italic serif">Design Thinking’s Phases</h2>
</div>
</section>
<section data-background-color="#1F1D1B" data-transition="concave">
<section>
<div class="centered">
<h2 class="fragment visible">Variants of Design Thinking Process</h2>
<p class="fragment visible text-left">... there are 3 - 7 phases or stages ...</p>
<p class="fragment visible text-left">...However ...</p>
<p class="fragment visible text-left">ALL variants are very SIMILAR.</p>
</div>
</section>
<section>
<div class="centered">
<h2 class="fragment visible">ONLY the five-phase model</h2>
<p class="fragment visible text-left highlight-green">• Created by Hasso-Plattner Institute of Design at Stanford or d.school</p>
<p class="fragment visible text-left">• They’re at the forefront of applying and teaching Design Thinking</p>
</div>
</section>
<section>
<h2 class="fragment visible">Five Phases Of Design Thinking</h2>
<ol>
<li class="fragment visible">Empathise – with your users</li>
<li class="fragment visible">Define – your users’ needs, their problem, and your insights</li>
<li class="fragment visible">Ideate – by challenging assumptions and creating ideas for innovative solutions</li>
<li class="fragment visible">Prototype – to start creating solutions</li>
<li class="fragment visible">Test – solutions</li>
</ol>
</section>
<section>
<div class="centered">
<p class="fragment visible text-left highlight-green">... this is not sequential ...</p>
<p class="fragment visible text-left highlight-red">... look at it as an overview of the phases that contribute to an innovative project ...</p>
</div>
</section>
</section>
<section data-background-color="#E74C36" data-transition="concave">
<div class="centered">
<h2 class="fragment visible text-italic serif">The Problem with Ingrained Patterns of Thinking</h2>
</div>
</section>
<section data-background-color="#1F1D1B" data-transition="concave">
<section>
<div class="centered">
<p class="fragment visible">... naturally develop patterns of thinking based on repetetive activities and common knowledge</p>
<p class="fragment visible">... because of this, it's easy for us to judge with little facts</p>
</div>
</section>
<section>
<div class="centered">
<p class="fragment visible">... sometimes, this thinking hinders us to use innovative problem-solving strategy called ..</p>
<h2 class="fragment visible highlight-blue">Thinking Outside The Box</h2>
</div>
</section>
</section>
<section data-background-color="#E74C36" data-transition="concave">
<div class="centered">
<h2 class="fragment visible text-italic serif">An Example of Problem solving: The Encumbered Vs. The Fresh Mind</h2>
</div>
</section>
<section data-background-color="#1F1D1B" data-transition="concave">
<section>
<p class="fragment visible">...thinking outside of the box can be a challenge ...</p>
<h2>WHY?</h2>
<p class="fragment visible">... because of the patterns and knowledge we already know ..</p>
</section>
<section>
<div class="grid-container">
<div class="grid-item mt-250 text-left bg-dune"><h1>The<br /> Truck<br /> That Couldn't<br/> Get Out</h1></div>
<div class="grid-item img-truck-wrap"><img src="lib/img/img-truck.jpeg" class="img" alt="The Truck That Couldn't" /></div>
</div>
</section>
</section>
<section data-background-color="#E74C36" data-transition="concave">
<h2 class="fragment visible text-italic serif">The Power of Storytelling</h2>
</section>
<section data-background-color="#1F1D1B" data-transition="concave">
<video width="820" controls>
<source src="lib/video/kid-head-stuck.mp4" type="video/mp4">
<source src="lib/video/kid-head-stuck.ogg" type="video/ogg">
</video>
<small class="text-italic text-center">This child shows us why it’s important to challenge our assumptions and find new ways to solve our problems.</small>
</section>
<section data-background-color="#E74C36" data-transition="concave">
<h2 class="fragment visible text-italic serif">Design Thinking is for Everybody</h2>
</section>
<section data-background-color="#1F1D1B" data-transition="concave">
<section>
<div class="centered">
<h2 class="fragment visible text-left text-italic serif">"Techniques and strategies of design belong at every level of a business."</h2>
</div>
</section>
</section>
<section data-background-color="#1F1D1B" data-transition="concave">
<section>
<p class="fragment visible">...not only for designers ...</p>
<p class="fragment visible text-uppercase">But for</p>
<p class="fragment visible">...engineers...</p>
<p class="fragment visible">...creatives ...</p>
<p class="fragment visible">...leaders ...</p>
<p class="fragment visible">...that wants to infuse design thinking into their organization, product or service ...</p>
</section>
<section>
<div class="centered">
<h2 class="fragment visible text-left text-italic serif">"Learned through decades to match human needs with w/ available technical resources within practical constraints of the business"</h2>
</div>
</section>
<section>
<div class="centered">
<h2 class="fragment visible text-left text-italic serif">"For people, for products..."</h2>
</div>
</section>
</section>
<section data-background-color="#334FBF" data-transition="concave">
<h4 class="text-center serif">~ Fin ~</h4>
<img src="lib/img/img-sana-all.jpg" class="img-sana-all" alt="Sana all! Sana ool! Sana ool!" />
</section>
</div>
</div>
<script src="js/reveal.js"></script>
<script>
// More info about config & dependencies:
// - https://github.com/hakimel/reveal.js#configuration
// - https://github.com/hakimel/reveal.js#dependencies
Reveal.initialize({
width: "100%",
height: "100%",
margin: 0,
minScale: 1,
maxScale: 1,
hash: true,
dependencies: [
{ src: 'plugin/markdown/marked.js' },
{ src: 'plugin/markdown/markdown.js' },
{ src: 'plugin/highlight/highlight.js' },
{ src: 'plugin/notes/notes.js', async: true }
]
});
</script>
</body>
</html>