Fundamentals of Design: How to Think Like a Designer

2. What is Design?: though, and welcome to design for people who don't call themselves designers. So let's start out by defining what design is. I believe design is a method of communicating a message in solving problems, so if it doesn't communicate a message of it doesn't solve a problem to me. I'm not really gonna describe that as designed. That might be something else, and a lot of the times design is confused with aesthetics. So if you think it's something that is beautiful but not very functional, right so aesthetically, it might be pleasing. But functionally, it doesn't really work. You can look at that and say, That's beautiful, but it has. It doesn't work, doesn't function. Look at these knives and forks and spoons. They are loved. I love the colors of of everything about, you know, they just they look great, But try eating with one of these. It would not work right? So if you look at the opposite of that and you look at something like Craigslist, where it is aesthetically not very pleasing, but functionally does work and you can see with the success of Craigslist that it is working. And so with Google, Google has always been. Now Google's design is getting much better. But in the early days of Google, it really was. The guru wasn't really that aesthetically pleasing, but it did solve a huge problem. And there was a lot of functionality about into the stuff that Google made. This is an example of something that is definitely not aesthetically pleasing but is very functional. Look, it's got the freakin chains on the wheels. It's got snowplow. It's got everything you need, right? Probably gets 100 miles to the gallon. This thing is awesome. So throughout this course, we're gonna be covering four elements of design. Now there's plenty of other ones, but these are the four ones that I want to talk to you about in this class. So we have grids, visual hierarchy, typography and color. 3. Intro to Grids: - So let's start with grids. - I'm a very systematic designer. - I liked approach design very mathematically sometimes and so grids I could get really nerdy - when it comes to grids. - And so, - yes, - keep calm and use a grid so you can see grids. - Grids, - Basically grids do is create order out of chaos. - Right. - So you have all these different things. - How do you create some sort of order to all these elements? - And if you look at this, - this is a great example of the different cities in the United States. - So you have Atlanta, - Boston, - Chicago, - Detroit and how these different grids show up in city planning. - Um, - so you can also see. - So here's an example of an aerial view of a grid. - It helps. - Certainly when I'm in New York, - it's much easier for me to get around when I'm uptown because the grid is very clear. - When you get down in, - like the SoHo and kind of, - um, - the front answer district and things like that, - it's actually gets really hard to navigate because the grid is not as clear. - There could also be because I'm really bad with directions. - Uh, - Legos. - I was definitely a huge Lego family was a little Legos are great because they they there is - a particular order to the Lego, - and it does create these these organic grids as you're building these things. - And so what is a grid? - So my definition of a grid is simply a division of space on a page to create structure and - order for the content. - There are infinite ways you can divide a page, - but let's stick to one of the most flexible grids the 12 column grid so you can do 24 - column grade. - You could do 36. - Whatever grids are just really a division of space. - I like to use the 12 column grid because it's the least amount of columns that have the - most amount of equally divisible columns. - So I'll show you this even that that may not make sense, - but so you can take that 12 column grid and you can break it into twos, - right so you can see here. - There's six kind of, - uh, - groups here, - so you have 123456 of two columns each in that particular grid, - and you can also divide that into three. - So before columns of three. - And then you can take that to four. - So you have three columns of four, - and I have two columns of six. - So here are some other types of grids and some really cool. - Ah, - most conspiracy theory grids out there that could be found in nature in art and all kinds - of this stuff. - So let's jump in here. - So if you look at a thing called or a principle called the Golden Section, - so if you look at the number of the Golden section, - it's a magic number called 1.618 And so if you look at this, - you can see that the if you take the smaller. - So if you look at the top right square and if you multiply that by 1.618 you would get the - square on the left, - those squares put together or what car? - What's called a golden rectangle. - So if you look, - there's the number, - and so you can start to find this in Roman art or a Roman architecture of Greek - architecture, - and you can see here that it's a golden. - The width of it is a golden rectangle. - Now whether that was purpose, - I don't know. - That's where the conspiracy theory starts to come in. - Is this the God number? - Who knows? - This is just amazing number that appears in nature. - So you can see here that a seashell if you keep going down the line and say OK, - well, - if you look at the bottom right square, - Um, - if you took that times 1.618 you would get the top right square, - right? - So all of these air relative to each other. - And if you keep dividing them or keep multiplying them down, - down, - down, - down to get smaller and smaller, - you can see that that's takes this shape of a seashell. - So it's a very common proportion that if you use in design, - um, - actually is very familiar to humans. - So if you look at Mona Lisa, - this is another example that the nose is the very focal point, - all based on this golden rectangle. - So if you go to one of the first Twitter redesigns was using the golden section in this - kind of golden proportion, - and you can see here the left and the right columns are perfectly in line with that kind of - golden section approach. - And if you look at the iCloud logo and apple, - you can see that these circles are just basically multiples of 1.618 and they're all - relative to each other. - NATIONAL GRID National GEOGRAPHIC That logo is a golden rectangle. 4. Screencast: Using a Grid in Practice: - So let's get into building some grids. - So I'm using fireworks. - Adobe fireworks, - because is the one that I'm most comfortable with. - But you can really use anyone that you want. - So here's one card mock ups dot com m o que u p s dot com This one is great because you can - just kind of jump right in just using your browser. - You don't have to download or install anything. - Um, - and it comes pre built in here with a grid so you can set Ah, - the grid snapping to 960 pixel wide grid. - And you can use 16 columns or 12 comets. - We're gonna be using 12 columns and then you can snap to grid down here. - Another, - um, - one that's gaining a lot of popularity is called Sketch Sketch is really cool. - My wife picked it up pretty quick. - She had no kind of previous knowledge about any of these graphics programs, - and she was able to get in there and do a lot of cool stuff, - so I would check out sketch if you haven't already. - So let's jump into fireworks. - So the first thing that I did in fireworks mock ups this is a lot easier to dio, - but I just set up 12 columns that were 60 pixels wide, - with 20 pixels in between. - So you can see here they add up to saved 940 pixels, - which is a pretty good size eyes for one of the largest sizes. - We could get into a responsive design and all that stuff, - but let's just stick with it. - Three column grid approach you could also use. - I mean, - I'm I'm talking about this in terms of Web stuff you could Also, - this could also apply in print, - so it really applies to any kind of design that you're working on. - So let's start out. - So let's put a personal So let's build like a personal portfolio page. - I think that might be a nice kind of generic approach to it that that we can use a liar - that principles that we're talking about the class. - So imagine if spare the columns, - imagine if, - say, - your name would go in this in these two columns. - So this is centred. - It takes up two columns and then let's say that there's a headline that spans all 12 - columns. - So what kind of spread that out and then down below here, - maybe we'll have some featured artwork. - So let's say that this one's here. - You can see how easy this is to kind of map out in your head and sketch out for a developer - . - Whoever's kind of maybe doing the final product S O. - This is a three ragged grid, - so we'll have some have some text below these boxes. - We're just gonna keep it nice and graphic here from now on. - And then after that, - let's do, - um, - sort of us Ah, - 626 column grids. - So if we go in here, - these air to com's, - um and so let's also try to do kind of a 2/3 approach here so you can kind of map that out - . - Maybe we'll do another another piece down here to fill it with some content to get some - nice variety in the different grids so you can see here and then at the bottom will put a - footer. - It spans the entire with, - so you can see here. - You're already starting to see a lot of a structure come about. - You can see here we have just the two columns centered up here. - Sometimes they call this an offset. - So, - really, - it's five columns offset from the left and to the right, - so you can see over here. - Um, - and so that's basically it is far, - as's faras the grid. - What's really cool about this is let's say this is the home page, - but then you want to create Ah, - secondary page or a secondary design. - Let's say it was a book. - You're designing a book and you wanted to have, - um, - a design that allows for much more contents. - We just delete this column, - delete the other ones and just drag this one. - Um, - let's grab order that with this. - And so we just drag it out here until it meets that. - So now you kind of have that 2/3 column to third ratio here, - which is really nice, - because now you can put some headers or sub headers and then a lot of like big chunks of - content over here. - Um, - and you know, - there's all sorts of ways down here to then break this grid up into two is well, - so you can really, - really get creative with it. - And that's really the power of grids. - Allow you to get really flexible with a lot of a lot of what you're doing. - But the cool thing is, - everything lines up, - and that's the going back to that. - The principle of creating order out of chaos. - So even with this page, - when we shrink it back and you look at the three column thing that we did in the beginning - that big square that was on the previous page, - that's gonna line up, - it's gonna line up pretty perfect with. - So imagine this was down the other page. - We kind of scared this up here. - You can see that this chunk, - you know, - this will line up perfectly, - and that's that's the real power of a grid. 5. Grids and the Golden Section: so there's one other really cool thing that you can do that's a different kind of an approach to a grid and using this golden ratio, right? So let's see that we start out with Ah, given Dimension. Let's say it's 300 by 300 pixel. This is a usually a standard ad unit. And so let's say that this this design has to be designed around an ad yet which super exciting. But let's just say that's what we have to dio. So if we start with this 300 on we have to do is take the 300 so ago your calculated here 300 times 1.618 and we'll get the other the other width. So that is 485 pixels 4850.4. But we're not gonna do decimals in here, so we'll make a square here. That's 485 by 485. So if you see here, this is a the entire width of this and not like if you if you would draw a a line around this entire box, this is now called the Golden Rectangle. So this is ah a proportional in nature rectangle tangle. Now that has a very pleasing proportion, right? It's It's what I was talking about earlier about this golden ratio. So the cool thing about this is Okay, so if you were if you were designing a blawg, you could add some space in here at 20 pixels in here and now you could have the ad unit over here, and this is how wide your content area would be. Right? So that's a really quick way to get a good proportion. Um, you know, right off the bat. So what we can do also, which is really interesting, is if you take this, put it down here when you go to make a square up here, right? So if I make this completely square down to the line, that's going to create another golden rectangle. So if I take this and create another square and make that square right to this edge, right in here is another golden rectangle, and that's how crazy it is. If you look at some of these these diagrams of the golden ratio, you can see it just keeps going down and down and down. You can draw that curve line. And that's how what I showed in that Twitter mock. That's how they got that that second half. So they basically just did it once. And so this was the left hand, Navid, and then this was the content area. So any time you're just looking for a quick way to get a nice proportion, just take that with the smaller width and multiply it by 1.618 and you get something pretty cool. 6. Intro to Visual Hierarchy: so the next section is visual hierarchy. So the definition, according to Wikipedia, is that visual hierarchy is the order in which the human eye perceives what it sees. Humans tend to group similar elements into meaningful patterns, So check this out. So we have this graphic. We've got pink dots, yellow dots. There's Aton of different principles and visual hierarchy that are coming into play. There's color. There's contrast. There's proximity. There's pattern. There was repetition. All of these things come into play to create this this pattern. So why is it important? Why is visual hierarchy important? And I just gave you the fancy pants definition of it, according to Wikipedia. But maybe you could think about it This way is that we all have limited attention. Spans were rushing from meeting to meeting. We're picking up kids, stuffing down dinner, watching that next episode of The Bachelor. That's just my wife, not make right when we see something where when we read something, we try to understand it as quickly as possible about scanning the page toe look for patterns. We look for relationships between those individual items and how all those items connect as a whole If the designer does a good job, we should be able to grasp the meaning of the page and then choose if we'd like to dive deeper into the content. So any time you go to George Reporter Huffington, Post buzzfeed or any of those sites you're scanning and you're looking for patterns, you're looking for hierarchy and things that will stand out to you. So if you look at the content of 37 signals Page, um, I always like 37 special space because they do such a great job of communicating hierarchy and all the different different principles. So if you took all the text on this page and you put it in tow one paragraph, it's obviously it's not very easily understood. It's the same exact content. But if you even if you read the whole thing, you may not even understand it. You may just skip over it, right, so we have to use that visual hierarchy and and use that to create those patterns and be able to scan things quickly. So if we take that just by simply using size and some some, um, some hard returns, we can create a bit more organization, and now you can see that there's header body tax. There's different. You know, there's different sub headers and all that sort of stuff, so you can see that the biggest header at the top is the largest font, and then you get down to base camp High rise campfire. Those are a bit. Those are a bit smaller, but those air kind of secondary headers on, and you can see how it's much easier to read. So one of the first things that I like to do when starting a design project is get all the content into an outline form. So if I'm writing the content and put in an outline of someone else's writing the copy, I'm gonna have them put it into an outline. And I'm going to create this outline to see which of the most important items in which do I want the viewer to view first or read first. So, in this case, the top header making collaboration productive. That's the top header. Visually, I need to make sure to use some of the principles we're gonna be talking about, that the viewer reads this item first, and then the rest of them. Some marketers will call it a slippery slope to make sure that you're reading the item in which they want you to read this item. So here's some of the ways that we can do that and I'm gonna walk you through and we'll do it. I'll do it, live right in front of you and will create a design. And we'll use these principles. So we have color space alignment, an implicit or explicit hierarchy. So here we go. 7. Screencast: Using Visual Hierarchy in Practice: - So now let's take some of these visual hierarchy principles and start to build a really - page. - So first, - we're just gonna get the content in there. - And I'm a makes just, - um, - size some size decisions now as far as the type, - but that's just to kind of get things again. - Kind of sketched out. - So this is a portfolio site will have the the name of time. - So her Jane Smith, - I'll use a Helvetica just to keep it really bland for now until we get in the typography. - Um, - so I'm gonna set this, - Get this around, - um, - kind of close to these edges, - So they kind of centered right here. - Center that. - So now we have the name. - So I wanted to put a decorative line underneath this to kind of just a nice little flourish - here, - So But I feel like Bob Ross, - the painter. - But we'll put that underneath there. - That's cool. - And so then we'll take this. - Copy this, - and we'll do the headline next. - So if we're doing the outline, - the headline would appear at the top of the outline. - So this is probably the thing that that you're going. - Do you want the viewer to see first because it's kind of setting the stage for what this - site is. - So this is the also missed website. - Awesome. - You're awesome ists that whatever you learn how to spell that awesome, - it's website ever. - All right, - so we put that they're just gonna gas. - Let's just say 50 pixels. - This is going to be full with here, - and then I'll center that it's kind of keep that in that general vicinity, - so next rule will break the page. - So if it's the portfolio site when we kind of break him into 33 categories of work, - So there's some images have already imported in here, - but this one here and put this one in the middle. - So just get these. - He's aligned here, - this one online year. - Fireworks has a nice way to do it where I could just go over here and say 20 pixels and it - hit, - um, - at the space that automatically give me that that wit. - So just the height and I can zoom in here, - make sure I'm right on that line. - We go on group that, - and so the next thing we'll do is thes second Dairy headers. - So these air going to describe So this one could be watercolor and this one could be - portrait's. - And then this one could be nature. - So these will be our secondary header. - So if this would be our first header, - this would be secondary header And then let's just put some some body text bowler. - That fireworks gives you a nice command here, - Laura. - Myths. - Um, - that will just give you some warm ipsum text to use. - Do you bring that in here? - I don't really need that much. - I'll cut some of it out. - And so this would be describing kind of what's in watercolor. - Take a little bit more out there. - So just this to that with and then I just copy and paste that's over here. - Get that lined up. - And yet that lined up. - So everything should be lined up there. - The next thing would be, - um, - maybe something else that you'd want a little bit more featured. - So I have an image here that I've already brought in, - um, - or just the size of that. - Put that right here. - And then we'll put a This would probably be another secondary header level, - so I probably want to keep this the same size. - I'm sorry. - Bring this Lauren Ipsum type in here and bring this over. - So I want to have a little bit of padding here. - Don't necessarily need to go right up against the box, - but for design sake, - I'm just going to do that right now. - So bring that over here. - Let's add some more text in there. - Gonna fill the space. - And so this would be like, - this is another section, - and so that's our are split column. - So this is two columns of six, - uh, - six blocks you could come. - And so the next is our 2/3 2 3rd 1 So this is where you can break the grid if you want, - because you're still using that right edge. - So if you look here, - I'm still I'm still lining it up with that right edge. - This is where you can create some, - um, - some interesting things that will grab the viewers attention, - that everything was into these nice little blocks, - and all of a sudden you break the grid. - It really brings attention to that particular item. - So if we do, - that will bring another of this secondary header here. - Just copy and paste this whole thing and bring it over here like this and then the justice - size there. - So now we have that 2/3 section which will give it a break, - the rhythm a little bit and give it some more variety. - And then down here will do the so you could do in this case, - I've seen footers that kind of broken up in the section. - So if we want to go down to this would be 1/3 level header. - So we have. - This is the second level header. - Now we're getting into third level headers because footer is not as important as some of - the other stuff that you have here. - So let's say that you had a bunch of links here, - so this would be link one like to three. - So this could be like your contact information. - Other helpful links. - Um and so I just break these into So let's do we'll do a three. - So do a bunch of these down here. - And this could be links to other blog's contact information, - all kinds of stuff. - So this should be a four columns, - Sir, - in these grid blocks, - let's just make that, - um, - four columns. - Yes, - I break that here. - There. - Where? - And they're that way. - Keep track of what we're doing there so I can move this up a little bit. - And so now we have our footer. - So this is the foundation. - So now we're going to jump into color as the first thing we're gonna do to establish visual - hierarchy. 8. Types of Hierarchy: Color: So now we're gonna talk about color. So how do you use color to establish hierarchy? So I went ahead and just picked three nice collars, complementary colors, and we're going to get in the color theory in later sections, so we'll just go with the colors of picked here. So first, let's take away the grid in the grid blocks. So now you can get an idea for how it looks. It's pretty bare bones right now, since we're gonna start adding some color into this to create that that that high rt using color. So let's first say, okay, we're going to start a big band across the whole, across the whole width. And on a Web browser, this would be 100% with. So let's just make this that nice kind of pinkish salmon color. And so right now, this the black in the in this pink, um, don't really work well together. They bleed a bit. We'll get into that again later in color theory. But so I'm gonna take this, gonna make all of these items white. And so now you can see that the the first thing that you see or that the the viewer sees is this headline because it's using this really bright kind of pinkish color to grab the eye and draw it towards it. So that's that. So next up is these things down here? So look at these. We want to make these links because these were gonna link out to watercolor portrait nature sections and different pages. So I've chosen this glue color too, to designate link color. So that will bring it As you scroll down this blue kind of pops out on grabs your attention with the right. Now this black on this body copy is a bit strong. So eso really this body copy is standing out color wise beyond this blue. And so what I want to do with that is take it toe like a later gray. So 777 works. Well, you can kind of work your way up. Um, like a 55 That's a that's a bit, um, a little bit more subdued. So the blue will stand out further than the 10 this body copy. So now this, I'll probably stick. I never use straight black. Um, there's tons of articles on why you shouldn't use straight black, but I'm gonna use if I do use black or use like a, uh uh, this color right here. Which is the hex color. 2 to 6 twos. Basically, Um, And so I use that color here because this is this will not be a clickable link. This is just something describing that. So with this with this body copy here, I'm gonna use that 555 color that I used to up here. So now you can see with using color, you can start to see patterns here. And so this is where you start establishing visual systems using just color that this is the same color Is this And now down here. So this is a header here. This is which is not a link like up here. So now these two colors should be the same. So I'm gonna go in here and make this the same colors, this one up here, um, so that I start to establish a rhythm with the color and same thing here. Gonna make this 55 which is what we used up here and which is what we used up here. So that's where you keep things consistent So all of these headers, these this these will not be links. So they will be the same color as the secondary header. These the third, The third level third level header to make those 55 and then links. We will make this blue color. You can see this now. There's a couple ways Teoh set these apart using color these sections here because they kind of it's kind of, um things kind of wrap weird here. So I'm gonna take a box here and just drag it across your king. Aiken, set this apart from the other one, so I just send it behind. You can see here. So if I use like a lighter grey, you can see now just subtly. It kind of boxes this in a bit more creative creates a nice line here so we can establish the difference between this this content, this content, it was a clear delineation. And so a sui get down to the footer. These fitter things kind of they kind of flow here. So we're gonna use color, um, color here. We used like, let's just drop box here, set this behind. We can just use a Carla that we found just on this mock up right here. So it's a nice kind of deep purple. And so now this doesn't sharp. Very well. Someone is going to take these and make them white. So now this is our footer. And this technically would expand to the bottom of the browser. So I just call it down this you can see how that would look. 9. Types of Hierarchy: Space: So the next principle of hierarchy ISS spacing. So you can see here you can use spacing to set items apart from each other and create an order to which you want the viewer to read it. So the reason why this stands out this top part stands out so much is that I've given it a ton of space around it. So if you know, as I go up here and as I bring this stuff up, you can see it starts to lose its importance. You almost want to go right here immediately. So what you want to do up here is give it enough space that it really stands out. So I can even go a little bit more than this kind of get this right inside of here. So there's a lot of space from the top from the bottom of this line here to the headline, and then an equal amount of space below it. So I want to go move all this stuff down. So if I zoom out, I could bring all this stuff down a bit. And so I'm I'm really borderline o c d. With how I have space things out so don't go in here. And so I'm using 20 pixels in between the grid columns. So when I go in this depending on the what a program you use you can use if you did it shift and then the arrow keys you can do in increments of 10. So if I dio I did 20 here, I could do 1234 Sometimes it's nice to do a vertical space of double the amount of horizontal spacing between the grids. So again, I just had 12341234 So now that'll be 40 pixels from the top of here to the bottom of that . So and then this way, and make sure that it's aligned center to the box and then up here. You know, you can also do the same thing so you can see down here If I put this up to the top of the page like this, go. 1234 I create that 40 pixels from the top here. So I start to create this this consistency with vertical rhythm as well as horizontal rhythm which you focused on with the grids. So when I go in here. I spend a lot of time on this. So I'm going in here. I zoom in real close, and I'll go 12 So maybe I'll just use 20 there. And then from here, you know, I could even get down toe to the space in between the text here and go 12 right? So then I look over here and try to match the same. So if I just look at the Y position 996 I can set thes 2996 as well. And it looks like this one's not 51. Okay? Said these ones are these ones are aligned and so in here. So I look at the top of this image right here and go. 11234 And then I'll grab the bottom of this image here and just increase the box by 40 pixels. A swell. So 1234 Make sure this is online to the other side, and then with this Oh, and then, by the way, you want to make sure that this tech the space between here is that 20. Maybe you want to use 40 pixels here, Get that 12 Looks like 20 pixels is good there. So go and hear. Zoom in and say 12 It's now you have that consistent, that consistent rhythm here. I'll make sure that the top of this images here 1234 and then down here, make sure that he's just group these together. And I lined them to the top and say 123 and four. Sure, these ones these links are also let's do 20 here. So just take it up to where you hit the bottom and then go 12 And there you go. So the space between this thing in the bottom so the space between basically each section. Um, Now I may want to keep it a little tight up here, but as I get down deeper into the content, I look at the bottom of this. So if I take it right to the bottom, I wanted you may want to do eight here. So, 80 if I hit shift and it down. 12345678 And then bring this up here. So I hit the time. 12345678 and If I bring that fritter up, I can do the same things. You just take it there. 123678 That way now really starting the tight, tighten up the vertical spacing and it's sometimes when you do it in one place, it really doesn't make sense. But when you start doing it consistently everywhere on the page, that the rhythm is going to start to make sense and things are going to start following in the place and feel much more comfortable on the I. 10. Types of Hierarchy: Alignment: So now we talk about alignment and visual hierarchy. And so most of the alignment I've already done. But you can you can see that if we start out with this kind of centered right down the middle approach. You can see this in architecture with churches, especially Catholic churches, that it will be a lying completely down the middle of the church that leads completely after the prophet to the cross. And so it creates a lot of of very balanced symmetry. So you could see here. I'm centering Jane Smith here. And imagine if I had done this. It starts to become a little bit unbalanced and you're not sure kind of where you're I wants to go. It's kind of even pulled in different directions. But as we use alignment, it creates this. It creates this slope that, as you go down the page using alignment here again with center alignment. Now, if I would have left a line these things I think it would have been OK because you're holding that line. You're basically aligning it with this with its with the element above this text here. So I think it would have been OK depending on the amount of tax. Like I've added a lot of text here. I probably would not center it because when you get large bodies of text centered eso if I took this and centered it, it was a really strange and it's really hard to read. So with here is just enough tax they don't really need to worry about left aligning it. So that creates some visual visual pattern here from this centered to these being centered . And then he here We don't necessarily need to center this because it's going to be hugging this edge of this image. And it's set apart visually using this gray box using color. So I wouldn't really want to do something like this. You can see here. Yeah, it's centered. But it kind of throws off the balance of this particular this particular layout right here in this box. So I'm just gonna go back. Teoh left aligning it like this. This is the same thing. Um, now, if I were you know, some people say OK, well, if it's over on this side, then I want to, right, align it. You can see here that even right, aligning things with large bodies Attacks creates a really strange wrapping because we're we're reading from left to right, So it's a little strange there so wouldn't do that there. Um, here. We could certainly center these links. It doesn't necessarily look bad, but I tend not to center align like lists because they end up looking like Christmas trees . Um, 37 signals. Home page is a good example of that. Sometimes they they use this center approach so you can see it starts to create, like, even down to that. I think they did it on purpose because actually looks kind of cool here, but you can see that it almost looks like an upside down Christmas tree. So when you go to nuts with the with the centering and starts to look a little strange so we're gonna keep these left aligned 11. Types of Hierarchy: Implicit and Explicit: - So now let's talk about implicit and explicit hierarchy. - So let's say that Jane Smith is a designer illustrator, - and the main Kota action they want tohave here is could be a learned mawr, - and we're gonna talk more about the label on the button in a bit here. - So let's just let's just start out with a button here will make it, - um, - let's say like a dark dark right here, - So make sure that centered, - and then we'll take this text up here. - Just put it right here and say you learn more sent to that. - So this is an implicit hierarchy. - So you're assuming that they're going to go from either either this Jane Smith right here - or the headline and then down to the Carter action and do what you want them do, - which is learn more and ultimately higher you. - So there's two ways that you could be a lot more explicit about what you want them to do or - where you want their eyes to go. - And so the first thing is, - is text based. - Then we have to be graphic. - So if you look at the label here, - learn more. - It's really not a strong, - explicit, - caught action. - And you're really not just really not kind of grabbing, - grabbing their attention and say, - I want you to do this right So you could say, - Hire me here, - right? - So that's more of a ah, - more of explicit Connor action and more explicit, - basically more explicit hierarchy. - And so that's one way to do it through just plain copy. - Another way to do it is, - And I've seen this on a couple different websites where it's just using an arrow graphic - like this that you, - you literally air trying to guide their I from this down to where the button is and 37 - signals does this a lot on their page. - You can see here that this is an implicit hierarchy. - They expect you to go from this headline down to here to kind of read more about this. - But as you roll over, - you can see they want you to take your eye back up. - India so visually, - they're pointing you in the direction that they want you to go in your eyes to to move. - You can see down here from the headline as you make your way down the page they want you to - see this over here. - They could have taken this arrow out. - It would have been a little bit more of an implicit higher. - Yeah, - it's It's in close proximity of this headline. - But using this arrow, - it's very explicit where they want you to go. - So use that sparingly. - Don't put arrows all over the page, - so usually I try to only kind of use it once, - Um, - if you use it more than a couple of times, - it starts to be obnoxious because basically, - the view is going to go where they want to go. - But if you're constantly throwing arrows and stuff like that at them, - it's going to get a little obnoxious. - So that's the difference between explicit and implicit hierarchy. 12. Intro To Typography: - the next section, - and one of my favorite things to talk about is typography. - So I get the question all the time. - Jack, - what fun should I use on? - There's so many fonts to pick from. - I think what I'd like to do here is to tell you the kind of the foundation of typography - and the different categories of fonts and various categories of typography. - So the 1st 1 is the serif front. - Some of you may already know this, - but the Serifis are the little ending points on the edge of these letters. - So you can see a lot of the times and in calligraphy that that's where the pen would would - come up at the end. - Um, - so in the Sara family, - there is the old style fonts. - So these fonts date back to 14 65 and have a distinctly historic feel, - so they emulated classical typography. - So bimbo, - beautiful front. - That's in that it if you're gonna use something to Teoh that you want to communicate the - kind of that old history feeling of bimbos, - a great a great fun to use. - So bone is another beautiful one. - So the context of these s so they can be there very verse attack. - And we use in large blocks attacks as well as large title. - So you can see here, - um, - in one of the most important documents in our country. - It's set in that old style font, - and so their best, - you know, - the character of these fonts are best used to convey a feeling of history and nostalgia - they have in our off world class and sophistication. - So that is the old style thoughts. - So the next is transition on the's. - Funds represent the transition between the old and the modern and first appeared the 18th - century. - The differences between the thick and thin lines. - We're very pronounced, - so this was like a big deal when they started the lot of them. - There's a big difference between the thin parts and the thick Brant's, - and they when they first appeared on the scene, - believe it or not, - they were considered very shocking. - And so times new Roman definitely not a fun that I turned into that I turned to very often - . - But it is that that workhorse front it's been around for a long time. - Um, - it's the fault front on many of the computers, - and these are workhorses. - They're found on most computers, - and they work well for large bodies. - A text, - But they really aren't that impressive. - When you when you blow them up and two titles, - Baskerville is a nice one to use if you're gonna use this type of front, - Um, - so I like to use Georgia's another one. - I like to use this front when I need to have the front be legible, - not obnoxious or attention getting. - We're just looking for a general standard. - Look, - these fonts will look great. - I personally like Georgia. - I think it's a great fun when it gets bigger, - and when it's smaller, - it's it's It's one of the if I'm going to turn to a serif on a on a computer that Georgia - usually is my 1st 1st selection. - So Slab Serif originated in Egypt, - and they have a bold rectangular appearance with heavy slab like lines. - So you can see here. - Clarendon um, - Jonathan Heffler font. - I love this. - It's used. - You can see all over the place from Starbucks Toe pitchfork Tonka, - Wells Fargo. - It's used all over the place, - so Rockwell's another beautiful one. - This one is really versatile and just has a really great personality. - And they look really good. - Big, - right? - So you can really take these slab serif fonts and you can blow them up and they're going to - really hold up. - Um, - I don't think that they work as well In paragraphs, - you can see here that they are used in paragraphs. - I tend to think they're a bit too decorative to use in a paragraph. - Um, - but they have a lot of personality. - Another one is scholar scholars, - a beautiful one. - I've used scholar a lot, - and it does actually hold up pretty well in paragraphs as well as when it's when it's - larger when it set as a larger size. - Archer is another beautiful one, - this one who really has a lot of personality. - So this one, - it feels very young. - So if you're gonna be using it to to To for designs for Children, - um, - or for toddlers, - I think this is a great a great choice. - So next up is modern. - So these Frantz took the differences between the thick and the things lined thin lines to - the extreme, - these funds are less readable in paragraphs, - cause of this contrast, - so a lot of the times modern. - This thes modern thoughts are used in titles. - So if you look at Adoni Ah, - beautiful modern find really big differences between the thick and the thin lines here, - um, - using them Its small sizes tend to distort the font. - Thes fonts look best at larger sizes. - Like I said, - So you can really see the contrast between the lines. - Daido is a really popular font. - This was originally designed for Harper's Bazaar magazine. - So anything fashion related, - this is a perfect front you can see here Bizarre. - Vogue and Elle, - um are all using that very modern font. - And it really just works so well, - a fashion. - That's why you see it over and over again in fashion. - So next up is San Serif. - So San Sarah thoughts do not have this small lines at the end of each letter. - So one of the first categories of sense air fonts are grotesque, - Frantz and it's interesting. - It came from the Italian word grotesque. - Oh, - meaning belonging to a cave, - right? - That's how nerdy ah typographer is were still even that far back. - Apparently, - that's what the German typographer is thought of. - This font heaters gonna hate. - So if you look at one of the first ones Brandon Grotesque, - this is a really great front. - Um, - these grotesque fonts are work horses, - right? - So they can be used in pretty much any context, - and they work well with large blocks of taxes. - Well, - is large titles, - accidents? - Grotesque is another one. - It's great that says a little bit more of a serious feel to it in Franklin Gothic love this - one especially. - It works well with all capital letters, - so you can see it works. - So when you're setting a title with all capital, - letters like the Rocky Rocky poster looks fantastic. - So next up in the san Serif category are humanist Frantz. - So these funds of the most calligraphy, - like of the San Serif typefaces, - they have a bit more flourishing personality than most of the sand serif typefaces. - So if you look at Gill Sands, - love this font, - it's got a lot of personality. - It's got liken innocents that I really love fruit. - Igor's also a really popular sans serif font. - Scala Sands. - This one really has a lot of personality. - You can see the W is really interesting the way it looks just basically like two V's over - laid on top of each other, - and these fronts. - They work well at any size. - So next is transitional on these with some of the most widely used fonts. - I think you'll recognize a lot of these. - They straight into the point. - They're also known as the Anonymous San Serif, - so they they don't have a ton of personality. - But depending on the context, - they actually can be used to convey that kind of serious look. - So if you look at the most popular one Helvetica, - right, - so most people who will kind of get hell. - Vatican Aerial mixed up? - Um Helvetica, - I think, - is a better drawn font. - There's big arguments around that, - but Helvetica is used everywhere, - right? - So if you live in New York, - you've seen it on the subway signs. - You can see it in American Airlines Staples Sears posted like a ton of There's probably 100 - more logos that have used Helvetica. - It's a very Swiss Ah, - lot of Swiss design uses Helvetica and this this, - you know they could be used at any size Universe is another example of a trend ish - transitional typeface. - Got a ton of different weights, - so this you can be used in all different context. - Larger, - small. - So what? - I'm looking for a kind of no nonsense drop did serious Fontes and my weapons of choice, - so you'll find him on warning labels and government documents, - all kinds of stuff. - So next one is geo metric, - and these fonts, - typefaces, - air, - heavily shaped, - driven. - Those are perfect circles. - The letters like a of perfect triangles, - eso example of these Futura. - So if you look at the Facebook movie poster that was setting for future, - if you look at the W magazine and this I shop, - therefore I am. - It's a very popular designer that's used that approach with that future Helvetica White - with the red background. - So if you're gonna use that approach, - just know that it's It's been used before, - and you'll probably be accused of ripping it off. - So these works thes funds were great at large sizes, - but also it smarter, - smaller sizes. - They tend to be less ledge a ble and awkward as they get smaller so you don't want to go to - small, - and they project like a modern, - sleek and future futuristic vibe. - I love using all caps which geometric fronts on, - even using all lower case levels to create a wonderful rhythm. - So you can see they look really great. - Um, - the lower case once Ah, - and you could set the entire thing in lower case, - and it's still gonna look good. - Another example of a geometric front is Gotham. - This is a really popular one. - It was used in Obama's campaign. - It's really got on modern feel. - It can be overused. - A lot of designers use it. - I I use it at night. - Sometimes I know I'm like a man. - Everybody's using this front, - but it just looks so good. - Um, - no matter where you use it, - it's always It always looks good. 13. Combining Typefaces: - So this is a graphic. - I put the link in the notes here, - but the entire, - like decision tree of you know you're using you're using it for a book or an invitation or - logo or newspaper. - You can kind of follow this thing. - It's a really interesting look. - It like all the different context of typefaces and so combining fonts. - So what are the dues and one of the don't of combining funds? - So the contrast visual contrast is key, - so you don't want to combine fonts, - typefaces that are too similar to each other. - So if you confined like an area on a have Attica, - it's just this. - There's basically no contrast there. - Only a true ah type type nerd is gonna actually notice that. - Um, - so if you look at scholar Sands and Gill sans, - here's an example of two very similar fonts, - um, - being used together. - It doesn't work very well, - but if you pair a serif with a san serif depending on the front and look really good, - so here's one cent. - No, - which is a slab serif mixed with the geometric front like Gotham medium set in all caps. - And it looks fantastic because There's a lot of contrast there, - so it's very easily visually to to distinguish the two. - Um, - wait. - Contrast is another one. - So using the bold and the light, - all the different weights that come with the font or the type so you can see here trade - Gothic bold, - condensed love, - trade Gothic, - using that bold and condensed and then creating a lot of contrast with Gotham Lights were - really light font. - Um, - with wise and mixing up with a bold condensed font looks really great. - Um, - so here's some other examples of different combinations, - so you have Acropolis black mixed with knockout. - In a sentinel, - you can see above this breakfast menu. - You can see they're using all different types of funds, - but you can really establish like a pattern for which which fun is which. - So you know, - if all the headers are set in Acropolis and all of the kind of the menu items air set and - knock out, - it's just a way to visually use a pattern. - Uhm, - to distinguish the two and you can see over here with Daido on the right hand side, - just mixed in with those things you can hear. - You can see here. - Here's some other ones. - Mercury Heffler in Gotham. - I'm not gonna go too far entities, - but you can kind of see how they are work together. - And I'm gonna include all the slides here So you can study these a bit more on your own - time. - Here's some other combinations. - Um, - hand gloves, - hand gloves, - escrow in Helvetica on the right hand side. - Um, - a big contrast between that really kind of modern, - that modern approach mixed with a very, - um, - a very standard front, - like a Helvetica for the body text. 14. Picking a Font Size: - And so how do you pick Ah, - font size? - So font sizes are hard? - Um, - it's usually very subjective. - There's no riel hard and fast rule. - Um, - you can use the golden ratio with phone sizes and there's and I'm gonna go into that two. - There's a calculator that's works really well, - but you can see here just based on the width of the paragraph, - you know what fought size do you want to use and what line height do you want to use? - So the line is the space between the lines of text, - and so here's one created by personified, - which is really great. - It's a golden ratio, - So remember back to the grid. - When we're talking about 1.618 you can type in a font size and the width and set your type - . - Consider, - that's going to give you the golden scale for a 16 pixel funds you can say set on my titles - and 42 my headlines in 26 sub headlines and 20 and so it'll give you a really balanced way - to approach your design. - I think it's a really powerful tool. - So here are the three typographic principles. - Call them. - Um, - when you're dealing with setting the type, - so you have the kern ing, - so cunning and tracking are often confused. - So Kern ing is, - is when you're taking the space between two letters, - right? - So you're adjusting the space between the L and the oh, - in tracking is more of a universal space between all the letter. - So whoever drew the font it's set in kind of a universal space between the two and Kernen - is when you want to actually go in there, - um, - and adjust the space between individual letters and then letting is the space between the - lines of tax. - So it's the space between love and type that is letting So this is an This is an awesome - game. - It's the current in game, - and it's funny. - My partner, - my partner in good Z Jonathan. - He always beats May in this game, - and so basically it gives you pairs off of text on, - and you have to guess what the So you take one letter and kind of guess where it should go - as far as getting ah, - proper Kern for that for that piece of text. - And they don't tell you how far you are off and it's really great practice. - It gets you really in the in the mind set of of being Able toe, - eyeball it on really kind of get a feel for how it should look. 15. Typography Crimes!: here's in front crimes. Don't use chronic sands, and you're a comic sans criminal if you do. But if you do, but we're here to help. You don't ever like. I literally pass out. When I see some of this insight, I'm such a such a design nerd that, like the either it won't fit horizontally or vertically. So someone would just literally just stretch the type like take the handle and move it up or down or left to right and stretch it. And it the person who drew that fine is taking hundreds of hours to properly like every pixel has been thought out, and for someone to just stretch it is just it's terrible. So don't do this. Stretch it vertically and don't do that. Stretch it towards on early Don't if you want to communicate a message. If we agree that in the beginning of this design talk, we just we define design is communicated message or solving a problem if your design so this if this particular front that I chose if this gets in the way of communicating the message that has failed as a design, so if I'm gonna use this like really pretty, you know, script, he font For a large body of text, it's really hard to convey the message. So that is, in my opinion, is not a good design. I'm You may be able to argue that, but if it really is hard to read this, then it's not doing a very good job. Definitely, obviously, definitely no comic sans and definitely no piras. That is a Microsoft Word front that I've seen multiple times and it's not cool. It's not Egyptian, it's not fun at all. Don't ever use it. 16. Screencast: Using Fonts in Practice: - So now comes the fun part typography, - and this is where the page is going to really start to get its own personality. - So if you take the personality of Jane, - let's say Jane is a very classical designer. - She, - um she a lot of her designs are very elegant. - So I would start with kind of taking these just selecting almost all the fonts here. - I will just start out with one fun and see how it goes. - So I'm just gonna select all of these, - all the text on the page. - And let's just start with Sentinel. - This is Ah, - Hofler Fred Jones front. - That's beautiful. - Um, - and it really has that kind of classical feel with a little bit of personality in it. - So it's not totally Old world, - but it's got that personality here. - So So sentinel is a bit it feels a bit smaller than what we had with Helvetica, - so I'd probably take this up a bit. - So I mean, - we take this to 58 probably take it to 64 so you can see now, - as I go up as I got the font size is say 70 68 gonna play with it until you get it right - here. - It's are gonna just that here and the hire me button a line that and so it's looking pretty - good. - It's holding up pretty well. - Um, - what I would do down here is the these. - The leading between these lines is a bit tight, - so I'm setting here at 120%. - You can do this. - It either pixels or percentages usually stick to a pixel. - And so and I talked about that golden ratio typography calculator in the previous lesson. - So go in there and use it and play with it and you'll start to kind of get an eye for it. - And so I stick with it. - 14. - I usually like to go through like a 2020 pixel line. - How it feels pretty good there. - And so I'll go down here and set the same line height. - They're so there's a bit more breathing room. - Just take this out of a little bit, - so yeah, - so take a little bit out of there. - So here's the same one will put this 1 to 20 as well. - These links, - they can probably opened up a bit more the space between, - so I'll take this to 20 as well. - And so, - um, - if you if you decide to stick with Sentinel, - you could also go with Gotham. - So let's say Well, - just try Gotham here. - I'll show you what happens to the personality as you change funds. - And so we'll go in here, - select this, - select all the all the text on the page, - and will go to Gotham so you can see now it starts to feel a bit more modern, - right? - So if I took this to a Gotham book, - it starts to feel, - um, - a bit a bit slicker. - Doesn't really have the same personality that it did with the Sentinel. - Um, - so depending on Jane's preference, - I mean, - this is again this is very subjective. - But let's if we if we go back to the san, - I think there's room that we could actually use Gotham in certain places. - So let's say, - and this is where we get into combining fonts. - So one of the principles I talked about in the lessons what typography lesson was that - you're gonna combine fonts, - make sure that they contrast. - So there's a pretty big stylistic contrast between Sentinel in Gotham. - So if we want to put, - like, - a subtle header up here, - so we just said settle better. - That could kind of be kind of playoff this headline right here. - So we'll take this down to say 18 maybe 16 maybe 14. - Play with it a little bit. - So take this here, - and I maybe do a bold here, - and so I'll take this back using color, - so it's a little bit doesn't stand out too much, - but it kind of just sits there, - and it feels it plays really nicely with the Serifis in this in the in sentinel. - And so I could increase the tracking in between here. - So I take this to 100 opens it up a little bit more. - I'd like to use these kind of smaller headers a lot. - Um, - so it looks really nice, - so you can play with it down here. - You can bring these these headers anywhere. - Um, - and these these could be considered. - Ah, - say fourth level headers. - They're kind of a subset of this secondary header, - but they can really set the content often and create some nice nice hierarchy there. - We could also this is 1/3 level header so we could use Gotham here, - and we could actually take this and make it all uppercase. - So if we went in here and then, - um and then did this So we take this down to, - like, - a 14 eso This would be good for, - like, - 1/3 1/3 level header. - That looks pretty nicely up here. - Now, - you probably want to set it off a little bit here. - Or maybe it is actually the same here, - So maybe we wouldn't want to take here and go with that under pixels of tracking. - Here, - you can see it gets a little bit long here, - so you could just make these a bit shorter. - So that's how you can combine fonts again. - You want to create you want When you combine front, - you want to make sure that they are. - They have enough visual contrast in between the two, - so usually a sans serif in a serif font tend to play really well together. 17. Intro to Color: So the last thing we're gonna be talking about is color, and there's a great article on color psychology on the Help Scout Blawg put a link to it in the notes. Here's a couple of main points. So they say there have been numerous attempts to classify colors. But the truth is, people's reaction to the colors are significantly affected by their own experiences. So if you look at this read, maybe classified is danger. But to an Alabama football fan, it's pure awesome. So it's still red, but completely different meanings, depending on the context and depending on your particular experience, Maybe you had a terrible Maybe you went to Alabama and I had a horrible spearing's There you're your personal bias may be completely different to someone houses. So if you're trying Teoh to make this about color psychology, if you get too far down that road, it's too hard to serve. Teoh. Use that color and apply to everybody's different emotional experiences for that color in the context. So it's much more important for your brand's colors to support the personality you want to portray. Instead of trying to align with a stereotypical color association like green stands for money. You know things like that. So you can look here, um, at different logos and you can see you know any well and debt and L and Facebook and Ford. There's some of these companies. They're completely different audiences, completely different personalities. Eso if you look at Coca Cola and CNN like completely different personalities, completely different missions, all that stuff, even with ESPN and Levi's subway in DHL a completely different, um, really different context. But using the same colors, you can't just say orange means this or Red means that because you can see that there's colors are used all over the place. So for me, I like to look at his personality, the personality you want your brand to portray. Plus the context so green could be used as used on environmental brand like Greenpeace, but could be using a completely opposite way as's faras TD bank. Um, you know, obviously those two are not connected in any way, Um, so you can see that, but they're both individually. They're both effective, so don't rule out one color because green means money. Green could also relate to the environment. So let's say you're selling motorcycles. She got Harley Davidson. Obviously, black, gold, yellow brown are gonna be rugged colors of choice. But you could also use a color to stand out from competitors. What if you were the first motorcycle company to use pink in your brand so you could take away the personality there and let's say and let's say that your brand's personality was rebellious, outrageous. And what if you weren't selling these bikes to big, tough, rugged dudes? Rather stay at home moms, right? So it's a very interesting Nets. You can see here that the personality, it's still motorcycles, but the context in the personality are completely different. So once you take that logo to a pink now, the personality is vastly different. So before I go to this next slide, let's play a little game. So imagine if your brand is clowns for birthday parties, right? So that's it. That's all I'm gonna tell you is that you do is that your business is class for birthday parties so immediately, what colors would you not use like your thinking in your head? You may not use black right, so generally black is dark and literally and scary and serious, But let's look at the context. Let's say you provide scary clowns for adult birthday parties, right? So now the context is completely different. So using black here might actually work, so you can see that the context and personality have a big role to play in the different different colors that you choose. 18. Color Theory Basics: So let's now talk about some color theory. So I'm using a tool called Adobe Cooler, and I put a link to this in the notes. It's a really great tool to get color palettes and kind of see visually how color theory works. So if we go down the line over here, so we have analogous colors and they're next to each other. So you look at the color wheel. They are next to each other on the color wheel so you can see yellow, green, blue, purple, orange. They have a lower contrast, so you can see the contrast between these colors. Here's is not much, but we're together because they have common undertones. So they all part of that same family. So you can see here as you move that out. As you move this main color around, you can see that they stayed next to each other on um on the color wheel. So the next one, our monochromatic and thes monochromatic colors are colors with variations, intent and shades, so the difference between 10 and shade tint means lighten by adding white. Once you add white nick, it's lighter. Shade means dark ing by mixing black in there seem put black in there. It gets darker. There's little variety in these colors, but they can use to create simple, clean, elegant color scheme with not that much contrast. So if you're going for that really kind of soft look, you won't want to use a monochromatic color scheme. So you can see here, Um, if you're brand's personality, if there's a lot of red or orange to see if you can look and see here, like where? The different shades that I can use, um, in that color palette. Ah, the next one is triad. So trying attic or three colors equally spaced around the color wheel so you can see the yellow here, that blue here in the red. Here, um, these are they. So they're not as contrast ing as complementary colors, but look a bit more balanced. Primary colors and secondary colors of both examples of try attic color scheme. So if you look at the primary color wheel that you may have seen when you're in grade school, these air, the examples of what they're they're definitely far away from each other. Just about as much contrast is you can get when you're working with the color wheel. Next one up is complementary, so complementary colors air two colors that are opposite each other on the color wheel, such as blue, purple and orange. They provide maximum color contrast and work particularly well when a warm color is paired with a cool color so you can see here if red. The red over here, which is to be considered a warm color, is then paired with this green over here, which is a cooler color. Next up is compound, so competent colors are colors containing a mixture of the three primary colors. All the browns, khakis and earth colors are compound color, so you can see as you play with this, you can get that kind of khaki here. You really have to play with it to get to get some good colors here. But there are. There are some good patterns that you can develop just by kind of spinning this around, um, and finding some of the pallets that work really like That's really nice. It's really got that earthy kind of tone to it. Um, and then the last one has shades so these air just mixes with black. So you take 11 base color right here, and then you just mix black into it. And this is really great. When you're doing well, you're doing Web design stuff where you need to say, Have you have a background and you need to make the tape if you're If you're creating a table there and you want to have just like a bit more contrast in the table than you could create, you can see here that, like what would be like just a little bit darker to stand out a bit more. 19. The Von Restorff Effect: - So this last section in colors are something I talked about in a previous scale share class - that I had on landing pages. - That is because it really applies well to Web design and landing pages. - And it's a It's a thing I got from Derek Halpern's Blawg, - and he talks about passive an action or act active colors. - And he talked about a thing called the Von Rest or for Effect. - So he said, - psychologists Hedwig von Rest or if studied, - what's known as the Ven the Von Restaurant Effect, - which is also called the isolation Effect. - It predicts that an item stands out like a sore thumb and is more likely we remembered than - the other items. - So basically, - what stands out gets remembered, - what blends in gets ignored. - So basically dares talking about picking one action color on your page that all the links - on your page have. - So if you look, - here s so if you look here, - you can see that this button get the app is green, - and he's not there not using green anywhere else in the page. - So they know that that's an action color. - So anywhere that they have, - they wanted Teoh use that color. - That means in the users had action. - Green means action. - You can see here there's there's a bit of a discrepancy in how they use the passive - inaction colors. - If you look at the top orange bar, - that's not a link. - It's just the background. - But then you can see down below, - get started using harvest. - Now some of the links towards the bottom there or in. - So there is a bit of a discrepancy there. - It may not be a big deal. - I think the most important thing here is that the button is green. - Um, - so it stands out a lot more because green isn't really used anywhere else on the site. - And so if you look here, - kiss metrics the same thing they have start your free trial and get me started with kids. - Metrics both green for that action color. - And so it stands out immediately. - Here's another example. - So you can see here sign up to see what others use is that action color, - and then in the top right hand corner, - sign up is another action color, - so that stands out a lot. - Um, - there is a little bit of discrepancy with you can see here they're using that in the middle - of their using that blew that bright blue is a background, - but then they're also using that blue for the links. - You know you can go back and forth with this. - I guess the bottom line is especially in Web design. - If you want something to really get noticed and really get remembered to make sure that - it's it's, - it's a unique color to the rest of the page. - So if you know you're using the Browns and Blues and blacks, - if you use a red button, - it's going to stand out and get remembered. - And I think that's one of the most important principles when you're designing a page. 20. Screencast: Using Color in Practice: - So the last section in the last section, - we talked about colors and color palettes and explained some color theory things. - And so I'm just gonna walk you through how I pick colors. - Um, - I'll start off by saying I don't sit here. - Um, - I've never been amazing with color. - And so I don't sit here and, - you know, - you know, - pull up a color were like this, - um, - so right here and just start playing with it in trying to find the right color. - Usually I have to be inspired by a certain color or personality or photo eso there's - there's someone different places to find inspiration for color, - and one of the one of the coolest ones is color lovers. - So I put that link in the notes, - if you hadn't heard of it. - Um, - so the great thing about color lovers is you can browse palettes so you can look at sea - here like one of the most popular pallets of all time. - You can say what are the most popular palace for the month, - and you don't have to use these exactly, - but they give you a lot of that, - gives you a lot of inspiration so you can go in here and see this and say, - OK, - maybe I just want to use this color and this color. - Um, - what's really cool is you can go in here and create patterns. - So all different kinds of patterns with this so you can use background images to create - just unbelievable amounts of different combinations. - So in here, - they just they have colors, - too, - so you can look and see here popular colors, - and then they give you a slightly darker one down there for highlights, - which is really nice. - Um, - so that's color lovers. - And so you can. - You can go into palettes and patterns, - pattern templates, - shapes and colors. - So the other one is, - and designers will roll their eyes at me. - But I've often go. - It's just nice colors flat you I colors dot com, - and sometimes when I'm just really stuck, - I just say, - OK, - I'm just going to use this blue or use this green. - Um, - they work really well together, - as you can see, - like through this row works really well and have a slightly darker color and then go - towards more of the warmer colors down there. - So some of These colors are used in this mock up, - Um, - and so I don't I don't feel guilty using these colors because there's no riel colors or - colors, - and there's only so many colors that you can choose from. - So you don't worry about being exactly original. - And when you're choosing colors, - you just be inspired by other designs. - One site that I go to to be inspired by photography or just design in general is site - inspire. - They have just amazing sights here. - Just a lot of ways to get inspired as to from type, - color and photography. - So definitely check out site inspire. - Another site is awards a W W, - W a R D s dot com and these have some some of them or um, - dynamic sites. - So a lot of them either use flash or html five. - So there's a lot of a lot of pretty cool things happening on this site. - There's one other ones that I didn't pull up yet. - It's down. - That's a good girl here. - So found F F F F found is an awesome sight for inspiration. - It's mainly just design and photography and just all kind of interesting images and - typography so I'm definitely that sometimes there's not so good things on there. - But you can see here business cards and just really amazing illustrations. - Some old school stuff from moving was Ryan totally remember playing that video game? - So Found ISM has just all kind of different inspiration. - You can get lost just cooking through and then going through all the different related - images. - So here's to other sites that I go to a lot for inspiration. - Design inspiration. - Swiss Miss. - Swiss dash ms dot com um, - Tina Rock Eisenberg is just amazing design, - blawg all kind of different stuff to get inspired. - Um, - and I think you know, - that's how I grew as a designer was just always looking at the best stuff that I possibly - could and and getting inspired from that and modifying and tweaking and taking one piece - from another place. - You know, - one place from one design, - another place from another sign and just like the combination of the two. - So it's very hard to create like a truly original design, - but it's really just taking all these different pieces that you're inspired from - architecture, - photography, - color. - Another one that's great is, - um, - picks. - Obey so picks obey has royalty free images. - Um, - and so basically, - you could just find public domain images that matter. - You don't have to pay for them so you can go in here to add Editor's choice. - All kind of amazing photography here. - Also, - if you go to 500 PX dot com. - Um, - see if I had the log in here, - actually, - just go to photos. - So when you go to search for, - let's say, - a car, - you can go down here when you search for a car and go toe any license and say attribution - noncommercial. - So in this case, - you're allowed to use it for non commercial purposes. - Um, - and then some of them. - There's there's just attribution 3.0, - so as long as you're giving attribution to the photographer, - you can use those images. - Same with flicker. - You can also search by Creative Commons. - Um, - so when you're searching for images on flicker, - just click on a folder called Show Me Creative Commons, - Um photography, - and you'll be able to get a ton of amazing photography that way.