Voiceover: Color is probably the most complicated 2 2
area of user interface design. 3 3
This is because we have a tendency to use colors 4 4
that distract and feel completely unnatural. 5 5
That can make our design look very messy. 6 6
Do you want an example of this? 7 7
Here you go. 8 8
What do you say now? 9 9
This is probably the worst website 10 10
I have ever seen in my entire life. 11 11
But this is obviously a joke, but you get the point right? 12 12
So let's try to avoid messy websites like this one 13 13
with the guidelines I will show you in this lecture. 14 14
The first thing I want to recommend 15 15
is to use a single base color for your design. 16 16
And with base color I mean any different color than 17 17
black, white or some shade of grey. 18 18
If we want to build a clean and simple website 19 19
having too many colors in too many places all over a website 20 20
is an easy way to completely screw up that goal. 21 21
So sticking to one main color is definitely a good idea. 22 22
Especially if you are just starting out with design. 23 23
The colors you see hear on this slide 24 24
are from a tool called Flat UI Colors. 25 25
Flat UI Colors is a very cool resource 26 26
to choose your base color. 27 27
To start out, 28 28
I think you can't go wrong by choosing any of these colors. 29 29
And beside fixing a base color you can also create a darker 30 30
or a lighter version of that color. 31 31
Doing so you can create a nice color palette 32 32
like this one here. 33 33
A color palette shows all the colors 34 34
to be used in a certain design. 35 35
I use a tool call 0To255 to create that darker 36 36
and that light blue tones. 37 37
I strongly recommend to create color palette like this one 38 38
for your design. 39 39
As I said before the grey tones 40 40
are not considered base colors here, 41 41
and we many times need some of them actually. 42 42
For instance for text and for background colors. 43 43
Find the link to these two tools that I mentioned 44 44
in the course Ebook. 45 45
Now if you really want to mix up multiple colors 46 46
I recommend you use a color wheel tool 47 47
Like Adobe Color CC or Paletton. 48 48
These tools make use of color theory 49 49
to choose the best color combinations for you. 50 50
So for example here with Adobe CC Color 51 51
you can create your color palettes using color combinations 52 52
that actually make sense. 53 53
Just play around with it and see what you get. 54 54
You can then use a main color to draw attention 55 55
to the most important elements on your web page. 56 56
Like a call to action button 57 57
and a second or third colors can complement the main color. 58 58
That is just what this website is doing. 59 59
Their main color is clearly green 60 60
but they have this nice orange to draw the attention 61 61
to the button. 62 62
And that brings us to the next guideline 63 63
which is about attention. 64 64
When you're in doubt about using colors 65 65
and don't know where to use colors and how often, 66 66
I have a solution for you. 67 67
Just pick a color that stands out and use it 68 68
mostly to draw attention to a button 69 69
or any other element of importance on your website 70 70
Uber's website here does a terrific job 71 71
in doing exactly that. 72 72
At number four, and this is very simple, 73 73
never choose the black color for any part of your design. 74 74
This is because black actually almost never appears 75 75
in the real world. 76 76
So using complete black just doesn't feel natural. 77 77
And last but not least I want to say a few words 78 78
on which colors you should actually choose for your design. 79 79
That's because picking a color for a website means 80 80
much more than picking your favorite color 81 81
and turning it into a design. 82 82
It means picking the right color 83 83
in order to get the desired response from your audience. 84 84
Color really makes a difference. 85 85
This happens because there are psychological effects 86 86
behind each color. 87 87
So let's see what feelings each color can evoke 88 88
and how to use this knowledge. 89 89
Red is a great color to use when power, passion, 90 90
strength and excitement want to be transmitted. 91 91
Brighter tones are more energetic 92 92
and darker shades are more powerful and elegant. 93 93
Orange draws attention without being as overpowering as red. 94 94
It means cheerfulness and creativity. 95 95
Orange can be associated with friendliness, 96 96
confidence and courage. 97 97
Now Yellow. 98 98
Yellow is energetic and gives the feeling of happiness 99 99
and liveliness. 100 100
Also it associates with curiosity, intelligence, 101 101
brightness, et cetera. 102 102
Green is the color of harmony, nature, life and health. 103 103
Also it is often associated with money. 104 104
In design green can have a balancing and harmonizing effect. 105 105
Next, Blue means patience, peace, trustworthiness 106 106
and stability. 107 107
It is one of the most beloved colors, especially by men. 108 108
It is associated with professionalism, trust and honor. 109 109
And that's actually why the biggest Social Networks 110 110
out there use the color blue. 111 111
Purple is traditionally associated with power, 112 112
nobility and wealth. 113 113
In your design purple can give a sense of wisdom, 114 114
royalty, nobility, luxury and mystery. 115 115
Pink expresses romance, passivity, care, 116 116
peace, affection, et cetera. 117 117
And finally the color brown is the color of 118 118
relaxation and confidence. 119 119
Brown itself means earthiness, nature, durability, 120 120
comfort and reliability. 121 121
And that's it for colors in this lecture. 122 122
If you want to learn more on this subject, 123 123
I included a couple of links in the course Ebook, 124 124
where you can read all about color theory, 125 125
make sure you check them out.