1 00:00:05,150 --> 00:00:13,280 As a conclusion of the user experience topic related to age, HTML and success, we are now going to 2 00:00:13,280 --> 00:00:15,970 talk about color combinations. 3 00:00:16,280 --> 00:00:24,700 Let's start introducing the so-called 60, 30, 10 rule, which is the use of colors following proportions 4 00:00:24,710 --> 00:00:28,780 this way, 60 percent, 30 percent, 10 percent. 5 00:00:29,000 --> 00:00:37,580 This is actually a technique linked to the interior design realm, but can surely help any web developer 6 00:00:37,850 --> 00:00:40,670 choose a correct color palette. 7 00:00:40,790 --> 00:00:50,240 That is a correct color combination so that the user may perfectly identify the main color, the secondary 8 00:00:50,240 --> 00:00:56,720 color and the X and color implied for text or other elements. 9 00:00:57,880 --> 00:01:04,990 What we have just seen may be considered a very good starting point for the choice of the correct color 10 00:01:04,990 --> 00:01:05,540 palette. 11 00:01:06,070 --> 00:01:14,710 Obviously, this is a general rule which can be fine in some situations, but by itself, this might 12 00:01:14,710 --> 00:01:20,520 result in not really visually appealing combinations to the user. 13 00:01:20,950 --> 00:01:29,710 These three proportions can be also due to the choice of colors taken from natural landscapes, which 14 00:01:29,710 --> 00:01:33,370 are the major inspiration for any designer. 15 00:01:33,880 --> 00:01:41,380 In the following images, we highlighted a series of types of palettes with colors extracted from the 16 00:01:41,380 --> 00:01:46,040 same made by four or three different hues. 17 00:01:46,660 --> 00:01:49,240 The aim is simply an indication. 18 00:01:49,720 --> 00:01:57,190 No need to say that when we have to deal with palettes having four elements relying on the sixth, the 19 00:01:57,190 --> 00:02:06,610 third hand rule is surely possible and using a downgraded color tone rather than those suggested. 20 00:02:09,890 --> 00:02:17,330 The first combination I would like to talk about is the monochromatic combination that is with the single 21 00:02:17,330 --> 00:02:21,850 coloring made up of different hues of one main color. 22 00:02:22,700 --> 00:02:30,500 As you can see, the reference used for this image is nature and also for the following combinations, 23 00:02:30,740 --> 00:02:34,310 we are going to stick to this kind of inspiration. 24 00:02:36,540 --> 00:02:43,170 This is the easiest Palek at all for combination's among those you can create. 25 00:02:43,650 --> 00:02:51,600 It is definitely unlikely to risk a bad combination using just one single color, but be careful not 26 00:02:51,600 --> 00:02:54,180 to create something which might result. 27 00:02:54,190 --> 00:02:56,340 Scrambled up or done. 28 00:02:57,490 --> 00:03:05,920 In addition to the monochromatic combination and strictly linked to it, there's the analagous combination 29 00:03:06,160 --> 00:03:14,800 which does not display one single color, but it color as veis plus others, which we come across around 30 00:03:14,800 --> 00:03:19,280 our color wheel as placed immediately beside it. 31 00:03:19,450 --> 00:03:24,800 We will never find a real clash in the colourings when using this combination. 32 00:03:25,270 --> 00:03:32,110 Therefore, we have very little respect for the contents to get overlooked and we will not cause any 33 00:03:32,110 --> 00:03:33,210 site trouble. 34 00:03:35,310 --> 00:03:43,590 The case, we've got the complementary combination, therefore a pallet composed of colors which sit 35 00:03:43,590 --> 00:03:46,360 opposite of each other on the color circle. 36 00:03:46,890 --> 00:03:54,540 This type of pallet is recommended when you want to use different hues or different shades of two opposite 37 00:03:54,540 --> 00:03:55,200 colors. 38 00:03:55,530 --> 00:04:03,870 So to generate harmony, causing no eyestrain and therefore result in pleasant to look at. 39 00:04:05,210 --> 00:04:14,380 Having to deal with two basic colors, I advise you to use a palette made up of an even number of colorings. 40 00:04:14,750 --> 00:04:22,820 Therefore, if you had to deal with, for example, like in the image sky blue and yellow, my suggestion 41 00:04:22,820 --> 00:04:31,010 is adding at least two more colors as a total one related to blue and another one related to yellow. 42 00:04:31,760 --> 00:04:39,050 To come to the end of this lesson and all the insight about the user experience, let's describe the 43 00:04:39,050 --> 00:04:47,900 triadic combination, which is a three color scheme with color placed as equally spaced around the wheel 44 00:04:47,900 --> 00:04:48,610 color. 45 00:04:49,280 --> 00:04:54,050 The most classic or these combination is red, yellow and blue. 46 00:04:54,560 --> 00:04:59,350 The use of this palette needs a great attention from the designer. 47 00:04:59,720 --> 00:05:07,610 It is necessary to perform quite a number of experiments to make the three tones, despite opposed among 48 00:05:07,610 --> 00:05:11,240 them, live in harmony within a web page. 49 00:05:13,920 --> 00:05:22,230 More than ever before, you surely want to refresh the contents of the previous lesson, because this 50 00:05:22,230 --> 00:05:31,170 sensations which different colors transmit can help a lot in the choice of this triadic combination.