Block 1

Now I'm going to show you how I would complete the assignment of adding color to our magazine or newspaper article. Now we know here that I have my interior magazine. I'm going to, this is the file available, I'm going to quickly review my assignment.

So the design requirements is that I use the branding colors in the Penpot file as a starting point, so this is my brand colors here. I don't have to use these exact colors in my design, but the colors in the final design should be recognizable as related to these brand colors. I can edit the existing colors in the assets panel to create an appropriate look that and feel that enhances the readability of the article.

So in the assets panel, if I... so I've got the brand colors here, peach and terracotta. And I have the UI colors here, and these UI colors are applied to the magazine design itself. I can see here the fill color, more of the selected colors in there. And so editing these UI colors will update my design. I don't even need to touch the design if I don't want to. I can edit the colors and add new colors if required. Okay.

My technical specifications: all colors must use a color asset in the assets panel to make design, collaboration and the development process easier.

Remember, you can find this assignment on the course site.

All content must be preserved, staying the same for my final design, the existing typography and layout must be preserved, staying the same. And the color palette must fit the theme of the newspaper magazine article and utilize those brand colors.

I can choose from a palette based on one color or multiple colors, and I can also create nuance if necessary. And I can document my color palette on a separate page with further annotations for recommended use. This is an optional extra task, so I think I'll probably do that as well. 

Okay, so let's have a look at my branding color palette. So far I just have these two colors. These are quite unusual colors for the web, but they're very popular in interior design right now, so this is quite a fun challenge, I think. So let's have a look at where this color could be used in the design. So I have the background body, I have the footer of the background, the background footer here. Currently it's the same color, but it could be a different one. 

I have the text, so this byline, I have the date, the headings, the placeholders for the images. Now, I suppose they could be any color, but we maybe make the placeholders work with the rest of the color for now. 

I have link colors, like up here I have paragraph colors, my quote color here and my nice big, this is the title here magazine title. Title, yes. So this is my magazine title color. 

Do you know what I'm first of all going to rename that? Because if I couldn't tell what it was, then it wasn't clear enough. So magazine title. 

So maybe let's start with thinking in terms of the background color, because that's going to be what we, all of the rest of the colors need to be readable on top of the background, so that's quite important.

We did white and gray in our dashboard design, so I'm feeling like I wanna mix it up and make it a bit of a bolder color this time round. I'm quite tempted to use the peach color as our background color, but let's work out what might be an accessible contrast for text against that background color. So we'll jump into our brand colors page.

I'm going to create a new page for my palette colors. And I'm going to change that background color so that we don't have our eyes getting sore, looking at that strong white, and I'm just going to copy those brand colors over into this color file and I'll just create another board on which I can build my palette. Okay? So if I start with a swatch for that on my size. Call that swatch... so my preliminary... my maybe background color. I want to be the same as this color here. It's peach. Is it peach? Is that the name of it? Yeah. Peach. 

So how will that work? If I duplicate the swatch and I want a text color, maybe I don't think I'm going to, this is definitely not going to be a strong enough contrast this terracotta. But let's just test it out as a starting point and let's open up our contrast tool and, okay, so we can see that this contrast ratio is totally insufficient. This brown terracotta color is not going to be dark enough on top of this peach color, but we could probably generate a shade of it that will be, so let's go into our color palette generator.

Of course you can use any tool for this. I'm just using this fabulous plugin that already exists for Penpot and I'm going to select a variety of peaches and I'm going to add that to my file and I'm going to do the same for a variety of terracottas. Add that to my file. I'm not create... I have the option to create these as color assets but I'm not going to do that yet. I'll do that when I've decided what colors I want to use. So there we go. They're actually quite similar colors, aren't they? Quite similar palettes. So this one is the terracotta and this one is the peach. 

Let's make my board big enough to include these swatches. There we go. Now let's call this palette. So I'm just gonna have this be my scratch palette is just a way of saying this is where the experiments are happening. It doesn't, it's not permanent. It doesn't matter if I don't use these colors. And maybe we'll create a different one for final palette.

Now, I'm still, I quite like this idea of this peach is my final palette background. So let's find a dark terracotta color that works against the peach color. So let's find a dark terracotta color that works against the peach color. So I'm going to create another swatch and I'm going to pick further down on my palette. Let's go to this. Dark terracotta color, pop open the contrast tool, and so we have a sufficient contrast there. 7.95: that is enhanced accessibility contrast. 

