Join Sue Jenkins for an in-depth discussion in this video Working with fonts and colors, part of Designing Web Sites from Photoshop to Dreamweaver.
Strong web designs use a cohesive set of colors and fonts to communicate a person or company's brand objective to the desired target audience. This means that choosing the right colors and fonts is an important decision that helps determine the overall effectiveness of the site. Fortunately, thanks to technological improvements to video display and access to fonts, today's designers are no longer limited to the 216-color web-safe palette or the handful of cross-platform web-safe fonts.
Let's talk color first. When selecting our colors, it's best to choose a limited palette that reflects the site's objectives and conveys the desired mood. For this project, I've already selected three colors from the logo to accent the navigation bar, page headers, and graphic elements. These colors are in their own folder up here in the Layers panel. We'll give the layout a friendly, happy, warm, and welcoming feel. For a cohesive design, try to limit the number of colors in your layout to a maximum of three or four.
Now on the web, we're using RGB colors, and RGB colors for the web can be specified as hexadecimal values or hex numbers, which are made up of three pairs of numbers and/or letters, preceded by the hash tag, as in #000000 for black or #FFFFFF for white. You can access these hexadecimal values through the color picker, and you can click on your foreground or background color and it will pop-up the Color Picker dialog box. In here is where you can have access to those hexadecimal values.
So you can pick any color on the slider, any shade, and you'll see the RGB values, even CMYK values, but there's your hexadecimal. So if you're unsure of a color, you can go in and sample a color, double-click there to copy the hexadecimal value, then you can use that when you're building your web site if you need the hex value for something. Or if you have a value in RGB or CMYK value that you need to specify in your design, you can plug that number in here and then go ahead and work with it. So let's tackle our navigation bar first. So I'm going to select that so that we have that layer selected and the changes that we make will modify that layer, and I'm going to open up the Character palette and then click this color so that that text color picker comes up rather than the regular color picker.
And we want to change it from black to blue. Now I happen to know the hexadecimal value here and the hash tag is already there for me, so all I need to do is plug in the appropriate color. Don't worry about lowercase, uppercase at this point; you just need the letters and the numbers. So that's the color that I'm looking for. It's a color that's sampled from the cupcake in the logo, and of course I could use the Eyedropper tool, but I happen to know the hexadecimal value and I've changed it. Now we'll add a header to the body area. So I'm going to go into the body area and grab my text cursor and click right in here, and we'll type the word welcome.
Let's make it all caps, WELCOME. Now we can put these things in position roughly where we think they'll be at some point. Let's also reconfigure the layout for our footer. We've got three separate things here going on. Let's put like the social media on the right. For these, maybe we'll end up making two rows or something like that. We can always play with the actual design of it later on. And for here, some line breaks here. How about--oops! Just created a new layer accidentally. All right! So, we'll put e-mail, telephone, copyright on its own line. That'll do.
And while we're at it, let's add some headers to our footer. Do something like HAVE A LOOK AROUND. And then we'll make another one. Let's just copy and paste. And that one will be GET IN TOUCH. And then we'll do that again, slide it over, and modify it. And this one will say FOLLOW US. Later on, we can bring in some logos for our social media. Now let's think about fonts.
Like colors in a web design, try to keep your fonts to a maximum of three, like one for the header, one for the body, and perhaps a third for accent features such as sidebars, footers, or navigation. Now remember, to keep your site as accessible as possible to visitors using whatever devices that they are using to access your site and search engines, the menu items and as much body text as you can allow should be rendered as HTML rather than graphics. There are several web-safe fonts that you can choose from, such as Arial, Verdana, and Georgia, but with the advent of Google Fonts and similar services, your font options should have improved dramatically.
You can find more information about Google Fonts at google.com/webfonts. For this project, however, we're going to stick with web-safe fonts, and we'll use Century Gothic and Arial. Let's change the navigation font. So selecting it here. We'll change the navigation font from Verdana to Arial, and let's also make it a little bit bigger. How about 23 points and Bold? Let's do the same thing for that WELCOME. Let's change the size on that.
Okay, let's change that to 30, but let's change the font as well to Century Gothic. Let's make it Bold. While we're here, let's also go to the body text and change that, again to Century Gothic. Bump up the size to 14 and we'll change the color to a gray that we happen to know the hexadecimal value for. And we can specify the leading. Now leading on the web is a little bit different than leading in a web mockup, but you can control that with cascading style sheets.
Let's also change that Fair Trade and the Cupcake of the Month. Since these two layers aren't side by side, I am clicking on one, then Ctrl+clicking or Option+clicking the other one so that they can both be selected at the same time. With them both selected, I can change them to the same font and font color at once without having to do them individually. Let's change these to Century Gothic as well, 21 point, and we'll choose a chocolaty brown color. Now, let's make that bold, but we need to add a little line break there.
So, I'm just putting my cursor into that layer. There we go. Now, if I need to, I can move things over a little bit. Again, placement at this point, we're just getting things blocked out and colorizing and changing fonts and everything. This isn't the final design. We're just getting started. And now, let's also change the headers for the footer area. I'm going to select all three, just Shift+ clicking back into my Character palette. These will become Century Gothic, Bold, 14 point, and let's make it blue.
Again, I know the hexadecimal value that I'm going for here, so I'm just plugging it in. And let's do the same thing for all three layers in our footer. We'll change that to Arial, 13 points, and a gray to match the body text. There we go. So, it's pretty amazing, from a design perspective, how simply changing the fonts and colors in a layout can transform a few blocks of text into the beginnings of a cohesive web layout.
Choosing the right fonts and colors for your project will help communicate ideas and emotions that go beyond the words on the screen. Plus if you keep your color palette down to two to four colors and the layout with a maximum of two to three fonts, your web design should have a strong cohesive vibe.
- Setting up the Photoshop and Dreamweaver workspaces
- Planning a site and defining site goals
- Mocking up the layout and navigation
- Deciding on fonts and colors
- Styling the header, main content, sidebar, and footer
- Optimizing web graphics
- Building page structure with divs
- Building menus
- Adding metadata and externalizing CSS
- Creating templates with editable regions
- Creating template-based pages and adding content
- Inserting form fields
- Adding SEO, metadata, and accessibility markup
- Testing, validating, and publishing projects