7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 27Length: 4.7 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 Setting the Color Scheme and Base Typography

Every time I start a new web design project, I always start with the color scheme and typography because these are the factors that will define the entire design, right? So what I usually do is, this sketch I start with an art board. I call it colors information. And I try and layout the main colors. Now for the main colors, I usually tend to stick with two, three of them max, right. And the main colors basically mean the [INAUDIBLE] color. The primary color and the secondary, or the accent, however you want to call it. So, number one, the brand color. Now the brand color may depend from case to case. In my case for this particular documentation, I imagined a blue color like this would work just fine. And the hex code is this one, 4890e2. Of course this again depends from case to case. If you're doing this for a client then you might take that color from the client logo. That's usually the best way to do it. Now what exactly do I need this for. I'm not gonna use this exact color in my design. Instead, what I'm gonna do is duplicate it and I'm gonna fill it with black, and apologies if you cannot see the entire color picker here. So I'm gonna fill it with black and then I'm gonna give it an opacity, between 80 and 90%. In this case, I'm gonna go with 85. So the idea is, you first get the black color. And the black color, instead of using just a plain black, just blend it a little bit with the coloring. In my case I chose the brand color. It's just a small detail, but I guarantee it makes all the difference. So then what I'm gonna do is simply use a color picker. So I'm gonna pick this color and I'm gonna create the new section here for the black colors. And for the black colors, I'm simply gonna get the color picker from Sketch and I'm gonna get that value. Now, based on this initial black color I'm gonna define the rest of my black or grey colors, all right? And I'm gonna define those using opacity. Instead of defining a simple gray I much rather use a black color with an opacity. So let me give you an example and show you what I mean. So let's duplicate this and let's set the opacity here to about 50%, right? And then let's also duplicate it, and set the flow here to this exact same color but with 100% opacity, right? So now we have two colors. That look exactly the same but this one is solid and this one has a transparency as you can see. So what would happen if I have, let's say a colour background and I use two pieces of text. I'm gonna just zoom in here, so you can see what happens. So the first one, I'm gonna set it to the exact color that I have here. Now, and remember, this is the solid color. The second one, I'm gonna use the black with transparency, all right? So I'm getting this black and applying 50% opacity. Now take a look at how these two look like. Her, here's the solid gray. And here's the one that we obtained by using opacity. Miles away from each other. That's why I always prefer using just the main black color and then different levels of opacity for the other shades. So in my case, I'm gonna use the first one with an 85% opacity. And this will be used for the headings mostly. And what I'm also gonna do is, add these to my document colors. So just select the color and hit his plus sign. That way all these colors will be readily available when I need them. This second one is 85. I'm gonna add that as well. I'm gonna duplicate one more, and this time this will be 65% opacity. Again, add it to the document colors. Let's duplicate once more. This will be, 50 once more. This will be 12. And let's create a very, very light gray, 5% on opacity. And that way, we just created this monochromatic color palette. And finally, I'm gonna use four more colors, four different aspects of our design. Like for example, green icons for red icons, maybe some badges, stuff like that. So, for that, I added this kind of bluish colour. This is the hex code. So, when I add right here. Then a variation of this with 10% opacity added to our document colors. I'm gonna use this kind of a dark mustard color. I'm mainly thinking for maybe a warning box, something like that. And also it's 10% companion, and then these two colors, just for some badges and some icons. And with that we've defined our colors. Next stop, let's go ahead and define the typography. For that, I'm using a different art board. And inside, I wanted to find the styles for my headings and my paragraph. That's all we need to get started. Now, the fonts that I'm gonna use is a Sans Serif Sans Serif combination. They're both Google fonts, they're free, and they look really, really good. So the main font, while the first one is called Molly, it has a bunch of styles that we can choose from and we are gonna use this for mainly for headings or for structural elements. The second one which is the one that is gonna cover most ground, is gonna be the one for body text. And that will be pt sans. A very nice typeface that has all the styles that we need, basically. Regular, regular italic and then bold and bold italic. Now with these, I want to have and created some styles in sketch. So I have elements for headings one through six, for the body text and also for the small text. Now, if you're wondering how I got these measurements, well it's actually quite simple. I use a service called Type Scale. And Type Scale allows you to create typographical scale for your project. You just enter the base font size. You choose a scale from these and on the right side you can see all the measurements you need. You can even grab some CSS from here. So in my case, I'm starting with 16 pixels, that's the base font size, that's what it's at in most browsers, and I think 16 pixels for the body font is a good enough size for a documentation. So I started with this but then instead of augmented fourth which will give me quite large heading ones, I chose a perfect fourth. That gave me more of a subdued typographic scale. So I started with this, 3.157 ounce for the h1, and then I moved onto h2, h3, h4, h5, is the exact same size as the text, the body font and then h6 is smaller. Now I took these. I went back into Sketch, and I applied those measurements to my headings. Now, those measurements were in ems. To convert them I have a handy calculator here, it's called Numi. It's free for Mac OS. And I basically set show me 3.157 ems in pixels. And this calculator considers an to be 60 pixels, so it did. The conversion and gave me these results. So then I took them, I rounded every result, so now I have 50 pixels for DH1, 38 for DH2, 28 for DH3, 21 for the H4, 16 H5 and finally 12 for the H6. The body text I set it at 16 pixels regular. I set a line height of 1.5. Meaning 16px times 1.5 that's 24. And also the distance between paragraphs to 16 this is less important to be honest. Because we're gonna define all of these typographic properties a lot better and more efficiently in CSS later on. And finally, I set some small text here, just in case we need it. Okay, so with that done we have the colours that we can use and we have the fonts that we can use. Now it's time to start designing our templates and we're gonna start with the very first element in all of the pages and that is the top bar. That's coming up in the next lesson.

Back to the top