On Sunday we figured out how to get into our web page to work on it, we decided the purpose of our page, and we refreshed our memory about the rules our school has for web pages.
Monday we planned our layout and either made the boxes for our content ourselves or got the IT department to do it for us. We have a layout now, and we’ve decided where to put the things we want to put on our page. We’ve put in our pictures, including the header we made, and our page now looks like a website.
Time to think about colors.
This example page doesn’t have a layout, but even if it did, the colors would be unfortunate. Bright red on bright blue is hard to read, the pink and purple clash, and the green borders don’t help. This kind of color scheme can look great on your bulletin board, but it’s hard to pull off on a website.
Because faculty pages often use color schemes like this, IT specialists sometimes tell us to stick with the default black and white. However, solid black on solid white looks harsh on a computer screen. You can see that in the “before” picture at the top of this post. The after picture below is using white for the background (it’s nice with the different shades of gray and taupe) but has the text written in a dark brown from the campus picture.
Yesterday we saw the trick of pulling colors out of photos for a header. Do the same for your letters and background, making sure to use dark letters on a light background, and you’ll have a readable page with a more sophisticated air.
You can find out what colors are in your picture with a handy tool from Big Huge Labs: the Color Generator. In the example below, I’ve uploaded a picture from my classroom and the Color Generator has given me the names and numbers of the colors in the picture. I can use these color names and numbers in Photoshop or in a web editor to make choices for my web page. I can choose one of the pale colors, like Twilight Blue or Texas, as my background, and one of the dark gray or brown shades or the specific black that’s in my photo for the words. I can be sure that my text won’t clash with my photo, and my page will look more interesting than if I just use plain black and white.
In the image below, you can see my faculty homepage before I made the changes and after. It’s not a very noticeable in-your-face change and it doesn’t break any of the rules of my school, but my page looks more professional and polished.
You’ll notice that I also changed the fonts and the colors of the links. Using a serif font for the headings and a sans serif font for the main text makes things look a little more interesting without being messy. See above — not big changes, but it’s enough to improve the look of the page.
Now, there may be some things that seem a little confusing here. I’m going to give a simpler summary and then go into more detail, so you can take your pick depending on whether you have techno-fear or techno-joy.
Simple summary:
- If your content management system gives you a choice of named colors, pick a light color for the background and a dark color for the text.
- Choose the colors closest to the colors in your header or any pictures you’re using.
- If you can type in a name or number, choose colors from the pictures you’re using on the page.
- Choose a simple font for your main text. If you want to, you can use a fancier font for the headings than for the text.
More detail
The numbers of colors referred to above are hex codes. Hex codes are codes using combinations of six letters and/or numbers to describe the amount of red, blue, and green in a color. Your computer can understand and show you as many as 16 million different colors with hex codes. If your content management system lets you specify custom colors, you can put in the hex codes for the exact colors you want. If it only lets you choose among red, green, blue, and black, you’ll have to make do.
The language for web sites is HTML (hypertext markup language) with CSS (cascading style sheets). These are actually quite useful things to know about in modern life, and I include a little of this in my writing classes. If you can get to the HTML editor for your class website, you can easily find and change colors even if you don’t know HTML.
Just find the part that says “body” or “maincontent” and put the color number you want for your background in instead of the #ffffff that’s probably there. “Color” means the color of the text, so change that to the color you want for your text. To change the color of your links, look for things like “a:link” and “a:hover.” They’ll be followed by “color:#” and a number. If your site doesn’t have those sections, then you are using the default blue underlined links. You can still change them, but you’ll need to know (or look up) the code for this step.
Before you make changes, note down the numbers that were there before. After you make changes, refresh your page and see if you like it. If not, you can change it back — you wrote down what was there before. You can also ask your tech people for help with this step.
You’ll find that things like fonts and margins and line height make a big difference in your web page. Read a little more about it (still easy and non-technical) in First Thoughts About Typography for Your Website.
Do you have a resources page? Improve it!
