I'm Jan, hey, I'm new to the Drupal community. I use Drupal a bit and I'm very happy to have been invited by Lewis to speak about open source design and I will present a bit of the methods that we use in own cloud and how we handle design in own cloud as a general example of an open source community doing design. So yeah, one of the first things that's kind of funny, I just found it the other day, is that's not supposed to happen. Okay, so thank you, thank you, that was it, please write the session. No, let me see, okay, so let's try that again, yeah. So that's actually the funny thing I wanted to show, we're preparing a FOSDEM open source design dev room and we were having a discussion about the title, so kind of a bike shed among designers, so it's even common among designers to argue about like what exactly it should be, like the original title was user interface design and free and open source software and I said ah, it should be shorter open source design, some people were saying good, then some argument ensued and yeah, it's just because like someone also says which is interesting because I heard that as well, well design can be many things, like it can also be systems design or database design, I choose open source design, I hope you understand that and I'll just proceed with that, I just found it funny to have a bike shedding discussions with designer, yeah, that's me, that's last Halloween, I'm dressed up as our favorite browser if you can see that, that's yeah, only one of the problems in open source design, I mean every web developer has that, but yeah, I also wrote usability and free software, it was a thesis, basically about yeah, it was 2011 I wrote it, about my experience at that time, like also working on own cloud, working on diaspora and on other open source software projects, so basically is a guide to do testing, to do prototyping, to do reviews and that's online as well and it's kind of yeah, the fourth freedom of free software, freedom to use the program effectively, efficiently and satisfactorily, like the usability definition, yeah, so that's kind of also a thing which condenses the experience of open source design and tries to also help people, so if you want to have a reader of the presentation to directly apply it to your project, that's probably the best bet, so as I said, I work on own cloud, for those of you who don't know, who doesn't know own cloud? Okay, so own cloud is basically a free and open source alternative to Dropbox or Google apps, you can have syncing and file syncing and sharing, it's a PHP web app at the core, you put it on your web space as well and you can have syncing apps, you can have a smartphone app, a desktop app and it just syncs your files, you can sync your calendars and contacts and stuff, yeah, so like iCloud, Google Drive and all that stuff and it's open source, it's AGPL and yeah, PHP, JavaScript, HTML, CSS and we recently released version seven, that's not version seven, that's version one and this talk basically, with this talk I want to show you how we came from this, from version one which is from 2010, ending of 2010, to this which is version seven at the moment, so you have the file manager and the sidebar for sorting and yeah, the app switcher and stuff. So I found that I mainly used six rules or there were six big things or six big topics that I did during that time, like building own cloud, I came into the project when it was very young where it was like five people or four people and I was the first designer and so it is kind of a good example to build that from scratch, of course when you have an existing community like Drupal, it tends to be hard to do specific parts and to make them better when it's already a big bunch of stuff already existing and the cost of change is very high but many of these things you can also apply to Drupal, so the first thing, one is design it well, it's a totally epiphany I know, it's the base rule, if you don't do anything else then you need to design it well, like if you're a designer, even if you're not a designer, the basic thing that you need to do with the software is design it so that it works and looks nice and it sounds strange or obvious but that's the basic thing that you need to do if you don't do anything else. So for example, this is the own cloud first run wizard in version one, you see a bunch of fields, I even needed to modify it so the width fits on this slide because it puts the fields all the way to the left of the window, of the viewport and a whole bunch of stuff going on here, a whole bunch of fields, you can set force SSL, you can set enable automatic backup, date format and stuff, all these small things that not really everyone needs. So the current install wizard looks like this, it's just two fields, one is the admin user that you want and one is the password and it's kind of deliberately in Spanish because you also need to test if it works in other languages, an ideal interface should also work if you set it to Chinese or something through queues like an input field or through input fields or buttons which make it obvious how you will need to need to proceed through the installation or through any process. So I often actually set the interface to French or Chinese or Spanish or whatever, also because I want to learn it a bit but I'm not sure that's a particularly good tactic to learn Spanish. Anyway, so that's one thing I focused very early on on the installation because I think the installation is especially with open source software or with web-based open source software is one of the most crucial parts because you need to download it, you need to set it up on your server, you need a server in the first place and the thing that you can't solve with this simple design stuff is permissions management for example. You always need to set permissions for some folder, I mean with Drupal it's the same, right? You need to copy two configuration files and set the permissions and give the right permissions to one file sub folder and that you of course need to do as well for on cloud. But one thing which links up the technical and the design aspect in a very nice way is SQLite in this example, right? We have SQLite support so that SQLite for those of you who don't know it's a very simple database, just a single file and you can create it on the flyer from the installation. So where we previously had these four fields where you put in your MySQL data and you need to know what it is, you need to look it up on your hosting provider and you need to copy it over and it's total hassle, you don't need to do any of that here, right? The only hard part is thinking of a good username and so that's where a technical aspect plays into the design so you also need to juggle that with developers or with the general aim of the project. You can always change it like the thing under the input field that's an advanced options thing like where you can set database options so you can always change it but the default is the simplest. One of my favorite quotes to that extent is by Havoc Penningen from 2002 already, he worked at Red Hat in that time and he said, reading dozens of GNOME and Red Hat bugs per day, I find that users ask for a preference by default. What that means is when you have a discussion on a specific feature or people aren't able to do something correctly or can't find something, the solution is always that they ask, can we make it a preference? If there's a view which is not correctly designed or laid out then they ask for something and directly ask, can we at least make it a preference? But I really try to not fall into that trap of making preferences and making options but rather design it well and there's almost always a solution, a better design solution than just adding preference. In that sense I come from the GNOME design school, I would say. GNOME, I assume, this operating system, they're notorious I would even say for their simple design and I really like it. That's also where a lot of this was influenced by. It might not work for all the things but then GNOME even has extensions for example and Drupal has modules and we have apps and so you can always extend stuff. Because the core thing is that designers like well-designed stuff and if you don't want to be the only designer or if you want to have designers in your project then you need to design it well, the first thing, because otherwise people are not going to or designers are not going to look at it because they like to use well-designed stuff because they're designers, they have a sense for it and so it needs to be beautiful or nicely usable for designers to consider contributing to it or to consider using it and to that extent it goes for everyone.  So one example of a very simple thing that you can do is the type phase. So Freesands is one example of an open-source type phase. It's quite okay. It's similar to Helvetica you could say. Two other ones which are pretty cool which are more similar to Frutiger or like a general text type phase are Source Sans Pro and Open Sans. The right one we use in OnCloud for example. I like typo, geek, info, I tested those two against each other and Open Sans performed considerably better than Source Sans. So if you consider a type phase I would say Open Sans is the best one, the best open-source one I would say. Right, that's, yeah, already changing the type phase. Like when we changed the type phase I think we only did it with OnCloud 7 globally. Like before that it was set by the operating system right. You just had this simple rule like where you say like Helvetica, Neuer, Helvetica and Ariel or whatever and you just let the operating system choose. But that first of all you get layout differences in between browsers, between operating systems. So the best thing is to do this, the web font thing, the font phase and decide on one great font. I mean for Drupal it changes between themes but for the default like for the admin interface or something there, it's like for any project it's very good to decide on a type phase because that instantly makes it look better. Another thing is icons. For that I can really recommend the Noun Project. If you don't know that it's just the NounProject.com and basically what it means for every noun they have icons. Or I mean not for every noun but for really many nouns and they have multiple icons for each and you can upload your own and most of them are creative comments, attribution or even public domain licensed and you can even pay to not attribute or whatever. It's a very big library of well designed icons and they're all monochrome so you can use them pretty much anywhere. And one important thing that we actually fell victim to kind of or I also I kind of forgot about the website like the project website oncloud.org. It used to look not that great for a pretty long time and now it looks really good I think and that's a general thing like for any open source project be it a module or be it a small project be it a bigger project that's where people will go first when they want to contribute when they want to look at your project so that's a really important thing. And so what I found it's a lot about like in the design world or in the open source design world there's kind of this thing when you're an open source developer you have this kind of open source street credibility where you have your Github profile or your whatever code profile and people kind of look at it and they see ah they contributed to this open source library or to this to jQuery or whatever and that's kind of cool right but designers don't have that right if you contributed if you say you you contributed to to this library or or or to that piece of software other designers are not necessarily going to be oh wow that's awesome it's really cool I use that all the time they're probably not going to even care right so I think that's a really really important thing that we need to establish this in the design community like that you get a design street cred if you do cool stuff in open source and you also need to to establish that in your own project you need to establish a design culture so this is a I think it's a really nice illustrating comic it says so the dude on the left he he did his graffiti very very neatly and wrote Edward with the dot on it and he says yeah well legibility and correct punctuation might not be street but that's how I roll so you need to in the in the yeah wild developers open source developers world you need to make it cool to be exact and to be thorough and to have everything well designed and I got another great quote for that it's by Björn Balat from 2011 and he said if various people work on the same interface they will need to justify what they do convince others why their ideas are so great so it's all about documentation essentially because yeah when you work with when you work with anyone who doesn't know that well about design when you when you work with anyone who comes to the project as a new person everything needs to be documented well right just as as you have commit messages or you have issue discussions on new on new features you need to have the same for design so a lot of this what what I was inspired by comes from the gnome design wiki they do very very thorough design planning they have for every app they first look at the existing apps so um what I say a music player they first look at the existing apps like on ios on android on on windows on os x on web OS web OS is actually a really good example that they often that they often take because it's well designed and they put that on the site on the wiki page and then they they comment on it and they put their mock-ups below that and then you can see how the thought process went what what they what they went through um what they what they looked at and that's a really good example of documentation enough establishing this um yeah this culture of having design be this thing that you can grasp and not not a not this ethereal thing oh it's it's designed and it's it works well because it's always for a reason and um another thing by by that's a great article by alex faborg of mozilla i think he's not with mozilla anymore he's working at google now i think um but uh he wrote this article on ux magazine about quantifying usability basically about how you can use issue tags to to make the make the issue tracker a more usable or more um more useful uh for design contributors and also for for the whole design topic right so he defined these uh 17 tags um all starting with ux uh which which yeah define a specific or which are about a specific topic so ux feedback first one very obvious if there's feedback missing or if there's just the spinner missing that's a ux feedback issue so you always need to make the the person aware the user aware of the the state that the that the app is in so i'm not going to go through them all um also because i because i think for most projects is kind of excessive i mean for the scale of of trupa and mozilla i guess might be useful or is probably useful um at oncloud we only use one tag we only use the design tag so we have about i know a thousand three hundred open issues not that much from your point of view i guess um and of those um 160 or so are design issues there was one one point where uh one developer added a new issue and tagged it with usability and i was like no no so we're just taking design right i deleted it and edited to it and he was saying well but it's kind of different and where it comes back to the to the bike shedding discussion at the beginning i don't really care like everything which is is um related to front end to design to usability is design okay so it's it keeps it very simple it keeps it very approachable for new people uh to have just this single tag and they can look at it uh and um just go through the issues and see see what they what they can fix for example and um yeah that's the that's the the the key of that so we use github alone cloud um yeah i know it's close source it's not super awesome in that regard but it's a really great tool and the issue tracking is a lot of people say it's very simple but i think it's really just right um so you can you can tag the the the pull requests as well the the merge requests and um you see it's not only me who does these who files these issues or who fixes these issues um it's it's other developers too like those two people they they are not designers um but they're also concerned like through the the tag being in there they're also working on design or i mean they're also working on design but it gets more exposure through the tag being in the issue tracker and that's the important thing that you are where the developers are and yeah just like you do um triple aid usability and you have the list of the usability issues so um what i noticed though is that there's like a bunch of different issue tags um so uh for me as being like new to the community it's very difficult to know like hey which is actually the what is actually the tag or the thing that i should be looking at um so that's i mean but probably it's a different scale because Drupal is much bigger than no cloud but maybe something to think about then uh onwards to the issues themselves um we do um i mean of course we have normal issues as well like just one sentence people asking for a feature or something but this is for example um a design specification basically um well when i open an issue for for a specific new feature i always write not a lot of text but enough text to make it to make it explanatory and then i add a mock-up so in this case it's just a simple marker on on a flip chart uh mock-up and uh yeah because it's very important to to keep it keep it dirty keep it fast and simple so that doesn't seem to people like it's the thing right that it's the pixel perfect um the pixel perfect realization like that's what it what it gotta be um because it's always going to be iteration uh after iteration when you work on that so there's like you see here 12 participants on the on the on the right there's a there's a whole discussion thread going on there and yeah those other participants are like none of those is a designer and that's pretty cool to like to ping pong with the with the mock-ups and the discussions and that's basically how we do all design i would say it's like uh and or most most of the design like when there's a new thing coming up uh there's an issue with the spec another similar example is this where it's a bit more high fidelity mock-up uh in this case it's with the with the mock-up software and um yeah but the thing is the same like there's text there's mock-ups explanatory text and um yeah that's that's the baseline always and yeah as a designer you of course need to do it yourself like no one or not necessarily someone is going to ask you hey can you make me this mock-up they're just going to go ahead with it before you can even talk to them so you need to proactively think what what needs mocking up and um uh just do the mock-up and present it to them and they're going to be happy about it probably so for mock-ups personally i use mostly pen and paper um but when it comes to these higher fidelity things i find that it's really easier to actually use the software i didn't use any mock-up software for a long time because it was just too much fiddling around but if it gets a little more complicated then that's really cool so um pencil is a is an open source uh mock-up software it used to be a firefox extension now it's a standalone software open source cross-platform it's uh pretty awesome and so that um or the the best thing about that versus pen and paper is also that you can share mock-ups so this mock-up for example um was done by also a developer uh and this is already a late iteration so it was it was looking quite differently uh before um i mean the the the the mock-up is already like you see the date from 2012 but this is a mock-up for the newsreader app in oncloud and it pretty much looks exactly the same or are very similar to this mock-up uh luckily through yeah us doing the mock-ups before we had a really clear vision of how we wanted to be and um yeah so the iterations beforehand are really really important there this is another example um just a developer uh doing a mock-up for the mail app um and uh they're uh they even like put notes and um yeah it's just very cool to see uh yeah them like people making mock-ups on their own and it kind of kind of bleeds off from you into into the the developer community and then you don't need to make as much anymore yourself right you you uh you get a bit of the burden lifted by the others um and developers start to get an understanding of the design process which is which is really valuable and yeah to to come back to the to the ugly mock-up again this is one of the earliest mock-ups i did i think probably while on a bus or something very shaky for oncloud contacts app but nevertheless it's a pretty good representation of what actually happened then right i mean you have the basic you don't need to read the text right you just need the basic information architecture and um yeah just just iterate iterate iterate and throw it away um and do new ones and um it's really important then uh when you have developers at the point where where they design and where they do these mock-ups uh then you also need to need to know that that you also need to need to jump in and then we come to the third rule and that's designers develop that's me hacking away on a on a treadmill uh that's what i always do you will find me at home on my treadmill and with my laptop it's very important to work out while while sitting on a laptop all the time so as you noticed before maybe um the top most two issues um they were pull requests so i also fixed my own issues or i also fixed the design issues uh i also do code and i i still do even though we have like a larger community of designers and uh that's really important also for the street cred because otherwise developers are just going to say uh they they just like just does the the mock-ups and lets us know like we should do it this and like this and that but if you actually do the code um then yeah i think it's pretty much essential for any designer to be a front-ender which can do uh who can do html and css and hopefully even a bit of javascript to to make real uh the the stuff that they envision and uh another good uh point or really important point also which we also have neglected a bit before like or one year ago is a good css and html documentation so this is the documentation of our um of the building blocks for apps essentially so the the html structure that you use when you use that structure below for example for an app you will get a sidebar and a list and it will be nicely styled by default right you don't need to do anything yourself and uh we're getting more and more of these uh default styles and it's kind of like uh kind of like design patterns but it really doesn't require you to to um yeah it just requires you to write the correct html and then that's it um and that's i found that immensely helpful right because it also instantly makes all the apps look um look um uh similar or like out of one flow and and that results in a very very good uh user experience because uh there's always the navigation on the left for example or there's always the buttons always look the same of course like that's one of the basic things and um yeah so the css for that we we just have in core um but each app of course use the different html and can override of course um and there's also some default icons set uh which you use by just using the uh a class like icon dash and then check mark or icon person or whatever so you can easily use the icons that are that every other app use and what i found really important is um to be actually pair programming or pair designing um together with the as a designer together with the developer and vice versa uh because that just really yeah takes the the the collaboration or the bleeding off of your skills to the next level it's um yeah one great example i think is this here is the um it's again a dirty sketch that's uh from our desktop client um i know it's a bit older um but that's the settings dialogue and the blue uh ink or the blue marker is me and the the red marker is our desktop lead developer um and of course we talked a lot like that's not that's not captured on the on the board but the important thing is that um you step away from the from the computer you talk about it about the technical limitations about the about the design limitations uh and yeah i mean design limitations being the limitation of what people can can possibly can possibly stomach uh from one interface um and then you sit together and make mock-ups discuss it and and refine it so uh yeah we also we also erased a lot there and um on the bottom there's like a bunch of other settings that need to be in and then you're at the point where you're kind of thinking well uh it gets a bit much for just me as a person uh as one designer and uh it's also pretty annoying like all the time juggling the different developers juggling different projects and it just simply gets too much so um you need to build a team that's rule four that's very important to to get any like to not get burnout for example uh and um to have a to have a design team so that you can keep the overview of design issues and again uh one of my not anymore so favorite quotes uh is um by nelson 1990 already uh the integration of software cannot be achieved by committee where everyone has to put in their own editions again it must be controlled by dictatorial artists with full say on the final cut so um yeah that's basically the i would say the steve jobs quote or whatever um if you if you um sum it up uh so basically it says that yeah you need some design person at the end with with a deciding hand on what's going in and whatnot right be the product manager or or a designer um yeah but there has to be some kind of funnel uh in a way um i don't necessarily a hundred percent agree with it anymore um in the open source world as well as anywhere else um also because um yeah you you can't do it as one person so uh this is again inspired by gnome design uh is the building of a of a design team or the rather the needs of building it um is uh what we used as the the first thing that's very important for us as the the oncloud design teams are rsc channel i mean yeah you're you're gonna say well rsc channel for designers that's kind of not working together but again as with the issue tracker it's like there's some some sacrifices that you got to do as a designer working in open source and i mean there are non crappy rsc apps as well um and it's just a really good method of communication like the the the two methods of communication or the three methods of communication in open source projects are basically issue tracker mailing lists and rsc and don't get me started with mailing lists they are like totally useless for any kind of productive discussion especially on design so we stick to the issue tracker as i mentioned before and the rsc channel like if we want to quickly communicate on something or if you want to let other people know they should look at a specific issue uh that i think is it's really really important and other examples are gnome design gnome design channel is um that's what it what it was inspired by um and it's not only for designers that's the important point it's not only for all the designers of the project it's for everyone who wants advice on design as well because where are you gonna go when you want advice on anything design related you're gonna go where the designers are so it's kind of like this design round table right so i noticed in drupal usability there are only like seven people or nine people or so so you should all get on there and help each other out um because at least i think that's a really really valuable valuable resource or a valuable channel um yeah mozilla does it similarly on their on their um rc channel ux uh and they have yeah similarly have discussions there and um yeah those are like the three um or yeah i mean hopefully make it the third big one uh on there uh but like mozilla and gnome they do it very well and the channels are are really cool especially the gnome design one uh there's a bunch of people in there i don't know like even maybe even 100 or something uh in a design channel for an open source project that's pretty cool so um when it comes to design team that's for example the the people who are on the design team uh at our own cloud um it's just a a group on github basically uh on our on our code platform uh so that enables us um i mean it's useful to see who is a designer uh but you could do it with a list as well but the really important thing here is or the the really really useful thing that i find myself using all the time is the functionality that you can actually refer this bunch of people uh in an issue i mean it's a github specific thing uh probably or maybe gitlab can do similar uh things or other issue trackers as well but you can mention the whole group like you can just say you can only do that when you're in the group to prevent spam but uh it's it's super useful um you can you mention at own cloud designers review please uh if you need help reviewing because we have a two reviews review process um and then people will get notified and they can look at it uh so that i find really really useful to know who the designers are and and to be able to like bat signal style uh just call them like if you need help you just uh call the the red phone and then yeah we have um just a simple design landing page it's not that beautiful uh or super awesome yet but we're working on that um it's it's a very basic um thing it links to the to the issue list uh to the back to the design tagged issues um it lists the people uh being part of the design team and um some basic guidelines like for example like why don't we use bootstrap right and answer a question i've answered multiple times uh and uh yeah um i i i guess you also needed to answer that at some point in the past or so um yeah yeah right so uh we don't use it and there's reasons um you can look it up there uh and i mean you also have that right it's the yeah it's cut off but um it's it's the drupal ux pages i mean there's multiple pages um i mean you should you should know them if you don't know them i go there they're pretty cool they have pretty detailed uh guidelines like for wording and all this other stuff and um that's also really interesting because um as i mentioned the the gnome design wiki i really like that and i oftentimes use it for research like when i when i need to design something new i just go on the gnome design wiki right so i think it's immensely important that we in the open source community especially we just share this knowledge and we and we use the knowledge that the others have published already so um i'm probably gonna gonna look at that as well and i hopefully we're gonna build up a platform of our own as well so then yeah we when you when you when you build that team uh there comes to stage five where you need to go outside and you need to teach what you learned and and share what you learned so like i said um i wrote this document uh and um i try to to also work with other open source projects on making making their design better and um i give this talk for example and um kind of stuff like that and um you also do that um like a a blogging basically i mean it's it's groups but uh i have it subscribed in my feed reader as like the drupal design blog like what's going on in drupal design and uh i myself uh i'm not doing too good on the blogging front so uh i i need to improve there so it's really cool to see um you have a bunch of useful blog posts very similar to mozilla for example mozilla ux they often blog about various topics about crazy research stuff like india firefox os user research stuff like smaller open source projects can only dream about but we can learn from it so that's the important thing if you have the resource normally user research is done in an agency and is not shared with the public so i think uh yeah especially the the the research stuff that bigger projects to is is so important and it's so important to publish and read it and then yeah we had the html css guidelines and also design guidelines are very important like the wording ones i mentioned before and all the other ones like pattern libraries and stuff like that um because basically what you need to aim at when you're a designer you need to make yourself obsolete right you need to try to imagine what would happen with this project if i weren't there anymore um if i would just decide to to cancel or you know when the bus factor comes in right when you're just driven over by a bus uh what will the project do um so you need to always aim or at least that's what i do i am to make myself obsolete like any to do i have any design idea i just directly put it in our issue tracker also in the hopes of someone else doing it of course but mainly to to let other people know what the what the what i'm thinking about and what the thought process is to make it more transparent and uh yeah because it also invites new people and it's good for a whole bunch of reasons and uh so to that extent you see from the from the screenshot i showed you before a design tag we have uh yeah we do have an internet explorer tag by the way a dedicated one that's that's really um nice um yeah we only have two issues yeah it's it's not a problem we we only need to support internet explorer eight and uh and up so most probably yeah yeah uh so directly below that we have the junior job tag um which is just a starter tag it's where people where people go if they want to start out other issue triggers have some other things you for example you have the novice tag so this is what comes up when you look for usability in novice that's all the starter tags for design right and you need to link that very presently if that's the correct tags that i chose for it right because i'm not sure if it's because there's css novice html novice and other novice tags as well but that's probably correct anyway uh that's super important and i find it really helpful to yeah always when people come up to you especially designers and they ask you hey i looked at drupal or i looked at owncloud and i want to i want to contribute what what should i do and you always have this list of of nice issues nice small issues to to give them and say hey yeah pick some of that and if you need help just let me know so um you're always prepared for any contributor to come in so it's very important to keep that list up to date to keep it nice with now not with super many instructions but only really put the issues in which are handleable by by new people so not just put this stuff in there that you don't want to do because it's just super much footwork um but really uh the the the cool stuff but small parts small css fixes or whatnot so another thing um i'm doing or i i want to do more as well and i heard you're also doing uh to to a certain extent in drupal is working together with design students on have them work on open source software so the the top one hochschule der medien in german uh that's the university the stuttgart media university um we're also studied and um during your studies there was this this project called a user research methods or usability engineering methods some word like that i don't know um now we all talk about ux so now it's probably called ux methods and um i noticed so we we got 12 methods like usability testing card sorting and we could choose the project that we wanted wanted to work on ourselves so we could choose um yeah anything we could choose the university website or or whatnot and a lot of people they actually chose facebook msn aim stuff like that like where the reviews are not gonna go to facebook or not gonna go to msn or no one's gonna be interested anyway and it's gonna be a piece for the portfolio and nothing more so i just talked to my professor and asked him hey um when i when i was finished um hey in the next semester can i just come over and present like three open source projects and just presented uh own cloud um media goblin which is like an open source media hosting solution and couch not couch surfing be welcome which is an open source couch surfing and um because i also had ties where i knew the people in these projects and just quickly presented them and half of the students actually ended up working on these projects and yeah for example the usability testing group worked on own cloud and that was really super valuable because especially in open source projects you have no time or very little time especially if you're one person to do proper usability testing but um yeah the design students they have time they will get the right tools and you just also sit there and can mentor them and learn something as well and uh the merge academy uh the second thing it's a design academy also in stuttgart um which uh where i was last year for a week um where where i was just working with the students on concepts on design concepts and uh generally working on open source so i we went that far that we we introduced them to the issue tracker they did mockups they did concepts like these things i showed you before the issue discussions and we even had some some css and and javascript and html fixes in so during one week uh i think that's that's really cool with students which had no open source um open source experience before that and so yeah i want to do more of that if you know anything or if you already do that please let's talk about it um because i think that really should be a thing open source and design students because it just really fits kind of perfectly so then we come to the last step um now that there is more and more design focused open source projects i mean especially in recent years with the nsa stuff and um people being concerned about privacy there's uh yeah more and more projects more and more well designed projects but then it comes to the point where it gets this kind of startup vibe right you you start to get just get the startup mentality into the open source world but um you need to collaborate actually that's that's rule six you need to integrate and collaborate with other projects and um look at how you how you can do it because otherwise you're gonna have decentralization but it's going to be monopolies after all right you have these all these different decentralized instances i mean especially with with social networks like there's like how many are there 10 15 decentralized social networks and only a few of them really interconnect among or across across them so that's really something that i that i don't understand about open source social networks is that they're really monopolies after all so um we need to really make sure to to collaborate and integrate with other projects because also that's one of the important one of the important points that we have um as an advantage over closed source projects because closed source projects are way less likely to collaborate with each other or or communicate with each other less likely even to collaborate with with open source projects and um so yeah we can link up everything because yeah no one is just using one thing no one is just using apple products they're using websites or web platforms no one is only using uh ruper no one is only using on cloud no one is only using firefox right so uh we really need to need to plug them together because yeah the user experience that everyone talks about it goes beyond any single project so if you're talking about a good user experience for a project you need to talk beyond one single project and yeah especially in open source so um we have some efforts to to to that extent like um we use webdav caldav and card dive as open standards for file uh calendar and and uh contacts syncing so there's a bunch of apps which can already integrate then we have some more thoughts and like a specific share api um using like these cross cross origin resource sharing mechanisms that it's a mechanism that other web apps other javascript web apps can can plug into that site and a whole bunch of other stuff um which also results in in um like below the tech talk um it results in stuff like these easy save to dropbox and choose from dropbox buttons you probably saw at some point or sign in with google sign in with github all this stuff so i really think that that open protocols that's again to come back to the start as well where sqlite or or mysql the decision really really influences the the experience is that when you use an open protocol in the end it's better for the user experience because you can choose the the clients you can you can integrate with many more projects with less work because they're already supporting it so it makes for a better user experience so we're for example integrating with gnome online accounts gnome online accounts this great system in gnome where you can just plug in different accounts you can of course also plug in uh facebook and google and um yahoo and it will sync calendar contacts files and all these different things and uh that's for example a really awesome effort by by gnome and yeah i mean now there's there's also other systems doing it um but but really that's a very one of the most polished solutions i've seen like anywhere not only in open source and also for a mail pile okay let's again cut off sorry uh but mail pile is a is an open source email app which is focused on bringing usable encrypted email uh and they also have this thread about an possible own cloud plugin uh where you can pick files for example right you could could pick attachments or you could save attachments to your own cloud and that's i think yeah it's way better than trying to build everything yourself not integrate with anything else because then we're going to end up with all these separate apps again and that's kind of not the point and there's a whole bunch of other initiatives uh i'm not going to go super deep into that there's the called open source design it's pretty cool a lot of blog posts then there's a github group that we're doing open source designers um so i'm going to add you folks to it uh it's just a loose organization and we're trying to put some resources some patterns some useful blog posts and just get some kind of organization in it or try to communicate more i mean um yeah at least or already like being at this conference is very interesting like exchanging with you how you do design and i think that's very important there's also a bunch of conferences going on this was already in the past but it was i still mention it because it was it was mainly like many technology people coming but it was also very design focused in a way that people should collaborate and that that we shared ideas a lot it was it was a bar camp style organization at the own cloud contributor conference last year we also invited some some people from other projects which are similar then there's an upcoming conference in nuremberg which is very similar to the decentralized camp um and there's uh an awesome thing going on and we want to organize it for fosdam you probably all know fosdam the free and open source developers european meeting uh open source people have a have a thing for abbreviations i hate that but uh it's a huge european open source conference you probably know about it but we're organizing a design dev room for it so a whole track for open source designers and uh we're pulling a whole bunch of people in so if you don't know about it yet please talk to me and attend or i mean we will know tomorrow if it will be accepted because tomorrow is the the announcement deadline and then we'll see if we all meet at fosdam and yeah of course you uh thanks again for inviting me because uh yeah i think it's really really important to exchange to have this this exchange be between the open source projects and i think in the end uh everything is pretty much awesome and it's going going in a really good direction and if you've not seen the lego movie so far you should definitely do it because it's it's the best movie this year i would say um maybe even this decade so uh yeah to to sum it up uh the first obvious rule design it well if you're just alone and if you're not even a designer try to design it well try to read design blog posts and stuff try to look up the what other projects are doing um there's a lot of resources out there as i as i present uh then try to build a design culture in your own project if you're a sole designer or if you're not even a designer right it goes for anyone and then make sure that you're also uh yeah go into the trenches and do the actual work because that will that will make you credible and uh yeah give you design street cred among developers then you need to build a team to make it feasible for yourself and to not die of exhaustion and then you need to teach and share and get even more people in some students or other people and then you need to work together with other projects i mean you probably should even work together with other projects at an earlier stage it's it's uh it's parallel not steps after each other and that's pretty much it uh thank you yeah questions right um i'd really like to hear some tips from you about um how to encourage developers to also get involved in the design process because i think it's really interesting yeah so that's basically what the the um the design culture thing is about right you when you when you communicated in a way that it's that's in the issue tracker or in the on the developers turf so to say people are gonna get involved with it sooner or later right people see or developers see that there's design activity going on and there's i mean they will also be need to be involved in it anyway because oftentimes designer or most of the time design and development decisions they overlap so at a certain point um it just when you when you also do it enough and when you talk to the developers they will get involved eventually right i mean when you use all the the methods and when you like i really i really think this this irc channel thing for example is really good to to get people kind of sucked in and to i mean if you just if you just uh are idling in the channel and just you you um notice the discussions and you can just read through what the designers talk about it's also something that as a developer i guess helps get you started um thanks um i already we already spoke about this last night i think but um just in case anyone else is curious how what percentage of contributors to on cloud are paid contributors right so um that's a good question i mean code contributors uh so there's i think 10 full time or 15 full time contributors and there's i think every month i don't know 200 contributors or 300 i i don't have the exact number but um yeah that's around the the thing i mean of course the the paid contributors can do it full time so they can be a bit more focused on it but uh yeah in general it's uh it's from the from people working on it this way more volunteers working on it than paid thanks does anyone else have any questions i think the biggest the there's a lot of really good stuff in here i think the one that i take the most issue with is the idea that designers need to code in order to gain street cred with the developers um i know that there are many of us um specifically who work in Drupal who we're not really coders and we're not going to be um but we know how to talk to the coders and we know how to communicate our ideas effectively in order to get the developers on our side so i would probably amend number three to say you have to be able to speak the language of the people who have to actually implement what you're designing yeah there are a number of designers i see who you know want to sort of charge in and rant and change things and i certainly count myself as one of those designers back in 2009 or whatever it was when i joined the community yeah oh man well you know i go on rampages um but i think the the big thing in any community of this size where so many people are putting in their off hours in most cases just to make this product better is sort of respecting that all of us are doing this in every time and i think that's a big sort of message from all of this right so yeah i probably need to like um uh reduce it a bit or or the point make the point a bit more clear that in that it's really i mean the intention is that you can speak the language of the of the developers and you're on the same page and you know what it was possible and i think it also varies between the projects right if you if you have a project like Drupal a big one then it really isn't possible to to yeah for every designer to be a coder as well um for a smaller project it's definitely possible i would say or it's necessary even um but yeah that's a that's a very good point yeah well and i also think that one of the things that you demonstrated very well there and i really liked the way that you guys have it set up in own in um own cloud is just the way that you show design issues evolve in the bug in the bug tracker i think there's a lot that we in the Drupal project can take from that i think there's bits and pieces of what we're trying to do but i think we could probably refine that process as we move forward and continue building a design culture within Drupal so yeah thank you very much for demonstrating that thank you any other questions or remarks or if no one has any questions i just wanted to say that um i asked um you know how to come speak because i think it's really important to get um perspective outside the Drupal community and um you know get new insight and new ideas and um that's really hard to do as a as a track chair because you can't afford to compensate um because the da doesn't the da doesn't give you any money to do that um so i got a lot of rude responses um a lot of uh don't you know who i am kind of stuff like that but jan was so humble and he was so enthusiastic about coming and sharing and you know collaborating with the community that i thought it was just awesome uh and he paid you know he paid his own train to get here and he's staying on a friend's couch or something like that um to be here so i just thought if you see him around just uh just buy me a drink or something this evening i think you're around to uh thanks i think you're around till tomorrow right yeah yeah um thank you yeah i'm around until tomorrow probably 12 or so my train goes at one so if you want to talk to me uh yeah yeah this evening and yeah oh yeah and and please rate the session i'm supposed to say that yeah and and thank you again yeah that's it oh and i have stickers if you want some some on-cloud stickers i know you want them


