Get designers involved in your open source project!
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Title of Series | ||
| Number of Parts | 611 | |
| Author | ||
| License | CC Attribution 2.0 Belgium: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor. | |
| Identifiers | 10.5446/42049 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language | ||
| Production Year | 2017 |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
FOSDEM 2017602 / 611
10
14
15
16
17
21
22
24
25
27
31
36
40
42
46
50
55
56
63
70
73
78
84
94
101
102
104
107
108
109
110
111
112
113
114
115
117
119
122
123
126
127
128
130
131
132
135
136
137
138
141
142
144
145
146
150
151
157
158
159
160
162
163
164
166
170
171
173
175
176
177
179
181
184
187
189
191
193
194
199
200
205
207
208
209
211
214
218
219
222
223
224
225
226
229
230
232
234
236
237
238
239
245
248
249
250
251
253
255
257
258
259
260
261
264
265
266
267
268
271
272
275
277
279
280
282
283
284
287
288
290
292
293
297
302
304
305
306
307
309
310
311
312
313
314
316
317
318
319
321
322
327
329
330
331
333
336
338
339
340
341
346
348
349
350
352
354
356
358
362
363
364
367
371
372
373
375
380
384
385
386
387
388
389
390
391
392
393
394
395
398
400
401
402
405
407
409
411
412
413
416
417
418
420
424
425
427
428
429
431
435
438
439
440
441
443
444
446
448
454
459
460
461
462
465
466
468
471
473
477
478
480
483
487
488
489
491
495
498
499
500
501
502
503
504
507
508
510
511
512
514
518
519
520
522
524
526
528
530
531
533
535
536
549
550
554
555
558
560
563
564
573
575
578
579
582
585
586
588
589
590
591
592
593
594
595
596
600
603
604
605
609
00:00
Projective planeBitResultantPoint cloudComputer animation
00:16
Point cloudMultiplication signOpen sourceUMLXML
00:30
Open sourceProcess (computing)WhiteboardXMLComputer animation
00:46
Projective planeOpen sourceXMLComputer animation
01:03
Projective planeXMLComputer animation
01:22
Projective planePoint cloudWordProgram flowchart
01:37
Point cloudOpen sourceExterior algebra
01:52
VideoconferencingEmailExterior algebraComputer fileProduct (business)Projective planeConnectivity (graph theory)
02:11
Point cloudComputer animation
02:26
Projective planeTable (information)Open sourceProgrammer (hardware)Computer animation
02:47
Open sourceProgrammer (hardware)Slide ruleFitness function
03:02
Point cloudField (computer science)PasswordXML
03:22
Directory serviceDatabaseDrag (physics)Forcing (mathematics)
03:44
DatabaseWeb 2.0QuicksortUsabilityAxiom of choiceBitXML
04:07
QuicksortDefault (computer science)DatabaseField (computer science)Computer fileInstallation artPasswordComputer animation
04:33
Server (computing)Web 2.0Decision theorySystem administratorPasswordDefault (computer science)Installation artComputer animation
04:49
Installation artData storage deviceDatabaseMathematicsComputer animation
05:06
Data storage deviceComputer animation
05:23
PasswordLoginOpen sourceComputer animation
05:39
Open sourceLoginWeb pageQuicksortServer (computing)Right angleDecision theoryComputer animation
06:03
Decision theorySystem administratorCASE <Informatik>SoftwareWebsiteProcess (computing)Projective planeComputer animation
06:22
Process (computing)Data miningDebuggerBitComputer animationSource codeXML
06:40
Front and back endsBitRevision controlLattice (order)XMLSource code
07:04
Software developerProjective planeOcean currentRevision controlSpacetimeArrow of timeComputer iconError messageSource codeXML
07:25
WindowSource codeXML
07:41
Axiom of choiceSoftware developerSource codeXML
08:00
2 (number)Design of experimentsMobile appRepository (publishing)Projective planeInterface (computing)Reading (process)Computer animationXML
08:59
WebsiteRepository (publishing)Projective planeWeb 2.0XML
09:26
MereologyElectronic mailing listFunctional (mathematics)XML
09:46
Web browserEmailInformationSoftware developerLibrary (computing)Extension (kinesiology)XML
10:01
Process (computing)Revision controlProjective planeInformationXMLUML
10:18
Repository (publishing)Computer fileInstallation artXML
10:34
Computer fileXML
10:48
XML
11:05
Type theoryBitXML
11:19
BitMereologyXMLComputer animation
11:35
Inheritance (object-oriented programming)Point cloudComputer animation
11:50
Computer fileVapor barrier
12:04
PreprocessorMereologyCASE <Informatik>DebuggerLibrary (computing)
12:37
Library (computing)Point cloudMobile appXMLUML
12:58
Vapor barrierXMLUML
13:20
Mathematical optimization2 (number)XMLUML
13:35
Projective plane1 (number)Open source
13:49
Interface (computing)Feedback
14:04
Formal languageWordFeedbackProcess (computing)Projective plane
14:29
Projective planeComputer icon
14:45
Event horizonBitMultiplication signElectronic mailing list
15:19
Open setProjective plane
15:35
Self-organizationProjective planeOpen sourceStructural loadFunctional (mathematics)Program flowchart
16:00
Android (robot)Mobile appProgram flowchart
16:18
TelecommunicationTwitterComputer animation
16:33
Software developerTelecommunicationTwitterComputer animationXML
16:50
InformationFeedbackXML
17:16
Software developerMobile appOnline helpLattice (order)Source codeXML
17:32
Lattice (order)Point (geometry)Software testingDebuggerFocus (optics)XMLComputer animation
17:59
Software developerDebuggerAreaComputer animation
18:14
Term (mathematics)InformationProjective plane
18:35
Projective planeProfil (magazine)
18:51
Profil (magazine)FeedbackTwitter
19:05
Computer animation
Transcript: English(auto-generated)
00:00
So, I start. I'm going to talk about how to get designers involved in your project. So, a bit even more basic than what we saw before. So, yeah, I also work on Next Cloud and the design team since a long time already.
00:22
And, yeah, so the short story of how to get designers involved is basically go to opensourcedesign.net slash jobs and post what you need on the job board, on our job board of the open source design collective. But the long story is a bit longer and I'm going to use examples that we learned from working on Next Cloud
00:45
and that I also learned from working in other communities. And it's, yeah, very, very basic things which have a lot of impact. So, can I have a show of hands? How many people work on an open source project? Okay. How many of you do not have any designer involved in that project?
01:05
Okay. Or somewhat, maybe, also. So, this will be very useful for you, but this will also be very useful for people who are designers who work on a project and who want to improve. So, even though it's kind of, or I consider them very basic things or I keep repeating them in projects,
01:23
I think a lot of people or a lot of projects still don't do them. So, yeah, you'll see then. Just a small word about Next Cloud. You might have heard about the whole OnCloud Next Cloud fork. So, short story, Next Cloud is a community fork of OnCloud because we were unhappy with some things.
01:42
For example, that not everything was open source and, yeah, a bunch of other things. So, yeah, you can ask me later about it. But anyway, this Next Cloud is like an open source alternative to Dropbox and Google products for files and contacts, calendar, email, video chat, stuff like that.
02:02
So, yeah, it's quite an extensive project. You already heard about Raghu that he maintains the calendar or who maintains the calendar as designer. So, yeah, we have a bunch of components and there's, yeah, lots of things that we learned during the years. So, first thing of four basic things is to establish a culture of design.
02:24
So, I was back when it was still OnCloud. I was like the fourth or fifth contributor and I was the first designer in the project. And, yeah, it was when we were, yeah, very few people and there wasn't even a company yet. And, yeah, it was just like a few people hacking at a table and stuff.
02:44
So, the first thing, very first thing I did because I come from a design background and not from like a programmer or open source background. Very first thing I did was look at this and say, what the fuck is this? So, this, you can even feel like I have trouble fitting it on the slide because there's so much stuff on it and so misaligned.
03:05
And, yeah, that's the OnCloud 1 installation. So, yeah, it's pretty, I mean, I could point out like what's wrong with it, like alignment of the fields, of the field labels to the left. The password, you need to retype the passwords.
03:23
It's pretty much a drag. You need to choose the data directory or you can change it, which I don't even care about. Force SSL, like just do it. All this stuff like date format, what does even, like what does G even mean? I have no clue. Probably you can tell me, but I don't even care.
03:41
And then one of my biggest problems with the whole thing is the database. Like I remember horror nightmares of copying and finding database credentials somewhere in some weird other subfolder or asking my web host for that. And even with like a bit of nerdy skill that was difficult.
04:02
So there is also like a technical choice to usability and some sort. And that being how it looks like now, that's the installation now. You see there is no database field by default because we use SQLite by default.
04:20
It's not 100 percent advised to use it for big installations. But that allows us, because SQLite, if you know it or not know it, it's just a single file. And you don't need any, you don't need to create any username, password, credentials or whatever. It can all be done by the web server. So it's a technical decision that allows us to actually make it so simple.
04:41
You just need to choose an admin username and password. We could just also like directly log you in and give you the credentials or have default credentials, but that would result in a lot of insecure installations. So we don't do that. But yeah, we make it, I'd like to think even simpler than the WordPress five minute install. And yeah, this, but you can still change storage database, so you can still modify two things.
05:06
One is the database, so you can change it to MySQL or PostgreSQL or whatever you want, whatever you implement. And then also to, you can change the storage path so that you can store it somewhere else. And all the rest is just done automatically.
05:24
So the, yeah, so it's just username, password. It's basically this is very similar to just the log in screen, actually. And that's very simple. That still, though, leaves you with you need to download it. You need to set the permissions and stuff like that. So you always need to know that in open source we have this additional problem.
05:43
We don't have a sign in button on the page. We have a download button. Right. So that's a it's a very, very different thing. So, yeah, but that gets easier in some sort. Also, technical reason with PHP 7, I think, at least, because you don't need to mess around with permissions so much anymore or on certain servers.
06:01
So a lot of technical things interweave with the design decisions or with how the UX is at the end. And in this case, UX is, of course, the user experience of admins installing the software. OK, so that's the first thing. And I think I've been talking so long about it now because I think it's so important that the setup process is easy
06:22
because that's the first the first reason people turn around and don't use your project like website and installation process, I would say. Next thing is you have to care about details. So, for example, here is a colleague of mine. He's actually more of a developer, but does a bit of front end.
06:43
And, yeah, he opened that issue where we basically did it together at every meetup we now do. We have four meetups during the year. They're like planning meetups or working meetups for the next version. And they're open so everyone can actually attend. And what we established during these meetups is that we sit in a meeting room and we install the newest version or the current development version.
07:09
And we just click through it as if we were like people new to the project. And we just point out every single small thing. So you see, like, there's like wrong capitalization, for example, or white space issues
07:22
or or some icon arrows like it's white instead of black and stuff like that. It's a very, very detailed things. So that establishes a general culture of design, a general culture of the you probably heard about the no broken windows policy. So if you if you don't see anything wrong, then you're also less inclined to
07:43
do wrong choices or you you encourage people to to do similarly nice looking things. So that's that's very important to to do that with everyone. And everyone is in that room, like all the developers, all the other people working on it. So, yeah, it just it brings everyone together on that design or experience base.
08:06
Second thing is be informative. So what does that mean? It's basically something such as simple as just putting screenshots in your read me in your in your repository. Read me like a lot of projects I look at.
08:22
I go to their GitHub or to their to their get lab or to their repository anywhere. And they don't even have any screenshots, even though it is an app which probably has an interface. And there's like a ton of explanation. And it's like it looks like, oh, we use like PostgreSQL and some blah, blah, blah cluster with some Angular JS.
08:42
And I don't even care about that when I want to use it. So basic thing, just a short explanation, like even even those tags, I mean, are a bit nerdy, but that's OK. So just short explanation and just a nice screenshot so people can understand what they're actually looking at. So that's that's very important.
09:02
That's one very small thing. So the people who raise their hands, if you don't do that yet, please do that now. And because this is kind of I mean, this is also similar to the Web site. So if you don't have a Web site, you just have a repository. Do this. If you have a Web site, make sure your Web site has short explanation and a screenshot.
09:22
But most projects don't have a Web site yet. So just do this. Next, we scroll down in the readme and then we need some kind of a concise feature list explaining what the hell this actually does. So we have some funny emojis and also part of design.
09:40
And we just list some features or some important functionality of the app and explain what it does. And then we even have some more nerdy info, like we say, yeah, if you want to if you want to send encrypted the emails, just use this browser extension. And yeah, which libraries we use, for example, just for developers who also want to get involved.
10:01
And also what we have planned for the coming versions. So it's kind of like, yeah, being informative and being open about your process. Then we scroll down even more. And the problem is always like, yeah, oftentimes people or projects don't even have any setup info, like how the hell do I do I make this thing run?
10:21
I just download it and then what? You just clone the Git repository, which is already pretty difficult for many people. And then, yeah, I'm just left there and I see like an install.sh and I see like a grant file or some shit like that. And I'm just utterly confused about what I need to do next. And so one important thing is do not assume that everyone knows what they need to do
10:44
with a makefile or what they need to do if they see a makefile or something like that. Just write it out. And make sure that it's, yeah, very few commands. So I'm actually still complaining about this, like about two commands. So if it can be, like just make it make or I mean, nothing at all would be best.
11:04
But if it actually needs to be, just make it one command. Because this I always forget like what I actually need to type. So, yeah, that's also another important thing. Like for people who are actually who want to contribute and who are a bit
11:21
more technical maybe or less technical but would like to learn, just spell it out. Like just write it out. And those are the three important things in the readme actually, I would say. Then third part, like we also mentioned it, same thing, be welcoming. And I like to repeat it because it's super important and I'd like to think that
11:43
this is one of the big reasons why the Next Cloud design team is so successful. The first thing, for example, is tying into the whole make or grant file or whatever thing is that you need to remove barriers to entry. For example, we have this issue or we have this thought forever like, oh, should we have some CSS preprocessor?
12:08
CSS in this case also regarding design, right? So we could talk about like, I don't know, using composer for PHP, which we also do in some parts. But this specifically is about the CSS.
12:21
So it also concerns front end designers. And so one thought was, yeah, do we use SCSS? And we were discussing about it in the past already. And we were saying, ah, no, we didn't really want to use it because then people need to compile it. And then this one contributor said, well, there is this PHP library which directly compiles it.
12:42
And Next Cloud being a PHP app, you don't need to do anything else, right? So actually it's seamless. And I said, okay, if you can do it like that, if you provide a pull request and if you make it, if you rewrite it, and if you make it so that it just works, then that's okay. But otherwise it's a barrier to entry and that's not okay.
13:01
So, yeah, we're on a good way. Like this issue is still partly open, but most of it actually is moved already. And yeah, it's very cool with the additional bonus of not making it any more difficult, except, you know, the SCSS syntax is like, I mean, it's almost the same as CSS, but it's very easy, very easy to learn.
13:23
It's like not an entirely new technology. So you can have some optimizations or you can have some cool tools, but you still need to keep in mind that it needs to be simple. Then, second thing, what I will also mention, I'm very happy that it's successful or that it works, is two tags that we use,
13:42
or we use many tags, but these I think are one of the most important ones or two of the most important ones for open source projects in general. One is the design tag. It's just like an umbrella tag for everything regarding interface design, UX design, any kind of design. We just chose the tag design.
14:01
I actually got it from Mozilla where they use 13 different tags, I think, like UX feedback. So if there's missing feedback or if there's a spinner showing too long, then UX wording, I think when the language is too technical or not understandable. So we just grouped it to one design tag because that makes stuff much simpler.
14:22
And then also the starter issue or junior job label, which is just for issues which are very good for people new to the project. And as you can filter with two tags, so you can combine these tags and you can just see, oh, what can I do as a designer new to the project? So it's simple stuff like some logo or icon is misaligned or there needs to be some CSS fixes or something is broken in Safari or whatever.
14:53
And yeah, some of the time, of course, we need to fix these things. But oftentimes we also just leave them open for a bit longer intentionally to get more people involved.
15:03
And this is also perfect for for events for like small hackathons, for example, where where for for new people to get involved that we have like a list of issues that need to be done. So that's that's very that's I would recommend that a lot. So everyone who raised their hands again, if you don't have a design tag, if
15:23
you don't have a starter issue tag, please create them now and add issues to it. Open issues if you don't have them yet, like if you know of design issues in your project, just just open them and communicate them openly. So, yeah, I'm very happy that our design team is actually the biggest team in the entire organization.
15:44
And I would say, like, it's a pretty big team for any open source project. And I mean, of course, some people are more active, some people are less active. But in general, it gives like a great feeling that you can always just mention like GitHub has this at mention functionality that you can just add next load designers review, please.
16:02
Or what do you think of this? And as there are so many aspects like Android app, calendar app, desktop and stuff like that, it's very cool that that people get designers involved. And then also some of these designers are an individual teams of the apps, for example. So, yeah, thanks to all these folks contributing.
16:25
So first thing, last thing is talk about design, like make it make it an actual topic. This is similar to the culture of design. Actually say it in, I don't know, in tweets or in communication. Don't just say, hey, we do a developer meetup. Just say either we do a contributor meetup or we do a developer designer meetup or we do a contributor meetup.
16:46
Developers and designers are very welcome. Just basic stuff like that. For example, also publish updates, which are specifically about design. This is unfortunately blogging is always something which is neglected, I have the feeling.
17:01
And we are guilty of that, too. But yeah, sometimes we have like design team updates. And it's like when we had a discussion at the conference, we have a bunch of info on how to get involved, some feedback, what was good. And then also we had three good questions that we discussed.
17:20
For example, how was the design decided on, how to approach a new feature and where is design help needed or how do I ask for it as an app developer. So, yeah, if it's discussed in this way at a developer meeting or developer designer contributor meeting, then it's good to notice like how you where you lack things and how to improve things.
17:42
And coming back to the first point also, yeah, by the way, next conference will be in Berlin in August. And one thing that we say specifically there in the text, focus will be on coding, design, front end work and testing. So we actually mention it. It's just a small thing, right?
18:00
We could just not mention that sentence or we could just say, hey, every developer interested just come around. But we specifically mention design front end work. So people of that area, designers will feel welcome. And that's often all it takes for designers to contribute.
18:21
So to recap, have a culture of design, establish a culture of design of simple design, preferably to make it user centered. Be informative. Explain what your project does in easy terms on your website or in your readme. Be very welcoming to new people in general. Like this also doesn't only apply to projects who need designers.
18:44
It applies to any project. And then also talk about design. Make it a topic and raise the profile of design. So, yeah, thank you. Come contribute and, yeah, please leave feedback for the talks. And, yeah, you can talk to me here or on Twitter or GitHub or whatever.
19:03
Thanks a lot.