LIVE: Simple Design System

to just like go to it and then sometimes pause and read the comments and see if there are any questions okay so let's let's actually dig in into creating colors so for creating colors I there are different tools that I can't think you can use there's one call let me open a new window okay live dashboard maybe open a new window over here for example this one called coolers coolers that Co and this one is actually pretty cool because you can generate like random colors so you can start the generator you press you press it and then it gives you a random color palette which is sometimes is cool because of the serendipity of it it's just like I don't know it's something you don't really have an idea of like what to create so this random generator is pretty cool you can also explore some of the palettes that other people have made and you can even put them like in like the best the ones that people have about it and you can just like apparently my internet it's not that great there you go so this started some palettes that other people have done let's let's see this one you view it and then you can copy the colors of each one and it looks pretty good right it looks looks nice I'm going to just another one called from Adobe which is colors Adobe I think Colorado Colorado be calm this one is is actually okay signing no stop this one is actually pretty cool because it gives you the the ability to create your colors using different rules for analog analog colors monochromatic three are complementary they usually like the complementary one because said you move it and then it it creates a color that is in one side of the spectrum and combines it with another one that is in on the other side of the spectrum so for example this blue and just like oranges on the other side like this blue and and and the oranges on the other side like they both complement each other and it's like pleasing to the eyes to have those both colors together so you can just like move around this thing you have a key color like this is my scholar friendly and then you move the base color and then the rest move actually you can move any of the colors and then the rest move but like the one in the middle is like your base color and then here you can just copy the hex codes or you can just like download and put it on Illustrator or Photoshop I usually just take a screenshot and then just like grab the colors from the actual stretcher I have like they give you so many tools to actually copy paste and do it the right way I usually just like will take a screenshot of this and then just use the screenshot and just like use the pick color to actually take the colors so I'm liking so those are tools to create color palettes I'm actually going to just like go into sketch a create the color palette right there okay so let me see the colors that I need before we start actually let me just cook close this close this and then over here these are the colors that we need these are all the colors that we'll need primary secondary dark light and let me open sketch just going to put a text layer here so I can I know what the hell I'm supposed to do okay those are the colors that I need I'm going to just create a rectangle really quickly probably 96 pixels and I'm going to start with the most boring color in you eyes which is in the most common I guess which is blue just to blue a nice blue that's going to be my primary color and what should we get crazy should we get a little bit crazier let's go let's go like purplish magenta like around here I'm actually colorblind so all of these colors here in this area like around around here they all look almost the same like they did I mean obviously when I see the changes I can see the changes there but I mean it's really hard for me to distinguish between a purple and a blue or a pink and a blue so but I know that around here you get like a magenta I know this is magenta so that's going to be my primary color is going to be like really hardcore really nice that's going to be my primary color my secondary is going to be probably going to keep it analogous sorry but like kind of like monochromatic so my secondary color is going to be another version of that magenta and I'm just going to go and desaturate it a little bit just going to desaturate it probably this one I'm going to even not only that but I'm going to go a little bit darker that way and and and pretty saturate it in that way my primary color is going to be working with white text and it's going to have a really good contrast is if it's not too light and it's saturated enough you put white text on top of it and it should be readable enough and there are some tools that you can actually check that later but that's a good base anyway that's my primary color this is my secondary color let's create a dark color and the dark color is usually for I used two for text what is going to eat a color of my text and I usually recommend not using just 100% black I would use another shade of your probably your primary color just a very dark shade of your primary color so this I'm actually going to do that so and so let's say that this is my protocol you can use I don't know you can go crazy on this but I usually go unsaturated and really dark around here look you can go like saturate it and around here this could be your text color anything around here and anything don't go all the way down here because I know it's it's it's kind of harsh it's kind of hardened to the eyes I don't know who said this but I kind of like the idea of like a little bit softer not too dark around here this is going to be good this is going to be my dark color and all these things don't worry too much about it in the beginning is like I need to get the perfect color all of these things you can perfect later you know just make a choice make a decision and just to keep moving you know that's because if not you're going to be philosophizing about color for hours so try not to do that secondary dye color so light color is going to be look for backgrounds for just like a whenever you want to have like white and then something that is a little bit darker than light then white so I'm going to actually use my second their color and just like go super light and like almost there you see like how like this is it's just like it's for those colors and sometimes when you want to differentiate a button or a background or or a forum do you need a greyish color something that is that is not white exactly so I'm actually using that's this chain same shade sorry this same hue I'm just going really to saturate it and all the way up in the light color you can do that or you can usually actually just juice the great and you're you you should be fine so anything around here you get and you can yet have multiple shades of this gray sometimes you you want to make again different differentiations of different states and stuff so you can create like for example one that is slide and one that is not as light so little bit darker just a little little drop of color there and there you go now we have a really cool system that I can start with this is my dark my primary secondary light light and lighter and those are my once then I have system colors you don't always have to create these it you only need them when you actually need them and and just like success info color like warning in danger let's actually just like create them really quickly I'm going to just like duplicate this guy and I'm going to go over here and what you say success surely you want to have like a grain we are like I don't know probably because of like lights like how I don't know green is associated with success with everything is good go continue so I usually use the green for for success messages send anything around here should be good you can go a little bit more yellowish if you go here or if you keep it it wanted to be a little bit bluer you can go over here and not too bright not too dark it's just something around here okay that's my success color let me go over here I need one that is warning and warning usually you want an orange color so something around here and around there call if you don't see a huge difference between these colors that means you are colorblind my friend that means you're colorblind I am color blind eye for me these two colors are almost the same so but other people they're not so I don't know probably ask color as a colorblind person that should be better at actually differentiating these two but it's really hard it's whenever you want to have something that it's like warning something's wrong actually use an icon not just only based in color use an icon use clear copy that says eight something is not right because color just using an orange color it's not enough because for people like me we need for me that looks green I know it's not because over here it's on the reddish color so I know it's not green but it looks green for me anyway cool so that's orange then that's forewarning let's do one for info and info I usually keep it on blue but like a look at it like a blue that it's around here and there you go isn't that it's not quite like a like a button it's it's more like eight let me tell you about something it's like a really soothing color like a blue concolor there's usually what I use for info things and warning we already did in danger danger for danger I mean right right it's a it's almost like no it's a no-brainer and don't go all the way like saturated right all the way to the corner like do something around here it's bright and it's not all the way to the right we're in the saturation level something around here should be good by the way for me red it's actually a soothing color for color line people red doesn't look like something is like odd for other people apparently jumps to your eyes and was like ah red for me it's like no just right anyway quote I've gotta stop talking about my call the color line is and apparently it's really coming colorblindness is really common amongst men and it's one in every five people are calling mine but they didn't even know there were colorblind I think I wouldn't even know if I were in a designer that I was color of light okay cool so we have our colors look at that how cool is that so now that we have colors and want to reuse him in different shapes and different stop probably a good strategy is to create graphic styles for your colors so I'm actually going to create yeah won't you do that so here on the chair styles I'm going to going to this I'm going to create an ensure style I'm going to create a palette this is okay I don't know if it's that's how you write palette but let's say yes and what to call it dark palette dark I'm going to copy this because I'm going to reuse it so this one is going to be called palette primary and see how I'm not calling it pink I'm not being very specific but about the color because those things can change so having something called primary it's better because like if you change the pink then your graphic style is not called pink it's just called primary the decision to make it pink was just a quick decision that we made but we do need a primary color anyway you get the idea so this one is going to be called palette / secondary and I don't know if you noticed but I'm you seeing palette / oh my god I have a hair that is going up my nose so annoying anyway sorry this is so I am able to actually create groups this is something that is pretty useful this is available whenever you're naming something that is going to be chaired like a textile or graphic style or a symbol using this latch on your name is convention will actually create groups anyway you probably already knew that whatever Pablo let's change the name of this one and this one is going to be light and this one is going to be lighter this is this is just how I'd name them but you can call them whatever you want this is going to be actually I'm going to call them system and so just so it's separated from the color palette from the brand colors so this is going to be called success this is going to be called warning so system slash want to copy this so I can use it warning this one is going to be called info that in danger okay quote so I had my colors look at that we're done with the colors and again don't overthink the colors it's okay you can change this later okay don't overthink where you're starting you just want to have the basic elements first so you can just move on and you don't so so when you're making your your actual I don't know your layout you're not really thinking about the colors you're thinking about the actual layout then you're thinking about the visual hierarchy and then and things that are more important later the colors you can change them later and actually fine-tune them so okay we have our colors how cool is that let's actually call it colors look at that so pretty now you can go a little bit crazy and actually like seeing that everything is really well aligned I usually use a system of eight pixels for everything so I'm going to go and use anama to actually create just a stack and I'm going to say there's 8 pixels between these elements I'm going to do the same with these guys I'm going to say there's 8 pixels I'll go think about using the outer layer plug-in from anima is the later if I want to say a it's actually 16 pixels it does the panning for me just awesome I just eight pixels so now I'm assistant point two one two three and now cool it's looking good and you want to get even fancier you could select them and then actually go a pixels in that now look at that how fancy is that okay cool so we have our colors now let's jump into typography so let me go over here and typography again going to be using this font called Plex this is a fund from IBM they just it's an open-source bond it's just a free font that IBM released and I want I've been wanting to use it and you can download it on github and it's a it looks like a really cool font for web projects and you can also you download for desktop once you download it you will see I'm going to go over here and just like show you what's up so it gives you the CSS all the documents guidelines once you if you actually want to use it go to the folder called fonts and then inside you're going to see mono sans-serif three different three different types or styles I don't know what you call him and we're going to be using sans for this one and then you go to desktop and then you change it to Mac and then look at all this different fonts here look at that we have different weights and it's great so it's great because you want to have different weights on your system at least one regular and one both or semi both depending on how you like it the difference between the the texts and you want to have like italics too so this is giving you all those options I think it's a great phone for that too so and then we're going to be using a perfect fourth skill I'm going to explain you about it in just a second and the perfect fourth scale gives you a one point three three for each each font that you create or that it goes up it's whatever the size of it multiplied white 1.33 and our base is going to be 16 pixels and we're going to be creating headings a paragraph in a link so okay let's go back to sketch and if if you want you to know just like go to type scale one search for type scale and then ya type - scale calm and this one actually gives you just a preview of how it could look like for example augmented Ford perfect Ford this is giving you just like a preview how I could look and can also give you a preview here of how your phone will look and you put via base of it so 16 pixels and then it will create a typographic scale on that base using a different scale so for example perfect 4th or major 3rd you can also use if you are hipster enough you can use golden ratio I find the golden ratio to be too much it's just like it goes from one size to the next one just like it jumps extraordinarily I don't know ridiculous so I want something that is not too much there's still some contrast between the different headings but it's not like riding your face so perfect for I found that really good it's it's a good skill you can I will say that augmented for it's actually pretty good too it's just like that gives you even more contrast between one heading in a different heading for this practice birthday fork which is 1.33 and this is going to give us this so let's go back over here and let's start just the typography let's put it there so over here or let's call it design typography system let's call it that and then here let's start with 16 already we're are at 16 and that's going to be my paragraph 1 my base 1 and then I'm going to duplicate this and I'm going to just go to 16 by so I use the asterisk to multiply what 1.33 right here on the size and now I have my age let's say it's an h4 and at this one I do the same actually before that you want to run the numbers you don't want to have like 1 21 point 28 as your size and 21 will be good so now I have 21 and I go over here to the size and it's 21 by with the Aster is 1.33 and then now we have 27.9 that sounds like it's 28 so let's change it to 28 then let's go up and now 28 by 1.33 there you go now this is 37 it's looking good it's going to be probably my age too then this my h1 is going to be 37 by 1.3 3 which is 50 49 and let's go all the way to 50 keep it cool or 49 whatever you want okay so we have 50 37 2821 and then all the way down to 16 so and that's it now if you want to you can change the style sorry the weight of it so I prefer if changing it to bold if it is a heading I like it to be bold you can do whatever you want but there's already really good contrast between one heading and the other because of the size but I like it to have really strong contrast like a really good hierarchy between this one and this one probably you you want this one to have a different way anyway do whatever you want we have this now let's actually create or think this one a one one that is a little bit smaller so this one will be 16 divided by 1.3 tree and this keeps me twelve so this is going to be my label and and that's it now let's actually start grading or textiles let me pause a little bit and see if your comments you added something on the comments well say computer lazy boy recliner mmm tintin tintin - you're not a call by menu do you just get tired with colors I wish it was just that but no I am really colorized there were two live preview artboard when editing symbol huh maybe a separate window for editing symbol can I get the answer wow you're insisting Satish you can preview your you just put another instance of your symbol next to the symbol you're creating that you're editing and then you'll see live the changes like I usually do that like on my symbol space I just insert an instance of the symbol next to wherever I'm actually editing the symbol and then I see life whenever I'm changing something to the symbol I see a life changing there so you can do that too Satish a man great job inspiration for Java Cheers hey Paolo a love poem love you too punch punch Peter Peter okay cool so let's continue to with doing this hopefully if you have any questions just like put in there could you share please okay cool happy Thanksgiving for you - you guys - okay so we have our system now I'm going to be able to use it I could probably create another one another one this one could be for jumbo sizes so 50 by 1.33 cool this is a 66.5 let's keep at 66 okay cool so now we have or or typography system or scale system let's start by naming this as textile so I'm going to add a textile with this one and this one is going to be P / black / [Music] why should I call it left there you go and that's it it's just that I want to create a system where have it in in different colors so not only black but also but also white and I also want it to be textiles do not allow me to have just one textile for for black paragraphs I need to have one that is left-aligned one this center-aligned and one that is right aligned so it's kind of annoying it's actually super annoying but you you get the idea this is how you do it so on something that I forgot to do is actually add the the line height so line height that that sketch gives you some sense is not enough so for example 16 here it's giving you by default 20 I want to have it my paragraphs at least my paragraphs to be 16 by 1.5 so now it's 24 so that's going to be my line height I just save it as and there you go and now I want to do the same with center so center line and now here I'm going to create a new textile and this one is going to be black and Center and I'm realizing what I was missing so I was missing the weight that's another thing do you need to do here for paragraph sometimes you want to have both paragraphs and since you want it to be just regular paragraph and you and again you want to always be the same so let me go back to my organized a class and I'm going to go over here black and then regular and then a slash Center then here it's going to be regular slash left I know this is you can do it the other way around you can be safe left and then regular it's actually do it that way I prefer that way first left and then regular and then over here first is Center and then at the end is regular and done okay cool so we have that that's my center one that is regular now I won one that is both this is really annoying I know so both so now I'm going to create a new textile and then at the end instead of regular I'm going to say both to remove this - there you go and I'm going to do the same with this one so this one is going to be let me just change it to set of regular I'm going to change the weight to both you can you'd probably use semi bolt apparently it looks like bolt is pretty bold here you change it okay you you you make a choice here Grandia textile and here left instead of it's going to be both know without the slash at the end and I'll slash at the end sorry there you go so now whenever I create a new textile lalla that one now I have the option to go center left and then both center bolt and regular left bolt or regular and let me organize my textiles it's kept that freakin slash okay cool so you get the idea right if you want to separate them and usually you only do this for paragraph texts the the headings unless you want your headings to have different weights you didn't do it and that's why I'm leaning the the weights until the last thing okay so but now let's call this brand new textile this is going to be labeled label oh my god what was the first black and left is that power saying yeah black and left and then let's do another one where's black and right and let's Center align it and create a new textile this is really really annoying when you're doing it the first time but it's it pastes up because later you just keep reusing this thing and you don't have to think about it anymore okay so this one is going to be my age for so it's h1 h2 h3 h4 so let's call it h for black left brand new textile H for black left and then sometimes I probably need Center so let's create a new textile black center hey Maddie a booty SEMA I know and this one is left-aligned right so now I have it here and boom you know this one is going to be h5 black left so woo line-height don't forget about line height so here this one should be 50 by whenever headings you want the line height to be a little bit smaller whenever the font is actually getting bigger you if you if you keep it at one point fine work before then the spacing between the text I don't know why but it looks like it's gigantic because of the size of the phone so you want to keep them a little bit tighter so for example this one that is 50 I want to multiply it by 1 point 1 by 1 point 1 and that gives me 55 that is going to be correct I'm going to the sing with this 37 51.2 37 by 1.2 there you go so it's 44 and then this one is going to be 28 by 1.2 - probably one point trick but anyway you get you make a decision after you see it and all these things you have to put it together and then make a decision now I need to be a little bit bigger a little smaller I'm just doing it right now because since I'm creating a system it's better to start the right way right away okay in this one is 28 I think 20 is too much so let's let's bring it out 225 actually 25 change it over here this one 25 and then change it over here your paragraphs yeah give them a little bit of more room to breathe in and so they can you can I don't know so you can read them but your headlines you want it to be a little bit tighter okay in and let me show you how it's going to look so you're ten the headlines this is a headline see how it looks really good with with that line height if I had used the one that it gives you by default it's just like there's so much space between them so that's that's why we're signing it up and you can even I keep it even make it a little bit tighter but let's keep it like that for now and okay we're ready to to keep doing this I know it's it's really annoying to just like do this thing right but it pays off later guys pace it really pays off so let's do this one create new textile h3 black left and then duplicate it and center it and I create a new textile and I just call it center there you go now this one is going to be hold on yeah and this one is H to drive me a textile H to black left and i duplicate it and I sent her it and I create a new textile I know this one is h1 crania textile h1 black left probably you didn't sign up for this right yours you're probably saying this is really boring Pavel what the hell are you doing I know but you gotta keep your stuff oh my god h1 black center you got it you got to do the boring stuff you know to have fun later you got to do the boring stuff first that's that's like baby okay cool so and this one I'm going to call it Jumba whatever you wanted it's just like a like a big-ass font and then sometimes you use so I'm going to use call it Jimbo and left black no first is black and then is left black there you go and then if I wanted to be center let's change the alignment and then chain the here to be centered there you go okay cool ah Maria put in Seema Ave Maria Puri Seema look at that now it's looking so pretty right look at that how cool is that guys are you guys proud of yourselves how proud of yourselves are you okay so paragraphs usually have a ton of crap that you need to you need to do I'm going to actually delete that one this one is Center yeah point to Center and I don't need this and I don't need this either I know that the dosa styles are there but I don't need to see them if you want to see them though you can just duplicate this and then change this to instead of left bold regular let bolt and the same with this and instead of Center both there you go now you have your your system complete boom let's change the spacing between them it's tributon Lenalee it's okay whatever strip ulam Lenalee yeah it's okay whatever there you go look at that it's looking it's looking pretty good right now you you probably saw only naming conventions that I was naming them Jimbo slash black in his Lodge bah bah bah bah bah that's because sometimes you want it to be why - because if you have a dark background you want to have text that roots on that dark background and usually you want your text to be white to have a better contrast so I'm not going to do it right away let me just you know what I should be doing it Who am I kidding I should be doing at least with these ones that the left aligned ones you know what I'm just going to change the color of them to white and I'm going to put this background a little bit darker so we see what's going on and then here each one I'm going to create a new textile new textile but this one instead of white black want to change it to white Lala went to copy this so I can just be there you go sing with this one create a new textile instead of black white and then remove this boom oh my god so much work it's gonna pay off my friends it's gonna pay off got to do the work no pain no gain I'm using the sayings from from a shitty team coach there you go okay it's really textile white there you go there you go that was easy right now we have or left the line at least four left align Center sorry left align white typography system there you go we have it it's ready to go we can we can do the center one later it's okay we will make those as we need them okay if we need an aged one that is not black but wide we can just create it okay for now we start with this okay we have our colors we have our typography system how pretty is this looking are you are you getting excited to start like creating crap I'm getting really excited to start creating time crap don't you actually use my my my thing left there you go I'm already using it look at that typography there you go okay so now let's jump to the next thing next thing is going to be buttons and buttons just going to create really basic buttons and I'm going to actually create a symbol for this just a basic button no icons nothing like that just like a primary secondary tertiary button and I'm going to use the colors as symbols as NIST so that's going to be fun let's go and do that and before do that let's take a pause and see the comments sketch together with caveman where are you from Pablo do you think it is the Berber Berber much love respect even even Richard - Richard - you sure - even I am from Mexico if it is a being a Latino it's I was privileged because my parents apply for for a visa when I was a young kid when I was a teenager so I was privileged in that my parents did that and they actually got a green card or whatever that was a long time ago when it was easier to get one so working over here trying to get over hearing work I seen it with all people and it's and there's some struggle just like trying to just like get to a place where they can where they can work legally so that is the first thing that is kind of well it's it's it's it's hard so I would say yes it is hard for that and but there are some ways to get to here there are some companies that give you like sponsorship and that there are some companies that are there's one that is called designers fund I think the center's fun fun yeah they have a program to actually bring people from other countries into the United States and designers from other countries and just like work with a company and they they help you with all that stuff so I would say that that yeah it's it's not easy but there are some ways so that is one thing another thing that makes it a little bit harder it's just obviously your accent and your well that you're probably coming from a different country it's your cultures is different from the United States culture so there's there's I don't know like a gap between a bridge that you have to cross to get to that place where you feel comfortable talking to other people and and and using all the lingo and like using all the lingo and product design and just like using the worst that other people also use so for me it was a little bit difficult to get to a place like but you only do it you only get to a place by crossing that bridge and just like just like plotting and just like going to it and it's just like pushing so so yeah and it's a Latino just like also I think it's kind of hard like right now like seeing how the climate is here in the States I don't know there's a you see a lot of the people in power the administration is just it it sounds like they don't want us to be here they don't they see us as I don't know like they calls rapists and criminals and and all this stuff they I don't have a lot of love for for us brown people so it's kind of hard on that it's been kind of tough you know to be in a country where I don't know where I don't know I don't know who are these people that looks like they kind of I don't know if they hate me or they just like don't want me here the one is here so it's it's kind of tough to go to work thinking about those things you know and and just like going to a party or going anywhere and thinking like is those people that voted for that person is supporting that person or those people here and are those people it's just like like not wanting me to be here so you start thinking about those things and it's kind of tough but it's but the hell the hell with that right and the thing is that I'm I just recently turned into an American citizen so I shouldn't be feeling like that right and following the American Dream so but for all of those that don't have that privilege that I have it I'm an American citizen and for for all those that I was in that position where I could lose my visa any time if someone didn't want me to be here they could just say like hey screw you get out of here a lot of people are in that position so they they don't get the privilege that I have to just like talk openly about those things that I feel and for sorry it's a little bit tough for me to talk all those things but it's it's hard it's hard to I feel for them and it's not easy but but it's all good because the sign it's it's I don't know for me it's I find the sign has I don't know that the coolest thing ever I and this community I love this community says it's it's a good escape it's a good place to be anyway I'm getting sentimental and this is actually putting me down let's just get back up okay hopefully I answer your question I just like ramble about my feelings and okay so anyone I said to say here's the link designer fun yeah there you go thank you thank you sue came from Africa I hear you met Nate yeah yeah cool but we're in this together my friend we're in this together my friends okay so screw the haters okay we're here together we we have the power to create in not just whatever we want we have the power to grade you as a designer you have this amazing superpower and use it use it for good okay so so yeah let's continue where it's a sign system my friends ah I'm from Pakistan I understand your feelings yeah yeah okay cool let's let's go back so now we are going to get into the fun stuff creating symbol so we're creating just a basic symbol with colors but the cool thing is we're actually going to use a color as a mist that cymbal so let's jump straight to it and what does a a button have is the rectangle in a text layer right how difficult how difficult it is to be a designer oh my god too many rectangles out of control okay so we have or we have this one and now let's put a text layer on top of it so primary about them let's call it primary and let's change it to white we already have this look at this apparently we don't have white Center we can create it great textile white center bolt there you go I didn't create us a white sand oh yeah on the white stuff I didn't create the center see this is where I needed it okay cool so uh there you go apparently she's the options here of my canvas this color is driving me insane I change it to something a little bit bluer there you go probably going to be better - yeah there you go okay so I'm going to say that it's sixteen pixels on the top and let's make it 16 pixels on the bottom one two and sixty pixels on the Left one two three four and now let's make this a little bit smaller that way 16 pixels all the way around and actually 24 on the sides and oh my god one two three four there you go now we have our primary button let's actually let's just start with this this is going to be or primary button or color what is called this background always be good with the naming conventions of your symbols because then your overrides are going to make more sense okay so here a new text layer you want to always have your your layers name correctly okay we have those too let's create a symbol create a symbol and it's call it I don't know UI slash button slash primary actually this remove the UI it's just cold mmm no I will need the UI ok UI / button / primary ok cool so now I double click on it and now we have our symbol here let's actually I'm going to create a symbol out of this color so I'm going to call it you i brand now actually going to call it palette and I'm going to call it brand / primary there you go now I have another symbol over here but to actually make this a little bit smaller just so it's it's it's a different size and then this one is going to be different do we I'm going to just like make it the size of the button so now we have our first color of or first symbol for colors and this is really important because now I can just create different i duplicate this one and I'm going to call this for example secondary and I can have a system of colors that I can use in symbols too as nested symbols which is pretty cool and you're going to see why in a minute so primary I'm going to use secondary actually to make the secondary a little bit lighter around there I'm going to change it everywhere and I'm going to go and make this what should this one be I want to say that is lighter so this one over here instead of secondary it's going to be lighter oops liked her and then over here I want to actually have one that is white I know that's talking about no sure style I'm just going to change it to white I think it's it's important to also have as part of your nested symbols a white color now another one that is dark once you change this dark palette dark a you go to look good let's go with the other one that I think it's so we had lighter and we have we need light just like we just like a gray like a light grey but not too light gray okay cool so we have this now we want to have different shapes for our buttons so what I can do is have um I'm going to actually create another symbol out of this so this is a symbol that is an instance of the color right so I'm going to actually call it color and I'm going to create another symbol on top of it so this is going to be UI button resources and it's going to be shape / 4 pixels no sharp there you go so now it create another one over here and you're going to think what the hell this is crazy what are you doing Pablo you're going crazy my friend you are going crazy but no this is going to make sense again I'm doing this again now now this is a symbol we're no symbol inside this but on this one I'm going to put another text that is going to be masking this so the first one I don't need to mask it because it's sharp but I want to create another instance of this and this one is going to be 8 pixels 8 pixels and that means that it's rounded for 8 pixels so I'm going to create another layer want to put over here and it's good my radius of it is going to be 8 and now I'm going to use this one as a mask to call it mask over here just right click mask you know we have a mass baby we have a mask I'm going to make this a little bit smaller because I don't need it to be that big I'm going to sing with this la way to make this apparently oh my god layer arranged run to pixel well that's going on what did I do okay command Z no I told you they were going to mistakes anyway let's keep it like that it's okay so we have our tape eight pixels let's do another one and this one is going to be four four pixels so four pixels this mask instead of eight pixel is going to be four pixel so it's it's really smooth and it's going to call it here my symbol is going to be called four pixels as you another one that is a hundred pixels there's like totally round so over here a hundred pixels let me just make this a little bit smaller so you can see what's going on so I have one that is sharp eight pixels four pixels and 100 pixels there you go so this one my mask is going to be a hundred pixels another way we have this this little shape and then over here this instance of this symbol I'm going to call it shape and and now we're ready someone was asking hey how can I see life when it make changes to it you can just insert here on the symbols page you can insert as an instance of the symbol and it's going to be fine so I'm going to go here symbols uibutton or to put primary what you put as an instance of this and now that I've put an instance of it see how now I'm able to change the shape of it they can be able to change the color of it see you too dark button you can change the secondary button primary button white you don't want to do white because that would be kind of crazy with white text probably when we can do another instance of let's not do that another instance of this to change it to to have also symbols as text but we're not gonna do that we're not does not get too complicated just don't do make that combination because it will not make sense but you see what happened here right I have one symbol so I first created this symbol that is my button and then inside that Cybill I could the the color I created a symbol out of the color and then it created a system of colors that I'm going to be able to use as nesting bowls but then I created another nested symbol that has the chase just for the shape in that way my primary button I'm able to have different shapes in different colors pretty cool hopefully you got you understood that cool that cool little trick is going to save you a lot of time now that I have a system I can just like reuse that symbol anywhere something to that I since this is Center I don't really need to do anything about this you can either keep it just like this so your alignment is out too and and and and your and it's always going to grow so it doesn't break and in that way look my symbol is always aligned to the center and for this instance for this kind of symbol you don't really need to do anything to the sizing imposition of it you could change the size of this - is this a to be the size of the the actual width of it but for me to be honest I don't think it needs to be that it doesn't make a difference it doesn't really make a difference and if it does living in the comments and tell me what the difference is because I want to learn okay cool I we have our button system ready let's insert it over here just so we have yeah we have our system of buttons and we have one that is a four eight pixels for sharp we have one that is four four four pixels one for 8 pixels and one for a hundred pixels petite - cool but change the I want my default to not be sharp but I want by the fall to be actually four pixels so my the fall is going to be always four pixels so over here I need to change it to this one shape sharp if I ever need a short button I will have it there okay it's looking good my friends look at that and what in an hour we have a system that we can pretty much use in any site we can just like any other stuff we can change the topography which I could just select it and then change the topography here to something else that Thai face to something else and we can just reuse it as long as we are using a perfect for type scale we can just reuse it which is pretty nice and then we need to change the I'm going to duplicate this one over here if we need to change the color of primary color a or client didn't like that pink that client did not like that pink you can just come back here and change it change it to blue a blue because corporate blue it sells more stuff people are read better clicking the blue ok so just change other and look at that it changed it everywhere else where I'm using that blue so pretty cool stuff right that's that's the beauty of using a system oh my god somebody I'm seeing let me just say nope good but that's does the beauty of using a system that's the beauty of keeping everything consistent that way you can just like come back and just change one thing and then it changes everywhere else okay we have we're almost we're almost there baby we're almost there I'm going to pray these this these are going to be less this jump in to actually create a new patterns and for navigation and some heroes and some cool stuff now we have the elements let's get into the cool stuff guys okay first thing a navigation let's create a hero and then we can create the navigation inside okay so we have our system let's just call it a style guide here on my patient style guide I'm going to create a new page and this one I'm going to call it patterns and patterns and I'm going to create let's start with desktop okay we're not going to be creating for responsive today does just keep it nice and quickly so I'm going to create a new artboard going to press a and then here in responsive web want to go desktop HD which is zoom out and now we have a forty 14 1440 pixels wide artboard and that should be enough to have a desktop size and the first thing that i want to do is actually create layout grid and for this one we're going to use the layout grid of 1200 pixels okay and it's just like the default on other CSS frameworks like bootstrap which is like 1200 pixels that the widest you can go other than full width so I'm going to go to view and then obviously you want to select your artboard view canvas layout settings and then here apparently already have 200 pixels going to Center this and then here the cool thing and they are saying is you put the total width of it and then you say how many columns right now I'm keeping at 12 columns and then I want my daughter to be the default is 30 pixels on bootstrap but I like to keep it again on an 8 pixel grid so I change it to 32 pixels and now it keeps my gutter at 32 pixels and my column width it's not an 8 pixel grid yet though so but I prefer my gutter to be I don't know I prefer my gutter to be less the spacing between the elements to be right okay in named pixel grid okay cool so we are ready I press ok and now I have a layer grid and I can start putting crap on top of it so we are going to be designing hero so hero these are the heroes that I'm going to be designing let me just take a note or here no I didn't want to create a rectangle it's a great note there you go so what's great wrong with that has a mobile one it has a mobile life soon in pretty cool mobile one has the content center one has a center content plus an image in the background and then a floating box so I actually created some really quick let me just crop this thing there you go I'm going to copy it I'm going to put it over here my patterns just to see what we're going to be making so we have navigation and then some copy some copy like a headline some copy and a CTA or button and then just like giant ass phone or an iPad and then the same here but with a phone same here but centered weird CTA with a button here and then over here one that has a full width image but we have a box that is floating on top of that so those are the heroes that we're creating today anyway the cool thing is that now that we have a system this is going to be fairly easy to create so first thing let's hit this colored this this is the headline you guys helped me put in the comments what should be the copy of this thing I'm going to leave it to you and I'm just going to copy paste whatever I'll copy and we need a headline copy and then we need a tagline like the stuff that is after the headline and we we need it now my friends so what is this product what are we selling just like come up with something come on you guys got it so we have this and I'm realizing that I actually don't I want another version of my of my a street that is not bold that I wanted to be to be able to have the the contrast of size between these two but one one that where the size is good but the text shouldn't be bold so I'm actually going to create a new version of this that is regular and this is going to be called a street let's keep it on a street great a new textile black left and regular pagon now the other one should be called both so now I have to go back to h3 this one is called both want to keep it consistent and with this keep it consistent there you go okay cool so h3 has two versions one that is two weights one that is both in one that is regular okay that's 24 let's keep it around 16 let's see if you have some comments on what should be RMIT a policeman I love that a very elusive shoe designer school line this is that for a lot of all these ideas okay I'm going to use a variety Sigma as part of making brands beautiful making brands beautiful beautiful okay thank you guys for your ideas I'm going to go back for more ideas in a bit now the cool thing about having a grid is that we can use the grid to just like say how many columns is this going to be like six columns five columns let's keep it at six columns this is I really love this I love this copy making brands super beautiful pretty there you go it's just like really bein really bad copy we did not care about the copy and then this is headline let's copy some oh stop shoe designers coat shoot the center scope let's find about it let's find all about it about it with this app I don't know we're just making up stuff my friends we're just making up stuff it's okay cuz you're just practicing okay okay 16 pixels here this is looking good let's let's insert well or buttons UI button primary let's put it right here start learning let's say that is a learning site I don't know why let's say this learning site let's keep it 24 pixels here it's looking good let's make it a little bit bigger let's make it at three columns hey you guys it looks like you're eat click here come on ok so what should this be called my friends will be asked Alex Columbus here there's a revision there are already revisions here I am buddy a booty see map and apparently also bellissima has it's an accent it's I mean if want to be Ave Maria Polly see map making brands pretty shoot the same ska let's find all about it with this app with this course yeah and then let's call it sketch together why not sketch together the sketch - I don't know if you saw if you have ever seen the old the old my old videos had a jingle in the beginning and the jingle was sketch together I want to go back to that jingle I think we need that jingle back ok we have or logo it just like the font it just use the H for for it for the logo and over here is just a typographic logo let's put it up courses courses and let's do something else I don't know about and then sue another one it says contact the typical links that you find in navigation right zippy black left regular there you go now it's looking good let's let's do something with another type of another type of button and this one is going to be let's let's say that we create a we use a secondary button here let's see how it looks I don't think it's going to look that good but let's see if it looks good shape and then 100 pixels and let's make it a little bit smaller and sometimes you don't need this but it's good practice to have another action here probably could be just a log in action or or like sign up or something have another CTA over here there you go and actually going to make it a little bit smaller there you go now I'm going to use auto layout to keep the distance between these elements consistent so I'm going to use auto layout and then here I'm going to go to 48 pixels and now as 48 pixels between all these elements and I really like it I'm going to align to the left to right sorry and let's see if it's yeah 8 pixels there you go there you go guys we have our navigation it's pretty pretty pretty dope my friends pretty pretty cool let's create a symbol out of this actually I'm going to create a symbol because we're going to be reusing this a lot so it's a good idea to actually create a simple out of this I'm going to create a rectangle here it's what is the distance between these elements it's 18 pixels should be 16 all these guys 16 pixels and then 1 2 3 now 16 pixels and 60 pixels let's change this to white and I think we have white and inner palate we should there you go and that's it now let's create a symbol out of this and I'm going to create a symbol uy nav top nav bar there you go now we have a symbol that we can reuse if we change it in one place it would change everywhere else and it's not the best idea to have the full width of your rectangle to be that because probably you wanted to be able to to change the sizes of it there's no way to have a max width that's the only bad thing about this anyway let's just keep it at that there's not worry about it right now and let's start let's let's put sorry let's put a mobile a mobile phone here okay so I'm going to create a non rectangle here it's going to be representing my background and it's white I'm just going to turn it white and then I'm going to change the background all of the actual airport to just uh I don't know just like crazy just so I see where the actual hero stops and there you go let's actually add some oh my god I see what the padding of all this stuff is oh my god mistakes making mistakes I'm going to group this I'm going to call it content and let's see the spacing here is 144 and I think 144 it should be a multiple of eight I think it is let's see let's let's see if Google what Google says 144 divided by eight it's 18 yes it is a multiple of eight so and then over here we want to have the same padding so let's bring it a little closer and 144 there you go pretty dope now let's actually put a mobile phone here so for this you could download something but I don't know I'm feeling I'm feeling good about this let's actually create one why not it's actually ain't going to iPhone iPhone 8 not the iPhone X we're not deciding that one okay so I just have I just want a template I just want from eight front from and there you go so I'm going to copy this copy this image and I'm going to go over here and let's just create it let's cut fun creating this it's so easy we always like like download it from YouTube and we want to have someone else do this for us but once you actually make it and just make something simple you're going to realize that it's not that hard it's just like really simple shapes so I'm going to go ahead and pop pop pop there you go just a rectangle and probably want to put a border so I can see what the hell is going on I'm going to remove the fill and there you go let's make it a little bit bigger I'm using command and then the arrow keys to make smaller and bigger there you go now let's change the radius of it to pretty big pretty big radius look at that we're already almost there we're almost there baby now circle here it just doesn't have to be perfect you know just using it for your own it's it's even better if it's not perfect because then then it's different it's different than everyone else's it's yours right and I don't know it's always good to to put the work into it I know we I could have just downloaded something from the internet and not just like worry about this but it's always good to put into practice what what you do design you know you're we are designers we are creators why not create this from scratch okay I'm done justifying justifying me doing this I'm done you get it okay let's remove the filter we know what the hell's going on okay almost there my computer is it's not liking this my computer is getting hot it's just I don't know it's not really liking it okay I think we're ready we are ready we are ready let's remove the border from it look at that how difficult was that nothing it was like that like dog I tell you okay so um let's put it this all the way to the back let's add a fill to this is that a great fill and remove the border all these probably I want them to be actually less use or or system colors or palette let's use the light one there you go now we're even using our colors how cool are we let's use this one palette dark and then I'm going to duplicate this and and I'm going to change it no share style to use a different color okay so it should be around there how many pixels is this I think it's one pixel let's give it to pixels so let's make this there you go my friends we did it we did it you can delete that and now it's all vector we haven't that's all you need so you need when you do mock-ups Oh make it more realistic and all that you don't really need that you don't need that it's it's okay they care about this what's in here that's the important stuff here it's just a representation of whatever mobile they're using right and you could even remove all the stuff and just like something that just telling you a this works on a phone and that's it that's all people need okay so now let's add some effects just to keep it keep it actually pretty cool to give it a little bit volume so I'm going to add an inner shadow what to say that is zero here and I'm going to add some blur to it just to make it a little bit those rounded edges and again this is optional you don't have to do this you want to keep it flat you can just keep it flat I like to give a little bit of I don't know a little bit of volume just again it just creates the illusion of it having that little bit of volume right okay and actually five pixels for pixels for pixels just enough and then these are good enough and let's call this screen just in case we ever need to add something to our screen we're gonna add it later okay now let's call this camera sensors and this is my home button I am really I need to name this everything it if I don't do it I feel really bad later it's just like it gives me anxiety if I don't name my my name might stop the right way and apparently I'm missing something here oh yeah this is a border the Border Patrol there you go this is probably too dark too dark so let's use something else or let's use the light one there you go and this one let's use just the darker color there you go okay we have a phone my friend we have a phone and now we can reuse it as much as we want we can even create a symbol out of this and just replace the image inside it let's just keep it as this for now so let's put this lock so we don't lose or or I don't know its proportions so we have or or little thing look at that let me turn this off so we see what's going on okay it's looking hit it's looking pretty good my friend it's looking pretty good oh damn like we even make it made it the size of three columns is that destiny is that just what it was oh my god we made a perfect 268 we did it just this was pure chance pure chance we did it the exact size of three columns that is unprecedented are you recording this okay cool so we have or first here or superhero you you could play around with this like make it probably give it a little bit more space seeing probably these two you want to to align them and then make this a little bit bigger that way it is like that it all depends on what you want to do also let's actually add a little bit of shadow to these groups you can add to the group the shadow or you can add to the body layer I'm going to just add it to the group actually you know what it's bad practice to add it to a group because if you add it to a group then it that shadow is not exported when you're exported hmm now I'm going to keep it to the chat channel to the group that way I can just change it later and I'm going to make it a little bit over here really soft really soft that shadow and then also here only a passage of it I'm going to go all the way down to 110 percent now let's turn this up see it's just a little bit like it's a little bit really soft light on top of it and it keeps you this but sense the volume that is like floating on top of of a background okay Ave Maria pari SEMA indeed Ave Maria please SEMA making brands pretty making mastery as such bad copy I love it okay let's that let's continue so the next one is going to be a hero where this thing is just like giant let's see if we can do it let's see if we can use this same thing and just with a giant ass phone so I'm going to what should we do what do we do what do we do so I don't know I know what we're going to do we're going to use the transform tool but to use a transform tool you have to ungroup I know this is going to sound really crazy but this is how you do it you ungroup no oh yeah but you need to ungroup this one too now that everything has been ungrouped now I can use this one if you don't have it already here just go right click here customize toolbar and go find it it's somewhere here transform tool so and it's going to look like this this allows you to actually create perspective you didn't know you could do perspective huh you didn't know you could do perspective on hold on am i transforming yeah there you go so now you can do stuff like this oh my God look at that this is going to get a little bit crazy oh my god look at this this is not not that great have fun we're having fun that's that's part of it okay Oh any press command why do you do this it allows you to just do that oh my god okay that's that's what happens that's what I don't like about the transform tool because if you transform it if you don't like it you cannot go back you have to go back all the way here and then start transforming again because it will not allow you to just like keep transforming coming back later and then start transforming again I'm not really liking this idea of the transform of my friends uncommon being too committed anyway we learned the transform tool don't use it still use Photoshop for this stuff this we felt I fell you my friends I fell you and I'm a chain I'm not going to do that that that was crazy using transform tool here it's crazy so what we're going to do is just just keep it like this just make it bigger just make it bigger like this and we're going to crop it with this we're going to use this as a mask the background and now it masks the whole thing now these two things I'm going to actually match them so these two things yeah there you go now we have or zoomed in version of it it's not with the perspective because doing perspective here is going to be too crazy probably if I wanted to look like an iPad I could probably make it look just keep it like that cool we have two heroes let's move on to the next one the next one is going to be center center align and then we're going to do one that is has a content floating let's take a break and see what's up in the comments what are you guys what are you guys saying I've our antenna because this viscous in the zucchini I mean because some of those it the Border Patrol the mobile background-color little annoying button escolares trick was still didn't really good yes okay is the best way to transfer on the crazy looking patterns such as acute angles for instance to CSS I don't know man I actually don't know I I don't know I'm sorry leo that that's a question for our developer show hi okay okay so oh my god friends thank you for being here it let me take a break too to tell you that I really appreciate your being here let's continue doing this let's do a couple of Heroes more and then jump into these things it's going to be quick okay but light and let's just duplicate this thing going to get rid of this background oops sorry this this group I don't need this thing anymore and I don't want this to be a mask anymore so I'm going to ungroup but it's going to call it background and now we want this to be centered so we're doing this one we're going to do this one with everything the content is centered okay so let's uh this we already have this one h1 black Center look at that easy peasy black center Center both well we need one that is Center regular so create a new text up I told you we're going to be doing new textiles while we actually design it there you go then this doesn't need to be centered we just Center the hell out of this thing this thing not doesn't need to be a group anymore look at that so cool guys how easy was that that's a cool thing about having a system once you have a system then it's really easy to start iterating on these things just like hey let's do a different combination and just like let's try this our type of text let's try this our style and it allows you to do this kind of things it's a this cool thing about starting with a system because having a system will allow you to do these things okay let's get a little bit crazy with this let's what if we have a couple of I don't know like a couple of mobile phones that are rotated 45 degrees why not why not I tell you now actually instead of 45 degrees let's say 30 degrees 30 degrees and this one is like around here this one is around here it's not it's not the prettiest so we're not making Brandt's pretty what are you doing then let's do something around here are you having fun are you entertained okay something happened with that spacing that's basing it's not correct that's not what I was expecting okay let's do a zoom ask again let's see how it looks with a mask and put it all the way to the back and it's looking cool right I don't know imagine this with actual I don't know with actually good looking designs here it could look pretty cool around there yeah there you go yeah I think we've seen this kind of design where is like crazy rotation on the on them on the mock-ups this is not the best play around with it but this gives you an idea that not everything has to be flat you can play around with the angles and there was rotation as long as didn't make sense in its own brand got a little bit crazy went up okay cool so I think this one is a little bit too high there you go and just to make it a little bit uh so it looks a little bit better what if we use the craft plugin so I'm going to go to manage plugins and I'm going to go to craft craft craft craft craft graph I'm going to turn it on and now that it's turned on now I can use the content Janerio thing so going to go over here custom photos and I'm going to go unsplash I don't know City photos I don't know why there you go yeah it's looking cool right let's do this thing here let's replace all these photos with CD photos CD photos now my designs look like not too bad that's actually pretty dope pretty tow pretty dope there's a beauty of using the crap plugin for this kind of stuff okay cool so we're ready this is looking good we have our heroes we have another one with a floating box this is I don't know have you ever seen this kind of design in all our other places it's actually pretty cool where they use a big image in the background but sometimes the image in the background it doesn't work great for any type of text so you want to have something that separates the text from the background and sometimes it can be just an overlay let's actually do the overlay here it could be an overlay or it can be I don't know make many different things you want to have a good contrast between the content text and the image so sometimes the image just in the text work together perfectly you don't have to do anything about it but most of the times you have to do something so let's actually try it right now so first thing I'm going to change this to white so Asia white left finally we need Center so H white create new textile center once you change the the color of this to just a darker background so we can see what the hell is going on I want to go over here to my symbol good thing is that on my symbol just delete this return over here there you go I'm going to actually need another instance of the top nut bar where the top nut bar is dark it works for dark so I'm going to do the same here and change this h3 instead of black white left and then here all these instead of black let's change it to white left regular now we have this one top nut bar that is dark go back to my patterns and I can change this to this one it now it looks great power of symbols okay now let's change this one also to white I don't think okay white left but Media Center so let's create a new text op that is Center there you go and we need it to be regular so cracking your textile center and I need to go to organize my textiles so this one should be called Center both left bowls there you go be consistent always consistent with those kind of things my friend now now it's looking good now I'm going to I'm ready to actually make it put an image of this so I'm going to go back here and on splash and I'm going to do the same with city just a city photo oh it has to be a layer so I was selecting a group that's why it didn't work there you go so it looks beautiful and everything about my text see how I cannot read the text perfectly that's because the some of the in the photo some of the elements are light and since my font my font color is white and it's not enough contrast separating the color of the sort sorry separating the text with the photo so many things that you could do one thing is adding a shadow to all these elements I can add a channel to it again probably to the whole group I can add a shadow just see how it looks and now it's looking a little bit better it's 50% shadow another thing that I can do is an add an overlay and this is a cool trick that will guarantee you that whatever photo you put in on top of I'm behind is the text is going to be readable so here on the fills of this rectangle to ungroup it this rectangle right now it only has an image right turn it on enough I want to put an overlay on top of it just going to add an a fill I'm going to put it solid you can do a gradient or whatever I'm going to do a solid one and then this one is going to be black but the black instead of a hundred percent opacity I'm going to go all the way down to 50 percent opacity and now you see you can still see the image but my text is readable and it will always be readable regardless of the image because it's dark enough that the text is going to be the text is going to be separated enough from the image that's 50 percent probably is too dark so you can play around probably 40 percent is enough I'm going to keep it up 50 percent because I want to have that contrast just good enough just good and let's test it and with a different image so I'm just going to duplicate this and see now I go back over here to craft and I do another photo of the city whatever photo and it's going to look fine because I have that overlay I do in a different photo and it looks good whatever it is even if the photo is slight my text is going to be readable so that's that's a good trick always you want to have contrast but to achieve contrast sometimes you have to use different I don't know different tricks so that's one of those just using an overlay so hopefully that helped you so now we have or are not here already how cool is that did our system is looking pretty cool pretty cool ok let's say let's go to another version of this another hero version another one with an actual that we don't need an overlay but we didn't put a square on it so I'm going to go over here I'm going to actually duplicate this one all the way here when to delete this thing I don't need this to be a group and I don't need this to be a mask there you go so now I want this to be left aligned and I want an image here and image that's my accent and sorry image image I don't know how to say it if I put an image it's on on the background of this let's say again no let's keep it consistent with a city see it's not working right my text is not readable this is not cool so what do is actually use a rectangle why not let's bring back or or think here and why not let's put a rectangle here and let's make it actually on one more column and now this thing let's Center it the spacing is fifty let's keep it yeah fifty should be good it should be 48 but anyway let's keep it a fifty right now fifty and then we can make this a little bit smaller how cool is that I could change the photo of this to whatever I want let's see you two I don't know whatever another city it's looking good this is looking good so now the only problem that I'm seeing is that now my navigation is actually unreadable so I can get to a plate right now that actually looks good there I can change it to the one that is light and it works with this one but you want to make sure that whatever the image whatever the size of the are port is going to look fine so I would add an overlay on this one but a a gradient overlay on my image that just goes from here all the way here so all my fill go to add another overlay and this one is going to be going to move it here just like like this just like this and then here I'm going to both colors have to be black both colors have to be black but one of them this one the opacity of this one should be zero change it to zero and now you see how it separates it it makes your header navigation to always be separated from the background and you can make it a little bit probably instead of 50% it can be 40% here the passing of this one and 40% should be enough there you go how cool is that yeah let's try it with a different photo let's see if it works with a different photo this is if it breaks with a different photo you know that you have to change that it actually even looks even better sorry different one okay see now it's designed to break so you want to make sure that it works with that one so if you want to make make sure that it works with that one probably bring the opacity of this side to 50% 50% now it's working you can make this a little bit softer a little bit bigger so it blends even the blends quit the background a little bit more and it's not a stark is that the grain is not looking right away just like the softer right look at that softer smoother subtle and your menus options are readable perfect okay so I actually don't like that photo so I'm going to go ahead and chain you to a different photo there you go we got the same photos before cool I hope you like that trick it's it's pretty cool usually I like to have these kind of boxes when the photo is actually like a face or a person or something that is going on the action is over here so then you want to have something that separates the back row from the image like that right now and in this photo it doesn't really make sense to use this style you want to probably have a face over here or something that is going on and then you want to use this style but this is just for practice so it's okay okay we have or heroes let's move on to content content like blocks of content that you're going to put on your landing page before we move on let me just open google chrome to see that's your your hero thanks root is nuts are on the grid is that okay to break rule sometimes yes break the rules and probably what you do want to keep consistent is your spacing system a lot going on a lot yes so the transformation puzzle in sketch yeah so they're actually if you're using a CSS framework probably inside that diff there will be some columns inside that width no actually no what the hell am I saying no just keep your panning consistent there I use 50 I should have not used 50 it should have been 48 or 56 because I want to keep my myspace inconsistent so I chewed up kept it at a multiple of eight so but yes break the rules when it makes sense to break the rules just like try not to break all the rules so like for example there I should have followed an 8 pixel grid that should have been the only guideline or the only rule that it follow and then from there okay let's break the rules a little bit here okay hopefully that helped but I want to know more about spacing between h2 and paragraphs how do you how do you do that the h2 and paragraphs well we're gonna get into that actually we're gonna get into the content and we're gonna practice that my Matias Mathias hello you got the pronunciation right haha oh that's great I'm glad cool okay so let's move on back to this it's actually good here sketch together so whenever I open this we see sketch together how many people do we have here yeah doesn't tell me 83 people watching well that's super cool almost two hours guys thank you for being here again I cannot be thankful enough Thanksgiving gotta be thankful okay let's go back to the content is this gonna be fun this is gonna be super fun okay we're gonna create all these fun things fun patterns so I'm going to actually duplicate this just so I have it and I'm going to just just crop this so I have this and only this crap it there you go then here one heroes I'm just going to crop the heroes out of the the rest there you go so our heroes are here you are mahi [Music] and you are my friend what am I saying okay cool so let's make this a little bit smaller just so it said the size of a block and again you want to keep your spacing consistent so we're gonna get into that a little bit later so we have one that has an image like full width and full like half of the div half of the container is an image so that's going to be this one and then we have content on the left so let's go ahead and do that it's going to get rid of this and let's say 800 pixels is the height of this let's make this it's actually I'm going to actually do this I'm going to start putting all my patterns here okay so the first one is going to be 800 pixels I'm going to duplicate this one I'm going to put it all the way to the center there you go and I'm going to put an image on it again a CD image okay looking good and then on this one I could there are two ways that you can do this you could Center it to the container of this or you could keep it just like this like the size of this I like to have a little bit more padding here so I'm actually instead of six columns I can make it five colors so here I'm going to actually pin this way to pin this and actually no I don't need this and I'm going to make it a little bit smaller there you go and then I'm going to change this instead of h2 I'm going to change it to h2 this is sorry instead of h1 interchange to h2 there you go and then this one is going to be I'm going to add left regular I'm going to actually add some content from here I don't know headlines article yeah let's let's go to cooking article why cooking article and then all the way I'm going to delete this oh I hate it when oh my god when sketch does this I don't know why you do this sketch but just fix this anyway cool so we have some content I'm sure it going to even make it a little bit smaller this content usually you want your content to dictate the design it shouldn't be the other way around but here we're just learning so it's okay okay so we have this is looking good right look at that so we have some content one two so right now I'm keeping the spacing between these two let's turn this off 16 pixels it's you can make it again I'm using an 8 pixel a system of spacing so everything is a pixel so here is a pixel you can make it 16 pixels that should be good too let's add a call to action but this call to action is not going to be a button let's make it a link and that's something that we actually add it to our style guide so I'm going to just go ahead and delete this and just going to put learn more learn more and I'm going to use my primary color for this a primary color where is my primary color okay don't you just I have my primary color from palette palette primary and I should probably add it here to my document colors there you go now that it's in my document colors now I can apply this to this one there you go and I can barely see the color the difference between these two can you actually see it I should probably make it a little bit more obvious there you go no actually use my primary color my brand color there you go and now I'm going to use both say my bowl and I'm going to create a new and in textile and this is going to be linked to call it link left there you go learn more and let's keep the spacing between these two 32 group it Center it and boom easy easy peasy how cool is that look looks beautiful let's change the fire I didn't like this for different fun I do like the photo but I want something in us know oh I need to put fun I love that look at that looks so clean right it goes well with the colors okay cool so let's move on to the next thing obviously you can do also another version of this where this one is actually the opposite where the image is on the left and your content is on the right so if you want to keep your pattern there you can totally do that let's turn on the this guys and let's say that this one is over here there you go how cool is that okay cool so we have two there are first patterns it's called this content is called content change the fun of this one so it's different too and let's call these two layers pick I'm using the plug-in call rename it and then that way you can remain multiple layers at the same time I'm going to group this and this is going to be I don't know photo right you call it whatever you want this one is going to be photo black there you go now let's move on to the next thing the next thing is going to be a floating photo in a floating container a container that has some text something like this too so let's go ahead and actually go to duplicate this and let's try to use or grid this is probably one of those places where we have to break our grid a little bit so but let's try to use the grid though so here I'm going to this spacing is 8 pixels so I'm going to say that this is how many columns that this photo is probably I don't know that is Sadie's orchard 8 columns 8 columns and I want this to be floating here so my container on top of it is going to be around this this size yeah this size let's add a shadow' to it really soft shadow really really soft really nice and let's move this behind that look at that how pretty how cool is that I'm sorry got excited too excited got too excited my friends let's see the spacing between these two there you go no there you go let's make this a little bit smaller now the spacing between these two let's Center it it's pretty dope pretty put it up let's make it six fifty six one two three four there you go this one should be out to Ave Maria bellissima indeed indeed look at that that's pretty dope right if you keep saying that it's everything's dope then nothing is dope right but I would say that this time it is dope okay cool so that's a that's another container that's another pattern and it's called this floating weird floating floating floating container I don't obviously you name it whatever you want that we are inventing these things here look at that it looks super cool right let's go ahead and do another one with a mobile phone and then some features features here on the left and features on the right okay so let's go ahead and copy this guide copy thank you let's go back to our patterns page or patterns art book let's turn on this little guy that's going to actually duplicate this I don't need to but I like it don't need this need this I didn't need anything apparently we can Center this h2 black Center let's Center it to the whole page probably it should be the size of letters photos in yusei's and then windows there you go okay Center to this let's make it a little bit now let's paste or fun phone phone and then Center it and then the phone could be probably a little bit bigger let's let's make it the size of this of four columns so it should be three hundred sixty eight columns pixels there you go look at that sorry sorry you started to see what's going on here right how cool is this and then let's turn this up apparently this Art Center I didn't want to be part of the group yeah so this is Center it's a run to pixel so think 32 and then over here 32 perfect perfect okay cool so now let's start adding some text here so to add text let's use craft layout to again title and then copy then the copy is going to be paragraph paragraph black left the line regular and then this one is going to be probably could be an h3 black left bold there you go now let's use the plug-in craft on type headline and then let's change it change to astronomy yeah why not then here let me just copy some of the content from here just some of the copy yeah whatever and then over here oh my god just some copy let's make it the size of the columns so these should all be 268 I think 268 let's try 368 let's see how it looks with 368 it's looking good I like it so that's one feature let's see the spacing between these two should be eight pixels there you go starting to look good this is one feature let's add an icon to it and for this icon for icons I'm going to actually use an art plug-in that I really like that it's called material so I'm going to go to manage plugins and I'm going to turn it on and I think it's a sketch material here or sketch material sketch material whenever I'm now using a plug-in I just turn it off because it I don't know like I get paranoid that it might be taking some memory out of some performance issues so I turn them off and then when I need them I just turn them on again so it's gets material and then this is kiss material has something that is pretty pretty cool and it's uh you can add icons you add icons my friend and it has the material icons here in the when you insert them it inserts them as symbols so let's actually do camera camera icon why not this one it's just like and I think you can change the color of it too I think let's say that it changes too hmm that one why not that one whoa what happened there no they just put it here what is going on there's a bug let's put it here there you go something weird was going on there to cut this put it over here and I'm sorry I'm just making things more a little more difficult right okay cool so now we have an icon that's uh let's go over here and you can change the icons on these let's do the same command shift a I it's I had yeah I don't know let's add this icon and let's put over here you know I wanted black icon apparently I'm sorry I know I'm being annoying with all this stuff yo what the hell oh my god I'm sorry guys I don't know what's going on okay there you go it removed it as an icon I don't know what happened sorry it's a symbol okay so we have our features here okay let's see the spacing between these elements all these elements I don't know why there's so many groups oh my god this turned into a symbol detachment symbol I don't know what happened there something happened and it turned this into a symbol and that's why it was creating so such crazy things before now it's this is not a symbol my friend this detached from symbol I don't know what happened my friends I'm sorry about that that's why it was it was all so weird okay there was no bug it was just like something happened that it created it put that text inside a symbol and made it crazy anyway cool so now we have this and tintin tintin tintin and this is simple yes no this is not a symbol oh it's so crazy what happened it never had happened to me okay cool we have all this stuff we have one we have another one this is just a template so it doesn't have to be perfect we don't have to have the perfect content they'll just keep or distances consistent let's enter this - I'm sorry for all the distractions there you go look at that look at that let's see it without that probably the spacing here could be a little bit it could be a little bit smaller so probably play around with it probably this image could be a little bit smaller or your text layers could be instead of four columns they could be three columns so play around with it and you make it whatever you think it's better well whatever looks better for you I'm going to keep it just as before it might be a little bit too tight here see how the spacing here is too close to them all to the phone but play around with it and see what makes sense to you okay so that's one pattern and it's called this mobile feature features mobile features and let's move on to the next thing next thing is going to be cards that's going to be easy I'm not going to do this one okay last one is going to be cards and and it's going to be fun once you actually duplicate this one and going to keep the same thing and on the cards I'm going to use a different color I'm going to use the one that is lighter there you go and then going to remove all this stuff I don't need this all of this stuff and probably I do need this content but instead of H Street I'm going to use H for black left and I'm going to keep this content and it's 8 pixels between them and I'm going to turn on this thing again and I'm going to start creating crap so first thing is an image it's going to be my image container let's make it a little bit darker so we can see what the hell is going on and let's make them these a little bit smaller too so there's the size of the container these are 268 268 everything is 268 let's keep 16 pixels between the image and the content and probably we want to add another text layer here another one that is learned more so let's go - Oh probably oh yeah no not jumbo link like there you go this one is a link probably 24 pixels 24 pixels between the content and this should be good and and here we have this is one way of doing cards which are not really cards because they don't have a background color they're more like content I don't know like content containers you know so this one is one container and then I can duplicate it duplicated duplicated you know we have something there and all these could be in different images let's just go ahead and change them to cities you know what happened all has to be photos I'm sorry there you go it's not looking back not looking back at all so these elements from this what is this spacing it should be around probably eighty pixels and then this and this should be say that is so say that it's 120 so I'm 20 here and 120 here there you go 120 here and 120 here and I'm actually going to change this back to white so I'm going to actually add it graining share style white palette wait wait there you go cool so we have one version of cards let's create another version where that can the content of the cars actually have a background so what you call this columns for colors for columns and I'm going to create a new one and this one I will use a different palette the one that is lighter and then I'm going to actually delete all of this content I don't need all of these guys I'm going to create another version of this so I'm going to put another rectangle it just like grabs the whole thing I'm going to change this to pallet white and then so poly white and then with a shadow it's not going to create an inter stop white plus shadow and then I'm going to add four pixels as my corner radius I'm going to bring it behind my content I'm going to make it a mask I want to make it container I'm going to turn this into a mask I don't know why you have so many groups stop grouping stop grouping yourself this is image and then these are group because this is a mask there you go you know you and I turn it into a mask because that way I have around the corner and then it also grabs my image here so that is one way to do it another way to do it could have been that I applied that corner radius to the container of the image to this thing but this is one way of doing it you do it whatever whatever you want to do you do it my foot okay so I'm going to make this a little bit have 16 pixels of the panning here I'm going to use the remember we had another one that was 12 pixels let's see how it will look with the one that is label left it's a little bit better so let's actually use that one no it's too small too small let's keep it 16 pixels let's see how it looks 16 pixels yeah let's keep it 16 pixels let's change the copy of this it's always like it's always this thing right where even your copy you want your copy to be perfect and there's there's a visual aspect to how the copy looks to and how the words fill a container so sometimes it's not just what it actually says but like the worst how you put them together in a sentence so they look good in a container it's so weird like right now just made a change that obviously doesn't make any sense but it's just flat look good on the container there's police into the eye and in it there's nothing wrong with it being pleasing to the eye and for you to to be looking for that and and it's it's something that sometimes we miss you know that we totally miss about adding those kind of elements to or to towards a sign so it's one thing but obviously the most important thing is that it has to be something that is it actually makes sense when you read it so make sense first and then try to tweak it so it also makes sense visually okay so we have a cart and we have a card let's call it card here and I can duplicate this on my grid and there you go now we have four four carts and my grid and our MIT appellee Seema it's looking awesome I really have this let's let's make the app now now that they have a container probably the spacing between this and the headline could be smaller it's so weird but those kind of things it's just like you're going to learn with practice now you can have a little bit smaller can space in between the elements and the headline so 56 that looks good let's change the image too so all these little guys into something else photos hmm this didn't change sometimes the random is not too random and it's just like going through the same photos over and over again see this photos again where he's not saying photo there you go 120 pixel hundred 20 pixels we we have something that looks pretty good I'm pretty pretty proud of ourselves are you proud of yourself we just did something amazing it's just like in two hours and a half we created a design system a style guide then we created some patterns that we are able to use in different iterations or a design for different these are more like marketing landing pages but it's still really cool stuff that sometimes you need like you know like we all need like these SEO landing pages because content is king someone said so now we need a lot of these pages in everywhere what the hell is going on here again another icon okay so we have all these let me turn turn of the grid set so we see how beautiful this is let me turn this on to the air there you go look at that how pretty is that like it's I don't know it's sometimes we you will hear a lot of their know me impose though I don't know designers by talking a lot about the the functionality and the numbers and and all the you know all the practice they say all the logical side of the sign and that's great but sometimes we forget about these these things that are a little bit more the official part of it that it's a little bit more I don't know that it's not based in exact numbers it's more like how it feels and how it looks and how I don't know that intuition of how things work together so it's good to practice those things too and make your very logical designs to actual to also make them look beautiful so hopefully this helps you guys hopefully this helps you like how to use a logical way of doing this using a style guide using a system that will help you create beautiful things and okay let me read some of your comments guys you remind me a sad gala for Knox yeah I will take that as a compliment okay hi Paulo was there any reason you had some of your plugins disabled that said affect the overall performance so yes I think it's just really hard to know what are the let me put this a little bit bigger it's hard to know what are the the plugins that just like do something to your performance I do which is like the ones that are staples that I always use that I need to use a lot I will keep those always turned on and and and they're usually like lightweight for example the one is called rename it I don't think that one is taking a lot of my memory it's just a something that just renames layers another one is like clipboard fill and that's something that I use a lot because I will be copying images from one place to another and just like I want to put them right away so and it's a really lightweight plugin but there are some plugins that are like a little bit bigger like I will say the craft plug-in from vision it's just like up Leigha plugins that do a lot of stuff so and it's always updating it's always like looking like two things if they're updated so I would say that like plugins like that that are a little bit bigger I would turn them off and then use them when I need them and that's it it's not that the plugins are rad it's just like you want to keep keep your performance as lightweight as possible so I will turn them on beat off because of that you kill phone sighs will you cover paragraphs and take spaced pages and your final call the button I'm in the Border Patrol okay guys I follow a certain see okay we'll be later you're great I'm okay okay you remind me of Sakai laughing yes can you use a crop line instead of the four of the system and what doesn't mean I'm ready please see me I'll marry a policeman means Holly mother no Holly Mary very pure bellissima means very pure Ave Maria I was like Holly Maria Abby I don't know like Abbott means birth like a like a like adult daf like Paloma like a like a vert birth but I don't know we use it as Holly Mary Ave Maria Holly Mary and booty SEMA is just like the purest very pure there are no set numbers but what do you recommend as a rule of thumb concerning the XY and blur for soft shadows i-44 soft shadows I will also use a pixel thing you know it's just like eight pigs like I will go two pixels four pixels eight pixels and then after that I will go probably eight sixteen pixels and then after that I will go to 24 pixels and I will go like that you know and then depending the software the shadow the the further away the element looks from the surface you know like because like when like right now the shadow here on my hand is really stark right but as soon as I I get like the it starts like moving away from the surface it gets a little bit softer you see how it gets softer and softer so you want just like how you want your elements to appear like closer to to the person to the user that's what you want and and in soft shadows are in right now as with gradients so you want to use those kind of things that are kind of trendy when they make sense not just because they're trendy okay so for example using an on the on the mobile phone it makes sense because you want to add volume to them to the phone and you may want to make it like it's floating like it's part like the the the patient's life you know that there's elements that come out of the screen it makes sense to add a soft shadow there but you're not going to ask that sub shadow to every piece of text and everything you know it's only to the things that you want to create a little bit of death and also to grants you if you saw I only use one gradient in the whole design system in that gradient I used it because I needed it because I needed to separate the background let me just share the screen where I actually use the gradient the only place where I use the gradient was over here over here because I needed to separate the menu from the background and a soft gradient it made sense to user there so it's a lot of these decisions are are based in style but some of them are based on actually something that you need so try it first ask yourself do I need this if if you think you need it then okay that's how crazy can I get and go as crazy as you can you know without making it look cheesy and without making it look forced so yeah that's my advice and and so again this is all its this is all practice keep doing it keep messing up keep doing stuff with tons of gradients in terms of up shadows it's okay don't worry about it and it just like go crazy with your designs and making them as trendy as possible your taste is to get a little bit better and better and you're going to see realize it okay how do you need those soft shadows try with a subchannel and try without the sub shadow does it make a difference no don't use it if it does then use it you know try it the longer you you keep practicing the better you're going to get at making those decisions okay and they're going to become natural you just use them you just apply it and it looks good okay set numbers you still use UX powers tool system I remember you mentioned that you said I use it for a couple of projects I didn't really actually use it I actually used that more for stunning III see I saw how he they they created this system and it was pretty cool I just like learned a lot from it but then after that I actually created just my own systems I I will recommend if you want to try to like try the the free version if you don't have the money to buy it and just like see how they created how they use nested symbols and then that gives you an idea how to create your own system okay it's there's a lot of value in creating going through the the work of creating your own system because then you appreciate the amount of work that is necessary and like how also how to change this how to to make it even better how everything where everything is so create your own system I think it's a good idea so try to do that to explode you how do you text float in this case we will commit I'm just along justify a lot justifies the one that it just like justifies the whole thing the full-width don't use that again try it looks good makes sense then use it if not don't use it it's all a trial try and error thing I I would say try to keep your for challenge yourself to always use left-aligned challenge yourself to always use left line and use center alignment when it's necessary when you think it's it will look better because it's for mobile and everything is just in one column and some elements need to be center-aligned then use that but I will keep I will challenge your I will ask you to challenge yourself to keep everything left line why because it's easier to read when things are left aligned it's easier to track what you're reading and you're not just like your eyes are not jumping from here to here like something is Center aligned you're like that and then something is left aligned and then you go like that and it's really hard for the user just like these movements take a lot of work after a lot of way and your user is going to be like screw this this is this this is asking a lot from me click close goodbye so you don't want that you want your content to be readable to be easy to digest ok so I will I will challenge you to keep everything left aligned as much as possible and don't call to Christ that's I'm just an old guy what do I know right this was fun thanks how are you selecting your phone switch so the font that i selected is called plex and it's plex from IBM it's a pretty cool font it's an open-source the first time that I use that I have played I'd seen it before this is the first time that I actually use it it's cool how I usually I will start trying to use a Google font there are some really cool like you cannot go wrong with using Roboto work sense there's lotto lotto lotto and open sense could be one and liked it too much but I don't know use that the Google Fonts that they have multiple weights and also have regular and italics so you want to have one that at least has three different weights right bulb and then hopefully has an a light or a semi bolt something like that and then I will I will challenge you to use one of those and and and now you can use San serif and serif like it used to be that you would want to use on web only sensor but now with monitors with such high resolution you can use serif fonts and they're gonna look good use just that all the Sara's you know did the service like have some curves and all that stuff so on on all monitors all of those things will get pixelated to you wouldn't want to use those you want to be like flat like that's quite San serif or more common on the web and but now no I'll say that you can use both both sensor event and just serif I always like the phone thank you for answering my question Paula yeah I always text float is text around an image oh oh I see I don't know how to do it is there a way to do that or sketch I didn't know but but yeah use it please make video not in my plugin I do have a video on anima plane just search for flexbox and also one that's called anima plugin or something i'll to lay out how to lay a plugin why are you buying on Black Friday why are you behind variety I bought the Google mini the speaker the Google Mina speaker I bought that because there weren't special there were $20 off or something so I bought a couple of those I'm really excited yes go dance a lot is asking about Avenue Avenue I love Avenue and there's also a veneer next and it's included if you have a Mac you can use a linear because it's included on as a system font so I will recommend using that one it's a pretty cool font and and I don't think it's too expensive too if you want to use in a web project and yes how many are love irony hey it's all about like you know depending on the project doesn't make sense to the project is this something that is on brand with them that a veneers is more like a like a geometric sense it has a little bit of human side to it but just whatever the project check it that a typeface works with it so using Sketchup on YouTube is pretty simple culture thanks probably in that monster place I'm glad man cool man okay or or woman I don't know what monster hi I'm sorry thank you for reviews okay that's it thank you so much guys and I think I think I'm gonna call it off thank you so much for for being here with me it's been it's been awesome let me just change this to me big thank you so much for being here with me I for spending Black Friday with me it's in the hole it's still not Black Friday for spending Thanksgiving with me I this this was just a taste of what I want to do a course on visual design and creating design systems it's going to be about this but like each video is going to be like okay let's let's talk about typography let's talk about colors let's talk about like creating I don't know a system a grid system how to use layouting how to use visual hierarchy in how to create I don't know like all this stuff in a practical way so hopefully I have this crash course soon sooner than later and that's it guys thank you so much

Channel: Sketch Together

Views: 48,910

Rating: 4.977778 out of 5

Keywords: design system, ui design, visual design, product design, web typography, ui colors

Id: dkpuahY9bl4

Length: 137min 34sec (8254 seconds)

Published: Thu Nov 23 2017