1
00:00:00,370 --> 00:00:05,565
How's your messaging app coming along,
were you able to rework the color?

2
00:00:05,565 --> 00:00:07,391
Let me show you what I did,

3
00:00:07,391 --> 00:00:11,549
the first thing I notice was
the brightly colored sidebar.

4
00:00:11,549 --> 00:00:16,654
The fully saturated orange is drawing
attention to the sidebar, making it

5
00:00:16,654 --> 00:00:21,691
difficult to focus on the messaging
area which is the key area of this app.

6
00:00:21,691 --> 00:00:24,621
I wasn't initially sure
which color to change it to

7
00:00:24,621 --> 00:00:27,765
since I noticed the color
palette needs improvement.

8
00:00:27,765 --> 00:00:32,851
The color palette mainly
consists of this bright orange,

9
00:00:32,851 --> 00:00:37,123
a pastel orange,
a bright blue and a light gray.

10
00:00:37,123 --> 00:00:40,589
The bold orange and
blue are complimentary colors,

11
00:00:40,589 --> 00:00:44,302
although it's not working
to this design's advantage.

12
00:00:44,302 --> 00:00:47,389
My eyes are bouncing back and
forth between the sidebar and

13
00:00:47,389 --> 00:00:48,524
the message button.

14
00:00:50,417 --> 00:00:54,452
I liked how the blue compliments
the abstract background and

15
00:00:54,452 --> 00:00:58,022
the music card, so
I pulled inspiration from there.

16
00:00:58,022 --> 00:01:01,101
I imagine this background could change yet

17
00:01:01,101 --> 00:01:05,130
stay within this palette of blues,
pinks and purples.

18
00:01:05,130 --> 00:01:08,335
While I like the colors
in this music card,

19
00:01:08,335 --> 00:01:12,532
the text is difficult to read
since the contrast is low.

20
00:01:12,532 --> 00:01:17,150
You can check the accessibility of
text color by using free tools online.

21
00:01:17,150 --> 00:01:21,680
Although I like the contrast.io app
because it sits in my status bar for

22
00:01:21,680 --> 00:01:24,412
easy color picking while I'm designing.

23
00:01:24,412 --> 00:01:26,863
Choose the text color and
the background color.

24
00:01:28,788 --> 00:01:32,689
It'll give a numeric score
which aligns with a rating,

25
00:01:32,689 --> 00:01:37,840
which align with accessibility
guidelines outline and the WCAG 2.0.

26
00:01:37,840 --> 00:01:42,463
I'll try to pick a lighter color to
determine the worst case scenario in

27
00:01:42,463 --> 00:01:43,782
terms of contrast.

28
00:01:43,782 --> 00:01:48,093
Here we see it scored AA+,
which is the smallest

29
00:01:48,093 --> 00:01:53,046
acceptable score for
type sizes 18 points or larger.

30
00:01:53,046 --> 00:01:57,209
For this text size,
a score of AA is preferable,

31
00:01:57,209 --> 00:02:00,775
since the text size is below 18 points.

32
00:02:00,775 --> 00:02:05,991
AAA would be even better, but
it's not completely necessary.

33
00:02:05,991 --> 00:02:12,688
To darken it, I added a dark pink
rectangle on top and set it to multiply.

34
00:02:12,688 --> 00:02:17,757
100% opacity made it a bit too bold,
so I knocked it down to 80%.

35
00:02:19,122 --> 00:02:23,954
By the way, in Figma you can
create color styles by clicking

36
00:02:23,954 --> 00:02:27,830
the quadruple dot icon
next to the fill header.

37
00:02:27,830 --> 00:02:32,975
This makes it easy to stick to the color
palette and prevents you from ending up

38
00:02:32,975 --> 00:02:38,216
with ten different blues when you only
intended to use three different blues.

39
00:02:38,216 --> 00:02:45,586
Also it makes easy to update a color in
one spot instead of every single instance.

40
00:02:45,586 --> 00:02:51,124
When naming styles, avoid adding color
descriptors like the word purple,

41
00:02:51,124 --> 00:02:53,603
instead describe their purpose.

42
00:02:53,603 --> 00:02:57,785
This makes it easier if you decide
to change the color in the future.

43
00:02:57,785 --> 00:03:00,857
Now, let's get back to the sidebar,

44
00:03:00,857 --> 00:03:05,370
if we check the contrast it
fails at a score of 2.55.

45
00:03:07,220 --> 00:03:12,188
So, I pick the dark purple from
the music card to help the white text

46
00:03:12,188 --> 00:03:13,447
stand out more.

47
00:03:13,447 --> 00:03:17,411
Now the purple side bar is rated AA, next,

48
00:03:17,411 --> 00:03:24,365
notice the tension between the warm
pastel orange and the light cool grey.

