Mozilla Open Design
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.
Qoshi, Elio
Mozilla has been doing quite some efforts in 2016 to open up more non-technical contribution areas, including design. What started with CommunityDesign in January 2016, evolved and inspired a new rebranding process of theMozilla brand, by opening it up to a broader audience who were able to followand comment on the process step by step. We will have a look back at 2016, what we learned from Open Design at Mozillaand introduce the new Mozilla brand which will roll out throughout 2017. Mozilla has been doing quite some efforts in 2016 to open up more non-technical contribution areas, including design. What started with CommunityDesign in January 2016, evolved and inspired a new rebranding process of theMozilla brand, by opening it up to a broader audience who were able to followand comment on the process step by step. We will have a look back at 2016, what we learned from Open Design at Mozillaand introduce the new Mozilla brand which will roll out throughout 2017.
 Hi there guys. I was here in fact a year before talking about how we started Mozilla Open Design. Some of you might have been here, but I don't suspect that every one of you have been here last year. So I'm going to give a quick overview again of what we have been doing at Mozilla, at Open Design at Mozilla. Why we are not calling it an open source design at Mozilla is because it's too long, so we just did it at Mozilla Open Design. So we're going to have a look back at 2016, what we have been doing, what we have been up to, and you might have noticed if you have come by, passed by at the Mozilla booth, we have a new logo. And I'm sorry that I'm after Bellin now, and Bellin talked about user interaction, and I'm talking about visual design now, so I hope you can bear with me now. So quick words about me, I'm Adio, I'm a Mozilla tech speaker, I go to conferences, I talk about random stuff that I like, like now. I'm also a hackerspace, a sport member at Open Labs, which is one of the oldest, well, we only have two hackerspaces in Albania, so it's one of them. And also a community manager for SitePoint. I'm also founder of URA Design, which is a company I started like two years ago to improve visual design and, well, user interaction in general with open source software, and help projects have better design in general. So this helped me quite a lot, frame a bit of empathy with open source, which is something I think that a lot of designers who are not working in open source or contributing in open source lack. So this is a very important aspect I want to emphasize in this talk. So, luckily here, we understand this is not the case, but in a lot of other different fields and environments, a lot of people think open source is code. So, hey, I have this code, like, throw it out there and it's open source. So that's it. It's not that easy. And there's also many other aspects to open source, which I apply also to design. And me as a not a developer, I've always had a hard time figuring out how I can help open source projects. So when I started off, I thought, hey, I like design, hey, I like open source, but I don't want to be a jack of all trades doing all these things together. So I try to figure out a way how I can combine both of these things. Now, I believe it's very important to figure out a way how to offer non-technical contributors contributing to open source. And I think design is one of the most important aspects to that. So one important aspect, like, which is the equivalent of open source or free software licenses like the GPL in design is Creative Commons. It's something which really puts a match into all designs we create. So, for example, the equivalent of GPL in design is, well, we can debate about that, but I believe it's Creative Commons share like attribution, attribution share like. So this ensures that design is always shared and licensed under a free, well, open source Creative Commons license. So I believe when designers know how to license the world and how to put it out in the open, they can be better contributors to open source. So having this in mind, we created a GitHub repo on Mozilla, Mozilla Open Design, because there were so many people were asking me personally, hey, can we help you with that? Can you create a badge? Can you create a sticker for me? I was like feeling appreciated, but after quite some time I felt like, hey, this is not a community. It's just people asking, and you're doing things. This is not the spirit of a community. So we tried to create a GitHub repo on Mozilla where all designers, even staff and volunteers would collaborate together, and people from Mozilla, from the community would ask and request design, and we would help collaborate together. This was very helpful, actually, because every design could be tracked across the board. We would know where the source files are, it would not be a JPEG image, which would be the output. Everything would be licensed on Creative Commons, attribution to share like license. So it was very neatly organized in one place. So just going a quick overview of how this worked out. This is, sorry, I'm not pronouncing his name better. So this is a guy from India who is doing an Indian meetup for the Mozilla community, and he needed a sticker, basically. So he's basically giving a brief of what he needs and what he wants it to look like. And it was for the meetup in 2016 in Pune. So obviously the sticker would have something related with Pune. And he got a good deadline. It was 18 August. It was July, so we had quite some time to create it. So that was this guy creating this illustration of a structure in Pune, which was one of the symbols of the city. And we ping pong feedback, we talked about how it might be looking better in the Mozilla style and how this would obey the guidelines, obey in whatever. And we came up with this result, after a lot of ping ponging feedback. So this was one of the easier tasks, but this was the way how we would work things out. After this was put out, we would put all the source files in the GitHub repo, and people could reuse it. Even people from outside Mozilla, because it was under Creative Commons license. Early one year ago, in fact, after Fasten 2016, Mozilla came up with the idea that, guys, we need a new brand. Because there was something lacking with Mozilla back then. We only had the word mark. It wasn't a proprietary font, by the way, if you don't know. And it was quite weak if you look at the other brands. For example, this would be Pepsi Facebook or Google, if it would be in a style Mozilla hat, like the gray word mark. And we also lacked a proper icon. We had the M, but we didn't have really a color or original style to it, which makes people scream, why you, that's Mozilla. So we had some discussions and we asked people, hey, how do you recognize Mozilla? Is it something, is it a fighter? Is it the gutsy one? Is it someone who fights for the good? And we'd ask people how they see Mozilla. So also as Balan said before, we didn't just go with the visual design, but we asked people how they percept the whole experience at Mozilla. How they think Mozilla should be, what role Mozilla should have in the world. And according to that perception of all the people, we started creating the brand identity and having an idea of where we should start. So this was the first phase. This was done by an agency who was taking the feedback from the community and implementing it in several different ways. And community, the community could give feedback on what they don't like about each direction and what they don't actually. So I'm not going into details here. It was, you can check out the blog to see all the designs which were happening. It was really messy and depends on how you look at it. It was also fun because it wasn't supposed to be clean. It was supposed to like give, to show some different directions to the community. So this was the first phase. A lot of people commented on a lot of controversial things. Of course, it's always happens. And this was the second phase then. So we had two directions. We had the protocol direction which basically takes inspiration from the HTTP protocol. And this is all for the final result. We went with the protocol direction. And as you can see, the new logo will always be highlighted the same as you would do on old computers. So the Mozilla Wordmark cannot stand on its own without the black box. And it also takes inspiration from the protocol. As you can see, some people see the meh face in it. Like maybe too much Facebook. I don't know. But yeah, this will be the icon as well. It does a bit on more personality than what we used to have. We also have now different color palettes. So we are going with black and white with the idea that we have a lot of contracts. We are gutsy. We have a lot of courage for that. But we also have colors. So this will be our new color palette. And this offers a lot of people to play around with different elements for their own communities. And the nice thing about this is that we created a new font. If you might have known about Arvo. Arvo is an open source font. But it lacks a lot of characters. So we took Arvo and we are changing it quite a lot to our needs. And we are creating Zilla. Zilla is like a derivative font of Arvo. Which we are going to put out on an open font license in the end of February. So this is not out yet. And everyone can use Arvo. And the font has such an implementation that if you write Modura, it gets translated automatically to a mouse protocol. So this is very interesting. And the fun thing about the imagery is that this will be very messy. There will be no guidelines like, hey, please obey the guidelines, stuff like that. So the Modura workbook will always be on a black box. But everything about that can be messy as much as people want. So the idea we had about communities would be, for example, if we would have Modura Belgium, we would have an archive of GIFs and imagery which would be put on the other side of the logo. And this would be a dynamic experience. And just like it would be messy, it would not be aesthetically pleasing. Maybe. But this is just the way the web works. So we wanted to implement the chaos and messiness of the web also in the brand identity. We didn't want to be the classic designers which want to make things look good. We wanted to translate the idea of the web into the brand identity. So these are also some examples of how that would look like. So it's really random. If you have a bit of experience with Berlin art styles, so it's like graffiti, random, messy, it's very nice and it's not really comfortable looking at it. I don't know, I don't have a better word for it. But it's just like what Zuyas is in some kind of way. We are not a corporation in the classic sense. We are someone who is like an advocate for the web. And we wanted also to the brand identity to look like that. So this is also something else like we can play on with a new brand identity. So I'm going to show you quickly a video of how that would look like in animations. Sorry there's no sound, that is just random music. Oh damn. I think I have enough battery. So this would be some examples of the community to logos. Come on. So yeah, that's logo in real time. And if you want to get involved into creating designs or asking even for designs, please feel free to get involved in our GitHub repo. And you can also check out all this stuff I just showed here in the design language stop matzoat.org. And yeah, for anything else, I'd be happy to answer any questions. But yeah, please reach out to me. Thank you.
 Hi there guys. I was here in fact a year before talking about how we started Mozilla Open Design.  Some of you might have been here, but I don't suspect that every one of you have been here last year.  So I'm going to give a quick overview again of what we have been doing at Mozilla, at Open Design at Mozilla.  Why we are not calling it an open source design at Mozilla is because it's too long, so we just did it at Mozilla Open Design.  So we're going to have a look back at 2016, what we have been doing, what we have been up to,  and you might have noticed if you have come by, passed by at the Mozilla booth, we have a new logo.  And I'm sorry that I'm after Bellin now, and Bellin talked about user interaction, and I'm talking about visual design now,  so I hope you can bear with me now.  So quick words about me, I'm Adio, I'm a Mozilla tech speaker, I go to conferences, I talk about random stuff that I like, like now.  I'm also a hackerspace, a sport member at Open Labs, which is one of the oldest, well, we only have two hackerspaces in Albania, so it's one of them.  And also a community manager for SitePoint.  I'm also founder of URA Design, which is a company I started like two years ago to improve visual design and, well, user interaction in general with open source software,  and help projects have better design in general.  So this helped me quite a lot, frame a bit of empathy with open source, which is something I think that a lot of designers who are not working in open source or contributing in open source lack.  So this is a very important aspect I want to emphasize in this talk.  So, luckily here, we understand this is not the case, but in a lot of other different fields and environments, a lot of people think open source is code.  So, hey, I have this code, like, throw it out there and it's open source.  So that's it.  It's not that easy.  And there's also many other aspects to open source, which I apply also to design.  And me as a not a developer, I've always had a hard time figuring out how I can help open source projects.  So when I started off, I thought, hey, I like design, hey, I like open source, but I don't want to be a jack of all trades doing all these things together.  So I try to figure out a way how I can combine both of these things.  Now, I believe it's very important to figure out a way how to offer non-technical contributors contributing to open source.  And I think design is one of the most important aspects to that.  So one important aspect, like, which is the equivalent of open source or free software licenses like the GPL in design is Creative Commons.  It's something which really puts a match into all designs we create.  So, for example, the equivalent of GPL in design is, well, we can debate about that, but I believe it's Creative Commons share like attribution, attribution share like.  So this ensures that design is always shared and licensed under a free, well, open source Creative Commons license.  So I believe when designers know how to license the world and how to put it out in the open, they can be better contributors to open source.  So having this in mind, we created a GitHub repo on Mozilla, Mozilla Open Design,  because there were so many people were asking me personally, hey, can we help you with that?  Can you create a badge? Can you create a sticker for me?  I was like feeling appreciated, but after quite some time I felt like, hey, this is not a community.  It's just people asking, and you're doing things.  This is not the spirit of a community.  So we tried to create a GitHub repo on Mozilla where all designers, even staff and volunteers would collaborate together,  and people from Mozilla, from the community would ask and request design, and we would help collaborate together.  This was very helpful, actually, because every design could be tracked across the board.  We would know where the source files are, it would not be a JPEG image, which would be the output.  Everything would be licensed on Creative Commons, attribution to share like license.  So it was very neatly organized in one place.  So just going a quick overview of how this worked out.  This is, sorry, I'm not pronouncing his name better.  So this is a guy from India who is doing an Indian meetup for the Mozilla community, and he needed a sticker, basically.  So he's basically giving a brief of what he needs and what he wants it to look like.  And it was for the meetup in 2016 in Pune.  So obviously the sticker would have something related with Pune.  And he got a good deadline. It was 18 August. It was July, so we had quite some time to create it.  So that was this guy creating this illustration of a structure in Pune, which was one of the symbols of the city.  And we ping pong feedback, we talked about how it might be looking better in the Mozilla style and how this would obey the guidelines, obey in whatever.  And we came up with this result, after a lot of ping ponging feedback.  So this was one of the easier tasks, but this was the way how we would work things out.  After this was put out, we would put all the source files in the GitHub repo, and people could reuse it.  Even people from outside Mozilla, because it was under Creative Commons license.  Early one year ago, in fact, after Fasten 2016, Mozilla came up with the idea that, guys, we need a new brand.  Because there was something lacking with Mozilla back then.  We only had the word mark. It wasn't a proprietary font, by the way, if you don't know.  And it was quite weak if you look at the other brands.  For example, this would be Pepsi Facebook or Google, if it would be in a style Mozilla hat, like the gray word mark.  And we also lacked a proper icon. We had the M, but we didn't have really a color or original style to it, which makes people scream,  why you, that's Mozilla. So we had some discussions and we asked people, hey, how do you recognize Mozilla?  Is it something, is it a fighter? Is it the gutsy one? Is it someone who fights for the good?  And we'd ask people how they see Mozilla.  So also as Balan said before, we didn't just go with the visual design, but we asked people how they percept the whole experience at Mozilla.  How they think Mozilla should be, what role Mozilla should have in the world.  And according to that perception of all the people, we started creating the brand identity and having an idea of where we should start.  So this was the first phase. This was done by an agency who was taking the feedback from the community and implementing it in several different ways.  And community, the community could give feedback on what they don't like about each direction and what they don't actually.  So I'm not going into details here. It was, you can check out the blog to see all the designs which were happening.  It was really messy and depends on how you look at it. It was also fun because it wasn't supposed to be clean.  It was supposed to like give, to show some different directions to the community.  So this was the first phase. A lot of people commented on a lot of controversial things. Of course, it's always happens.  And this was the second phase then. So we had two directions.  We had the protocol direction which basically takes inspiration from the HTTP protocol.  And this is all for the final result. We went with the protocol direction.  And as you can see, the new logo will always be highlighted the same as you would do on old computers.  So the Mozilla Wordmark cannot stand on its own without the black box.  And it also takes inspiration from the protocol. As you can see, some people see the meh face in it.  Like maybe too much Facebook. I don't know.  But yeah, this will be the icon as well. It does a bit on more personality than what we used to have.  We also have now different color palettes. So we are going with black and white with the idea that we have a lot of contracts.  We are gutsy. We have a lot of courage for that.  But we also have colors. So this will be our new color palette.  And this offers a lot of people to play around with different elements for their own communities.  And the nice thing about this is that we created a new font.  If you might have known about Arvo. Arvo is an open source font.  But it lacks a lot of characters.  So we took Arvo and we are changing it quite a lot to our needs.  And we are creating Zilla. Zilla is like a derivative font of Arvo.  Which we are going to put out on an open font license in the end of February.  So this is not out yet.  And everyone can use Arvo.  And the font has such an implementation that if you write Modura, it gets translated automatically to a mouse protocol.  So this is very interesting.  And the fun thing about the imagery is that this will be very messy. There will be no guidelines like,  hey, please obey the guidelines, stuff like that.  So the Modura workbook will always be on a black box.  But everything about that can be messy as much as people want.  So the idea we had about communities would be, for example, if we would have Modura Belgium,  we would have an archive of GIFs and imagery which would be put on the other side of the logo.  And this would be a dynamic experience.  And just like it would be messy, it would not be aesthetically pleasing.  Maybe. But this is just the way the web works.  So we wanted to implement the chaos and messiness of the web also in the brand identity.  We didn't want to be the classic designers which want to make things look good.  We wanted to translate the idea of the web into the brand identity.  So these are also some examples of how that would look like.  So it's really random.  If you have a bit of experience with Berlin art styles, so it's like graffiti, random, messy,  it's very nice and it's not really comfortable looking at it.  I don't know, I don't have a better word for it.  But it's just like what Zuyas is in some kind of way.  We are not a corporation in the classic sense.  We are someone who is like an advocate for the web.  And we wanted also to the brand identity to look like that.  So this is also something else like we can play on with a new brand identity.  So I'm going to show you quickly a video of how that would look like in animations.  Sorry there's no sound, that is just random music.  Oh damn.  I think I have enough battery.  So this would be some examples of the community to logos.  Come on.  So yeah, that's logo in real time.  And if you want to get involved into creating designs or asking even for designs,  please feel free to get involved in our GitHub repo.  And you can also check out all this stuff I just showed here in the design language stop matzoat.org.  And yeah, for anything else, I'd be happy to answer any questions.  But yeah, please reach out to me. Thank you.
