Should Designers Code? | Oscar Gonzalez | Skillshare

Should Designers Code?

Oscar Gonzalez

Should Designers Code?

Oscar Gonzalez

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
15 Lessons (1h 17m)
    • 1. Hola!

    • 2. Tooling

    • 3. Dev Tools for Designers

    • 4. The Box Model

    • 5. Colors

    • 6. Pixels

    • 7. CSS Spacing Units

    • 8. REM's vs EM's

    • 9. Positioning Elements

    • 10. Layout with Flexbox

    • 11. Depth (3D)

    • 12. Motion - Animation

    • 13. Typography

    • 14. The Anatomy of the User Interfaces

    • 15. Let's Code!

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class


As the intersection between Design and Technology becomes blurrier, it is crucial for designers to learn technical skills that allow them to get a feel for how their designs are implemented in code and how to communicate with developers efficiently.

This is an introductory class on the bare-minimum things designers should know when it comes to Web code. We will discuss

  • how to work with Dev Tools as a designer
  • how color values are applied to pixels and what they represent in a grid
  • layout techniques like Flexbox 
  • motion principles in code
  • typography in code
  • the box model

Keep in mind that this class is just introducing you to the basics. The best way to learn skills is by practicing. 

The class is based on something I call The Anatomy of UI. Something you have been working with all along and is present in all interfaces. I write about the concept here: 

Tools you will need: 

  • A browser
  • Codepen
  • Sketch App or any other UI design software

My personal goal is to create empathy between designers and developers so I am working on a class on design for developers. Be on the lookout for that one as well if you would like to learn more. 

"Designers who can code and write have always been attractive to tech companies. As the distinction between engineering, writing, and design becomes blurrier, design’s role in technology only stands to become more ingrained in the product development process." - If you want to survive in design, you better learn to code - John Maeda.

CodePen Playgrounds

Supplemental Reading Material

Meet Your Teacher

I’m a Design Technologist and User Experience Designer. By day I design +  digital products and also craft Design Systems. By night I enjoy hand lettering, making moss art and doing illustrations.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.



