Color Tint Fetish
This episode addresses the unnecessary proliferation of color options in design systems and emphasizing the importance of prioritizing user experience over color choices.
001
Transcript
00:50 Hey, good to see you.
00:50 Thanks for coming.
00:51 This is another episode of Wireframe, and today I’m going to be talking about color.
00:57 Now, admittedly, I’m probably unqualified to be talking about color normally
01:00 speaking, and that’s because I am color deficient, also known as colorblind.
01:05 And that doesn’t mean that I can’t see color, and I want to make sure
01:08 I disambiguate that really fast.
01:10 What it means is that I have difficulty seeing the
01:13 difference between colors, okay?
01:15 So That might be a blue or a purple together and that same kind of
01:21 scale or the dark green and brown, which was very apparent to me when
01:26 I was working for UPS, knowing full well that the uniforms are brown.
01:31 To me, they look dark green.
01:34 Now I’m not going to be talking about color in this way.
01:36 And if you’re actually interested in the science behind color, I
01:39 highly recommend Nate Baldwin’s website called Color and Contrast 1.
01:44 I’ll make sure to link that in the show notes.
01:46 But what I’m gonna be talking about here today is a question that came up in the
01:50 design system slack channel, which was asking about many of the systems that
01:54 this person was seeing across the public.
01:57 And in these systems, what happens is you will find the color page or the
02:02 color documentation and see all of these tints that maybe go from like red 100
02:08 and red 900 and all the colors in between and have all these different options.
02:12 And his question was, why do these systems have all of these different tints?
02:19 When very few of them are used.
02:22 And this is a great question, and this is something that’s come up a
02:24 couple of times in the community.
02:26 So much so that I wrote a blog post, which is called Colors Don’t Solve Problems 2.
02:31 And in that post I argue that we end up creating too many colors, and,
02:36 like I said, not using many of them.
02:40 In fact, we spend too much time on this process and it only results in
02:46 having Hick’s Law come into play.
02:50 And that basically means there’s too many options for people to choose.
02:54 Now, I replied to that thread with that blog post and I think the person
02:58 really appreciated that response.
03:00 There were other responses in that thread.
03:01 One of them was against my approach, basically saying that color is important
03:05 in, in this way and challenges it by saying that removing weights is an
03:10 exercise in premature optimization.
03:13 Now I, of course, argue that if the weights were never there in the
03:16 first place, then you’re not removing them, and therefore, null and void.
03:20 That’s okay.
03:21 But in fact, there’s other people out there that share this opinion that we
03:26 are putting too much emphasis on color.
03:28 This was actually found by accident.
03:30 I was on Twitter looking at, you know, regular tweets, I suppose.
03:34 And I came across PJ Onori, who you might be familiar with from the Design
03:37 Systems Office Hours 3, and he’s in the middle of creating a typeface
03:41 and he’s building it in public
03:42 to show everyone what that process looks like and all the trials and tribulations.
03:46 And in that, he was showing some screenshots of his new
03:50 typeface and against articles.
03:52 And one of the articles that he was trying out was an article
03:56 called, Color is a Four Letter Word 4.
03:59 And I was like, well, that’s a great title.
04:00 I want to know where that blog post is.
04:01 It happened to have been on his own blog, which is excellent.
04:05 So, I read that post and I realized that I think we share many of the
04:09 same feelings about how color is being handled in our line of work.
04:14 And I highly recommend that you read his post as well.
04:16 I’ll put it in the show notes.
04:17 I like how he creates analogs to the physical world.
04:21 Like, the way that he introduces the museum and the reason why
04:24 those walls are white is to focus on the artwork in particular.
04:27 It’s not detract from the reason that you’re here.
04:30 It’s excellent.
04:31 But that’s the general gist of what I think I’m also saying as well.
04:34 And in fact, it is potentially fitting to be the first episode here of Wireframe,
04:41 because I believe that when we’re choosing color and doing this curation step, many
04:47 systems and teams are doing it backwards.
04:50 Now, what do I mean by doing it backwards?
04:53 Well, I think this is also very similar to the way that Dan Mall presents Your
04:58 Next Component 5 I’ll put that also in the show notes so you could take a peek at it.
05:02 But what he suggests in there is that Many folks believe that the button is the
05:07 first thing to do in your design system, because of course you’ll need a button.
05:11 But what he’ll argue is that the button isn’t as helpful as
05:16 potentially another component that you could be building for your teams.
05:21 He suggests for Uber, as an example, that the map component would be
05:26 a lot more impactful than, you know, creating a button for them.
05:31 So, this is a similar kind of thing that I’m talking about,
05:34 but for the facet of color.
05:35 And, in fact, I’m saying that things like color, Maybe even just the
05:41 values themselves, color, topography, rounding, all of that stuff is really
05:45 things that should be considered last in the grand scheme of design systems.
05:51 Now you must be saying to yourself, how can we have a system without color?
05:54 Well, You absolutely can.
05:57 I’ll explain a little bit how.
05:58 And the way that you do that is really due to wireframes.
06:03 Yes, we’re gonna go ahead and tie it in for the first episode,
06:05 wireframes are the answer.
06:06 The reason why I think wireframes are the answer is because the
06:09 wireframe is representing the foundational user experience.
06:13 And that is, without any color, Really, without any typography, very minimal
06:18 spacing or really no spacing system to be found other than some relational stuff.
06:25 So really, you’re trying to identify exactly what the experience needs
06:30 right down to the studs, right?
06:33 And it has to work at that point before you ever consider the personality
06:39 that you’re going to put on top of it.
06:40 This is the form following function.
06:44 Which means that the wireframe is the function.
06:46 This, this needs to function in this way.
06:49 And then what follows that is the form, right?
06:51 It’s that brand expression that you’re going to put on top of it, or this
06:56 feedback expression that you’re going to put on the notification system.
06:59 All that stuff is things that are going to be added after
07:03 the experience is understood.
07:06 And I think all too often we forget about that wireframe step and immediately go
07:10 to that high fidelity where it’s sexier.
07:12 Right?
07:13 And that’s a lot more fun and interesting than the wireframe step.
07:18 Right?
07:18 It feels like, oh, I could just, you know, do these two things at once
07:22 and really cut the, the time in half about the user experience workflow.
07:27 Right?
07:29 And yes, that could be possible.
07:31 However, I think, again, we are not putting enough emphasis on that UX and
07:35 putting too much emphasis on that UI.
07:37 So when I’m talking about this being backwards, what I’m talking about is we
07:41 are putting too much emphasis on what colors could we have and not enough
07:46 emphasis on is this solving the user need.
07:49 So I want to go a little bit more into detail about the actual color
07:54 selection process, or not really the process, but maybe the results.
08:00 Yeah, I think that’s what I really want to talk about here because those
08:03 results are all those tints, right?
08:05 What comes out of those exercises that our designers have is that they come out with
08:10 a range of tints that say all these colors work nicely together and go forth, enjoy,
08:15 have a good time with all of your flavors.
08:17 There’s a couple of problems with this.
08:18 The first problem that I see is that oftentimes those colors that
08:23 appear in the middle Of those scales are very difficult to use.
08:28 And I’d say that from a contrast standpoint, not from a, oh, it’s harder
08:32 to put color 100 versus color 200 in there just from a placement standpoint.
08:37 That’s not what I’m talking about.
08:38 What I’m talking about is the values that exist in the middle of these scales,
08:42 especially when we’re talking about the grays are typically very unusable.
08:48 Just think about the, the gray that would be hex eight, eight, eight.
08:51 That’s middle gray or an RGB.
08:53 It’s 128, three times.
08:54 Okay.
08:55 Right?
08:55 That gray, with any other color, is going to be very difficult to read.
09:00 So why have it?
09:02 Just because you have a 400 and a 600 you need to have a 500?
09:05 Not necessarily no right in colors don’t solve problems.
09:10 The blog post, I argue that it would be much better for you to have the
09:14 opposite ends of that spectrum rather than the entire spectrum, right?
09:17 So if you have to have these decisions of color, have them at the opposite ends.
09:23 To go a little bit further than that, just have the colors at both ends, right?
09:29 So for the red as an example, you would have the light red and the
09:32 dark red, and that’s all you need.
09:35 And what that helps with is that Hicks law that will occur with designers
09:39 that will go ahead and say, well, with eight different shades of this
09:43 red, I don’t know which one to choose.
09:45 You’ll have folks that will choose the 400 folks that will choose the
09:48 500 folks that will choose the 700.
09:50 They’ll choose anyone that they think looks better.
09:54 But if you only have those two, the light red and the dark red,
09:56 it’s a lot less choice, but makes it a lot easier to choose
10:00 so that means that.
10:02 The only thing that they have to think about in their mind is can I read this
10:06 text or not if it’s dark red or light red depending on where I’m placing it.
10:10 It’s a lot faster to go ahead and choose that and everything’s going to be a lot
10:13 more consistent if it’s the same red.
10:17 So I think that’s really what you want.
10:19 All these tints that you’re creating in this exercise is really sexy,
10:24 and it’s low hanging fruit too.
10:26 It’s a fun time to go ahead and start choosing colors, you know,
10:29 express yourself in a new way.
10:31 I really think that it would be a much better use of time, instead of trying
10:36 to choose these colors, to actually again, Go back to your wireframes and
10:41 look at the experience and see how it could be improved there, right?
10:46 Your bottom line, right?
10:48 The money that’s coming in for your business is not going to be make or
10:52 break from the colors that you choose.
10:55 That’s what the fundamental message of Colors Don’t Solve
10:59 Problems is talking about, right?
11:00 All those choices that you’re making when it comes to color, they’re not
11:04 going to affect your bottom line.
11:05 What’s going to affect your bottom line is a good user experience, right?
11:09 And there’s so many tools out there to go ahead and choose the right colors.
11:13 I use many of those tools myself, because I’m color deficient, to figure
11:16 out what colors to choose for my sites.
11:18 And it’s typically one of the last things I do, right?
11:22 And I do that because I have tokens that support the ability
11:27 to change these colors, right?
11:28 And that’s the thing that we’re supposed to be doing, right?
11:31 When we’re talking about, again, doing this stuff backwards, if we want to
11:34 be allowing color to exist in the page or in the experience, create
11:40 the mechanism where color can exist.
11:43 on the page first.
11:46 That’s, I think what’s going to be critical in here, you know, for a little
11:49 bit of an analog in the real space, right?
11:52 I think it’s a little odd for us to be choosing colors
11:55 before we ever seen the room.
11:57 I think we should be seeing the room first, understanding the room’s needs
12:01 before we ever decide, okay, this is the color that I want for this room.
12:06 It’s the same kind of scenario in my mind.
12:09 We shouldn’t really be looking at colors.
12:12 Until we understand the space.
12:15 And don’t get me wrong, this is a hard thing to do.
12:16 Right?
12:17 I’d much rather be playing around with colors because
12:19 colors do have an expression, do have an emotion behind them.
12:22 As a person who was an artist for a long time, colors do mean something, certainly.
12:28 But again, this is user experience design.
12:31 And we have to think about that user first.
12:33 So if you
12:34 know more about this approach and have a couple of visual examples
12:37 of what I’m talking about.
12:39 Certainly, take a look at the blog post that I’ll have in the show notes
12:42 called Colors Don’t Solve Problems.
12:44 I hope that it’s enlightening and people reconsider the importance of
12:51 this color exercise and try to set it aside for more important things that
12:55 could be more critical to the system.
12:58 In fact I hope.
13:00 To have another Wireframe episode that really talks about semantic
13:03 tokens which I probably will because knowing me, I love talking about
13:07 semantic tokens and hopefully that won’t be an hour long episode.
13:11 But, generally speaking again, I, I think, you know, it is a powerful thing to
13:19 prioritize the things that are important.
13:23 And color, I believe, isn’t as important as many people
13:28 out there think it might be.
13:30 So, what do you think out there?
13:32 You let me know.
13:33 You could tweet at me at wireframefm 6, give me those comments, and I’m interested
13:37 to know what your take on this is.
13:39 Because color is a big thing when it comes to design, right?
13:43 Many people have different feelings about this, you know, even folks
13:45 that are out there that might share my opinion have a different take
13:49 about why color you know, isn’t as important as people bring it out to be.
13:52 Or maybe you have the same frustrations out there when people are.
13:56 Trying to choose colors and they aren’t accessible or don’t know the reasons
14:00 why those colors are being chosen.
14:01 Oh, one more thing, by the way.
14:04 There is a reason where colors are kind of, sort of important, but I’ll
14:11 talk about that in another episode.
14:13 So you’re gonna have to keep listening.
14:15 I’m sorry, there’s more coming.
14:17 It’s what’s gonna happen.
14:19 But anyway, it was good talking with you folks.
14:21 See you