Mozilla_Open_Design_What_we_learned_in_201_0_131.png Mozilla_Open_Design_What_we_learned_in_201_132_1259.png Mozilla_Open_Design_What_we_learned_in_201_1260_3179.png Mozilla_Open_Design_What_we_learned_in_201_3180_5987.png Mozilla_Open_Design_What_we_learned_in_201_5988_6299.png Mozilla_Open_Design_What_we_learned_in_201_6300_7115.png Mozilla_Open_Design_What_we_learned_in_201_7116_10667.png Mozilla_Open_Design_What_we_learned_in_201_10668_11603.png Mozilla_Open_Design_What_we_learned_in_201_11604_14099.png Mozilla_Open_Design_What_we_learned_in_201_14100_18287.png Mozilla_Open_Design_What_we_learned_in_201_18288_18467.png Mozilla_Open_Design_What_we_learned_in_201_18468_18599.png Mozilla_Open_Design_What_we_learned_in_201_18600_18911.png Mozilla_Open_Design_What_we_learned_in_201_18912_19619.png Mozilla_Open_Design_What_we_learned_in_201_19620_19691.png Mozilla_Open_Design_What_we_learned_in_201_19692_19775.png Mozilla_Open_Design_What_we_learned_in_201_19776_19907.png Mozilla_Open_Design_What_we_learned_in_201_19908_20159.png Mozilla_Open_Design_What_we_learned_in_201_20160_20399.png Mozilla_Open_Design_What_we_learned_in_201_20400_20963.png Mozilla_Open_Design_What_we_learned_in_201_20964_21347.png Mozilla_Open_Design_What_we_learned_in_201_21348_21470.png