Color: After6:54 with Hope Armstrong
Follow along with one solution for improving color in this practice project.
How's your messaging app coming along, were you able to rework the color? 0:00 Let me show you what I did, 0:05 the first thing I notice was the brightly colored sidebar. 0:07 The fully saturated orange is drawing attention to the sidebar, making it 0:11 difficult to focus on the messaging area which is the key area of this app. 0:16 I wasn't initially sure which color to change it to 0:21 since I noticed the color palette needs improvement. 0:24 The color palette mainly consists of this bright orange, 0:27 a pastel orange, a bright blue and a light gray. 0:32 The bold orange and blue are complimentary colors, 0:37 although it's not working to this designs advantage. 0:40 My eyes are bouncing back and forth between the sidebar and 0:44 the message button. 0:47 I liked how the blue compliments the abstract background and 0:50 the music card, so I pulled inspiration from there. 0:54 I imagine this background could change yet 0:58 stay within this palette of blues, pinks and purples. 1:01 While I like the colors in this music card, 1:05 the text is difficult to read since the contrast is low. 1:08 You can check the accessibility of text color by using free tools online. 1:12 Although I like the contrast.io app because it sits in my status bar for 1:17 easy color picking while I'm designing. 1:21 Choose the text color and the background color. 1:24 It'll give a numeric score which aligns with a rating, 1:28 which align with accessibility guidelines outline and the WCAG 2.0. 1:32 I'll try to pick a lighter color to determine the worst case scenario in 1:37 terms of contrast. 1:42 Here we see it scored AA+, which is the smallest 1:43 acceptable score for type sizes 18 points or larger. 1:48 For this text size, a score of AA is preferable, 1:53 since the text size is below 18 points. 1:57 AAA would be even better, but it's not completely necessary. 2:00 To darken it, I added a dark pink rectangle on top and set it to multiply. 2:05 100% opacity made it a bit too bold, so I knocked it down to 80%. 2:12 By the way, in Figma you can create color styles by clicking 2:19 the quadruple dot icon next to the fill header. 2:23 This makes it easy to stick to the color palette and prevents you from ending up 2:27 with ten different blues when you only intended to use three different blues. 2:32 Also it makes easy to update a color in one spot instead of every single instance. 2:38 When deaming styles, avoid adding color descriptors like the word purple, 2:45 instead describe their purpose. 2:51 This makes it easier if you decide to change the color in the future. 2:53 Now, let's get back to the sidebar, 2:57 if we check the contrast it fails at a score of 2.55. 3:00 So, I pick the dark purple from the music card to help the white text 3:07 stand out more. 3:12 Now the purple side bar is rated AA, next, 3:13 notice the tension between the warm pastel orange and the light cool grey. 3:17 The two colors clash as they're similar and brightness, yet different temperature. 3:24 I simplified this by sticking with an overall cool palette. 3:30 I changed the pastel orange background to white that opens up the space and 3:35 gives the content more breathing room. 3:39 Great, so now I have a nice palette shaping up. 3:43 Another aspect we can approve is the use of color to communicate actions and 3:46 states. 3:52 The use of color is inconsistent, some links are blue while others are orange. 3:53 There isn't a clear mental model for these interactions to be different colors. 4:02 I decided to switch all the text actions to a bright blue, 4:07 I see these as secondary actions. 4:12 Then as for the primary action is the message button and the open profile panel. 4:15 It's already standing out as a big button, but 4:20 to further differentiate it from the blue secondary actions, 4:24 I used a bright purple to tie it in with the music card inspiration. 4:28 As far as selected states, the cooking topic is selected and that's important 4:34 enough, I wanted it to stand out by accentuating it with the purple color. 4:39 In the message composition box, I switch the action buttons to a purple, 4:43 as well as the rectangle highlighting the selected text. 4:48 I lightened the opacity of the selected text rectangle to retain 4:52 the text contrast. 4:57 Now it's looking quite good, but I can think of a few more tweaks. 4:59 The color of the green status dot and the red heart is quite bearish. 5:04 Your first instinct maybe to grab a default red or green color, 5:09 but most of the time the best looking colors are a bit muted. 5:14 I chose some more muted tones of red and green that don't stand out as much, 5:18 we don't want to over emphasize a minor detail. 5:23 Now at this point, I was still inspired by the music card background, and 5:29 I wanted to inject some character into the side bar. 5:34 I added color rings which use gradients to create 5:37 an abstract design in the background. 5:41 For a finishing touch, I wanted to make the background more presentable. 5:43 This isn't necessary for every markup, this is just for 5:48 polishing a design for a presentation or for your portfolio. 5:52 I added a linear gradient background which compliments the design. 5:56 Staying within the palette I created a gradient that transitions 6:01 from blue to purple. 6:06 By making the colors similar saturations and relatively close to each other on 6:07 the color wheel, the gradient is pleasing to the eye. 6:12 To add up, I added a drop shadow to the app, instead of applying it 6:16 to the up rectangle, I created a smaller rectangle behind it. 6:21 This creates a deeper more settle shadow as if the app 6:27 extends further into 3D space. 6:31 If my design looks really different from yours, that's okay. 6:34 There's so many different ways you could apply color to this user interface, 6:39 and the important thing is to just keep practicing. 6:44 I hope you can go forth creating a harmonious palette and 6:47 an intentional use of color in your next design. 6:50
You need to sign up for Treehouse in order to download course files.Sign up