1 00:00:01,500 --> 00:00:03,564 Color is probably the most complicated 2 00:00:03,564 --> 00:00:06,725 area of user interface design. 3 00:00:06,725 --> 00:00:09,508 This is because we have a tendency to use colors 4 00:00:09,508 --> 00:00:13,348 that distract and feel completely unnatural. 5 00:00:13,348 --> 00:00:16,076 That can make our design look very messy. 6 00:00:16,076 --> 00:00:18,604 Do you want an example of this? 7 00:00:18,604 --> 00:00:19,943 Here you go. 8 00:00:19,943 --> 00:00:21,428 What do you say now? 9 00:00:21,428 --> 00:00:23,298 This is probably the worst website 10 00:00:23,298 --> 00:00:25,916 I have ever seen in my entire life. 11 00:00:25,916 --> 00:00:29,908 But this is obviously a joke, but you get the point right? 12 00:00:29,908 --> 00:00:33,436 So let's try to avoid messy websites like this one 13 00:00:33,436 --> 00:00:37,482 with the guidelines I will show you in this lecture. 14 00:00:37,482 --> 00:00:39,604 The first thing I want to recommend 15 00:00:39,604 --> 00:00:43,538 is to use a single base color for your design. 16 00:00:43,538 --> 00:00:46,683 And with base color I mean any different color than 17 00:00:46,683 --> 00:00:49,600 black, white or some shade of grey. 18 00:00:50,599 --> 00:00:53,218 If we want to build a clean and simple website 19 00:00:53,218 --> 00:00:57,815 having too many colors in too many places all over a website 20 00:00:57,815 --> 00:01:01,751 is an easy way to completely screw up that goal. 21 00:01:01,751 --> 00:01:06,207 So sticking to one main color is definitely a good idea. 22 00:01:06,207 --> 00:01:09,622 Especially if you are just starting out with design. 23 00:01:09,622 --> 00:01:11,987 The colors you see hear on this slide 24 00:01:11,987 --> 00:01:15,303 are from a tool called Flat UI Colors. 25 00:01:15,303 --> 00:01:18,447 Flat UI Colors is a very cool resource 26 00:01:18,447 --> 00:01:20,808 to choose your base color. 27 00:01:20,808 --> 00:01:22,104 To start out, 28 00:01:22,104 --> 00:01:26,271 I think you can't go wrong by choosing any of these colors. 29 00:01:27,168 --> 00:01:31,273 And beside fixing a base color you can also create a darker 30 00:01:31,273 --> 00:01:34,182 or a lighter version of that color. 31 00:01:34,182 --> 00:01:37,638 Doing so you can create a nice color palette 32 00:01:37,638 --> 00:01:39,818 like this one here. 33 00:01:39,818 --> 00:01:42,165 A color palette shows all the colors 34 00:01:42,165 --> 00:01:44,880 to be used in a certain design. 35 00:01:44,880 --> 00:01:48,713 I use a tool call 0To255 to create that darker 36 00:01:49,922 --> 00:01:52,089 and that light blue tones. 37 00:01:53,813 --> 00:01:56,915 I strongly recommend to create color palette like this one 38 00:01:56,915 --> 00:01:59,002 for your design. 39 00:01:59,002 --> 00:02:00,998 As I said before the grey tones 40 00:02:00,998 --> 00:02:03,716 are not considered base colors here, 41 00:02:03,716 --> 00:02:06,270 and we many times need some of them actually. 42 00:02:06,270 --> 00:02:09,895 For instance for text and for background colors. 43 00:02:09,895 --> 00:02:13,248 Find the link to these two tools that I mentioned 44 00:02:13,248 --> 00:02:14,915 in the course Ebook. 45 00:02:16,697 --> 00:02:19,715 Now if you really want to mix up multiple colors 46 00:02:19,715 --> 00:02:22,934 I recommend you use a color wheel tool 47 00:02:22,934 --> 00:02:26,296 Like Adobe Color CC or Paletton. 48 00:02:26,296 --> 00:02:29,175 These tools make use of color theory 49 00:02:29,175 --> 00:02:32,571 to choose the best color combinations for you. 50 00:02:32,571 --> 00:02:35,704 So for example here with Adobe CC Color 51 00:02:35,704 --> 00:02:39,600 you can create your color palettes using color combinations 52 00:02:39,600 --> 00:02:41,758 that actually make sense. 53 00:02:41,758 --> 00:02:45,591 Just play around with it and see what you get. 54 00:02:46,460 --> 00:02:49,275 You can then use a main color to draw attention 55 00:02:49,275 --> 00:02:52,526 to the most important elements on your web page. 56 00:02:52,526 --> 00:02:54,733 Like a call to action button 57 00:02:54,733 --> 00:02:59,477 and a second or third colors can complement the main color. 58 00:02:59,477 --> 00:03:02,330 That is just what this website is doing. 59 00:03:02,330 --> 00:03:05,255 Their main color is clearly green 60 00:03:05,255 --> 00:03:08,301 but they have this nice orange to draw the attention 61 00:03:08,301 --> 00:03:09,468 to the button. 62 00:03:11,209 --> 00:03:13,316 And that brings us to the next guideline 63 00:03:13,316 --> 00:03:15,735 which is about attention. 64 00:03:15,735 --> 00:03:17,531 When you're in doubt about using colors 65 00:03:17,531 --> 00:03:20,683 and don't know where to use colors and how often, 66 00:03:20,683 --> 00:03:22,502 I have a solution for you. 67 00:03:22,502 --> 00:03:25,114 Just pick a color that stands out and use it 68 00:03:25,114 --> 00:03:28,048 mostly to draw attention to a button 69 00:03:28,048 --> 00:03:32,428 or any other element of importance on your website 70 00:03:32,428 --> 00:03:35,105 Uber's website here does a terrific job 71 00:03:35,105 --> 00:03:36,938 in doing exactly that. 72 00:03:38,576 --> 00:03:40,949 At number four, and this is very simple, 73 00:03:40,949 --> 00:03:45,036 never choose the black color for any part of your design. 74 00:03:45,036 --> 00:03:47,776 This is because black actually almost never appears 75 00:03:47,776 --> 00:03:49,462 in the real world. 76 00:03:49,462 --> 00:03:53,629 So using complete black just doesn't feel natural. 77 00:03:54,835 --> 00:03:58,105 And last but not least I want to say a few words 78 00:03:58,105 --> 00:04:02,616 on which colors you should actually choose for your design. 79 00:04:02,616 --> 00:04:05,738 That's because picking a color for a website means 80 00:04:05,738 --> 00:04:08,391 much more than picking your favorite color 81 00:04:08,391 --> 00:04:10,857 and turning it into a design. 82 00:04:10,857 --> 00:04:12,706 It means picking the right color 83 00:04:12,706 --> 00:04:16,791 in order to get the desired response from your audience. 84 00:04:16,791 --> 00:04:19,255 Color really makes a difference. 85 00:04:19,255 --> 00:04:22,375 This happens because there are psychological effects 86 00:04:22,375 --> 00:04:24,510 behind each color. 87 00:04:24,510 --> 00:04:27,693 So let's see what feelings each color can evoke 88 00:04:27,693 --> 00:04:30,193 and how to use this knowledge. 89 00:04:31,442 --> 00:04:34,760 Red is a great color to use when power, passion, 90 00:04:34,760 --> 00:04:39,048 strength and excitement want to be transmitted. 91 00:04:39,048 --> 00:04:41,679 Brighter tones are more energetic 92 00:04:41,679 --> 00:04:45,967 and darker shades are more powerful and elegant. 93 00:04:45,967 --> 00:04:50,816 Orange draws attention without being as overpowering as red. 94 00:04:50,816 --> 00:04:54,305 It means cheerfulness and creativity. 95 00:04:54,305 --> 00:04:56,633 Orange can be associated with friendliness, 96 00:04:56,633 --> 00:04:58,550 confidence and courage. 97 00:05:00,328 --> 00:05:01,420 Now Yellow. 98 00:05:01,420 --> 00:05:04,235 Yellow is energetic and gives the feeling of happiness 99 00:05:04,235 --> 00:05:06,080 and liveliness. 100 00:05:06,080 --> 00:05:09,958 Also it associates with curiosity, intelligence, 101 00:05:09,958 --> 00:05:11,791 brightness, et cetera. 102 00:05:13,662 --> 00:05:17,829 Green is the color of harmony, nature, life and health. 103 00:05:19,145 --> 00:05:22,558 Also it is often associated with money. 104 00:05:22,558 --> 00:05:26,725 In design green can have a balancing and harmonizing effect. 105 00:05:28,143 --> 00:05:32,457 Next, Blue means patience, peace, trustworthiness 106 00:05:32,457 --> 00:05:34,170 and stability. 107 00:05:34,170 --> 00:05:38,650 It is one of the most beloved colors, especially by men. 108 00:05:38,650 --> 00:05:42,716 It is associated with professionalism, trust and honor. 109 00:05:42,716 --> 00:05:45,088 And that's actually why the biggest Social Networks 110 00:05:45,088 --> 00:05:47,505 out there use the color blue. 111 00:05:49,248 --> 00:05:52,126 Purple is traditionally associated with power, 112 00:05:52,126 --> 00:05:54,473 nobility and wealth. 113 00:05:54,473 --> 00:05:58,088 In your design purple can give a sense of wisdom, 114 00:05:58,088 --> 00:06:01,255 royalty, nobility, luxury and mystery. 115 00:06:03,429 --> 00:06:06,989 Pink expresses romance, passivity, care, 116 00:06:06,989 --> 00:06:09,322 peace, affection, et cetera. 117 00:06:11,019 --> 00:06:14,578 And finally the color brown is the color of 118 00:06:14,578 --> 00:06:17,303 relaxation and confidence. 119 00:06:17,303 --> 00:06:20,964 Brown itself means earthiness, nature, durability, 120 00:06:20,964 --> 00:06:22,964 comfort and reliability. 121 00:06:25,435 --> 00:06:28,507 And that's it for colors in this lecture. 122 00:06:28,507 --> 00:06:30,835 If you want to learn more on this subject, 123 00:06:30,835 --> 00:06:34,009 I included a couple of links in the course Ebook, 124 00:06:34,009 --> 00:06:36,988 where you can read all about color theory, 125 00:06:36,988 --> 00:06:39,405 make sure you check them out.