One more thing before we get to our portfolio planning, we're going to look at something to consider in all of your design work crap, which stands for contrast, repetition, alignment, and proximity. Keeping these in mind will lead to more polished and professional results and allow you to build better websites than the average developer. First contrast, this can refer to color, shape and size. It is about making things relate to each other by being the same complimentary or opposite. So for example, in text you would have a bigger header size and your body size would be smaller. A general rule of thumb also is that you want to have contrast between the foreground and background content You can test this by converting to grayscale.

So you can see that the example on the left has good contrast. While the example on the right as bad contrast, in the one on the right, you can't really make out the text because it's too close in color to the background. Whereas in the left, it is a very different color and that makes it a lot easier to see. Color is a very important element of contrast and knowing about color theory will help, you can check out a great resource on this@canva.com. I will give the link in the description and you can learn the basics about color theory. I'll also link a list of 21 color palette tools for web designers and web developers.

The one that I prefer using is politan. So you can select a color and you can see with one color selected this purple, it gives us a bunch of darker and lighter shades. We can also select a Adjacent colors so that we can see colors that are close to that shade but slightly different. We can look at a triad of colors. So this is looking at colors that are opposite, but go together, and three of them in this case, and we can look at tetrad colors, which would include four colors that are two opposing the other two, but they all still work together. So I think this personally is a very, very useful tool for web design.

Next, repetition is important in establishing brand identity and order in your layout. This includes using a limited set of colors and fonts. So ideally, you want to limit yourself to three colors using a primary accent color, a secondary color and maybe a third color. You also want to limit to three font types. So having a font for the body Text having a font for the header and then maybe having a font for the branding. So here is a pretty terrible example of repetition.

So you can see that we have pretty much seven different font types. We have different font sizes, we have different sizes of images, different types of images. So we can see we have cartoons clipart, and then real pictures all smashed together. So that leads to very, very little repetition of things. And it's hard to really focus on where you should be on the page where your eyes should be on the page. Now, this is a much better example.

This is the IGN website and you can see that the navigation is separated. All the fonts, though, are very similar. They might be a little bit different, like the headers look like they're bold, obviously they're a different size. And so you can see that this is a lot more cohesive. All the images are also repeating the same size and We're also repeating the same pattern, the vertical rows and the horizontal rows as well. Alright, moving on to alignment alignment deals with two major things.

The first is text alignment, and the second is object alignment. So I think a lot of people are going to be familiar with text alignment, because in a word processor, you can change it to be left, right, center or justified. And you can see in the bottom right we have examples of how those texts look when they are aligned. So you can see that we have a an example here, this is what I would say is a bad example. You can see that they've chosen to center and justify a lot of the body text. If we were to fix this, you can see that basically, you would never want to center any kind of body text and you can see that they've also chosen to left align all the titles as well so that it flows is a very nice, neat row for all of the major texts, and then all of the sidebar text is aligned on the left as well.

So you can see centered, everything becomes left aligned, and it looks a lot better. Moving on object alignment is about aligning all the elements on the page so that they feel connected to each other. So edge alignment can mean like with left aligned text or right aligned texts, they're either all pulled to a straight line on the left or a straight line on the right. The other type of alignment is Center Alignment, and you can actually center something on a vertical y axis or on a horizontal x axis or both. So in our previous example, you might not have noticed that the logo was modified. So you can see that we put the title on one line and the subtitle on the other and then we group them together and then we center them vertically.

So on the y axis compared to the circle, so it's in the middle of the circle on the y axis. So that looks a lot neater than what it was before. All right. And lastly, proximity, proximity is a straightforward concept. And it boils down to placing elements that are related to each other close enough that they feel connected. So here's an example of a business card that shows the same information, but one has good proximity and the other is to spread out.

So ultimately, we have an example on the left we have the street address and the city separate and we have the phone number and the email separate. In the good example we want to put together obviously, the street address in the city because they go together to form the address. And then we want the phone number and the email together below that because they form the contact information. So these are Both groups that need to be kept together in order for it to make the most sense. So in summary, these principles should greatly help your web design ability. And these should be things that you keep in mind.

So make sure that you align up elements with each other. Make sure that things are all connected in one way or another, whether that's edge alignment or Center Alignment. Try to limit yourself to two or three fonts and colors only to keep things consistent. Make sure that you have good contrast. So make sure that there's good contrast between the sizing of your header text and your body text for example, or if you have a subtitle, text size. Make sure that your colors are good with your foreground and background.

So you can test that and get grayscale if you would like. Make sure that all the text is easy to read. And group late it related things closely together. So make sure that You have, especially if you have a project card. So you have an image for that project, you have a title, you have a subtitle, you have links by text, make sure that it all appears very close together so that it's not confused with the one next to it or below it. I would invite you to test yourself on your ability to see and differentiate good design from bad design by playing the can't unsee game, you can visit it at can't unseat that space.

So this is a great tool to learn the subtle differences between design that you might not otherwise consider. So you'll be given a series of two images and you're going to need to choose which one is the more correct you are being timed. So keep that in mind. And feel free to share a screenshot of your scores with everyone in the course when you're done. So that's it for our Crash Course and design principles are finally ready to talk about portfolio websites. We'll see some great examples by others and I'll also introduce you to a finished version of the project.

We're going to work on together. All right, I'll see you in the next one. Bye for now.