Maybe we will want a lighter shade for slightly less important content. We will try this out in a minute just to see how well it works. So I'll go for the next lighter shade of brown or terracotta and let's check the contrast of those two. Okay, so that is a reasonable contrast rating. If we're going for minimum contrast, it's not sufficient if we're going to go for enhanced contrast. So let's bear that in mind. 

And let's try these colors out. Is it going to look a little bit much? We'll see. So I'm going to save these colors just so that I can access them very quickly from the other page.

So I'm going to. Select this color. Save it. I'm going to call this, remember when we're naming groups, we can use this slash. So I'm gonna say, should I just call it palette slash... Group these items together under a group called Palette, and this will be medium brown.

There we go. And so this one is, let's save it from here this time. So palette peach, and this is a darker brown, maybe not our darkest brown palette slash darker brown. In fact, let's pick a even darker brown. So that we can have a really high contrast option. So this looks near enough black. That is black. I can tell 'cause black is six zeros, the hex color. And so we'll go slightly lighter than that and we will name this shade palette slash darkest brown. 

You might notice that even though I've created these colors here, they're not appearing as the fill color. That's because I need to go back and apply that fill color there, and that's good practice to make sure that your chosen colors, your color assets, and your fills stay consistent. Easy to forget to do that there.

Okay. Let's jump in and see how this works. So what if we want to, in fact, we can do it from the assets, can't we? We're going to try changing our background body color to the same as this peach. So let's save that and let's do the magazine title. Now, remember when we looked at the contrast for this brown and this peach? Right, pop open the contrast, it said that it's because it's 5.64:1 ratio, so it's lower than the 7:1 ratio required for enhanced normal text, but it is sufficient for large text.

So maybe this is what we should be using for our title and our headings. So I'm going to, in our magazine title, I'm going to use that lighter. Brown or that medium brown and for our heading as well. And let's jump over and see how that's looking. Oh, now it's funny when you look at it separately and not against white. This peach does look darker, doesn't it? I think I might even be tempted to use a lighter shade of peach, and that would give me a few more options for when it came to my colors. 

Now this is... gosh. And you know, I even thought that that might be black because it looks black against the peach, but I... it's definitely using the right fill color. And so it's funny how when you change the view and you look at your colors in context, they work completely differently. 

So perhaps let's go down and make our colors lighter. So go down in lightness. So let's pick a lighter shade of peach for our background swatch. Oh, I didn't mean to do that. Okay, so we're going to break this color. I'm going to choose a lighter shade of peach and save that to our file library if we pop into assets that's there highlighted for us already. Palette and I'd call that lighter peach. I might want to rename these colors later, when their relationships were a little clearer to me. 

And so that is our lighter peach. I've applied that to that swatch now. And in the background body, let's make that the lighter peach shade. Save that and maybe we'll make the footer into the darker peach. So we're still utilizing that original brand color. And so our titles looked really dark even though they were not. They looked like black even though they were this brown. So I think we can afford to use a slightly lighter brown if we're going against a slightly different contrast if we just check the contrast of that brown versus the lighter peach. See 7.89. So that is very sufficient for normal sized text. 

And maybe we want to break, detach that and we'll use the next shade lighter of the terracotta, which is this one. I think sometimes it can be hard to tell 'em apart. Yeah, it's this one and I'm going to add that to my palette. Lighter Brown. We apply that there. Did I apply this one? Yes. Okay. And so now I'm going to make my heading colors into the lighter brown and my magazine title into that lighter brown. 

Let's check the contrast of those quickly. Okay, so that is insufficient for large text, but it is okay. It's insufficient for normal text, but it is okay for the larger text. So we'll jump back into our file and have a look at how that's looking. Now, I'm pretty sure that is still black. So there's something going on with the fill color there. I'm going to reapply the magazine title color. There we go. So there was something going on with those fill colors. The same with the heading. So even though they were actually black, reapply those. There we go. And you see our footer that I like the contrast of that. It's knocking it back a little bit because the contrast between the text and the background is lower than above. But it's still keeping that brand color in there. 

So now let's work on the colors of our other texts. So our links. So we want to make sure that this is sufficiently dark, so we'll jump back into our palette, going to start organizing these a different direction so that I can add a little bit of documentation in a minute. And if we go into our assets, right. 