49
00:03:24,365 --> 00:03:30,601
The two colors clash as they're similar
in brightness, yet different temperature.

50
00:03:30,601 --> 00:03:35,027
I simplified this by sticking
with an overall cool palette.

51
00:03:35,027 --> 00:03:39,229
I changed the pastel orange background
to white that opens up the space and

52
00:03:39,229 --> 00:03:41,554
gives the content more breathing room.

53
00:03:43,377 --> 00:03:46,902
Great, so
now I have a nice palette shaping up.

54
00:03:46,902 --> 00:03:52,516
Another aspect we can approve is the use
of color to communicate actions and

55
00:03:52,516 --> 00:03:53,239
states.

56
00:03:53,239 --> 00:03:59,872
The use of color is inconsistent, some
links are blue while others are orange.

57
00:04:02,490 --> 00:04:07,809
There isn't a clear mental model for
these interactions to be different colors.

58
00:04:07,809 --> 00:04:12,421
I decided to switch all the text
actions to a bright blue,

59
00:04:12,421 --> 00:04:15,219
I see these as secondary actions.

60
00:04:15,219 --> 00:04:20,964
Then as for the primary action is the
message button and the open profile panel.

61
00:04:20,964 --> 00:04:24,184
It's already standing out as a big button,
but

62
00:04:24,184 --> 00:04:28,453
to further differentiate it from
the blue secondary actions,

63
00:04:28,453 --> 00:04:32,982
I used a bright purple to tie it in
with the music card inspiration.

64
00:04:34,382 --> 00:04:39,169
As far as selected states, the cooking
topic is selected and that's important

65
00:04:39,169 --> 00:04:43,681
enough, I wanted it to stand out by
accentuating it with the purple color.

66
00:04:43,681 --> 00:04:48,871
In the message composition box,
I switch the action buttons to a purple,

67
00:04:48,871 --> 00:04:52,987
as well as the rectangle
highlighting the selected text.

68
00:04:52,987 --> 00:04:57,658
I lightened the opacity of
the selected text rectangle to retain

69
00:04:57,658 --> 00:04:59,136
the text contrast.

70
00:04:59,136 --> 00:05:04,395
Now it's looking quite good, but
I can think of a few more tweaks.

71
00:05:04,395 --> 00:05:09,610
The color of the green status dot and
the red heart is quite bearish.

72
00:05:09,610 --> 00:05:14,274
Your first instinct maybe to grab
a default red or green color,

73
00:05:14,274 --> 00:05:18,684
but most of the time the best
looking colors are a bit muted.

74
00:05:18,684 --> 00:05:23,751
I chose some more muted tones of red and
green that don't stand out as much,

75
00:05:23,751 --> 00:05:27,060
we don't want to over
emphasize a minor detail.

76
00:05:29,703 --> 00:05:34,389
Now at this point, I was still inspired
by the music card background, and

77
00:05:34,389 --> 00:05:37,724
I wanted to inject some
character into the side bar.

78
00:05:37,724 --> 00:05:41,108
I added color rings which
use gradients to create

79
00:05:41,108 --> 00:05:43,837
an abstract design in the background.

80
00:05:43,837 --> 00:05:48,688
For a finishing touch, I wanted to
make the background more presentable.

81
00:05:48,688 --> 00:05:52,653
This isn't necessary for
every markup, this is just for

82
00:05:52,653 --> 00:05:56,958
polishing a design for
a presentation or for your portfolio.

83
00:05:56,958 --> 00:06:01,662
I added a linear gradient background
which compliments the design.

84
00:06:01,662 --> 00:06:06,422
Staying within the palette I
created a gradient that transitions

85
00:06:06,422 --> 00:06:07,988
from blue to purple.

86
00:06:07,988 --> 00:06:12,881
By making the colors similar saturations
and relatively close to each other on

87
00:06:12,881 --> 00:06:16,302
the color wheel,
the gradient is pleasing to the eye.

88
00:06:16,302 --> 00:06:21,802
To add up, I added a drop shadow
to the app, instead of applying it

89
00:06:21,802 --> 00:06:27,104
to the up rectangle,
I created a smaller rectangle behind it.

90
00:06:27,104 --> 00:06:31,774
This creates a deeper more
subtle shadow as if the app

91
00:06:31,774 --> 00:06:34,755
extends further into 3D space.

92
00:06:34,755 --> 00:06:39,142
If my design looks really
different from yours, that's okay.

93
00:06:39,142 --> 00:06:44,056
There's so many different ways you could
apply color to this user interface,

94
00:06:44,056 --> 00:06:47,340
and the important thing is
to just keep practicing.

95
00:06:47,340 --> 00:06:50,570
I hope you can go forth creating
a harmonious palette and

96
00:06:50,570 --> 00:06:53,400
an intentional use of
color in your next design.