forked from cmda-minor-web/human-centered-design-2021
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtranscriptie.html
328 lines (320 loc) · 30.6 KB
/
transcriptie.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Testing fontsizes</title>
<!-- scripts -->
<script src="fontsize-script.js" defer></script>
<!-- fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap" rel="stylesheet">
</head>
<body>
<header class="optionsHeader">
<article class="options">
<h1>Font and sizes</h1>
<section>
<article>
<input type="range" min="10" max="40" step="1" value="22" id="fontRange">
<p>Letter grootte is: <span id="targetedFontSize">22 px</span></p>
</article>
<article>
<input type="range" min="10" max="60" step="1" value="33" id="lineHeightRange">
<p>Interlinie is: <span id="targetedLineHeight">33 px</span></p>
</article>
</section>
<section>
<input type="radio" id="Roboto" name="font" value="Roboto" checked>
<label for="Roboto">Roboto (sans-serif)</label>
<input type="radio" id="playFair" name="font" value="playFair">
<label for="playFair">Play Fair (serif)</label>
<input type="radio" id="gloria" name="font" value="gloria">
<label for="gloria">Something different</label>
</section>
<button id="resetButton">reset</button>
<button id="optionsToggle">Show font options</button>
</article>
</header>
<main>
<!-- podcast transcription vasilis -->
<section>
<p><span class='vasilis'>Vasilis:</span> Web materials!</p>
<p><span class='espen'>Espen:</span> Is that what we’re calling it?</p>
<p><span class='vasilis'>Vasilis:</span> Yeah, I think that’s what we’re calling it.</p>
<p><span class='espen'>Espen:</span> ...I really like web materials, i'm surprised – i'm surprised there's
no podcast called web materials or web fabric or any of these other other incarnations</p>
<p><span class='vasilis'>Vasilis:</span> Yeah, but then we're surprised not many people are interested in
the material of the web so...</p>
<p><span class='espen'>Espen:</span> This is true, this is true. So, should we start by introducing
ourselves a bit?</p>
<p><span class='vasilis'>Vasilis:</span> Yes, go ahead Espen, who are you?</p>
<p><span class='espen'>Espen:</span> Who am i? So I'm norwegian. I'm a... I was born in Drammen, this small
town an hour outside of Oslo. I studied graphic design, then I moved to England and I studied graphic
design there. And then I moved to Edinburgh, and then I started working as a magazine designer. And
after a couple of years I kind of transitioned into web, pushing a lot of pixels around in photoshop and
trying to make sense of early, early user experience. And then I found some lovely colleagues, we
started ... we started a company called Primate. And I was there for seven years before I returned to
Norway and then I worked briefly for a company called HyperRedink. That was a year and a bit. And then
we moved back to to the UK to Scotland again and now I'm here, I'm freelancing and doing some product
design for another company in Oslo. And I'm trying to figure out how, I can work with the material of
the web better as a designer. It's taken me 15 years to realise that it is fundamentally different to
print. So there you go. That's that's the short, short of my story. How about you? Who are you and where
are you coming from?</p>
<p><span class='vasilis'>Vasilis:</span> So I'm Vasilis Van Gemert, I'm a lecturer at the University of
Applied Sciences in Amsterdam, where I teach the next generation of digital product designers about the
web. And before that, but that's seven years ago, I quit my job as a principal front end developer at
mirabeau which is a large dutch full service web agency. I called it I quit working. So, I was always
very frustrated there, and I guess we'll get to that why I was frustrated there probably the podcast is
also about that. I have studied art. I've studied to become an art teacher but that's a long time ago,
so that's my background. And I have, to design, I have this approach of maybe an artistic approach to
design, and I have a scientific approach to design. So the science comes from my father who's a
professor, and he always told me that there are no facts but there are hypotheses. So you can assume
something, and then you can just work with that until you find proof that there's something else which
makes more sense. But there is not such a thing as a truth, and it also means that you should doubt
everything always all the time. So that's something I do. And then I have this artistic approach in
which I say, okay I'll i just like to play with stuff and see what happens. So in short that's me and
we'll get to know me better in the next couple of episodes I guess.</p>
<p><span class='espen'>Espen:</span> Yeah so...</p>
<p><span class='vasilis'>Vasilis:</span> I heard something very interesting you said that before you became
a web designer you were a print designer and then at the end of your introduction you said it took you
15 years to realise that there's a difference between these two things. Can you tell me, what i was
wondering about, is there a completely different approach to print design that we have to web design?.
What are the main differences?</p>
<p><span class='espen'>Espen:</span> Well, so first of all, obviously earlier on then 15 years down the line
I realised that there is, there are differences. Of course, you know first of all we're working with
with essentially pixels on a screen as opposed to ink on paper so there's differences there. But what I
learned, you know recently within the last five years maybe, is that I want, I'm starting to wonder that
the differences of print and web goes beyond just working with relative units or percentages. I wonder
if we should – we need to kind of change the whole mindset a little bit and i don't know to what, that's
kind of what I'm here to figure out. But, but throughout it's like I spent far too many hours getting
frustrated that we call it line height, and you know not leading, or we call you know there's different
names for the for the spacing, you know we don't call them gutters, we call them tracks or whatever.
Whatever it is it doesn't really matter now, but I used to get frustrated that print being such a
established way and there's so many good design principles in, in graphic design via typography or
layout or all these – all this knowledge. I felt like web sort of drew a line in the sand, and it was so
based on technology that a lot of this theory behind design got lost. So then you have this new
generation of designers designing for screens, and we've completely forget about typography, we don't
worry about you know margins or proportions or whatever, and then it was a bit of a renaissance I think
you know a decade ago when this started coming back in. But my whole career up until recently I felt
like I wanted to bring design principles from design history, graphic design, onto the web. I still feel
like that. But I'm also I'm also realising that just because CSS grid allows us to recreate the grids
that we were used to from print it doesn't necessarily mean that the grids on the web should look like
that or even work like that. Is there a completely new way of dividing up contents that works better for
screens? Probably. But we're not doing that because, you know, we're – even the most fluid of designers
are still essentially working on what's come come before, so. Yeah.</p>
<p><span class='vasilis'>Vasilis:</span> Recognisable. I like these ideas. This is, these are my thoughts as
well. So I think about a decade ago I started reading all about print design, about typography and
trying to translate, and these rules or guidelines that they use in print to the web. And there is some
very interesting stuff that we can actually use and that that looks good. So a measure how wide should a
piece of body text be, well there's not rules for it, but there are some guidelines that help you with
designing, and these guidelines can even help you with designing a grid. These are interesting ideas. So
studying graphic design, the the the art form of graphic design I think it makes sense. Makes a lot of
sense. But then indeed, there is this question of should we base everything on this or should we extend
it. And I think indeed we should extend it. There is so much more on the web and it's so much more
complicated than a fixed canvas of this poster or paper that you're creating. That there's a different
look should be there. And then there's also of course CSS. It changed from a language in which almost
nothing was possible, to a language in which we don't even know what's possible. There's so much
possible we haven't tried it out yet. So yes i'm certain that in the coming years web design will grow
up and it will become something completely different than what we're used to now.</p>
<p><span class='espen'>Espen:</span> Yeah I certainly hope so. The question maybe is are we able to grow
quick enough to keep up with the technology because it's changing so fast. I think now even people like
yourselves, you know your your lecturer of digital design and as you know you use a lot of CSS and code
in your work. Even you don't know the full extent of CSS. So then how how are – how's the average
designer supposed to know what they can actually do with this new material? It's so it's so grand. The
generation of print you know it took decades before new technology became available and now I feel like
we have a generation of, of designers, and maybe I'm talking about my generation, the new generation
that you're teaching they will grow up with CSS in their fingertips. My generation, we are very
reluctant to even touch code. So how are we supposed to really explore the new material? If we're not,
you know, touching it?</p>
<p><span class='vasilis'>Vasilis:</span> Okay. So I think I understand what you're saying. It's changing a
lot. And there's all these new features, but it's not really changing that fast. I mean, grid, it took –
the first time I heard about grid, I think that was in 2008. So it took over a decade to become real
implemented. Right. So things are changing faster now. So I mean, border radius from the first
implementation till it was, let's say, adopted to over a decade. But now, it takes about six weeks for a
new feature that old browsers like to be implemented in all browsers. So that's, that's, things are
changing quicker, that's true. And then you say it's CSS is so big. How can we learn that? Well, I'm not
sure if you ever opened all the menu items in Photoshop or Illustrator? I mean, I've been working with
Illustrator and Photoshop for over 20 years. And I still don't know what all these things mean. Right.
So I think CSS is much easier than these programmes. Yet all designers use these programmes all the
time. Do they understand the full scope of Illustrator? Of course not. Nobody does what maybe some
people do, but most designers certainly don't. So it's just maybe it's a designers are learning the
wrong tool. So instead of using learning something as complicated as illustrator, they should learn
something as complicated as CSS. Or maybe tool makers are making the wrong tools. And this is something
that I actually think is a problem, that we have the wrong tools for the job. So what the tool makers
are doing is they're making tools in which we can design the website, we have the websites we have been
designing. So but the tools are not there to create website that we can imagine. It's just what we have
done before. And maybe that's why websites look like websites.</p>
<p><span class='espen'>Espen:</span> I think in a sense, obviously, you're right. Most websites now are
designed by designers that don't code anyway, regardless of what tool they're using. And I think, I
think in a sense, if people did spend their early careers or even time in university learning code,
rather than learning illustrator or learning both, we would see different, vastly different web sites
and what we see today, because I think, this experimentation that you really love with CSS and what you
can actually do, it doesn't happen. It happens in a, in a front end environment where engineers and
front end designers play, but it doesn't happen for for designers who are used to Photoshop or Figma or
Illustrator. So certainly by using or learning a different tool, be it code or some sort of code based
visual editor, we would we would see something else. But also, I think there's more than the tool that's
keeping us to where we are. I do think, broadly speaking, you'd have to look at all the websites in the
world and think there's probably a few things that just work. That we've you know, we've probably
figured out some of it. You know, measurev line height, there's still some very, very basic typographic
principles that we are, to some degree implementing. There are some patterns that are become very, very
set, that it's hard to break. You know, we put the navigation at the top of our website. I don't think
that's because the tools tell us to do that. I think that's because we all tell us tells us to do that
we feel like it has to be at the top because it's always at the top. And my users are going leave if I
put it somewhere else...</p>
<p><span class='vasilis'>Vasilis:</span> I wasn't even sure if they think about the users when they do that.
So I once – when I still worked at Mirabeau, there was this interaction designer so and back then we had
this waterfall way of working. So the interaction designer, he created a wireframe, and the wireframe
went to the visual designer who opened it in Photoshop and started colouring by numbers. And then that
Photoshop document was sent to me and all my knowledge was ignored. And it was only based on the good
insights of the interaction designer. Now the interaction designer, I watched one interaction designer
start a new project, so really from scratch, so we opened a blank document he created the header, edit
the logo, edit seven or eight navigation items with lorem ipsum dolor sit amet, just words, and then he
added a sub navigation to the left with 10 more navigation items, and then he added to the right, he
added five or six widgets just room for widgets, and then at the bottom he added the footer with some
links. And then... he just started perfecting, this and he didn't even look at the square, the small
square in the middle that remained, he didn't ever look at it, and that was the content. And that's
actually what your people, what your visitors are there for, he didn't look at it for the first day. And
I don't think – I asked him, well, what, why? Oh no but this is what websites look like, so it wasn't
this is what users expect, or this is what we what's proven to work. No that was just how we made
websites back then, and we changed that idea, I mean nowadays websites don't have a sub navigation to
the left, most websites at the top.</p>
<p><span class='espen'>Espen:</span> Yeah.</p>
<p><span class='vasilis'>Vasilis:</span> Most websites don't have widgets on the right. Or we still see them
but but that's not the, it's not necessary anymore.</p>
<p><span class='espen'>Espen:</span> Yeah we've changed...</p>
<p><span class='vasilis'>Vasilis:</span> So I think these ideas they they they can change of course.</p>
<p><span class='espen'>Espen:</span> Yeah, they, the what a website looks like changes over time but we
still have, we – everybody knows now what a website looks like. So it's changed from what it what it
looked like back then with a with a sidebar widgets and stuff, but it's still there's still a fairly
uniform look to it I think. And it's the expectations of us as designers and also our clients can be
hard to get anything a bit different past clients and also past marketing people, with the with all the
measurements and all the tests and all the, you know, perceived knowledge of no, it kind of has to work
like this because what about our, you know, click through rates.</p>
<p><span class='vasilis'>Vasilis:</span> I'm very much looking forward to discussing some of these ideas in
more more detail with you in the coming weeks. I mean this is incredible. I'm sure we will get into
detail about, where should the header be?</p>
<p><span class='espen'>Espen:</span> I can't wait to discuss that. Should we have hamburger menus?</p>
<p><span class='vasilis'>Vasilis:</span> Yeah and what is a hamburger menu and where should the navigation
be. Yep, very interesting questions. These are questions about real estate as well so we'll get back to
the grid. So what should a grid look like. I think we will jump between print design and web design all
the time just for reference because there are things out of knowledge there.</p>
<p><span class='espen'>Espen:</span> I think so yeah. And in the same way we will talk about design vs code.
We'll probably have a episode where you get angry about current design, the state of current design
tools.</p>
<p><span class='vasilis'>Vasilis:</span> Yeah we have a long list of topics actually. We'll talk about
accessibility of course. About interaction, which weirdly enough is something that is largely ignored in
the design community. Which is very strange, of course, because interaction is, such an important part
of the web. Without interaction there was no web. Yet most articles are about grid. It's about layout..
</p>
<p><span class='espen'>Espen:</span> Yeah. And most interaction is the hover state and that's that's that.
</p>
<p><span class='vasilis'>Vasilis:</span> Yeah yeah yeah.</p>
<p><span class='espen'>Espen:</span> Yeah. I also want to talk about accessibility and contrast and visual
accessibility. How – how reliant we are on algorithms and some, some dogma, some ruleset that other
people have decided for us. Is that is that the way to go, you know, does the algorithm know exactly
what contrast to use. I want to talk about content as it is. We touched on it before. How, you know, 10
years ago, and even today, a lot of a lot of design is basically style up a nice menu, have a nice
footer, have some cool colours, and then we leave this blank empty space, that maybe we fill it with
some stock imagery and lorem ipsum. But really, why is it that on the web, eh, we put the content in
last. I mean in magazine design you don't do that, you have a template. And then you use the template to
work with the actual words that your editor wrote.</p>
<p><span class='vasilis'>Vasilis:</span> And the actual images that the photographer delivered for this
article.</p>
<p><span class='espen'>Espen:</span> It's very strange. We don't do that anymore. Yeah.</p>
<p><span class='vasilis'>Vasilis:</span> Yeah. Very interesting to discuss that. So I guess this is
something that maybe is, the way that CMSes is are built?</p>
<p><span class='espen'>Espen:</span> Yes.</p>
<p><span class='vasilis'>Vasilis:</span> It could be that CMS is don't allow us to, create these beautiful
layouts and different layouts in our direction, as easy as it is on in magazines.</p>
<p><span class='espen'>Espen:</span> Yeah. It takes a long time to build a website comparatively. Whereas,
as I say, the reason why I think tools like figma will stay for a long time coming is the sketching is
so much quicker. And in InDesign, or Illustrator, making a layout, it's quicker to make amends and to
try new things, which is why you can experiment more visually. And you're right once, especially once
you have a CMS behind it. It's like, Oh okay, let's go spend the day trying to get this this new layout
to work? Or should we just use the layout we have? And also because we have the CMS, the responsibility
of writing and inputting content, it's, it's left in the air. But we were we struggle with it for seven
years at Primate. Whose job is the content? Oh no, we'll do it, says the client will write the content,
don't worry. When do you need it by it? Well, can we have it now? Oh no, no, no, we'll write it later.
But you know, a couple of weeks before launch. So then what are you supposed to do?</p>
<p><span class='vasilis'>Vasilis:</span> Yeah, and then there's, of course, I mean, so we have this
editorial process, which is maybe in the way of good web design. We have designer tools and designer
knowledge and designer fear of code, maybe, that's in the way of proper design, web design. And then
there's developers, who are mostly concerned with developer experience. Now I'm exaggerating, but this
is something that I, I see that – I mean, if you look at the tools they're making, it's mostly for
themselves and not that much for the user experience. And so there's also the constraint from the
developers who say, No, no, no, you cannot design it that way. Because we use this and this layout tool.
</p>
<p><span class='espen'>Espen:</span> Yeah. And even, even the setup of the tools themselves... the barrier
to entry, to start some project from scratch, if you want this framework or that preprocessor, suddenly,
you have to ... I don't know, for someone who's uninitiated, it feels like you have to hack your machine
and get into terminal and type all these like weird commands, just to even start putting some CSS on a
page.</p>
<p><span class='vasilis'>Vasilis:</span> This is also a very interesting topic, that when we started with
the web, you just wrote some HTML, and some CSS and try to figure out how an FTP programme works. You
copy your code to the server and you're done. If I look at my students now, they open a terminal type
some NPM code, then they wait for a few minutes, because all this stuff has to be downloaded. And this
is just for a simple CSS course. Well, all they have to do is type some CSS in the CSS file. No, a
complete server is download it and run every time. So that changed as well. So the idea of the web that
it's there for everybody... Well, everybody can still use it, but the... it's still it's becoming harder
and harder to start with it, I think.</p>
<p><span class='espen'>Espen:</span> Yeah, I think now, the web is there for everybody in the same way, a
piece of paper and a crayon is there for every print designer out there. You know, you can't – it's
becoming harder to just publish something really easy. Having said that, without, without putting money
in anyone's pockets, Netlify it has, for me at least done something incredible, which is when I built, I
can't remember what I built, some small tests and I just wanted to share it with someone online and it
was literally drag and drop from my folder to this folder and boof it was up. So there are, you know,
there's maybe there's, there's... there's developments happening in that area as well.</p>
<p><span class='vasilis'>Vasilis:</span> Sounds like netlify reinvented FTP that's incredible!</p>
<p><span class='espen'>Espen:</span> Exactly. FTP without the FTP software in the middle.</p>
<p><span class='vasilis'>Vasilis:</span> Great. I'm so much looking forward to discussing discussing all
these topics in more detail. So the plan, if I understand correctly, is we will do an episode every now
and then.</p>
<p><span class='espen'>Espen:</span> Yes, very strict schedule of every now and then...</p>
<p><span class='vasilis'>Vasilis:</span> Yeah. We have a long list of topics. I mean, feedback from the
listeners, if there are any, is very welcome, of course. So if you have anything to say, dear listener,
please contact us on Twitter or email or any other contact means that you are able to find. So, another
thing we are planning is, of course, we have a website with this podcast. I mean, a podcast about web
design should have a designed website. And we are thinking about art directing every new episode. It
doesn't mean that we make a completely new layout or design for every episode. But we want to iterate on
the previous episode. Or we want to contemplate the topic we discussed. So if a topic is about grid,
well, maybe we should experiment a little bit with grid in the art direction of that episode. So this is
something that we're planning. Are there any other plans?</p>
<p><span class='espen'>Espen:</span> No, I think I think you're covered it. We do one topic a week we talk
about it, we... we try and design or create something around it. And then we keep going until we don't
have the time or or we grow too old.</p>
<p><span class='vasilis'>Vasilis:</span> Or until we're done.</p>
<p><span class='espen'>Espen:</span> Until we're done. Yeah that's true. Yeah, maybe we'll finish the
internet.</p>
<p><span class='vasilis'>Vasilis:</span> Yeah. Maybe we just yeah, we finished it. And we come to a
conclusion after a few weeks.</p>
<p><span class='espen'>Espen:</span> That would be nice. Yeah, a couple episodes in, we sit down, we just
write the final blog post that decides everything.</p>
<p><span class='vasilis'>Vasilis:</span> So much looking forward to this. There was one more thing. But I
forgot about that. Oh, yeah. And of course, we will add a transcript of every episode. So if you don't
like listening, or you cannot listen to the podcast for any reason, you can read it. And we'll see how
we design that as well. Maybe we can do something clever with the transcript as well. So.</p>
<p><span class='espen'>Espen:</span> Yes maybe, really, really pale grey text on a clean background. So cool
design. You know, trying to really challenge contrast a little bit.</p>
<p><span class='vasilis'>Vasilis:</span> Good. Yeah. Because we're pretty hard to understand anyway. So it
should be hard to read as well. Right?</p>
<p><span class='espen'>Espen:</span> Yeah I think we should match. Yeah, that's a good idea. We should match
the type of typography to our accents. So that is equally challenging for everybody.</p>
<p><span class='vasilis'>Vasilis:</span> Excellent. Espen.</p>
<p><span class='espen'>Espen:</span> Right. Have we reached the end of the first episode Vasilis?</p>
<p><span class='vasilis'>Vasilis:</span> I think we have.</p>
<p><span class='espen'>Espen:</span> Excellent. Well, it's good talking to you.</p>
<p><span class='vasilis'>Vasilis:</span> It was really good talking to you. Looking forward to the next
episode.</p>
<p><span class='espen'>Espen:</span> See you then.</p>
<p><span class='vasilis'>Vasilis:</span> Okay, bye bye</p>
<!-- <p><span class='vasilis'>Vasilis:</span> Lorem</p> -->
<!-- <p><span class='espen'>Espen:</span> Lorem</p> -->
</section>
</main>
</body>
</html>