So we want quite a high contrast for the small text so that it stays readable. We can get a bit fancy with our quote because that's a little bigger, even though it's quite light text. So we need to be conscious that light text in itself is lower contrast to make sure that, remember from our typography, that we want to set this to about a hundred percent so that we get a feel for how readable it is in real life.

So, right, so you see black is very readable, but dark brown should still be good. So I'm going to jump back into this palette. So that we can select the colors, and I'm going to go with the darkest brown for the normal text. So let's edit that and go darkest brown. Oh, I didn't highlight the right color. There we go. And for our date and our byline as well, I might want to knock those back in a minute. In fact, you know what? I'm going to try the slightly lighter shade of brown. I already know that that's sufficient contrast against this light peach. And for the byline too, and maybe for links and for quotes, we'll do something a bit different. 

And let's have a view at what our magazine looks like. Now I'm just going to check that these are the correct fill colors. I am going to select all of these. I'm just going to remove their fill and reapply that color. Yes, I think that was fine. And this is the date and this is the byline. So I like that. It's still very readable. It's got warmth to it. And it's, yeah, even though this is slightly darker, it's quite hard to tell. It's just a subtle use of color, so I quite like that. 

Okay. I think this is starting to look a bit brown and peach.

I dunno about you, let's change these image placeholder colors. I know why don't we use the brand colors for those? That's, I think a nice way to keep evoking that brand in there. Even though inevitably we'll replace those placeholders with images later on, so I'm going to go to image placeholder primary, let's use the peach and for the secondary one, and we'll use terracotta to make sure that I've hovered over that sufficiently to grab the color.

And we will jump back into the magazine. That's, it's feeling very unified now. I do like that, but it is still quite same in color. So why don't we pick a contrasting color to draw attention to our links and maybe our quote and maybe lift, give it a pop of color as they like to say. 

I'm going to jump back into my palette and let's take those original... the colors from the palette, the terracotta and the peach. Pop these down at the bottom. Actually, I'm gonna use my scratch pad 'cause I'm scratching colors. So I'm going to find the complementary color for each of these. So that's the color that's across from this color on the color wheel. Now, do you remember how we do that? We do that using this complementary color option here. So if I then select the complementary ones, it's this nice blue. And what about for terracotta? So I'm on this little complementary one. This is my current selected color and the complementary color. And you see how lovely those colors look against these. It's different. It really lifts it. It gives us a bit of contrast.

So let's create some palettes for these sort of bluey turquoisey colors. So let's find my OKLCH. It's going to scroll so I can actually see the color I want to pick from. Choose my base color. There we go. Lovely shades of blue there. Add that to my file and let's do another one for the other option. Add that to my file. Close the panel. So let's pop these down here. Give myself a bit more room.

Did I name these? Yes, I did. So this I will call turquoise. Actually, what did I say about giving things obscure color names? I'm going to call this blue green, and this one is green blue. The dominant color is blue, but it has a shade of green to it, so that is green, blue.

Now my link colors. This still needs to be an accessible color contrast against that light peach. So let me grab, I think I'm going to use the blue rather than the blue green for this. So I'm going to pull it out into here, but 'cause I just want the same name, layer name, I'm pulling that out and I'm going to use the color picker, select it. Is that an equivalent color? Let's see. Is this a sufficient contrast? No. So let's go a little darker. I can actually just select these two colors using shift. Okay. So that darker shade of blue is a sufficient contrast against the peach. So let's go for this darker shade. I like that. Uh uh, there we go.

And what were the other colors that we needed to accommodate in our palette? The ones that are still black? Our quote now was that... that color wasn't sufficient for... And when we looked at the brighter blue before, that wasn't sufficient color at all against the peach, was it? Oh no. This one is okay. Not for normal text, but for larger text.

So I think we might be able to get away with that for our quote. We'll try it and we'll see if our eyes tell us that as well. So going for this lighter shade of blue. And we're going to add these in. So our quote is going to be edit that color dropper. Pick that color, save it. And for the link we're going for the light... the darker color. Color drop that, select that again. 

Let's go back and look at our magazine. I am pretty sure that's not high enough contrast that does, if you look at the difference between this color and the background, I think we need to make that the darker color as well. But I do like the blue for the other one. It does provide us with that little pop, you know, to the point where I think I'm going to use the blue for this as well. If I just apply the quote, yes, you look, that looks really cool and it's sufficient for a larger color. 