You're going to do the third Wing Chun kicking technique that you need to know. And it's similar to the Tiger, but now we're going to use the rear foot. The reason we use the rear foot is because you're going to change the stance. So now we're bashing stances. You just apply left leg on the big knee too.


This is my second lecture in module 5 that is model adequacy checking and here is the content of this module various type of residuals and in the previous class we talked about regular residuals, standardized residuals, studentized residuals and today we will be talking about you know the press residuals and also next we will be talking about several types types of residual plots like you know normal probability plot or plot of residuals against the fitted values why I had and in the next class maybe we will be talking about partial regression and partial residual plot. So, before I start talking about you know the press residual just I want to repeat once more the objective of this module here you know if you can recall you know in simple linear regression model or in the multiple linear regression model we have assumed that the error term the epsilon has 0 mean and the error term epsilon has a constant variance and the error terms are uncorrelated and they are normally distributed. So, what we are doing going to do in this module is that we will present you know several methods to check the underlining assumptions we made on the error term epsilon and the methods are you know they mostly depend on the primarily depend on the study of residuals because we think it is convenient to think that the residuals are the realized or observed value of the epsilon. Since we are going to test some assumption on the error term epsilon. So, the test for that is based on the residuals and the graphical analysis of the residuals are very effective to test the underlining assumptions on epsilon. So, now I will be talking about press residual which is one scaled residual. So, I have already talked about regular residual and the other things today I will be talking about press residual. So, it is beautiful concept here well the ith press residual denoted by E bracket i is equal to y i minus y i hat. So, we know that the y i is the ith observed value and what is y i hat where y i hat bracket i is the fitted value of response based on all observations except ith one. So, the basic logic behind this is that. So, this is not the regular residual. This is the ith observation the response value of the response variable and this is the fitted value of the ith response based on all observations except the ith observation. Let me just give some idea about this special type of press residual. I will just refer the previous example this is an example of influential observation. Now, if I fit a model based on all the observations here including this influential observation also my fitted model may get influenced by this influential observation. So, my fitted model may look like this. So, this is the fitted model because of this because of this influential observation and you can see that the fitted model has been influenced by this influential observation and the fitted value here I mean this is the model based on all the observations. So, the fitted value here is y i hat. So, this is my y i hat and this is I am considering this as you know the ith observation for example and this is my y i this is my y i suppose this is ith observation. Then the residual I mean the true value of the ith observation that is the true value y i and the y i hat they are the difference is less. So, the difference is this much and this is the ith regular residual e i. Now, if I if this ith observation is deleted from this data set suppose this observation is not there in the model in the set of observations then of my fitted model will look like this and this model this fitted model is of course, it is not influenced by this influential observation because I have I am fitting this model based on all the observations except this ith observation. So, this is what I am talking this value is you know this value is y i hat bracket. So, this is what I mean you know the fitted value of the ith of the ith response variable based on all the observations except the ith observation. Now, my residual the revised residual which I call here e i bracket is this difference. So, e i bracket is equal to y i. So, this is my y y i right. So, this is my y i and this is my y i hat bracket here. So, y i minus y i bracket hat and you can see that the ith press residual is substantially larger than the regular e i well. So, what we do is that we delete ith observation fit the regression model to the remaining n minus 1 observations predict. So, it may appear that you know to compute the first press residual that is e 1 in bracket you need to fit a model based on all the observations except the first observation. So, that is how you will get e 1 bracket that means the first press residual again you know you do not know which one is the influential observation. So, you have to repeat this process n time. So, to get e 2 bracket I mean the second press residual again you have to fit a model to the based on all the observations except the second observations that means you know you need to fit model based on n minus n minus 1 observations that you have to repeat n times. So, but what we are going to do I mean it can be proved that you know you do not need to repeat this process n times to get the n press residuals it can be done you know based on one regression fit based on all the observations. So, here is the technique. However, so it says that it is possible to calculate press residual from the result of one single fit to all n observations. It can be proved that you know e i the i th press residual is equal to e i by 1 minus h i i just recall that you know that this e i is the is the regular residual and h i i is the i th diagonal element of the hat matrix. And this is how you know this quantity and this quantity they are they are same. So, this is how we calculate the press residuals e 1 e 2 up to e n. Now, let me just recall the example we considered in the last class. So, here is an example of multiple linear regression with two regressors x 1 and x 2. And here is the response variable y and we suspect that I mean it is likely that the ninth observation is an influential observation or at least it is a leverage point because x 1 coordinate is is much larger compared to the center of x 1 and similarly x 2 value is much larger. And here is the regular residual this is standardized residual this is the studentized residual and this is the press residual. Now, here we check that for the ninth observation the value of the regular residual is 7.41 whereas, the value of the ninth press residual. So, this is nothing but this is equal to e 9 press residual this is 14.788 whereas, the regular residual is 7.4. So, the for the point for the ninth observation the press residual value is substantially larger than the regular residual. Now, also you can observe that for the 22nd observation the value of the regular residual is 3.6 whereas, the value of the press residual is minus 6.05. So, here also the value of the press residual is substantially larger than the value of the regular residual for 22nd observation. So, this is what regarding the press residual it appears that if the ith observation is an influential observation or if it is a leverage point then there will be substantial difference between the regular residual value and the press residual value for that particular observation. So, next we move to residual plots. So, there are several residual plots we will be talking about the first one is normal probability plot. So, residual plots first we will be talking about normal probability plot. So, before I talk about this residual plot I just want to mention again that the objective of this module is to check the underlining assumption on epsilon on the error term. So, we will be talking about different methods to check the underlining assumptions. So, this is one of them. So, what this normal probability plot does is that it basically check the assumption is that the epsilon i follows normal 0 sigma square and they are independent and identically distributed. So, this normal probability plot what it does is that it check it checks whether the error term really follow normal distribution or not. So, here is the technique to test that. So, what it does is that let E 1, E 2, E n be n residuals that means the regular residuals let E box 1, E box 2, E box n be the residuals ranked in increasing order. So, given the set of data you know you can fit the model whether it is simple linear regression or multiple linear regression and then you can get the residual values you just rank them I mean you arrange them in increasing order. Then what this normal probability plot does is that it plots E i against the cumulative probability P i which is equal to i minus half by n and you do it for all i, i is from 1 to 2. So, very simple technique you get the residuals first you arrange them in increasing order and then you plot E i against P i here is the P i i minus half by n. So, just now I have different types of normal probability plots that may happen this is. So, figure one shows the ideal situation here you can see that all the points lie on a straight line. So, if in your case if you find that you know your plot and all the points are on a straight line then you can assume that the error distribution is normal. Now if here in the figure B you can see that it is not really I mean the points are not on a single straight line and here if this type of situation occurs then we can say that the distribution is heavily tailed that is you know it is not really true that the error distribution is normal and figure C indicates that the distribution of the error term is lightly tailed. So, there is little deviation from the I mean it is not reasonable to assume if such situation occur then it is not advisable to assume that the error distribution is normal. So, this is what regarding the residual plot. So, residual plot basically it takes the normality assumption of the error terms epsilon. So, next we will be talking about one more plot that is the plot of residual term residual against the fitted observation. So, here is the plot a plot of residual E i against the fitted value Y i hat. So, given a set of data you know you fit the model fast and then you can get the fitted value once you have the fitted value you can compute the residual and then you plot the residual against the fitted value well. Now we need to understand I mean if the plot if the pattern looks like this one what does it indicate. So, if the plot of residual against the fitted value looks like this one then you can conclude that the this is a good regression model and the good regression model will produce a scatter in residuals that is roughly constant with Y hat and centered about E equal to 0. Then I mean what I am trying to say here is that if all the residuals contained in a horizontal band. So, here is the horizontal band here you know you can you can see that all the points are contained inside this horizontal band. Then there are no obvious model defects that means if what I want to say here is that you know if all the residuals are contained in a horizontal band centered about E equal to 0 this is the line E equal to 0. Because the residual value could be this is 0 minus 1 minus 2 1 2 3 like that some of the residuals are positive some of them are negative. So, you have observed that before also. So, what I want to say is that if the residuals are contained in a horizontal band then there is no obvious defect with the model that means it is a it is a good fit. So, this is the only situation we say that the fitted model is satisfactory. So, there is no problem with the fitted model. Now, look at the second case this is this figure B indicates an outward opening funnel pattern. So, here you can see that this E I values increase I mean E I increases with the value with Y I hat. So, this is this is called the outward open funnel pattern what does this indicate is that this indicates that the indicates non-constant variance of epsilon I. We assume the see we have assumed that the variance of the epsilon is constant that is sigma square, but if your residual I mean if your plot which plot plot I mean the this plot particular like epsilon versus epsilon sorry E I against Y I hat if the pattern is like you know outward open funnel that indicates that the variance of epsilon I or the variance of epsilon increases as Y increases. So, this one is sort of this is the indication of non-constant variance. So, you cannot if this occurs you know it is not advisable to assume that the variance of epsilon is sigma square. So, next we talk about some more pattern the next pattern is one more thing just I forgot to mention here instead of outward open funnel it could be inward open funnel also that means it would be look like this in that case also indicates that non-constant variance of epsilon in that case variance of epsilon decreases as Y increases. So, both I mean the it could be outward open funnel or it could be inward open funnel. So, both the case both the cases indicate that indicate the non-constant variance of epsilon. So, next we will be talking about one more I mean some more pattern like this is one more pattern here this is the line E equal to 0 Y I hat in this direction and this is called double bow and this one also indicates non-constant variance that means variance of epsilon we cannot assume that this is equal to sigma square. So, this pattern also violates this assumption well and this type of pattern often occurs when Y is a proportion the response variable is a proportion and Y lies between 0 to 1. So, this is in this type of situations we often get double bow pattern. Now, the last one is that you know the figure D shows the non-linear pattern here this non-linear pattern indicates that you know other regressor variables are needed in the model. So, this indicates that the relationship between Y and the regressor variable is not linear we need to introduce some non-linear term and that means considered extra term like a square term X square I mean the relation is not just the linear relation like Y equal to beta naught plus beta 1 X you need to introduce some square term the higher order term or you take a transformation of the response variable Y I mean maybe we will talk regarding this issues later on again, but what this non-linear pattern indicates that the relationship between the response variable and the regressor variable is not linear we need to introduce some other terms like you know other regressors for example, you need to take you may need to take X square or X cube in the model or you may need to take a transformation of the response variable Y like log Y or something 1 by Y something like that. Now, there is a question you may you might be wondering you know why do what we did is that we have just checked about you know the plot of plot of E I against Y I hat. So, why it is you know why plotting E I against Y I hat why not E I against Y I. So, this is the question why do we plot the residual E I against Y I hat and not against Y I for the usual linear model it is not so easy to answer this question like you can think of it E I Y I hat the answer to this question is that you know E I and E I and Y I we do not consider the plot E I against Y I because these two are usually correlated what I mean by this I will talk about that whereas, E I and Y I hat are not correlated there is no relationship between E I and Y I hat. What are going to prove is that there is a linear relationship between between E I and Y I suppose the relationship is the form of the relation is E I I said linear relationship E I equal to some beta naught plus beta 1 Y I plus I mean that is a simple linear regression between simple linear relationship between the residual and the observed value Y I. Now, if you know the same technique this is nothing but the simple linear regression model between the residual and Y I you can check that beta 1 hat is nothing but S E Y by S Y Y. So, what is E S Y this is the least square estimate you can check with my first module beta 1 hat is nothing but this one this is called the least square estimate. So, this one is nothing but this notation only this is nothing but E I minus E bar into Y I minus Y bar by summation Y I minus Y bar whole square. So, what I am trying to prove that you know there is a relationship between between Y I and E I and I am trying to find out that relationship what type of relationship they have if it is linear then what is the value of the coefficient. So, this one is nothing but summation E I Y I minus Y bar you can check that it is not difficult and this one is nothing but the S S T and again you know Y bar into E I that is sum over E I is going to be 0. So, this is equal to summation E I Y I by S S T very simple. Now, in matrix notation this can be written as E prime Y or Y prime E same thing by S S T. Now, what is E in terms of H notation Y prime and E we know E is I minus H Y by S S T and we know that you know I minus since H is an idempotent matrix I minus H is also idempotent matrix. So, I minus H can be replaced by I minus H square. So, this is equal to Y prime I minus H into Y minus H because I minus H into I minus H equal to I minus H as I minus H is an idempotent matrix into Y by S S T well. So, this is nothing but this is E this is E prime E by S S T.  So, this R square is the if you can recall R square is the coefficient of multiple determination. Well, so the relationship between so what we proved is that there is a linear relationship between between between the residual and the observed value and the coefficient value I mean the slope is equal to the slope is equal to 1 minus R square. Well, let me check with Y I hat whether there is a linear relationship between between E I and Y I hat we can prove that there is that the slope is 0 in that case. So, let me check with E I and Y I hat. So, E I suppose there is a relation linear relation between E I and Y I hat and the relation is E I equal to beta naught plus beta 1 Y I hat plus epsilon like that simple linear regression. And then by least square estimate we can check that beta hat is equal to S E Y hat by S Y hat Y hat I do not care about this denominator. Let me proceed with S S E Y hat if I can prove that this is equal to 0 then then my slope is going to be equal to 0. That means there is no there is no linear relationship between between E I and Y I hat. So, this is going to be equal to E I minus E bar into Y I hat minus Y bar and you can check that this is nothing but summation E I Y I hat. So, in matrix notation this is equal to E prime Y hat right. So, what is E prime E prime is equal to Y prime 1 minus H because E equal to 1 minus H Y and Y hat is equal to Y hat equal to H Y we know that Y hat is equal to H Y. So, H Y here is equal to here now Y prime H minus H square into Y. Now, see H is an important matrix. So, H square is going to be equal to H. So, this is Y prime 0 basically Y. So, this is going to be equal to 0. So, there is no so this proves that there is no linear relationship between between the residual and the fitted values. So, what I want to conclude here is that no unless in case of in case of in case of E I and Y I we have observed that I have observed that beta 1 hat is equal to 1 minus R square. So, in the case of E I and Y I beta 1 hat is equal to 1 minus 1 minus R square. So, unless R square is equal to 1 there is a positive slope right. There will be a slope of 1 minus R square in E I versus Y I plot even if even if there is nothing wrong nothing wrong with the. So, if you can recall that E I is equal to 1 minus R square in E I versus in E I against Y I hat plot. I said that if all the residuals all the residuals are contained in a horizontal band centered in a horizontal band centered around E equal to 0. Then the corresponding fitted model is perfect, but here since there is a theoretical relationship between the residual and the residual and Y I it is very likely that the residuals will not be contained within a horizontal band centered at I mean E equal to 0. There will be a slope of 1 minus R square when R square is not equal to 0. So, that is why you know it is very difficult to conclude anything if we plot the residual against Y I instead of plotting the residual against Y I hat. So, that is why the reason you know and since there is no relationship between E I and Y I hat they are not correlated there is no linear relationship between them and that is why we prefer plotting the residual against Y I hat. So, that is all for today. Thank you.


