-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·368 lines (361 loc) · 28.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
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
<!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>Primary 2.0</title>
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/black.css">
<link rel="stylesheet" href="lib/css/primary.css">
<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="lib/css/zenburn.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 id="section__intro">
<h2>Primary 2.0</h2>
<img src="lib/img/favors-process-illustration.png" style="max-width:60%">
<p>Solutions for a Better Tomorrow... <em>Today!</em></p>
</section>
<section>How Can We Improve Our Digital Products?</section>
<section>How Can We Improve Our Digital Process?</section>
<section id="section__collaboration">
<section>
<h2>#1.(Stop) Collaborate & Listen</h2>
</section>
<section>
<h3>What Does True Collaboration Look Like?</h3>
<ul>
<li class="fragment">Sharing perspectives, discovering new points of view</li>
<li class="fragment">Merging ideas to create stronger, well-rounded outcomes</li>
<li class="fragment">Learning each others' craft to become more versatille</li>
<li class="fragment">Providing feedback to grow as individuals and as a team</li>
</ul>
</section>
<section>
<p>Healthy collaboration requires defining a common goal, thinking about the big picture and putting the project first as decisions are made</p>
...
</section>
<!-- <section>
<p>Healthy collaboration means less work and rework during the collaborative process, resulting in a project that can be completed in less time.</p>
<a class="link" target="_blank" href="http://designmodo.com/designers-developers-work/">Source: DesignModo</a>
<aside class="notes">Let's complete projects faster by dividing the work among clearly-defined roles.<br>Instead of a team of 3 working 9 months to complete a website, let's involve a team of 9 to complete it in 3 months.</aside>
</section>
<section>
<p>As developers who work with designers, it’s our job to make that cooperation as smooth and easy as possible.</p>
<a class="link" target="_blank" href="http://mattgemmell.com/how-developers-can-help-designers/">How Developers Can Help Designers</a>
</section> -->
<section>
<img src="lib/img/roles/roles-old-vs-new.jpg"><br>
<a class="link" target="_blank" href="http://www.slideshare.net/edburgoyne/ad-sub-integratedmodel4">Source: AdSubCulture</a>
</section>
<section>
<h3>Further Reading</h3>
<ul class="link-list">
<li><a target="_blank" href="http://designmodo.com/designers-developers-work/">Why Designers and Web Developers Must Work Together</a></li>
<li><a target="_blank" href="http://mattgemmell.com/how-developers-can-help-designers/">How Developers Can Help Designers</a></li>
<li><a target="_blank" href="https://medium.com/theagency/the-design-workflow-at-a-digital-agency-fd55830a14dc#.k86f61mkz">The Design Workflow at a Digital Agency</a></li>
<li><a target="_blank" href="http://photoshopetiquette.com/">Photoshop Etiquette - A Guide to Discernable Web Design</a></li>
<li><a target="_blank" href="http://blog.trello.com/tips-to-improve-cross-team-collaboration/">How The “Silo Effect” Is Hurting Cross Team Collaboration</a></li>
<li><a target="_blank" href="http://alistapart.com/article/why-arent-you-asking-questions">Why Aren't You Asking Questions</a></li>
<li><a target="_blank" href="http://blog.invisionapp.com/category/teams/">InVision Blog: Teams</a></li>
</ul>
</section>
</section>
<section id="section__content">
<section>
<h2>#2. Content is King</h2>
</section>
<section>
<p>Great content isn’t stumbled upon,<br>it’s carefully designed for a specific goal.</p>
<a class="link" target="_blank" href="https://gathercontent.com/blog/www-content-production-process">Source: GatherContent</a>
<aside class="notes">Content has an undeniable effect on design.<br>Content provides the context.<br>Without it, a website is an empty shell and we're left with taking a stab in the dark.</aside>
</section>
<section>
<p>If websites are essentially a vehicle for content delivery,<br>why do we disproportionately focus on visual design,<br>at the expense of the content?</p>
<a class="link" target="_blank" href="lib/docs/content-strategy-project-guide.pdf">Source: GatherContent</a>
<aside class="notes">When we treat content as an afterthought we limit our ability to make good design decisions and our sites fail to achieve their goals.</aside>
</section>
<section>
<p>"Design in the absence of content<br> is not design, it's decoration."</p>- <a target="_blank" href="https://twitter.com/zeldman/status/804159148">Jeffery Zeldman. Founder, Happy Cog</a>
<aside class="notes">So why do we postpone content and lead with design?<br>Doing this is like starting a fight with one arm tied behind your back.<br>Instead, let’s get both fists up — and always pair the design and content.</aside>
</section>
<section>
<p>Obviously there's a place for beauty in a product.<br>But aesthetics aren’t the first thing that<br>we as web designers should tackle.</p>
...
<aside class="notes">Let’s put it this way: Creating a website design without content is a guessing game. Period.<br><br>Content is king, and with it, we can provide a tool that actually helps clients advertise their product or services.</aside>
</section>
<section>
<p>Design and content are equally important for success.<br>Giving them equal weight will dramatically increase the quality of your work.</p>
<a class="link" target="_blank" href="http://blog.invisionapp.com/which-comes-first-content-or-design/">Which Comes First: Content or Design?</a>
</section>
<section>
<img src="lib/img/content/content-inventory.jpg">
</section>
<section>
<h4>Further reading</h4>
<ul style="font-size:.5em;line-height:1.5em">
<li><a target="_blank" href="http://insights.wired.com/profiles/blogs/content-before-design-creating-superior-user-experiences">Content Before Design: Creating Superior User Experiences</a></li>
<li><a target="_blank" href="http://www.elezea.com/2013/07/content-first/">How to convince clients to think about content before they think about graphics</a></li>
<li><a target="_blank" href="http://info.quintainmarketing.com/blog/why-good-content-must-always-come-before-good-design">Why Good Content Must Always Come Before Good Design</a></li>
<li><a target="_blank" href="http://www.studio24.net/blog/content-before-design/">Web Designers Should Always Consider Content Before Design</a></li>
<li><a target="_blank" href="http://www.business2community.com/content-marketing/content-design-4-steps-better-websites-01030035">Content Before Design: 4 Steps to Better Websites</a></li>
<li><a target="_blank" href="http://www.howdesign.com/web-design-resources-technology/design-trends-web-content-before-layout/">Design Trends: Web Content Before Layout</a></li>
<li><a target="_blank" href="http://www.arcstone.com/blog/2014/08/content-first">Content Before Design: Why it Matters</a></li>
<li><a target="_blank" href="http://www.copypress.com/blog/why-its-important-to-plan-content-before-designing-a-website/">Why It’s Important To Plan Content Before Designing a Website</a></li>
<li><a target="_blank" href="http://www.stephaniehay.com/writing-content-before-designing/">Writing Content Before Designing: Conversation Mapping</a></li>
<li><a target="_blank" href="http://www.markboulton.co.uk/journal/structure-first-content-always">Structure First. Content Always.</a></li>
<li><a target="_blank" href="http://vanseodesign.com/web-design/content-before-design/">What Should You Know About Content Before You Design?</a></li>
<li><a target="_blank" href="http://www.allwebcafe.com/blog/copy-before-or-after-design/">Copy Before or After Design?</a></li>
<li><a target="_blank" href="http://blog.invisionapp.com/which-comes-first-content-or-design/">Which Comes First, Content or Design?</a></li>
<li><a target="_blank" href="https://designspike.com/blog/content-before-website-design/">Content Before Website Design</a></li>
<li><a target="_blank" href="http://vanseodesign.com/web-design/is-content-necessary/">Is Content Necessary Prior To Web Design?</a></li>
<li><a target="_blank" href="http://www.sitepoint.com/content-comes-before-good-design/">Content Comes Before Good Design</a></li>
<li><a target="_blank" href="http://webdesign.tutsplus.com/articles/four-challenges-of-a-content-first-approach-to-website-projects--cms-26786">Four Challenges of Content-First Web Design</a></li>
<li>eBook: <a target="_blank" href="lib/docs/content-strategy-project-guide.pdf">Content Strategy Project Guide</a></li>
<li>eBook: <a target="_blank" href="lib/docs/content-production-planning-workflow.pdf">Content Production Planning Workflow</a></li>
</ul>
</section>
</section>
<section id="section__ucd">
<section>
<h2>#3. Get User-Centeric</h2>
</section>
<section>
<p>It’s pretty likely that your client isn’t the main user of the website you are designing</p>
...
<aside class="notes">A client’s natural inclination will be to give you their personal opinion on a design. This is reinforced because you ask them what THEY think of the design. Instead, we should ask them what their users will think of the design.</aside>
</section>
<section>
<p>Even if they can clearly articulate their exact tastes and preferences, it’s beside the point because they are not the target audience.</p>
<a class="link" target="_blank" href="http://alistapart.com/article/why-arent-you-asking-questions">Source: A List Apart</a>
<aside class="notes">The fact is - It is not the client’s job to know exactly what their website should look like or how it should function. It’s OUR job.<br><br>They come to us to share ideas, to express concerns, likes, and dislikes...<br><br>But ultimately, our clients look to us in helping guide them to a solution.</aside>
</section>
<section>
What is User-Centered Design?
<aside class="notes"><p>Typically, our sites are designed from a business perspective, with consideration for users added in later.<br><br>Instead, UCD ensures a process focused on what users need...</aside>
</section>
<section>
<p>User-Centred Design (UCD) ensures a process focused on what users need <em>before</em> balancing this with technical and business requirements.</p>
<a class="link" target="_blank" href="http://www.experienceux.co.uk/faqs/what-is-user-centred-design/">Source: Experience UX</a>
</section>
<!-- <section>
<p>Too often, we jump into design before developing a clear definition of the problem.</p>
<p class="fragment">To innovate, we need to pause and ask ourselves the <em>why</em>.<br><br>
<a class="link" target="_blank" href="https://medium.com/salesforce-ux/making-design-core-to-the-agile-process-3e06b083e8a8#.ovspfwccc">Making Design Core to the Agile Process</a></p>
<aside class="notes">Too often we jump into design before developing a clear definition of the problem. To innovate, we need to pause and ask ourselves the WHY.</aside>
</section> -->
<section>
<h3>UCD Process</h3>
<ol>
<li class="fragment">Know the User</li>
<li class="fragment">Define the Problem</li>
<li class="fragment">Research the Competition</li>
<li class="fragment">Propose the Solution</li>
<li class="fragment">Test the Outcome</li>
<li class="fragment">Iterate the Design</li>
</ol>
</section>
<section>
<figure>
<img src="lib/img/ucd/elements-of-ux.png" style="max-width:85%;">
<figcaption>The Elements of User Experience</figcaption>
</figure>
</section>
<section>
<figure>
<img src="lib/img/ucd/ux-iceberg.jpg" style="max-width:50%;">
</figure>
</section>
<section>
<p>Ask a few questions about who the end user is and what their needs are to better understand the target audience you are actually designing for.</p>
<a class="link" target="_blank" href="http://alistapart.com/article/why-arent-you-asking-questions">Source: A List Apart</a>
</section>
<section>
<h3>User-centered Questions</h3>
<ul>
<li class="fragment">Who exactly do you anticipate will be using this website?</li>
<li class="fragment">What will they accomplish by using this website?</li>
<li class="fragment">What are their pain points?</li>
<li class="fragment">What problem is this website solving for them?</li>
</ul>
</section>
<section>
<h3>(some) UCD Deliverables</h3>
<ul>
<li>Competitive Analysis</li>
<li>Audience Definition</li>
<li>User Stories</li>
<li>Content Audit</li>
<li>Task Flows</li>
<li>Wireframes</li>
<li>Prototypes</li>
<li>Usability Testing</li>
<li><a target="_blank" href="http://uxdesignmastery.com/deliverables/">Some Real-World Examples</a></li>
</ul>
</section>
<section>
<ul class="link-list"><h4>Further Reading</h4>
<li><a target="_blank" href="https://blog.prototypr.io/understanding-how-user-experience-designers-think-and-work-c584bfd85e0f">Understanding How User Experience Designers Think And Work</a></li>
<li><a target="_blank" href="http://alistapart.com/article/the-core-model-designing-inside-out-for-better-results">The Core Model: Designing Inside Out for Better Results</a></li>
<li><a target="_blank" href="http://uxmag.com/articles/7-ux-design-trends">7 UX Design Trends That Will Rule the Roost in 2016</a></li>
<li><a target="_blank" href="https://www.usertesting.com/blog/2016/06/16/calculating-the-value-of-ux-research/">Calculating the Value of UX Research</a></li>
<li><a target="_blank" href="http://www.slideshare.net/andyshanley/ux-for-small-to-medium-digital-agencies">Integrating UX in to a Growth Digital Agency</a></li>
<li><a target="_blank" href="https://uxplanet.org/user-centered-design-canvas-deconstructed-cf7e9c6252e8#.49bs5rae8">User Centered Design Canvas Deconstructed</a></li>
<li><a target="_blank" href="https://uxplanet.org/usability-for-conversion-stop-using-fads-start-using-data-8a38c0c4c187#.iou5fnaay">Usability for Conversion: Stop Using Fads, Start Using Data</a></li>
<li><a target="_blank" href="http://blog.invisionapp.com/what-is-user-research/">What is User Research?</a></li>
<li><a target="_blank" href="https://uxdesign.cc/">UXdesign.cc Blog</a></li>
<li>eBook: <a target="_blank" href="lib/docs/ux-design-collaboration-in%20the-enterprise.pdf">UX Design Collaboration in The Enterprise</a></li>
</ul>
</ul>
</section>
</section>
<section id="section__roles">
<section>
<h2>#4. Well-Defined Roles</h2>
</section>
<section>
<img src="lib/img/roles/demystifying-digital-roles.png" style="max-width:90%">
</section>
<section>
<img src="lib/img/roles/hybrid-roles.png" style="max-width:90%">
</section>
<section>
<p>Choose your specialization. Do you want to focus on design, front-end coding, development, content, SEO, marketing or something else?</p>
<a class="link" target="_blank" href="http://webdesign.tutsplus.com/articles/the-job-of-a-web-designer-is-changing-which-is-good--cms-27180">The Job of a Web Designer is Changing</a>
<aside class="notes">But that doesn’t mean you can ignore other areas. You need a broad understanding of all aspects of digital, accompanied by a deep specialism in one area.</aside>
</section>
<section>
<figure style="background:#fff">
<img src="lib/img/roles/t-shape.svg">
</figure>
</section>
<section>
<h3>Find Your Design Superpower</h3>
<p>The key to finding and using your superpower is a mix of self-awareness, soliciting feedback from others, and communicating your limitations.</p>
<a class="link" target="_blank" href="http://www.fastcodesign.com/3062056/how-to-find-your-design-superpower">Source: FastCo. Design</a>
</section>
<section>
<h3>Further Reading</h3>
<ul class="link-list">
<li><a target="_blank" href="http://webdesign.tutsplus.com/articles/the-job-of-a-web-designer-is-changing-which-is-good--cms-27180">The Job of a Web Designer is Changing (and That’s Good News)</a></li>
<li><a target="_blank" href="http://www.fastcodesign.com/3062056/how-to-find-your-design-superpower">How To Find Your Design Superpower</a></li>
<li><a target="_blank" href="http://adage.com/article/agency-viewpoint/build-a-modern-creative-team-2015/296510/">How to Build a Modern Creative Team</a></li>
<li><a target="_blank" href="http://adage.com/article/agency-viewpoint/build-a-modern-creative-team-2015/296510/">How to Create a Modern Agency for the New Year</a></li>
<li><a target="_blank" href="http://firstround.com/review/defining-product-design-a-dispatch-from-airbnbs-design-chief/">Defining Product Design</a></li>
<li><a target="_blank" href="https://www.linkedin.com/pulse/20140602002114-21267955-producer-vs-project-manager-in-the-creative-agency">Producer vs. Project Manager in the Creative Agency</a></li>
</ul>
</section>
</section>
<section id="section__agile">
<section>
<h2>#5. Agile Proj Mgmt</h2>
</section>
<section>
<p>Traditional waterfall methods for developing websites are rapidly declining in popularity.</p>
<a class="link" target="_blank" href="https://manifesto.co.uk/agile-vs-waterfall-comparing-project-management-methodologies/">Agile vs Waterfall: Comparing project management methods</a>
</section>
<section>
<p>Agile has 3x the success rate of traditional waterfall methods and a much lower percentage of time and cost overruns.</p>
<a class="link" href="https://www.mountaingoatsoftware.com/blog/agile-succeeds-three-times-more-often-than-waterfall">Agile Succeeds Three Times More Often Than Waterfall</a>
</section>
<section>
<img src="lib/img/agile/responsive-process.jpg">
</section>
<section>
<img src="lib/img/agile/iterative-design-and-dev.jpg">
</section>
<section>
<ul class="link-list"><h4>Further Reading</h4>
<li><a href="https://www.webdesignerdepot.com/2018/03/how-and-why-to-get-everyone-sketching/">How and Why to Get Everyone Sketching</a></li>
<li><a href="https://manifesto.co.uk/agile-vs-waterfall-comparing-project-management-methodologies/">Agile vs Waterfall: Comparing Project Management Methods</a></li>
<li><a href="http://www.deltamatrix.com/why-are-agile-teams-25-more-productive/">Why Are Agile Teams 25% More Productive?</a></li>
<li><a href="https://www.mountaingoatsoftware.com/blog/agile-succeeds-three-times-more-often-than-waterfall">Agile Succeeds Three Times More Often Than Waterfall</a></li>
<li><a href="http://www.datical.com/blog/productivity-in-agile-vs-waterfall/">Productivity in Agile vs. Waterfall</a></li>
<li><a href="https://medium.com/@xtianmiller/think-less-design-better-f812c1617888">Think Less. Design Better.</a></li>
</ul>
</section>
</section>
<section id="section__learning">
<section>
<h2>#6. Culture of Learning</h2>
</section>
<section>
<p>The role of learning is to maximize PRIMARY's potential<br>by maximizing the potential of everyone working there.</p>
...
</section>
<section>
<p>PRIMARY, with neglected learning a culture, will ultimately fall behind competitors.</p>
...
<aside class="notes">Don't be afraid of failure to adapt.</aside>
</section>
<section>
<p>PRIMARY, with a transformative culture of learning, thrives. At this organization, it’s understood that learning is a natural process, that people yearn to grow.</p>
...
</section>
<section>
<h2>Two Mindsets</h2>
<ul style="font-size:.5em;" class="fragment">
<h4>Fixed Mindset - Intelligence is Static</span></h4>
<p>Leads to a desire to look smart and a tendency to...</p>
<li>Avoid challenges</li>
<li>Give up easily</li>
<li>See effort as fruitless or worse</li>
<li>Ignore useful negative feedback</li>
<li>Feel threatened by the success of others</li>
<h4 style="padding-top:1em;">As a result, they may plateau early and<br> achieve less than their full potential</h4>
</ul>
<ul style="font-size:.5em;padding-top:2em" class="fragment">
<h4>Growth Mindset <span>- Intelligence Can be Developed</span></h4>
<p>Leads to a desire to learn and a tendency to...</p>
<li>Embrace challenges</li>
<li>Persist in the face of setbacks</li>
<li>See effort as the path to mastery</li>
<li>Learn from criticism</li>
<li>Find lessons and inspiration in the success of others</li>
<h4 style="padding-top:1em;">As a result, they reach even higher<br> </h4>
</ul>
<a class="link fragment" target="_blank" href="lib/docs/growth-mindset-vs-fixed-mindset.pdf">Source Infographic</a>
</section>
<section>
<h4>Have a Growth Mindset</h4>
<p>The industry is rapidly changing, and to thrive, designers must be interested in learning and improving their process.</p>
<a class="link" target="_blank" href="http://blog.invisionapp.com/building-generalist-design-teams/">Building Generalist Design Teams</a>
</section>
<section>
<p>"In times of change, learners inherit the earth,<br>while the others find themselves equipped to deal<br>with a world that no longer exists."</p>
<p>- Eric Hoffer</p>
</section>
</section>
<section>
<h1>Thank You!</h1>
<p>Thoughts? Questions? Concerns? Comments?</p>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script>
// More info https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
history: true,
// More info https://github.com/hakimel/reveal.js#dependencies
dependencies: [
{ src: 'plugin/markdown/marked.js' },
{ src: 'plugin/markdown/markdown.js' },
{ src: 'plugin/notes/notes.js', async: true },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }
]
});
</script>
</body>
</html>