1. Hola! : Chances are, if you're a designer, grafting experiences for the utilities, your faces, you have probably ask yourself. Sheldon had a code look short Answer is no, you don't have to, for you should definitely definitely know. The things that I'm about to teach is my name is Oscar, and I'm on designed technologists facing something that essentially means that I'm a product designer that learn head echoes in this class. We will go over something I call the anatomy of the US that something's is everywhere. Every element and every interface, every creative designs. Ah has this things. We'll go over the basics of color typography, space, deft motion. We'll go over the box model and how to position and layout elements on a page. We'll look at the browser and death tools and things that designers have to look for in these tools, and we will even dissect eight pixels. This is just an introductory class, so the only thing you need to know is what is a female on what CSS. You probably need to be a part of designer designed by the end of the class, you'll have a basic understanding of how your designs are implemented in coach, and hopefully you'll have more empathy for your developers. I was there. I know how it feels. I was asking the same question myself. Putting could be overwhelming, I know that. But after taking this class, I think you'll change your mind and hopefully you can answer the same questions yourself. I'll learn so much coding is the designers I'm just grateful to share with you guys. 2. Tooling: you're gonna need three things in this class. Browser sketch, app and code. Ben, the brother that I like to use the most is Google Chrome. But you can use Firefox. Mozilla the developer addition is way better. It has a lot more tools, especially in the death tolls side as well. And the second thing is cope in. So coat ban is a playground for you to coat. You can do html, CSS and JavaScript and you can pulling libraries like Jake re angular react could do a lot of stuff, and I usually use it to create a quick prototypes for myself. Um, so if you want a coat along, you're gonna need it, and the 13 you're gonna need is sketch map. So by the you know the class, you're gonna have the knowledge, um, to code either a bottom like this and you can make your own button. It doesn't have to do it doesn't have to be this one. Or you can dio business car like this or little you can do anything after the class. You can take, um, your knowledge to the limits. So that's it. Three tools and I'll see you in the next section 3. Dev Tools for Designers: Okay, so let's talk about the deaf tools. Uh, death tolls is one of those things that I have seen designers not using us much on. I think it's because it is. It's kind of intimidating, at least to me when I first saw it. And it has a lot of stuff, a lot, a lot of stuff that is extremely useful, especially for our developer. But, um, if you're a designer, there's some things that I think are extremely valuable. So I'm gonna show you what those things are on DNA, maybe some tips and tricks that you can pick up a swell. So and here just I'm just seeing a website. And the way that you activate um deaf tools is by, uh either using your key word and typing command option I or you can actually, uh, target a specific element on on the page. If I wanted to target this element, I can just right click on it and click on Inspect, and he would actually show me where that element is in the in the extra minute structure. I can't even manipulate what did. The thing says, I can do it pretty much anything. I want to this website, but is this is just gonna is just gonna do it for your for your You know, what you're seeing on your screens are, obviously is not getting things not free. Right? So on top, you have some taps. This older tabs air extremely useful for developers. But they're not really useful for you. Um, maybe this one is if you if you're a network and you refresh, you'll see all of the assets that were being downloaded or that you that the browser asked the server to to render. And you can see how long the website took or the application took to download all these assets as well. But the one that you're gonna use the most is this one elements because it shows you the HTML structure, and he also shows you the CSS styling a swell. So this section right here shows you the dom what's called a dumb or the A similar structure. We'll end the classes that are added to that specific element and down below. And here we have, uh, all the classes and the CSS declarations for each class. Um, so in here, I can, you know, common things out on See what effects wide. Um, I can't even add, you know? Well, they're stopping here like saying red, um, and manipulate what I'm seeing in real time. I use this a lot when I wanted to get things pixel perfect actually used the deaf tools, and I just get it, get it right. And then I just copy and paste the coat and, um, and do it that way. Uh, she's really useful. And here you see this section, you see the box model. We're gonna touch base on the box model in a later section. Um, and then in here, this is extremely useful us. Well, I know a lot of people know about it. I think this is actually the oldest styles that where are the values that were calculated by the browser. So, for example, just to be clear, these this value does not mean a lot to me because I don't know what the fund sizes, and we're gonna talk about GM's in the litter section. But, um, just know that when you're in a browser, the browser actually works in pixels. It doesn't work in relative units like gm's are, um so the browser is going to actually calculate whatever it is, this is going to render it in pixels so you can actually see what those, um what? Those values are in here and you can, you know, either filter. And they say, OK, letter spacing letters facing his 0.6. So that's step tools all you have. Actually, this thing right here that allows you to see how the Web site or the application will look on a mobile device. So in here, just have a galaxy s five. But if I wanted to see an eye from far any phone 10 Aiken, switch it. The only caveat is that you have to reload the page to actually really see the the mobile version of that website. So here it can actually get a feel for what three interactions are. And, you know, I can drag and click like I want, um, but you can use this to kind of see what the view ports are, and, um, and play around and test, you know, your your designs when they were implemented by ah developer. And that is pretty much it Deaf tools is not as intimidating as people think. just play around with this tab player on everything that it offers and you will get a lot of a lot of value, so I will see you in the next section. 4. The Box Model: Okay, so let's talk about the box model. The box model is one of those things that is extremely important to learn or to know about . Um, it's actually really easy to capture. So the basic idea of the box model is that everything that you see on the web is a box like , literally picture box. You can start visualizing it. Um, kind of like this. We have a basic issue. Male layout here, some headings and paragraphs and some images and everything either stacks on top of each other or stack side by side. Um, and if if I were to take this out, for example, this paragraph out, the things kind of go to the top rate to to everything can fights to be to the top. And you actually have seen this type of behavior before. You're used to working with war documents. It's exactly Seymour has the same principles. Everything is, is has some sort of space in there and push it pushes things away. S So that's what the box model is. Um, we as designers are used to working with sketch and illustrator and photo shop, and for us is really easy. Just to drag something on top of each other and, you know, not worrying about the structure. But when it comes to ation of L and actual Web layout, you do have to worry about that stuff. And you can actually achieve the same things that you haven't sketch right? But it takes a little bit of time on more. A little bit more effort. Um, now let's manipulate this this box by going to def tools and under the styles, um, tap. If you scroll the way to the bottom, you're going to see the box model in action for that, a specific element, which is the H one. So in here we can see the contents and I can see the dimensions of the contents. And then I can also see the padding. And the padding is really, um, kind like stuffing between the contents of the box and the border off the box. So, for example, just to visualize it, if I want to add 50 pixels in here, you can see that bar the border is this One review has five pixels and the padding his 50 and the contents are in there forward to do the same thing with margin. Which margin is is the space outside of the box? It's kind of like Don't touch me. It's kind of the boxing Don't touch me at all, um, and is pushing things away, right? So if I were to add 100 pixels here, it pushes things out as well. So you can manipulate the box each box by going to its its box model in depth tools and manipulate that. So again, just just basic. The basic idea of the box model is that everything in the web is a box, and you have seen this type of behavior in a war document, and you can manipulate the each box by going to the death tools as well, So I will see you in the next section. 5. Colors: three different ways that you can work with colors on the Web. The 1st 1 is with a name. The 2nd 1 is just a hexi decimal value, and the 3rd 1 is RGB A. We're going to go through them to the 1st 1 is just literally in Stan Shih ating any like a pyre whip or tomato or red or white or green or blue? These air names that are available for you to use out of the box and every browser would interpret them US, US respect. Um, you can actually go online and search CSS color names, and you would see something like this, and you can just pick what you want. However, there is only about 140 colors. So, um, you know, if you want to use something else than these, would have to use something like Hexi Decimal Values or RGB A. And this is a hurts taxable value. I hexi decimal about you hex values. Really three things. Three different values in one. There's one for red, one for green and one for blue, and each section determines how intense that value is going to be, uh, or that color is going to be in that, um, in that equation. So, um, if we have something like 0000 that means that literally means the absence of color. So that translates to black, right? If we have something like f f f f, that means that is the highest value that you can get, and it just means white. And the way you read a hexi decimal value is by looking at each section or each set of numbers. The 1st 1 is for red. So you would expect this to go from 0 to 9 to 10 right? However, in heck sadism, Lee actually goes do Ciro a and then studio B zero C and so on until it gets to 0/2. And at that point, it goes to 10. And then from 10 you go to 11. 12 you know, less staff until you go and you get to 19. So this is how you interpret intensity of that value, and we're gonna actually see how these values play in a pixel because you can actually see how the picture is gonna play out if you if you know, the hexi has more value, which is really cool and that their way is just with an RGB. A value on this is is more intuitive, but it just longer to type. Um, this is just saying how intends the red is going to be, how intense the green and how intense is blue. And we also have this number here, which is that Alfa it just means they'll pass it, e you can have a 0.5 and there will be 5% capacity of that, whatever that number is going to be. In this case, it goes from zero to 255 and this color would be actually quite as we would expect, So that's pretty much it just three different ways of substantiated caller. The one that I used the most is accessible values, and, um, that's pretty much it 6. Pixels: All right, so let's talk about pixels. Pixels are the small. It's element in a digital screen. So they're so small that we cannot really see them anymore. Unless you have a really, really old school monitor. Um, you actually can kind of see them if you have ah, phone or tablet and you drop a drop of water. Um, it exercises as, ah, zooming mechanism. And you actually see some some doubts in there. Those are the pixels. And, um, we're seeing your screen right now is a assumed inversion, assuming section off a digital screen and all these little like squares that have ah, red, green and blue are the pixels. So just so you can see them, that's a pixel. And if you pay attention in last section, um, this map to clerk, right? So our g b red, green and blue. And, um, I know if I know how to read color. I know that this whole section, this whole thing is going to be white because all of these pixels are activated, right? So if I were to assume out of this always they were seeing color here. We're seeing red, green and blue, but if we were to assume out Procedures White. And these, um, where you actually see the seven and the zero, I guess, Um, there's no color. That's the absence of color. Which means, um, Black. So this is actually 000000 and all these pixels are are just, you know, not there, right. If you were to see how the pixels actually work when you're seeing a video like this, for example, you can really assume in and you can start seeing how, uh, the red, green and blue, the intensity, please. Out, right? How how they played together to make collars that we can see right. And if you not only see the color, you can actually see them stack him one next to each other and on top of each other, right, So you can start seeing a grip. And we're gonna use this this thing to come up with our eight point grid system that we're gonna using the second when we talk about space in a later section. Um, but just remember that a pixel is not just there's a long we're going on than just dimensions. There is actually logic in there that displaced color. And this maps directly to the hex as move values and to the RGB a red, green and blue, which is really important for you to to mention. So that's a fur collar. Well, going to see you in the next section. 7. CSS Spacing Units: There are two categories of CSS measurement units that you can use to create space on your interfaces. The 1st 1 is absolute values, and these were things like centimeters, pixels, inches peak us. They don't really depend on anything else but themselves, right? On the other hand, we have relative units and relative units are things like Are things that depend on something else either the fund size or how wide or how toll ah, container is or or the window is, and we're gonna see how they behave one by one. I'm only going to cover the basics or the basic ones, the ones that are used the most, and I'm only using them for to create measurements are my mentions. But you can use these to create padding and margin a swell, um, which is really useful. So here just have a big container that contains a bunch of child boxes, and the 1st 1 is really easier is pixels, and you probably already know this. So there's one of just taking, um, 300 pixels and went for with and then 64 pixels for the height, right? And as I resize the view port of the window doesn't really matter what it's right even goes outside of its parent because it just doesn't look at anything else. Bought the pixel and this are absolute is that this is an absolute, um, CSS unit on the other. And on the other hand, we have relative units were going into relative now, so percentages do look or don't do the pain on something else in this case is the parent. So it just literally saying, uh, in this case, I'm using it for the with and it just saying Give me 80% of the West of my parent And just remember that the relationship between the child, the media child and the immediate parent that said it doesn't care about any other parent, but that relationship. So if I say if I say give me hide of 80% you would expect the same thing right off the container view with, um, it's the same principle, but it doesn't care about any parent. He doesn't care about the immediate parents that can't buy anything else bought the window with. So as I decrease the view port, it does really doesn't look at the parent as you can see it even goes outside of its parent . It just scares about the with of the window, and that's it. View height is the same idea, but going vertically. And this was actually really useful. I use it a lot when I want to have things on load above the fold, and I don't want a user to scroll just yet. And now we have realms in the EMS. I actually have a section specifically to talk about the East because a lot of designers and actually a lot of developers get these confused, and I want I want to make sure that that's clear. So we're gonna talk about that later. The only thing that you have to know right now is that these are based on the space is based on the fund size that you're using, and we'll see that in a later section. And lastly we have This one is actually really interesting is characters. So this one actually looks at the typeface and the zero values zero captured character Cliff, that that typhus has so in this. In this case, I'm using IBM plex Mona, and this is the zero right. So I'm I'm saying, Give me a with of 65 characters or 65 zeroes if I like them up and then for the hide, give me 30 characters going going vertically and that's what it is. This is actually really useful for long bodies of text, like a blogger or something like that. Lay out like that and 65 to seventies What is recommended for something like that for free readability. So, um, that said, that's all the old you needed to know they were the ones that again designers and developers used to most. There are a lot more, but and this is just scratching the surface of them. Don't use absolute values. To be honest, Onley used pixels. Obviously, Um, that's eight years old. That's all you need to know, So I'll see you on the next section. 8. REM's vs EM's: CSS stands for cascading style sheets, and the key word there is cascading rush. You're going to see how what that means when working with the EMS in a second. But as you remember, the EMS and rams are units of measurement that depend on fun size. And in here 1/2 4 different containers have ah AP container. A window container with a font size of 16. We have a parent container that contains two, um, two containers, two boxes with again contacts of 16. However, these two have different dimensions and different padding. We'll see. We'll see why in a second when working with e EMS you look. The dimensions and margins and patterns are based on the current fund size of that element . Where that box and if a fun size has not declared, then you have to look at the parent. And if a font size is not clear in the parent, you have to look at its grim parent and so on and so on. So that's what the cascading nature of CSS comes in in here. If you notice by this equation, we're multiplying. 1.5 by 16 pixels. 16 comes from its parents. So if I were to change this to 24 that's too big. 24 were multiplying 1.5 by 24 which gives us 36. Now the padding is 1 a.m. and the padding now is study sex. So is multiplying. One times 36. I could do 1.2. That would give me 43 point for 43 point to as the pattern Do you want eight? And that would affected us well. But in this case, we're just using 1 a.m. That's 36 if you notice Rams did not change at all through what I just did. The reason why is because rims that are means that the fund size is based on the route fund size or the dimensions and Patties are based on the roof on size. So in here you can see the equation again. So we're multiplying 1.5 by 16 and 16. It comes from from this value, which is the root, right. If I were to change this to say 24 we can see a change in its as well. So now, um, the font size is 36. However, the padding does not care where the funds isis for that. For that element, it just looks at the root. And, um, that's pretty much it. Working with E. M is a little harder because it's hard to manage where the dependencies coming from with wrens. Just remember R stands for root, so we're just looking at one value, and this is actually extremely powerful if you have responsive, if you have to do something that is responsive. Web, where you have fun size are based on size in a death stop off 60 pixels or 24 whatever, whatever the value is and you have to scale, um, the U I proportionally, uh, when you're working on a mobile phone. So the cool thing is that if you have a based fund size in for a desktop or 16 let's say and you based all your margins and pad ings and pretty much the space between the boxes as we saw for the box model. Um, then when you switched out, value Teoh to be something less than 16 for mobile. Let's say 13 as far as the base font size. Everything scales proportionately, and you don't have to worry about any media queries and, um, and all of that. So rooms are extremely powerful is something that I use all the time. PM's very careful when I use them, and I only use them when I have to. Um, but that's the difference. Remember, Route at Rams stands for root, and that's easy to remember that said, I'll see you on the next section. 9. Positioning Elements: So far, we have seen space. We have seen dimensions. We have seen patting margin between the box model How that affects the box model. And we have seen how, by default, everything kind of stacked on top of each other, right? Most of them. Now, let's look at how do we Kokko? How can we position boxes or elements in your you I and I'm gonna go over three different ways that you can do that There are more. But I'm just gonna go over these three, cause these are the ones that people use the most. Um, there's position absolute positioning, relative positioning and fixed position. This, uh, see what we have here. So we have Ah, just a basic, um, layout. Right. And as you would expect, everything stacks on top of each other because they're block elements. Right? This box right here has ah, relative Ah, class named relative. And let's see what happens when I am coming. This. So if I have, if I had to clear position relative, I can move the element. Alec, please. So in here, I'm just saying, move down 60 pixels and to the left, 30 pixels. And that's pretty much born and bred position relative dust. However, if you notice there is still a white space, huge kind of it's kind of saving that space that it had before. And the flow of the doctor of the document doesn't is not affected at all. Right? If it let's see what happens with position absolute, which is the next box with position absolute. It kind of takes the element out of the flow, and everything kind of floats to the top, right? And, um, and here I'm just saying he has a position in absolute and then move it from the top 50% and then from the from the right, 50%. Um and that's from the from the HTML from the body from the continued of the parent. Continue that contains this. Now let's look at fixed. So fixed is what you would expect is just fixed to whatever think I tell it to be. If you notice I'm using percentages in pixels and characters you can use, like all the things that we saw before, Um, as well, now hopefully that was clear. Let's look at, um, parent to child relationships that we can create. Um, let's look at this example. So in here I have a parent, uh, container or a box that and And I set up a position relative, but I didn't tell it to go anywhere. And I have a child with position. Absolute. And I'm telling it to go somewhere. And if you notice by just doing that, we're just creating that position relative in the child, having that position absolute. I can position that child anywhere I want within the context of the parent. So, um, if the child was outside of the parent than this thing, this, this shall will be positioned in the context off the parent parent, right, which is the body. But in this case, I can position this one, whatever I want. So that's that's the type of relationship that we went 1/2 when we were in a position. Things you know, in relation to to a specific container. And sometimes you'll see that some of developers will have ah, container that you cannot see, but is there and it has a position relative just so that they can achieve something like that so they can position something where they wanted. And that is positioning. See you in the next section. 10. Layout with Flexbox: Okay, so we have seen space margin on dimensions batting all that we have seen how to position individual items on the, um when you're interfaces. Now, let's look at how can we lay out, um, this boxes or this elements in a way that is systematic in a way, and that allows us to have a lot of power? Um, there's two different ways that you can lay out content. Um, like what we're gonna do today. There's one with flex box. And then there's another one called CSS creates. That just came out, um, last year and see this great is it's an amazing, extremely powerful I'm not going to go over in this class because I would need an entire class to go over it. But just know, just know that there's two ways of playing out content with CSS grits and flax bows, which I'm gonna show you. We have basically out, and we have just some dips. Um, that, as you would expect, a stack on top of each other, I have a parent. If that is wrapping those those Children, those deaths and it's I and then I have just a class of parent in that class of child. If with flex box, there's this relationship of parent versus child. And if you give a display flex to the parent, then you have a lot of power over. How can you over how you can lay the Children with a parent? A Soon aside, this uncommon this you'll see that something happened, right? Everything by default. If you just give the parent display flax, the contents are the Children just going to go to the top and kind of go in a row type of thing? So by itself, it doesn't buy a lot. Like there's this weird thing here that you just completely ignores that the parent right, you could go back. You could do something like flex direction column to organize him going vertically or you good organizing going again in the same direction right in a row. However, we don't want this behavior. We don't want it to go outside of the parents that we can do something like flex wrapped. And what that does is just wraps things. So right now I have ah, men with of 400 pixels were just pretty much saying, Okay, 400 pixels does it. Allow me to do less than that. If not rapid. We could also do something like a line content to the center. So I think just kind of goes to the Senate, right? And we could do stuff like, maybe justify in between. So so things just goes to the sites we could dio justify content center, and everything kind of goes to the center here, Could dio lying content, uh, flax start. And then everything goes to the top flex and and everything goes to the bottom. But you can do a lot of permutations. A So you can see there's a lot of power in here how you can lay individual elements. I use flex box mostly to mostly two way out, maybe one day, Um, in a row type of thing. And I can have maybe a picture and then some paragraph. Um, yes, Well, I could use floats for that, but flexible give me gives me a lot of more power over how I want that to stack when the View Portis is less than the say 3 768 pixels for mobile and stuff like that. So, um, just remember flex boxes aware of laying things out, and it gives you a lot, a lot of power. So I would play around with this. So I said, That's flex box. Let's see, um, the next section. 11. Depth (3D): So far we have been working with two dimensions right Z axis and the Y axes, and we have seen how to position things on, had to lay out things in those two dimensions. However, there is 1/3 dimension that you can use, which is Z Axis, and it maps really closely to what we have in the physical world. We see things in three dimensions. We don't see things in two dimensions. So there's three techniques and I'm gonna show you today there's a lot more, but I'm just gonna show you three. And the signature can use to create surface hierarchy and death in your own arena faces uh , here 1/2 2 boxes in a paragraph Have a box that you cannot really see, although is there, and I can see that is there because he's taking space. And, as I uncommon, this CSS the creation, which is the box shadow CSS a creation. You'll see that now I have surface right. There's there's a hierarchy there. Even I can sense that this card is important or more important than the things that at surrounding it because it's closer to me. Things normally things are closer to me on an interface are more important. Are are indications you can act on on them. So I would just add I can create some surface and some backed, so I'm not gonna go over to see index of the box shadow. But just know that I can change multiple shadows by changing them with coma Us. US, as I did here. Two shadows. Let's look at the second box just right now is just plain pink box as I give it a position . Absolute. It it it does what we where we saw before he takes it, it takes that box out of the flow. Right now, I didn't tell it to go anywhere so naturally just goes to the left and the paragraph moved up right? And he's actually underneath that box right now so I can use the C Index Teoh position an element anywhere I want in the Z axis so I can use different different numbers here to give it some sort of deft among in relation to other elements on the screen. Now let's look at the 3rd 1 which is the parallax effect. I've see. I'm pretty sure you have seen this before. Um, it's a way for you to target individual elements and move them at different speeds, Just like And you actually have seen this in real life in the real world. If you're in a car, for example, is your passing things things are closer to you are moving really fast. However, things that are farther away from you, they move slowly. Right? And this is what happened in here so we can create. We can create this type of effect. Teoh, map What we see in the real world, you do need javascript for this right now. Uh, although is very easy. JavaScript. Um, you do need javascript to achieve, in effect, like this, but yeah, this, uh, that's box shadow Z index in the palace effect. I'll see you the next section. 12. Motion - Animation: when you're moving in the real world, you actually, unconsciously you have to worry about two things You worry about how long you're going to take to get from point A to point B and then also how or the trajectory that you're gonna take to get there. Right. So the same thing applies in digital interfaces. And I'm gonna tell you, um, how or what to be on the lookout when you're declaring motion and how to communicate that to developers. Swell. So in here I'm using transition as a CSS decoration. However you can use in order thing called key frames. Key frames is a lot more powerful. Attorney C'mon, opinion. But it's a lot more steps that you have. Teoh. You have to dio Constituent is easier to work with and is very easy to understand. And most developers use this one. So, um, in this section, I have to to really two sections, one for duration and one for easy easing is how you get somewhere and we'll see that how that applies in a second. So and here as I hope for you can see that these these elements move at different speeds, right? They're getting at the same place, but they're taking longer right, and that's that's easy to understand. So the first thing you have to wear about days duration second thing is how you get there. So let's see that these guys are moving from point A to point B, and they're getting to Point B at the same exact time. However, if you notice they're taking different paths, their teaching kind of from no ways but like they either start really fast and then thes out the go really slow at the end, or by sir versa. This one, for example. It's very natural, which is you start really slow and then you go fast and you stop and then you're going kind of slow again. It's not like how you would do it in the car. So this one is actually one that is used the most, which is called Easy Out. Um, we'll see that in a second. So if I will actually went to visualize this and the frames that the browser draws when something has motion, I can go here and I can inspect that element. And under the style stack, I can click on this guy here and I can see how that guy's moving. So as you as we saw the guys actually going really slow at first and then really fast and then really slowly, and if I wanted to play around with older types of, of, of ways of getting somewhere, I can I can click on here or I can manipulate this and make this really dramatic. And here more frames are drawn to give the impression of going really slow. And then fewer frames at the end are being drawn to give the impression that's going really fast. And but you can also that manipulated all you know any way you want. You can see what the presets ones are so like the one that I was showing you, which is this one is out, and this is the one that is used the most. This is just what is called Kuby busy here, but to me, just just a curve. And then when you want to play around with it and get it just right, just just remember that you can use death tools to out to do that, and that's it. That's pretty much when you have to worry about when you're communicating motion to developers, communicate those two things duration and then also how you get somewhere. It's a lot more to motion, but those are the two most important things you have to worry about. I'll see you in the next section. 13. Typography: they're really four things that you have to worry about when working with typography, especially, were working without developer. 1st 1 is fun size, fun, wait, letter spacing on line height. We're going to see how that affects my typography in a second. So in here we have two headings one paragraph in one link and this styles how it looks. Right now, I haven't really done anything. The browser has some defaulted styles for things like each ones and each twos and paragraphs and links, and it's just being applied by the browser. And remember these these things. Text is a box. Everything in HTML is a box. So we're going to see how we're how we can manipulate text, the text box, um, or the text box model in a second. So let Z override the fund size. So the fun size I'm saying this do three ramp and this heading should be now three times 16 48. So this this heading should be 48. They see what it ISS and it's 48. The reason why it's 48 is because remember, we're doing when we're dealing with Brems. We're looking at the root fun size of the application or website. So in this case, because I haven't really overridden, that value is 16. The route font size and I'm multiplying that value 16 by three should be 48. If we take this value out, it should be 32 which is why you study, too. Let's put it back on in this before So fun weight is what you would expect is just how fat or skinny the characters are. Letter spacing, letter spacing is how much pays you one between each character. So and that is each rectangle that contains a character, um, very easy line height. This is actually one that is extremely important, but I have seen a lot of designers either not essentially intimate or just completely ignoring it. And you have to remember that the browser gives you a default, um, line height, and sometimes that mrs with the flow off your website or your application. So and that is your vertical flow or vertical rhythm. And the line height is the height of the contents of the box model of that Ellen. So let's see. Let's see how that looks so actually me, I'm coming. This one you can see. Right now the line height is 100. So the contents that I mentions of the contents of that each one is 100 although obviously the the character is still the same. The container that contains the characters is 100. If I want to take the line had out, it would be, I think, 60 62 which is the default, um, line height. I can do a line hide of less than that. I can do even a line hide less than, um, I think less than if he's 48. I can do a line out of 32 which it just decreases everything right? Everything kind of just pushes it to the top, and here I can see that that's very important. So I still have some margin, which is 32 pixels on. Dykan increased that margin by, Let's say, 100 and everything moves down. But just remember, line had is very, very important. Don't forget to include line height in when declaring typography for your developers, and that's it. Just remember, text is also a box. Everything in this email is a box, But remember, treat tax as if it was just a box inside of a grid. That's it, I'll I'll see you in the next section 14. The Anatomy of the User Interfaces: When I started to learn to code, I would open deaf tools and I would inspect element pretty much everything on on websites that I really, really liked and applications that I thought were really strong. And what I saw were, Well, first I saw everything as a box. Everything was a box. And the second thing was, I started to see a lot of commonalities and patterns. Um, that I the that I knew about, but I didn't really think of it or apply them to my designs. And, um, I started to see how they would use them to create stories like this and how they were using to create cohesive, um, experiences and not fragmented once for their users. And they just felt good. I just felt good using them. Um, so I started to group these things into five categories, and I called these thes five categories. The anatomy of the you are. Let's look at what they are. So let's start with something granular not. Let's not look a website because these five categories are present in every single element that you see in a digital interface. Every single element needs thes five things to exist. So what? They are topography, Space Dept. Caller and motion. If you notice every single interface that you have seen has these five things and we actually have touched base on all of these things, you have the basic and, um, uh, foundation knowledge to create any interface that you want. Now, um, in the next section, we're actually going to code this little guy, and we're gonna use everything that we learned, including these five categories, and we're going to see how these five categories actually translating to coat through CSS declarations, the ones that we have seen. So join me next section, we're actually gonna code start coating. So I would advise you to court along and, uh, all it's either. 15. Let's Code!: So we're ready. Teoh could, um And one thing to note is that we're gonna coach something very, very simple, like a button. But you can call it pretty much anything you want. You can choose maybe a design that you have done in the past and try toe replicated with the things that we have. Um, we have learned, and I am going to use all the things that we have learned so far. So, um, so is gonna be, uh this should feel very familiar to you. So what I have here is just a empty, uh, code. Then I have the HTML and CSS activated. I don't need the JavaScript and ah, let's see what we have in design to see what we what The button looks in design. So because I am a button and it has three states, a default harbor and an active active is just really when you push the button and active. So let's see how I constructed or design the bottom. It looks like that bought them themselves itself is 64 pixels high. It looks like the iconic study to buy 32. It looks like the contents of the button are, um, 32 pixels high, which is pretty much the height of the, um, icon. And it looks like I have a border of four pixels with the border radius of four pixels. It looks like this. The text is 20 pixels with fun sites of bold, and I have over return thes thes things. The line hide in the letter, spacing off of the text, and that's it. One thing to note is that I'm using something called the eight point grid system, and they pulled great system, something you can use to greed, um, predictable scale for design. So essentially means that you're using aid multiples of eight to create space. So if you notice I used 32 for for that mentions off the icon. And if I turn the grid on and let me show you how the grid how my settings look, it's just eight by eight. Um, and it's just snaps into place. So that's the height of the bottom, and the margins are 16 pixels. The margins off actually was, look at the padding of the bottom itself. It's 16 pixels, um, and everything kind of fits into place, right and We saw this by looking at the pixels. The pixels themselves are assembled in a grid, so everything should be fitting in place in the grid as well. One thing to note is that I have seen some designers when they create design they use by default. Sketch is going to give you the border of whatever rectangle you create inside. However, I have seen some the designers centering bad border. Don't ever, ever do this if you want to give that designed to a developer because in real life, half pixels do not exist. Let me show you what that what I mean by that. So you fight. Show the pixels, the lines are going to be blurred. That's because the Linus sitting between between literally is sitting between two pixels. And if you see stuff that is on online that you see that it's supposed to be a straight line, but it looks blurred is because of this because they're not centering their designs or there s P G's to two to the pixel grid. So you either one to put it in sight like this. We're outside. And look, look how sharp that looks. Just just a tip for designers. Other you might know already know this stuff stuff. So, um, cold Let me take the great out. Take the grade. Does well, cool. Awesome. So now I have Ah, good understanding of what I'm doing. Let's start coating. Let's see. Uh, the first thing I need is just a bottom on. Each team will bought them the way Extension eight is by doing stuff. This is opening attack, and this is closing in tight clothes. Attacked by just having this little guy here. Um, right now there's something in there, but because I don't have any text, you can barely see it Cool, but 10. So you can see that there is actually some styles being applied by default. Um, and this is done by the browser. There is actually some padding in there that doesn't make sense. And some some stuff in there that already comes with the browser s U S. Stan. She ate any buttons or any links and things like that we saw before, so we can actually overwrite old this. So you have to worry about that, and we're gonna use a technique cold. Um, normalizing CSS and some people. You might have heard that before. Um, we're going to give this to override. The styles were going Teoh, give it a class off DTN, and we also have an icon. Right? So we are going to do something like this and for the icon, you can use any SPG that you want. You can actually have just copy the code and then just pay sitting here. But I'm gonna use a short god. I'm just gonna use the assets that coat been gives you. There's a bunch of stuff that you can use here for free. So I'm gonna use this one to click on. It's already copied, so I'm just going to copy it here. I am not going to explain what as videos are and how to use them how to manipulate them. They're extremely powerful, But that's just a classic off itself. Just know that it's better to use s veggies than high confronts. They're more performing their rendered fasters. I'm gonna close this out so you can see a better. Um, And now I have with you will be half have a button that has, actually they should be first, right? And then there you go. perfect. So bottom looks like crap, but bringing out, um, we're gonna fix that. So the rain, we have ah, button with a class of BT n and a G in some text. We still have some some styles that are being applied by the browser. But we're gonna over right that. Let's start with the class. So we're gonna use B TN Um, actually, let's do this, please. Fresh. So it's, um, this target the body, and we're going to center the bought in to the center of this white space. So, uh, we're gonna use a technique cold or actually, we already saw it. It's Ah, it's just thanks. Box, right. So flex box actually display flags line items center. Anyone explain this in a second and just five content center. So justifying content remember, justifying content is kind of like, um, you're used to using this in Microsoft Word when you're centering text is the same same idea lining texts outlining text to two vertically right now, because the height of the body is actually 100% of its contents. So it's it's literally this. We're going to give it a, uh, men height of 100 th. And now we have a center. But that aside, decreased, uh, the size. You know, you'll stay able, stay in place. We're gonna normal ice the buttons. So we're gonna do bt and, uh and we're gonna do patting zero. I can't type today. Well, then we're gonna do margins here just to make sure there's no margin on patting. So this is normalizing. There's no padding and no margin being applied right now in the but cool difference between this and this. This is a class, and this is a HTML tax. I'm actually targeting it at the steam attack. You normally don't want to do stuff like this in an application on a website, because this is our targeting all buttons in your application. But, you know, I want to use classes to override, um, styles and into style, our individual items. So let's he and here we're going to do what we did. What we learned in the last section. So we're gonna do caller, do you typography. We're gonna dio, um, space We're gonna do what is a depth and then motion. So I mean, coming this out, okay? And let's start with collar So with color we're gonna do Let me see what? The backwardness. So the backroom is this color? Uh, we're gonna do background color. Oops. And I missed this. This cool? Um, What else? It has a border off four pixels, right? And then the color is this. So we are going to do for oops. Why four pixels? Ah, this and so mitt, do not suit. You can also do. I thought it or you could do dashed if you want it. Um, but for now, this is She's selling, and we are going. Teoh, I was the only 10 the text color. So for tax, you don't do tax color and you just do color and then the same color. It's this so And there you go. So is he cool? We're going to see how we're gonna, uh, color the Hezb e. Gina Second. So awesome. Looks like that already. Kind of. So it's this talk about typography now. So, for topography, I'm going to first I'm gonna do is I'm gonna import the the poverty for that I'm using. I'm using IBM flex mono, so I'm gonna go to you Google fonts and I'm going to search for I b m uh, flex months I'm just gonna copied and the sea would amusing bold. So I'm just going to import Uhm, I'm going to click here and select this fund. Click here and should be customize and I'm gonna import the regular in the bolt. And, um, let's go back here. Click here where it says important. Don't worry about this style. Just just copy this import statement and what is happening here is I'm just literally importing the the Thai face from, um from rules. Google's servers. So at this point, I have the fund family loaded in this in this project, but I need to Instead she ate. I need to use it. Right. So there's Do we go back here, there should be. Yeah, right here. Do you hear on fun family, IBM This means essentially that if for some reason this cannot you don't have internet or this cannot be found or something Ever have a typo, then this would be the next option, like a fallback tempo stuff. So I have the typeface already loaded was dio go ahead and do, uh, fund Wait. Bold. We dio spacing letter spacing five pixels. Um, line height 30 to hide 24. I'm sorry. We'll see what else Hide Fun size groups front sighs 24. I'm sorry. 20. Perfect. Awesome. And what else? Believe in sit. Oh, actually, text, um is a text, uh, just for my belief into your upper case, they're just gonna make thes upper cased. Awesome. See? Cool. Cool, Cool. Cool. Let's talk about the next one space. So for space, we have, uh, Heidi 64. So we're gonna do is do Min height. 64 pixels. Uh, let's see what else? Uh, it sounds like the padding is 16. So let's do, actually. Does you padding? Um, it's 20 on top. I'm going. I want to show you guys one thing and we can do patting because 16 weaken, Do one room right now. Have 16 big souls Will patting here. I'm here, right, because Ram, remember route font size Cool. Let's dio is there's a margins. Do you margin We cannot really see. I'll show you what? That what that looks like in a second, so we can do eyes to you. 0.5 rim 0.5 Grim for top to bottom and then we can do you one room left to right. Let's see how it looks. Oops. Started Actual element. Cool. So have margins. 16 margin eight. Dr Bottom. Border of four patting 16. And the contents are, um these cool. Awesome. So that's where I want it started to look very close. We're not done yet. That's, um Let's see what else I can do. You okay, So that depth, um, for now, we are just going to set it to, um, Box shadow is going to be zero or not. And I'll show you why in a second. So transition, we're going to transition states right from from point A to when he's harbor. When he's active, we want to use remember two things, right? Duration and how things are going to move. So let's use. Let's start, get all CSS declaration. So all of these years integrations. When I do something, I want them to move at ease in, east out. Right. We saw that curve, remember? And then, um, this one is going to be this used 200 seconds. Awesome. So this is the duration, and this is how it was gonna move. And these this is just targeting all of those CSS decorations and changing them if we want to to target SVG. And when a target the class and that's G that is inside of it and what I'm going to dio So it's 30 believers was a pretty too Yes. So I'm gonna dio a with of, um, is you to room right of two room and the weight color, Um, as veggies with the fill, especially they have paths. I'm going to use the same color as I use for the borders with color and in their cool awesome And what else? Uh, right need to do it. Looks like that said right, And that's it. Oh, no, we have the morning. Have a morning. Yes. So we do more air, Jan, right? One right And, uh, leads. So it's actually used also in transition. Same transition, just in case hoops. Okay, I'm refresh for singing, but yeah, so that's that's how it looks right now. So, as you can see, these things are not aligned, right? So to make sure that this is aligned, we got out, we got a tweak it a little bit, so let's ah, let's go to the beauty and attack our class and low these we're going to add, um, something like, uh let's dio what we first is the border radius, right? We saw he was four pixels born Aries or pixels. Um let's, uh, right now as you as you hold her over things. I wanted it to me Give the indication you can click on stuff So usually you do that by during the cursor as pointer you can deal There were times of Christians you can you can google that a swell by now. If I over over it, it's going to give me the impression that you can click on it. And, uh, let's see what else? Wells. Oh, my linemen. Reso Um, we're gonna get to do the same thing that we did before. So we're gonna use this, play flax a line items center and justify content her. There are older techniques that you can use to do that to do this, but, um, but I I love using flex flex box, and it's just so easy. So, um, so this is it's perfect. Cool. So I decrease the thing. It doesn't matter, Like everything is aligned now have something that looks really close to what I have here. Actually should be like that on, um and that's it. So Teoh work on the state's let's ah, all right. Now you see, there's ah, there's a blue haze thing or outline apply when I click on it or when I focus when I hit tap. The reason why is because, um, you know, for accessibility, this is extremely important. So usually do you don't You don't want to take this out or you want to do something else, But don't take it out because, ah, lot of people with disabilities I side visibility's these abilities. They're gonna have a hard time knowing what has being on focus at that time about that point in time. The use, They rely on that heavily. So I'm gonna take it out for it. For us, for us. I know, but just know that normally you don't want to do that or you want to do something else. So I'm gonna do outline, not believe it. ISS. Yeah, perfect. Cool. Right now I'm quick on it, but there's no indication that I'm clicking on it. There's no over states. There's nothing right. So Let's work on that. To do that, I'm going to target the bottom and I'm going to use a pseudo element and the first thing ISS. Let's look at this one. The color is going to be this so background color is you just background. That said, And let's see how that looks nice, nice. And you see, that is not, um if I take this out, let's see that in a second, I take motion. It's like I hold it over things. They kind of snapped right, Things in nature don't don't do that right you There's some transition that you have to go through. So that's why the transition is good to have when things are moving is going to have a transition like this. Um, always so cool. Now, the other thing that I wanted to do was the box shadow, right? 20 bucks shadow. See, you have two shadows. We have 15 and zero. So we're gonna do is zero. And this is 10 I want the shadow to move zero pixels from left to right. I want to move it. One pixel. One. Yes. One pixel down. And I wanted to be blurred five pixels and I'm gonna use RGB A are t e a God. I cannot time and I want to do you zero zero hero and let's see here remember, 0000 is is black and the Alfa is 13. So I'm gonna do 130.13 and this yellow box. There's nothing being something in there, really see. It, I think, is because I have to train the So there's Dio. Let's do this one now so to four and his Alfa is 20. So pretty much the same thing is this one and I cant indented so you can see it better and 20 and this is to and this is for Let's check that out. Nice, Nice. If you can see the out of me who's yeah, it's good. It's good. Also know that gives the impression that I can click on it, right? Cool right now if I click on it and nothing happens, right? So let's let's work on that. Let's go back and we're going to do much copy this here and then do Active harm in the background is going to be, uh, this car. You know, we're not going to have a buckshot. She's gonna be right. Yeah. So let's let's check it out. We're done. Bring down. I think we'll see. We'll see. All right. So as I hover over it, I can see that it's actually easy, man. Some I can see a very some shadow. It's kind of coming at me coming to me. Click on it. Oh, goes down, Goes down Cool, cool, Cool. So we're done. We're done with this one. You can do more stuff. Like, if you wanted to have another button in here and then have something like maybe at a circle class and then I could do Yeah, just a certain cool class and then we could do border Ah, greedy ISS 50%. We'll see what that looks in a second. Uh oh. Looks was rough. Let's take these out. I was just SG because he has Ah, uh, Margin, we are going to you. You circle has Fiji and we're going to do margin so cool. Cool. Now we have it about them that looks and behaves exactly like the other one because it is inheriting the classes or the C s s declarations from Bt and right we can have also, um, other button and this one I'm gonna take off the SG, and it could be like this, right? And I could have yet on out of the bottom that is just gonna have cooling and look at what happened. So I have have specified a padding of 16 pixels. There's a 16 pixel patting in there. There's a 16 piece of patting in there as well. If I wanted, I can put it men, um, with in here of maybe you say 200 pixels, let's see how it looks. So now we'll have to fix this one. But essentially, um, this actually facing So with, uh, trees mean with start out looks all some cool, so I could do a lot of limitations and that only inheriting from this class, So that's the CIA says I don't work there, but there you go. You have a button that you have coded from scratch and that you have made it look exactly exactly to you to t peaceful perfect to this one. And, uh, I encourage you to do your own stuff you could actually give you feeling ah of interests. Enough. You can take a look at this one. Take a look at the code that I did here and try to replicate this this business card and or you could do your own stuff. Really? Now you have the power to do whatever you want, but I encourage its coat encouraged to kind of learn from from the craft of taking something from design and make it it, making it actually work and implemented.