 Thank you for being here. I know there is a lot of great talks Out there. So i appreciate it. Just to start, i want to know really quick how many are Designers and developers. Designers and developers. A little bit of both. All right. So today we're going to be talking about style guide driven Designers. This is a topic that comes From way back when we used to do only print in design. So before i get into the topic, let me just introduce myself. My name is joseph imieta. I'm a ui engineer and co-founder At a small agency called alpis. We do mostly software Development and design from branding to ux anything. So my username is on the screen. You can find me anywhere by it. And my email address, if you have any question or concern, just Hit me up. So what's a style guide? Well, yesterday or in the past, it was pretty much a book That we will create every time that we will create a brand Or interface or any software, we will documentate the way to Use whatever we created in paper. This is really pretty. We can have a pdf or a book around the office, but it's Not really scalable, especially today that we live in the World of fast development and everything changes every day. So today we have living style guides or the concept comes from All your components or your brand and your style sheets and Everything lives in code. So that's why it's living and In reality, living is a relative concept. So you will see later. This is a special example from Pivotel labs. They created their style Guide and shared with the world as a great example. Feel free. I think i have the link later to Go in and explore it. It's amazing. You can learn a lot about it. And i believe it's open source, so even better. So why is it important to create a style guide? So user interfaces are getting more complex every day. So having a blueprint of what you're building or what you want To achieve is extremely important. So reducing that complexity For you and for anybody that will join or be in your team in The future is very important. Also in the qa process, the Quality assurance, you have something that you can hold On to and say, all right, you built this new application and It doesn't really meet the standards that we said at the Beginning of the project. So also the redundancy, how many Times have you been in a website or an application or Anywhere, and you have one button and then you have Another one and you have 20 buttons that look all Different and they all do the same. So why does headache for the user and the headache for the Developer, because every time i need a button, i need to create It, not just go grab the line of code for a button, add the Functionality, and it looks the same everywhere. It behaves the same, so everybody is happy. All your design that you go through, we do a lot of ux Design and things like that. At the beginning it's very Important to design all the elements that you need, Especially that they will evolve and they will create all Other new elements in the future. So all that design, once you Put it in your style guide, it's pretty much code. You can pretty much throw away the psd or whatever you have Because from now on you're going to make the changes right There or you can just start and code in the first place. So this creates a more maintainable code base. We have a lot of overhead every time we create an application And most of the time you see, like, there's a very beautiful Open source software and it works perfect, but after a while If it's not easy to maintain, a lot of people just abandon It and that dying. So you can pay attention. There was a talk about performance, which was really good. Performance budget is setting your standard for performance. You're going to say, all right, i want my page or my Application to load in two seconds maximum. So you can design all your elements to have really Light weight components to it so your performance increases And you can test how your application behaves every time You make a change. So also, rapid prototyping, We all, i don't know if you're familiar with bootstrap or All the frameworks like semantic ui and foundation, we all Use it for rapid prototyping. After you do your own style Guide, hey, you have your own rapid prototyping tool. And it's very important because at the end, since it's yours, You don't have to modify it. You go from prototype to product faster. So what is usually included in style guide? So we have the basic elements, meaning buttons and form Elements, typography, any type of pattern that you see in Your application repeating and repeating. For example, if you're working in a big project and everybody Refers to the top part as that's the header, like you Call it by a noun or that footer, i think that's something That you can move to your style guide and make sure that it's Consistent across all of the views or the pages of your project. You have all the styles. You can set the way that the styles Are going to be reading from now on and that will create a Better code base and more understandable and more standard. When you onboard a new person to your team, they only have to Learn one thing, not 20 styles of code. You can add notes for development. You can have, like, your Internal wiki. You can put it in your style Guide just to inform everybody how to use each element. And if there is a known issue that you can fix right now, You can put it there. Just like in the old paper Design guidelines, you can show the colors of your brand or Your project, which are very important because we all see Colors different, but at the end, if you have one number, Everybody makes sure that it's following the same. Great systems. If we start talking about Great systems, we can be here until tomorrow. There's a million of them and a million ways to achieve it. I would recommend to look into flexbox. I think that it's stuck. I don't know if it's there Tomorrow. It will be really nice. You can also localize your code. If you create your components to be localizable, like you Can translate them and it will be really intuitive to change The language of your application once you get to the point. I found this quote is by gina on twitter. She's a lead designer at self-forged. They have a great design team. It's amazing that they were Able to get a whole group of very talented people and then put Them to work on this. Some style guides is funny, but it's true. You can create it today and if you don't maintain it, if you Don't make it part of your progress, every day that you Create a new element, you say, all right, this should be An element that we'll reuse. Let's add it to the style guide. Let's change it. Let's improve it. They will die and they will eat your brains. Just like that. I like zombies, but i don't like that zombie. So really quick examples, like amazing. I mentioned self-force and people to lapse. Also, we have a lonely planet and male shrimp. These companies are very, very nice in the way that they're big And they show what they're doing. So we can all learn from these examples. All these, i'll tweet the link to the slides, but i'm sure The conference will do the same. But if you search for the name of the company, style guide is right there. There is a million tools that you can use to create style guides Today. These are only a few. Hologram, for example, was created by trulia, the real State company, after they did the same process. They went through all their code and created a style guide For themselves and they realized that they did a lot of good Work. So they created this tool. It allows you to scuffle the style guide really quick and then From there you can build your own. Even when you go to examples, the people to lapse is actually Built on top of hologram. So check it out. Pattern lapse, it was created as the tool to show about Atomic design. Anybody familiar? Atomic design. So this is philosophy. That was that surface around 2013, and it's very interesting Where you will create, if you're borrowing from physics or Chemistry, you have a molecule and then you have organisms. In this case, you will be like, all right, let's create An atom, which will be a button, and then you have other Atoms like a text input and things like that. Then you can create a molecule where it's your login form. That login form is made with atoms. Then you can create an organism, which could be your Logging page, which is formed by other elements and the Form that you created. So it's very easy to follow. And it's a very nice philosophy. So pattern lap was created exactly for this. There is a whole article, and i think there is a book about it, Which is very interesting. I highly recommend it. Frontify, i think it's a paid solution. They have a free version. If you don't want to deal with Code, if you just want to create that for yourself or for Your marketing team, they can go ahead and edit it. We see a type of interface. They don't pay me to say that, But it's good. Also, there are a lot of them. There are parts, your css files. These all started with Kss, where you would write the comment before your Implementation of the style sheet and saying, okay, this is the Name of the element. This is the way we're going to use it. And this is any description of it. So once you run kss, which it has been transformed into Grunt tasks and node packages and all that, so once you run That, it will create pages with that information that you Put in your source code. So you don't have to go ahead and Create your own pages to describe this. Your source code will generate the pages for you. And you can create a template, which will be the base of Your target. So i created a quick demo. I know this is a wordpress conference. I'm not talking a lot about wordpress. I'm sorry, but either way, this is a practice that you can do Any project, wordpress or not. I went to code pen and created A small style guide. Let me see if i have it here. So our colors, i just defined them the first place. I'm using sass as a preprocessor. And then i went ahead and Defined the typography that we use. If you look at the html, it's very simple. I'm just putting a straight mark up there that is nothing fancy. But the css will style that every time that i change, it Doesn't matter if i put the red to be green. It should update. And you can do changes. Once you do your work one time for one client or one website, One application, then you can say, all right. I adapted my code for this brand. Now i can have a new brand That i have to work with. I have the brand elements that i Want to incorporate to my site. So i just have to change the Variables, change the way that they look if there is a Specific look. Our logo is a triangle. That's why instead of using square to show a swash, i just Build a triangle but you can build anything you want. So like that, you can go ahead and create all the buttons and All the form elements. I did this very quick just to Show the process. This will allow you to grab This css and use it in your site at least at the beginning. If you keep it, if you keep maintaining it, you can reuse It as many times as you like. And if there is a new tendency In the market to do something fancy with your styles or you Can go ahead and update it and then you can push that Change to all the projects at the same time if you have Any questions. Thank you. That's about what i had. If i will take questions now, i Don't know how much time i have. Well, that was fast. Okay. If you want to create one page that you're going to do Let's say for homework and you will never use it again or Is something extremely, extremely profound that is New, you might not need it. If you're at a hackathon that You want to do something really fast, you know, there i wouldn't Do it. But if you are in any project, it's a good Practice because it will keep you in line in terms of Maintaining the style throughout all the project. And you can define anything from spaces to, you know, the colors, anything. And that can carry from project to project. I think it's a good practice and there are some advocates out There that say create a style guide for each project. But it's a very good question. At the end it's a preference. We try to show them the importance of it because at the End when we create all the code and we give it to them, They own the code. If they want to go somewhere else and Create a structure, somebody else will try to reinvent the Wheel which was there already in the first place. So showing them the importance of it will allow you to, you Know, make more money because you're showing them value in Your work and they will come back and they will be happy Because their code is better structure for their future. So it's a really quick type of client and industry. What type of client and industry. All right. So the thing is that a lot of people that just want to get Things out, they don't see the value because you're moving Really fast but they don't see that you're going to do this Same type of work over and over and over again. And every time you have to go and redo it. You can use a solution that is there and it's going to give you A nice looking button but making your own and being able to Reuse it in every product, spending the time now, it's going To be exponentially valuable. So for us, you can create an interface with just without Style sheets or at all and you can have a functional application On the browser but it's not styled to not even be readable. If you don't have css, you can have a screen reader read it And you will understand it a little bit but we're humans And really highly, highly visual individuals. So for us, the experience is very important. If there is a client that doesn't understand it, sometimes It's good to lose the client because at the end i wouldn't Put my name in something that it looks bad and put it out There and say no, i'll say made it, no. I'm sorry, you know, it's not worth my time. All right. So we have done a lot of this type of work That the client comes to us and say all right, i have this Project, i need a logo or a brand identity so we end up going Ahead and doing a whole branding exercise. At the end, we end up with the brand is leaving an illustrator File or something like that. We try to give them all the Colors that they will need, like rgb and hex and phantom Whatever they will need so they can be set for the future. So that will translate good if we're going to go on web. This having the brand guideline will allow you to go faster Into the style guide of your web or application because all The foundation is there. In this case, if you use a Really print-only typography, you have to make compromises. Sometimes you have to find the best alternative of that Front-face in the web. And they have to be okay with It because at the end, most of the time, we choose Something that lives everywhere but it's a client that Really wants something out of the extraordinary. We have to show them that this will not be reusable for the Web and a lot of times we have a system, yeah, i can see it on My mac because i have a lot of funds there but a client in Another computer might not have it so if you don't have the Fund in the system and you cannot distribute it over the Fire, you have to find the good alternative for it. On the other side, if you have legacy software that you want to Turn to, you know, this type of mentality, you have to start From scratch doing ui inventory and see all the elements that They're using, all the elements that they really need Because they can be using 20 and they only need 12 and then From that showing them little by little what's the importance, They see it. At the end, if you have a Managers hierarchy, once you show one and they see the value That they're going to save money in the long run, eventually All of them will get it. I don't know if i answer your question. It's a tool called codepen.io. It allows you to write html, any flavor and css, any flavor And javascript, any flavor of it and see the result real time. We use it sometimes when we want to show something outside Or you get an idea and you say, all right, i think this Is doable in css or any on the web but i'm not really sure. Instead of creating a project in my computer and all that, i Can fire it up in the browser and go ahead and create it. And it's free so you can send it to your phone and look at it To see if it looks good and everything. Yeah, style guide, in this case, my example was only css. I didn't get into creating a lot of it but it's code. Whatever you need for your interface, most of it will be HTML, css, and javascript. If you go there, people to Labs, you can see that they have reactive components if you're Familiar with the framework and then css components. They will show you in their style guide, you're a developer And you're building a simple website. You don't need reacts but You can go ahead and grab that css element and put it on your Side and you have a green button, a red button, whatever. And then you have another developer in the same company, Especially these companies are distributed. They are all over the world and that's how we all work Today. So the same company, another developer can Say, all right, i need a button but i'm creating an Application, i'm using react, i get the code, it all looks the Same way and it's all controlled by that same css. Once you change it once, you can push it to your distributor Of code, like bower or whatever, and then everybody gets The same version, everybody will have a look that will Represent your brand. Yes. At the end, in compile time, you can put all those css in one Package that is your ui library and you distribute that. Or you can distribute each individual element at the end is What project you're in. Some people that use symphony For example in php, they like all the assets separate. So you have a folder that has buttons and things like that Because at the end, symphony will compact all of that to Distribute it. But yes, at the end it's all css And html. It's being pulled from the same place. If you're using a preprocessor like sass, less, Since you have variables with all the main components, like The colors and things like that, once you change it to one and You compile, all your css files will have the same value. No, you're only having the style guide for your Armed benefits. Yes. It's like having documentation. At the end, the code that You distribute or use in your application is the result of This exercise. It's the same source that the Style guide is reading from just like that you distribute. The style guide is just the documentation how to use your Brand or your elements in anything. Yes. Yes. Yes. Yes. At the end, yes, yes. Or you have two different projects. You have the living style guide that has all your structure, how To use it, and then that css file is what you use to build Other things. It's all there. It's all css. Yes. At the end, you will define whatever you like. So you mean it's a triangle, no? No, no, no. It's all css. All this is creating css. I only wrote html for the Structure. Can you see? So I have a div with a class color, and that class color only Has the structure of how my element will look. No? So you have color main will define how i'm going to Style that element. In this case, i put all the Properties of color, which are general for all the colors In one class, and then the other one defines the color or if It's going to have a blue shine or whatever it is for each Individual cases. The shape? All right. No, no, no, no. The shape is at the end here. That's the shape. It's a css trick. You're defining the Border and then saying that two of them are just Transparent, so it will fill the void. If you don't want to do that, if you want to put a square, let's See. Yeah, for some reason not Coming out now, but i can show you on the fly. Like, you have, that's a css shape. Initially every box on your website is square or rectangle. So with css, you can make it look like an infinity loop if You like. So css has advanced a Lot in the last few years after the creation of css3. So css today has variables that we didn't have that two years Ago. So any other questions? Okay. It's good to set boundaries. Like, at the end, that comes out in your design process. Or, you know, if you're doing things for mobile or if you're Doing things for, you know, ipads or embedded devices, that Comes out in your process of designing each element. You have to define, all right, my button usually doesn't Have any padding. It's going to be just a Box with text inside, but i wanted to be 30 pixels high Because maybe i find that the optimal size for the ui. So in that global button class, i will define all the attributes That we'll need for each button. And then you can make Modifications of it, you know, you can create 20 different Buttons if you really need it. If you have seen, like, Ionic and all that, you have regular buttons and then you Have full block buttons, they're only modifying the width. So any other questions? My website? Allpeacedesign.com. A-L-P-I-S Design.com. Or see me, i'll give you a business Thank you everybody.