Design Shard
CSS Tricks
Six Revisions
A List Apart
Function
Smashing Magazine
Noupe
Design Mag
Before & After Magazine

Good luck!

This site is fairly one-dimensional, but it delivers on its dimension. As you can see, there are two panels on the screen. The one at left represents the ‘visual’ of your finished product. The panel at right is the code that creates that product. In most WYSIWYG web editing programs, you can pull sliders and enter values to change the formatting. Now, however, you have a real-time view as to the results.

When working with CSS, probably the biggest problem first-timers have is a desire to work ‘outside the box’ too often. While it is true that CSS permits a very wide range of formatting, the problem is that we are all constrained by what our users can support. That means that if you pick a weird font, and the viewer of your website doesn’t have it, the viewer won’t see it the way you drew it up.

The best recommendation I can give to the beginning CSS artist is – work within the simplest of solutions, but do it creatively. An example of this is that, while Arial and Verdana are the most widely-used fonts on the Internet, you can still keep them fresh. See the shot below:

By adding a slightly different value in ‘line-height’, ‘word-spacing’, and the like, you can get something that barely resembles the text of so many others’ websites. And you get it with only a .00001% chance that the user will see something different. That’s really important.

Oh, and of course the reason I love the site so much: I didn’t have to pull 1.5 em, 2.2pt letter-spacing out of thin air!

To further discuss web standards, best practices, and great websites, check out our 8-hour session call Web Design Theory and Best Practices. It’s worth your time, I promise.

“The human brain likes patterns.”

When I say that, I don’t mean that we like paisleys or flannel; I’m saying that our brains latch onto repetition. Here’s a real-life example:

Let’s say I have a quarter. What are the odds I get heads when I flip it? 50-50 – even odds. What about the next time? The next time? The point is, that no matter how many times I flip the coin, I always have the same chance of getting heads and the same chance of getting tails.

But, in real life, when you flip ‘heads’ three times in a row, most of us would bet on tails ‘because it’s due.’ In reality, nothing about the pattern of three ‘heads’ in a row has any bearing on whether the next one is heads or tails. Our brains latch onto patterns, even when there isn’t one there!

How do we use this in design? Simple. The more patterns we repeat in our design, the more our audience ‘figures out’ what we’re doing. The more you can figure out a design, the easier it is to use. Now, how do we apply that to typography?

One of the simplest, and most repeated examples of bad typography choices is the constantly-changing font. I just received a promotional email earlier this week that included 7 different fonts. I can tell you from personal experience – it was not a good-looking email. I spent most of my time reading the email thinking ‘why is this so strange?’ By keeping a consistent font throughout a design, we cause less confusion with our audience. Our brains calm down because they can recognize the repeated choices.

At the same time, if your entire document contains only one font, pretty soon you’ll start to feel bored. There’s a fine line between calm and boring, and you don’t want to end up on the wrong side of that! So how do you spice it up? You choose a complementary font.

It’s very important to understand the idea of a ‘complementary font.’ To see this in exercise, check out the figures below. In the first graphic, your brain again is confused, and you may not be able to pinpoint why. In the second, there’s a clear distinction between the different pieces of text.

The reason the second figure is so much clearer than the first is this: the two bits of text in the first figure are from the same ‘family’ of fonts, the sans-serifs. One is Arial, the other Verdana. They’re so similar to one another, with subtle differences, that you’re more focused on the distinctions than the text on the page. By selecting one serif and one sans-serif (Times and Arial in this case), we create a clear difference between the fonts that’s easy to see. It calms the brain, while at the same time creating enough difference to make it interesting. Again, the most important thing to remember here is – create patterns the brain can easily identify, and your design will be more widely useable.

Try out the following ‘complementary’ font choices in your next design, and you’ll see it come together a lot more easily.

To have further conversation about font choices in design, try out our courses Web Design Theory, the Guided Web Design Lab, or the Guided Print Design Lab. You’ll be able to discuss directly with someone who has practical experience in the field.

The website Kuler from Adobe (pronounced ‘color’, if you can believe that) is a very powerful tool for the forces of beauty and useability. Try out this link to see what I’m talking about: Awesome Color Picker. You’ll need the latest version of Flash Player to get it to function for you. Let me walk you around some of the possibilities:

First, at the very top – do you want to register on this site? That’s a good question. The short answer is ‘not yet’. You can use the functionality of Kuler without a registration. If you’d like to save color schemes for later use, or to throw them out to the community, you’ll need an account. Let’s not get ahead of ourselves.

Next, what is the color scheme that I see in front of me? It happens to be one of the more popular saved schemes that a user has created recently. If you look at the list of schemes directly below it, you can see that clicking one of your options on the list changes the scheme above. Pretty nice, to be able to use color schemes that others have created and still others have voted in.

Finally, you have the bottom-left corner. You can see that you’re currently in the Themes section and browsing some Highly Rated schemes; you can also search by key terms for a scheme that does what you need it to do. Anytime you like, click the button that looks like color sliders (see inset), and you can get the number values (HSV, RGB, CMYK, HEX) that represent the scheme you like. Then use those number values to input into the program of your choice (Photoshop, Dreamweaver, the like). One of my favorite features, though, is the button that says ‘Create’. I’ll click there and dive into more possibilities.

As you can see, you’re currently creating a color scheme that adheres to a color theory rule called ‘Analogous’. This means that the colors within the scheme are all on the same part of the color wheel, and all have the same base color. As you can see, this results in a scheme that works, but is very one-note. This can be perfect for deciding which colors to use in addition to white, black, or brown.

If you change rules, you’ll see that the markers on the color wheel slide around, giving you greens with reds, or even yellows and blues with your reds (Superman color scheme!). Then, when you think you’ve seen enough from the red end of the spectrum, feel free to grab the markers on the wheel and begin pulling them around the wheel, or in and out. A color from the outside part of the wheel is very ’saturated’, or has a lot of pigment, whereas the ones from the center of the wheel are washed out, or ‘desaturated’.

Between these two possibilities (using someone else’s scheme or creating your own), you should be pretty well set on colors for most of your designs. However, there are times when you need a little something more. For example, if you’d like a design that feels ‘beachy’ or one that reminds you of a warm autumn afternoon in the Northeast, you may not be able to find the exact colors that ring true. For that purpose, you have the option to Create your color scheme From an Image. Simply click that option on the left, then upload the photo of your choice. Kuler automatically pulls complementary colors from the photograph. It’s a beautiful thing.

Learn iT! offers courses that use these tools regularly. You may want to check out our Adobe Illustrator line, or perhaps come into our Guided Web Design Lab. This will give you ample opportunity to select complementary colors and see if they work for your designs!