Bow, what's up everybody once again it's brand man Sean and today I'm gonna give you seven Content tips to make tick-tock videos that people love. Let's get right into it. Number one Writing hooks you gotta have a hook, but your hook has some science to it So here's a couple things that I hope you think about the hook differently number one It adds two different parts to it There's the audio and the visual parts of the hook and I'm actually gonna pull up some examples and we'll walk Through it and then I'm gonna show you a small, you know another little nuance. All right, check this out There's the audio and then the video visual So visual is the first thing that people are going to see you actually want to expect that more often than the audio All right now within the visual there's two parts of the visual What do they read and then what do they see? All right? So what do you read ruining classic songs part two? But then what do you see you immediately see this girl? She's kind of looking at the camera with a little bit of attitude But the visual could have been you know something completely different maybe alluding to a specific song Maybe it would have been a classic song that everybody knows from their childhood I don't know it could have been something bizarre, but those are two parts of the visual then you have a The audio right so what's the first thing you hear? Okay, so the first thing you hear is the actual instrumental of a song now here's another one Right, what do you see the first thing that you read is how it would sound if I was on happy by Dixie D'Amelio And then you also see him visually set at a mic setup cool Now I could go a lot deeper into hooks in a whole another video But for now just remember those things that is split into two different parts You have the audio and you have the visual and the visual has two parts into it what you read and what you see now Number two on this list is writing a script when you are creating Content it is in your best interest to write a script first. All right, so don't just freestyle your entire video Yes, you technically could but it's best to actually break things down So you can look at the signs of the hook and then what visual will be Related to your hook and then in part two of your video What's gonna be on part two of your video and then how you want to conclude your video with a payoff? Write all that out just like a movie. It's shorter obviously a lot shorter, but write all that stuff out number three Copy artists that are doing well on tiktok already This is how you're gonna find the formula that works for you All right first you want to start to see success on the platform So you copy the formulas that are successful on the platform then you start to understand What's helping that formula work or not right once you get used to analyzing that formula breaking that formula down Then you can start to interchange different parts of that formula to reflect your own unique Creativity all right once you start to do that you'll slowly start to create your own style All right It's a process to it a lot of people just want to hop on and be great at it And they don't want to go through the process if you come right on the tiktok with the perfect formula especially for you then Congratulations you amazing tip number four own an emotion and what I mean by that is there was an artist who was in our private group brain man network and she actually had a she had a very video takeoff based on one of the strategies we had going and She actually was not trying to like create a whole brand with that post But that post actually tapped into the very specific Emotion that resonated with a lot of people and it was a little bit I wouldn't say depressing, but it was definitely a little bit more introspective and down and it was like yo Do more of that like you have those lyrics that really are personable and make people feel like they see what you thinking And what you personally think and go through and they can relate to that Do more of that don't try to be fancy just do more of that And I know as an artist sometimes it's like yeah, I don't want to be caught in that box this artist She felt the same way. I don't want to be depressed all the time. I'm not always feeling depressed However, it was intervest interest to continue to do some introspective style videos to take advantage of that moment Because these windows do not come always as a that will get into that as like a bonus tip But that is something that you need to double down on whatever emotion you strike People are now coming to you to get into that emotion People do that with artists in general. That's part of your job Right, whether you want to be kept in that box or not All right, at least as a starting point is to your benefit because think of so many of the artists that you personally love You kind of associate a vibe with them You kind of go to them when you're in a certain emotional bag Be happy that you now have real estate in someone's mind and heart and double down on that. All right Don't get caught trying to you know escape a box before you get a chance to maximize that box. All right number five Use a headline as training wheels now actually I'm gonna go back to the post that I was showing for the hook when I say headline is stuff like this how it would sound if I Wasn't happy by Dixie de Melio whenever you see those little bubbles. All right at the top or some text at the top This is what I'm referring to when I say headline These are a cheat code. All right, and it works. It works. It works. So many people do it and it still works Why one because oftentimes the first thing that happens is people read That headline before they really get into the post and that headline Literally will frame how they begin to consume the rest of the video and now you don't have to visually set up a hook right and be it be really good at Filming and and doing cuts you can just literally write out the hook writing out that hook and Creating some type of expectation is so much easier then mapping it out all visually right It's a completely different talent. So how it would sound if I was unhappy by Dixie de Melio Well, you know, it's about the come come right the hook has already got you And now you would be waiting to see how he sounds on that song Cheat code that simple. Yes, you can be successful without headlines But these are the training wheels until you really get things going and you really understand how the formula works Alright now Number six stop trying to be funny. You don't have to be funny to be successful on tiktok I know so many people think that it's a skits based platform a dance based platform Yes, it was like that at the beginning That was one of the things that are really popular and helped it take off But that is not all of the platform You can be successful on the platform without being funny and if you aren't funny It's your best interest to just leave that alone. All right Which leads me to number seven be relatable That simple and a great way to be relatable All right is tapping into the subject matter of your music or other songs So what I mean by this is yes being funny can be a relatable thing But you have songs right that are about a lot of different subjects. I imagine right Well, those subjects can be Expounded on right and expressed through a tiktok video. You don't have to try to turn it into something funny You put that subject in your song because it resonates with you personally somehow All right, and that's likely going to resonate with other people now. How can you extrapolate that? Visual right or that that idea and create a visual that will resonate with the audience period so If you're down and out or you just broke up with a relationship with somebody and you're sad because of it and depressed Because of it or you just broke up with somebody and you're happy and you feel like you're free And you feel like my life has gotten so much better or that person broke with broke up with me and I missed out I was just talking with somebody who's writing a song right now where yo her It's a literal story about her exes. All right. They aren't together anymore And she feels blessed that they aren't together anymore. She's looking back like yo glad I missed that boat That is a relatable topic. Right doesn't have to be a funny topic now That can be may funny, but you don't have to make it funny So like I said number six, please stop being funny or trying to be funny You don't have to do that always but number seven do be relatable Connect all right. That's it for this video I will add one bonus because I alluded to it earlier when things are working Lean in don't try to back off of it unless it's super random and and it's just some non music related Thing that you never want to do again Cool, but besides that in most cases you can benefit from doubling down So that is it for this video. Hopefully you would like to see some more TikTok tips So I'm gonna actually create a playlist. I'm gonna drop multiple videos I haven't decided on what all of them are yet So if you have any thoughts or topics on Tiktok that you would like go ahead and put it in the comment section below But one that I do have are some general tips to help you understand the algorithm and let's see. What's one more idea? I know I'm gonna drop I'm gonna go a little deeper in the hashtags as well So that's it for this video once again seven tips on how to create content on Tiktok Hopefully that was helpful. Bye. Bye