So let's tweak these magazine title that's going to be this color, and we're going to switch the quote color to be the same as the link color. I'm gonna zoom in to make it easier to color. Pick that text. I'm going to color pick over the top of that. 

Okay. I think that works really well. I'm quite happy with that. Let's go in and make sure we document our colors. I think that we do have quite a good amount of documentation in here. I think that it's quite clear what these are all used for. But I want to make sure that I have documented which colors have a sufficient contrast against each other.

And you know what? I'm going to delete this palette colors because they're kind of redundant now that I've chosen colors for my particular options. So let's delete that. Go into our palette colors, and I am going to take this with my, oh. Unlock that so that I can change the size of it. So this is a background color and this is also a background color. Unlock it so that I can change it size. So I'm gonna make these nice and full width. And let's look at my assets. So that's my footer background color. Maybe I'll label that with footer. I like DM Sand as a nice utilitarian font and it... this is body background.

You can really document this in whatever way you think will help either your future self or the team that you are working with. And to show that these are going to go on top, let's resize that. That's gonna be a bit small. So I do use those on top of each other, and I use that on top as well of the footer and the other body colors that we use. We do use this heading one, we use the date and the byline, and did we end up using this darker? One. That's the darkest. Yes. Did we use this one? Oh yes. This is the main one. And this one, we didn't use that for anything, so I'm going to remove that. Save ourselves the confusion to make these all 85 as well.

I like to use my most used color on the left, and then follow it with its matching hue swatches, and then put its accent color on the right. I'll show you how to do... I'll show you how to do this alignment in the future, so that will be a trick I'll teach you later.

Okay, and let's label these. Now, I know that the contrast between the, I've just realized I've labeled these wrong. Uh, this is the footer. No, I've put these on the wrong one. These belong on the body 'cause these colors are used on the body. Just making sure that's visible. And these are used on the footer that's used on the body. So I know that this footer color is a sufficient contrast, so it's quite handy that I can use that to label it there, and I'll do the same. That and this. Oh. Let's copy the text so you can see it's selected in the layer panel. That's how you know that's what you're copying and pasting. And what are the names of these colors? So this is our paragraph color. Oh, only just fits in there. Not really, bump that down a touch. Do that to match. So paragraph, this one we use for byline and date.

I like to lay out my documentation nicely as well. I don't have to, but it does help. This one is our heading. Sort of maybe worried about the sufficiency of that color contrast there, or, I know it's just the documentation, but you still want the people using your documentation to be able to read it. That's our heading. This is a link and quote. And this is our magazine title. 

I don't really feel the need to document the colors used for the image placeholders because they are just placeholders right now, and we'll just align these nicely.

Okay, so this is our final palette. It is minimally documented. Maybe in the future I might want to write down what the color contrasts ratios were for that, but now I've got these here, I can very easily just check the contrasts again, and it's very clear which is going to be used as a background and which is going to be used as a foreground. And so there I can see only sufficient for large text. That one. Oh, maybe that isn't sufficient contrast. Have I got the correct one selected? Oh, well, see. It's good that I double check that, isn't it? So I need to change that to a slightly darker color. Let's try that darker blue. Okay, see that's okay. 

So then maybe I need to make my link and quote one slightly darker, because if that's insufficient for smaller text, we wanna make sure that the links are very readable and stand out. Okay, so that's good. I am going to update them in here. Update that color. This is my magazine title. It's important that that is readable. and the quote text as well, and the link text. So that must not be sufficient either. Yeah, no. 

Now, because it is a different body color, the footer and the body, I might actually create a special color for footer links. I think that that will allow us to use the same, to use a slightly darker color. And not have to use the same as we use for links across the rest of the site. So I'm going to go for this darker blue for that 'cause I'm assuming that darker blue will be more readable contrast. Let's test that theory. Okay? Yes. So that is 7.38. So it is only just in there as being sufficient. So we are going to pull this footer link and we are going to select this color, add it to my file library so that is ui group slash to group it and footer, not foer footer link. Create that. And then I need to make sure that that is actually applied in the design itself. So these have now been updated. Oh, that's this quote. It's the wrong color. Make sure that that's magazine title. There we go. And these are now my footer links, so I've updated that. 

That's quite nice symmetry there, that it matches the typography name as well. So it is blue, but it is quite subtle when shown in context like this. So I think that is our design. I'm really excited to see what you do with it.

Remember that you can share your assignments in the Penpot community, and I'll share mine on there as well.