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