Original subtitles

1 1

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.