You know how when you walk into Baskin Robbins, you see all those ice cream colors? And there’s that smell in the air? That sweet waffle cone smell that makes you feel like your nostrils just got a cavity? That shouldn’t be your website.

And with that, I welcome you to Part 3 of our “10 Ways to Make Your Website Look Better” series.

Today, we’re going to talk about color.

An introduction, and why I’m even bothering

I think it’s safe to say that MOST of us don’t use hideous color schemes in our designs. The reason for that is simple and quite obvious: they’re hideous. They stick out like a sore thumb. A hideous sore thumb with yellow and purple and green bruising. Maybe even an open sore that…nevermind. You get the point.

This post isn’t about the huge glaring mistakes you can make by using really awful color mixtures on your brochures or website. Well…it sort of is. But it’s also about the fine-tuning, such as picking hyperlink colors for your text. Or finding the right color for the chapter titles in your book.

Well, it’s all about integrity.

Integrity of the Piece

I like to think that every project has its own purpose. A website isn’t just a website. It’s a website ABOUT something. It’s about fishing or cooking or cross-country running.

A logo isn’t just a picture or symbol. It’s a picture or symbol ABOUT something, like food or health or technology.

That’s where the integrity comes in: your visual assets are supposed to be doing something, and that something is communicating a message. Your fonts, colors, layout, images, etc. all support (or should) that overall message.

So…if your header is red and your main content bright green, ask yourself, “What is this doing for my overall message?”

But overall, just be practical

Back in college, where I studied architecture, I gave an end-of-quarter presentation about a building I’d designed over the prior three months. At the end of the presentation, one of the visiting architects in the audience raised his hand and said, “Architecture isn’t about building.” Um, what?

Yeah, I know. I thought so too. But that’s not even the crazy part. He then said, “Architecture is philosophy. Every brick in your building should have a purpose. What is the purpose of the bricks in that wall?” he asked, pointing to my model.

When I replied that the bricks were holding up the ceiling, he insisted that I think harder about it.

My point is, it’s all too easy to go overboard with thinking deep thoughts and philosophizing about every last detail. “Red means impulse” and “Blue means peace” and “If you mix tan with off-white, it means please take your shoes off before entering.”

You can drive yourself nuts with this stuff, and it’s quite likely that your audience isn’t going to get it anyway. So don’t go all introverted on me.

The overriding function of your site, business card, logo, etc. is that it simply look awesome and communicate. Your site, regardless of whatever deeper meaning it has as a whole, simply needs to be legible.

I could lie about the text on this site and say that I chose black text on a white background because it symbolizes how I hope for equality between cardboard manufacturers. But nope. Black on white is easy to read. That’s it, and you really don’t need a better answer than that.

Where to find a color scheme

Speaking on the integrity thing, your golf site probably needs some green in it. It just makes sense. Again, you could go all avant-garde and do it in pink with elephants all over, but your audience is going to miss such subtle symbolism.

So…you know you’re looking for a green color scheme, but how do you come up with one that works? If you use one shade of green here, what shade works over there? And what sort of text will be legible?

Well, a great place to start (after you’ve experimented…which is the best way to learn, I think) is to head over to Kuler. Kuler is a color scheme picker and it’s phenomenal. The first thing you’ll see there are sample color schemes, complete with RGB and hex codes. Simply browse around the site a bit, or do a search for “green” and you’ll have all the schemes you’ll need.

And the really cool thing is that after you pick a color scheme, you can tweak individual colors of that particular palette. So, for example, if you’re still working on your green golf theme, you can start by exploring for a green scheme that works overall. Then you’ll need some colors to use as emphasis, say for your logo or text hyperlinks, right? Well, you can use that little slider dealy to find them and you’ll see exactly how the colors will all interact.

That’s it for this week! Thanks for reading! We’ll be back next with some great tips on how to format the text on your page so it’s easy on your visitor. Want a hint? Well, your old school professors had it all wrong…but you knew that already.

If you missed the other parts of this series, you can find them here:

• 10 Ways to make your website look better
• 10 ways to make your website better, Part 1 – Effective eye trails
• How proper line height will improve the look and stickiness of your site

And if there’s something else you’d like to see here, or you’re looking for advice on some particular woes, just let us know in the comments or contact us.

If content, as they say, is king, then the readability of that content must be a close second. After all, it doesn’t matter how good your content is if it can’t or won’t be read.

So here you are. You’ve written the blog post to end all blog posts. Or the sales letter that will surely make you six-figures over night. You post it online, sit back to watch the readers flood in, and KAZAAM! Nothing. No sales, no reader comments, no bump in subscribers, nothing.

You look at your site to troubleshoot it. It looks good. The text size is big enough to be read. The content is great; no typos. You already fixed the problems of having chartreuse, mauve and bile colored fonts all in the same paragraph. It all looks good.

But…there is something, isn’t there? Something a bit funky is catching your eye, and you may not quite be able to put your finger on it.

What’s the culprit? Very possibly it’s line height.

Okay, so that intro was a bit dramatic. I don’t know if line height alone is going to destroy your site and create a zero-sales situation. But it is going to wreck your site’s legibility. And if your site can’t be read comfortably, then, yeah. You’re going to lose readers and money.

100% on the line height test means you fail

If you go into your site’s style sheets and search for “line-height” you may not find it. This isn’t a good sign, as it means your text is defaulting to 100% line height.

I know, 100% sounds good, right? “Hey, Mom! I got 100% on my tests! And I still have 100% of my body parts!”

Well, I assure you, if your line height is 100%, you get a big F on this test. In fact, you’ll probably get suspended from school when the dean finds the 101 Surefire Ways to Have Lousy Typography on Your Site book you have hidden in your locker.

Default, 100% line height sounds good and like it must be right. But in this case, it means that you’re settling for some odd standard that was probably set a gazillion years ago by some guy who carved out stone tablets.

Standard default line height on the web looks awful. It’s cramped, constipated, blocky and doesn’t breathe.

Want proof? Here’s what all the text on this site would look like if I’d left it at default.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pede magna, porta non, tincidunt vel, ultricies non, nisl. Ut porttitor enim quis lacus. In risus. Proin at tortor ac ligula malesuada varius. Praesent ipsum erat, iaculis quis, condimentum vitae, placerat quis, tortor. Proin sagittis lobortis massa.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pede magna, porta non, tincidunt vel, ultricies non, nisl. Ut porttitor enim quis lacus. In risus. Proin at tortor ac ligula malesuada varius. Praesent ipsum erat, iaculis quis, condimentum vitae, placerat quis, tortor. Proin sagittis lobortis massa.

Yuck, right?

So what is a good line height?

So now we come to the solution portion of the post, where we discuss how much line height we really need. Too little line height, as we’ve seen, is not a good thing. But too much of it is also a bad thing.

You want enough space between lines so that your text isn’t cramped, but not so much space that each sentence looks like its own new paragraph.

A good rule of thumb is to set the line-height of your web copy to 140% or so.

The text you’re reading right now is at 145%. (It may be different if you’re reading this in an RSS reader, I don’t know.) I chose 145% over 140% on purpose and for a couple reasons.

First, my body text uses a serif font called Georgia. Serifs inherently make the letters seem slightly bigger, tighter and more busy. Sans-serif fonts aren’t quite as busy visually, so you may not need quite as much line height.

Second, Charfish is a spacious site. I wanted even the text to breathe well and have plenty of white space, which suits the somewhat minimal design. The eye isn’t confused here by closely-packed sentences or dangly letters that run into the lines below. It just works. And that’s what proper web design is all about.

And speaking of proper web design, we’ve still got eight more posts coming up in this Better Website Series. Subscribe now and you won’t miss a single one of them!

Before we get rolling on this post, let’s define what an eye trail is. No, it’s not where you take your eyes out for a nature walk. Nor is an eye trail what Hansel and Gretel left in the woods to find their way back home from the witch’s house.

An eye trail is the path your eye takes as it’s lead from visual element to visual element.

Note the passive sense of that: your eye is being lead. It’s not necessarily what your eye is looking for.

Let’s look at some eye trails

I’m going to show you some screenshots, and as you look at them note what your eye does and where it goes. It’ll all happen pretty much on auto-pilot so pay close attention. Here’s the first one.

Hopefully that first screenshot looked really really familiar. If not, please take a moment to ensure that your eyes are, in fact, in the open position. When you looked at the Charfish screenshot, there’s a high probability that your eye traveled the following trail.

Am I close? Did your eyes follow that trail? I certainly hope so, as I designed this site to do just that, and if it doesn’t I’m an abject failure. I wanted the eye to go immediately to the biggest/boldest element: the header. Why? That’s my brand. It’s who this site is and is the most readily recognizable and stable element. When people come back to this site they see the brand and think, “I’m at Charfish.” Or maybe they say, “Wait a second, how’d I end up here? I hate Charfish.” Either way, the brand is recognizable and I win.

Then the eye goes over to the sidebar and the RSS icon. That’s perfectly fine with me as I want people to know (1) how to navigate, and (2) that they can subscribe. Subscribers build community and ultimately make this a better and more useful site for all involved.

Then there’s the content itself, with the post’s image probably being the first way-stop for your eyes. And again, that’s fine. If you choose an effective image, it will interest the reader and they’ll want to find out what your post is all about. And it’s easy to find the post as the headline is a different color and bolder than the rest of the copy.

Now here’s a different sort of screenshot. Again, pay attention to where your eye is automatically lead.

Your visitor’s eyes will go to the biggest, darkest or most vibrant element first. Then the next one and the next one. I know, that’s not much of a screenshot. It’s just a bunch of grey boxes of different sizes, but I did this on purpose to make a point: this isn’t confusing stuff.

You don’t need to find color combos that are NASA-approved, or mathematically determine the proportions of every single font on your site, or calculate what the air pressure will be at 8:30 in the morning in Tonga to figure out where your visitor’s eyes are going to go. They’ll go to the biggest/darkest/most vibrant element first. Then the next one and the next one.

Now, here’s the third screenshot.

I’m sure you recognize that screenshot. If not, please check in immediately with your doctor as you may very well be dead. I choose Google’s homepage for a very good reason: it’s damn near blank and there’s really only one big element on it.

And, yup, there’s still an eye trail.

I’ll bet your eye traveled this well-planned path while looking at the Google site:

Actually, I just had a great idea. You’re about to get an extra bonus.

Let’s compare Google’s homepage with that of their rival Yahoo!.

Um…yeah. Nice job, Yahoo!. Their eye trail would be perfect if my eyes were training for the Ironman triathlon. Did your eyes make a path like mine did?

That’s why Google is reigning king of search engines, and why I personally never go to Yahoo! Unless I’m taking screenshots with which to make to fun of them. I look at Yahoo!’s home page and ask myself this question, which is a good question you should ask of your own websites:

What the hell am I supposed to be doing?

Yahoo!’s page is almost entirely navigation. There isn’t really any content. When I was making this experiment for the first time, the only element my eye was drawn to read was a headline explaining that Hugh Jackman is the sexiest man alive.

Now, while Hugh might very well be sexier than me, Yahoo! is making a pretty bold assumption that I give a shit. Moreover, their entire homepage, as evidenced by their tortuous eye trail, makes the assumption that I don’t have a clue what I’m looking for, so they might as well just show me everything.

Google on the other hand knows we’re smart and leaves it up to us to find what we want. Google figured out a long time ago that all we really need is a search box. And the eye trail is also their proof.

The practical application of eye trails

So what do we do with all this information? And why do we care if we’re not a search engine, or if we’re just trying to get some average traffic to our average site?

Well, it matters in a few different ways.

Page views per visitor

Whatever stat/analytics program you use (you are using one, right?) you should note what your total page views per visitor is currently. Is it low? Say below 2?

Low page views per visitor can really only mean a couple things:

• Your content sucks
• Your content is discursive and covers too many topics
• Your content is great, but people are having trouble getting around in it

I mean, think about it. If your content is excellent and on topic, there’s no reason why someone wouldn’t play around in your site for longer and find even more great content. If you currently find yourself saying, “My content is great but people don’t really seem to stick around much,” you may have found the culprit: eye trails. Without an eye trail, your site is hard to read, hard to get around in.

Time spent on site

Again, we’re assuming here that your content is itself pretty solid. But if you’re seeing high bounce rates and low time-on-site stats, your content isn’t the issue. Ease of use is.

Marketers

Money-making alert! Lousy click rates, low sales and copy that doesn’t perform might very well be the result of poor eye trails. Sales copy is designed to be read and to acquire clicks. While strong copy will ensure this happens for the most part, without eye trails, those long-form sales letters don’t often get read. That’s why you see so many of them with images, bulleted lists, fat red fonts and fancy “click now” buttons. These elements all pull the eye through the page, while along the way the reader picks up content that gets him interested and ultimately leads to a sale.

So what do we do now

Well, for now, nothing. Before you go making any drastic changes to your site, let’s finish up this series. The upcoming posts, while they don’t deal directly with eye trails, do touch on elements and ingredients of those eye trails. It’s a pretty good bet that after you’ve read all ten parts, you’ll have a solid idea of what needs changing.

I hope you enjoyed this post and learned a few things. If not, well, I’ve got nine more opportunities to say something intelligent as this series continues. Subscribe now to catch the upcoming episodes.

Lately, I’ve been doing more ebook designing than any other type of work and it’s been a total blast.

But I’ve noticed a few questions keep coming up over and over in regards to technical terms, layout ideas, etc. I’m going to cover some of those basics in this post, both for general education purposes and also as an aide to potential clients as to what kinds of things are possible with their own books.

A couple of the things I’m going to cover are very basic common terms from the world of print. Well, basic to some people, but brand new to many others. I hope this post can serve as a good introduction and an idea generator.

We’ve all seen a lot of ebooks, some good, some bad and some absolutely atrocious. The bad ones have jumbled text that can’t be read, awful color schemes (if any color at all), poor graphic choices, etc.

The good ones are visual candy. They flow well, are harmonious and balanced, and are ultimately easy and fun to read.

The Absolute Bare Minimum

Regardless of anything else that goes into an ebook, whether it’s busy or subtle or full of color, the book has to be legible. If it can’t be read it’s 99% useless. Any book that leaves my shop has the base-line requirement of being easy on the eyes.

Portrait & Landscape

These are fairly common terms that we’ve probably all dealt with at work from time to time.

Portrait orientation, say with a standard 8.5″ x 11″ sheet of paper, is taller than it is wide. Landscape, think of an actual outdoor landscape, is wider than it is tall.

Each has its own look and benefits, but I generally create ebooks in landscape format. The reason for this is obvious: computer monitors are also in landscape format. A book in landscape format fits on the screen more naturally without getting chopped off.

Fonts

Some fonts are easier to read than others, so some are well used for main body copy while others are best reserved for chapter headings, pullquotes or any brief area of emphasis.

The two basic choices for the main body copy font are serif and sans-serif. Serif fonts have little serifs, or tails, on them like the image to the left.

Serif fonts are often considered better used for body copy, as the serifs act as trails or pointers that lead the eye from character to character. This can reduce eye strain and make the reading little smoother.

On the other hand, sans-serif fonts (“sans” meaning “without”) do not have the tails.

Sans-serif fonts can also work well for body copy, but because they lack the serifs, they often appear to be closer to together and jumbled. This, if not done well, can make for eye strain and tough reading and that’s no fun. So generally the sans-serif fonts are bumped up in size a bit, to increase legibility.

Personally, I find that as long as the font size is adequate, serif and sans-serif fonts work equally well and the choice comes down to preference.

Decorative Fonts

Here’s where we get to have a bit more fun. Chapter titles, for example, can be funky or grungy or any style at all. And since they’re only used for a sentence or two and are of larger font-size, we don’t need to worry about eye strain and legibility.

The exact style of font, of course, comes down to preference but it should at least fit the subject of the book. A business book wouldn’t use a title font that looks like barbwire or graffiti, although that would be perfect for an ebook on tattoo art.

Dropshadows

Dropshadow is just a fancy word for shadow, and I’m sure you’ve seen a million examples of them online. They’re insanely popular and I’m sure they’ll continue to be until the end of time because they’re an excellent way to give depth, realism and visual interest to the page.

Since they obviously obscure adjacent text a bit, they’re reserved for larger fonts and not body copy.

Dropcaps

The “T” at the beginning of this sentence is a dropcap, so called because it drops below its own line of text. It’s a nice, elegant way to introduce a body of copy and, again, break up the monotony of a large text block.

“The First Five”

There’s probably a professional trade name for this, but I’ve always referred to it as “the first five.” Many books use this convention, whereby the first few words of a chapter are styled with bold text, a larger font, etc. When coupled with an initial dropcap, this is a really slick way to introduce a chapter.

Pullquotes & Blockquotes

The terms pull-quote and blockquote are often used interchangeably, but I generally distinguish them as follows:

A pull-quote, also called a lift-quote, pulls something out of the body copy for re-emphasis. If you’ve got a great quote or statistic you want to reiterate, you can pull it out and give it emphasis as a pull-quote. And once I pull the quote out, I’ll tweak it and play with its margins until it looks cool and fits in with the surrounding text fields.

A blockquote, while basically the same thing at heart, has a couple minor differences. First, it’s called a blockquote because it’s arranged more in a block, left-justified.

This is a blockquote.
All my shiznit is left justified, yo.
That’s how we roll.

Seems a little more blocky, yes? Little more traditional than the pull-quote. The second reason it’s a blockquote and not a pullquote is that you don’t have to pull text from the copy. You can say anything you want in a blockquote, even useless drivel like I did.

Regardless, both are usually formatted in a bigger, bolder and more interesting font, and often appear in an entirely different color. It’s a perfect way to break up the visual monotony of a long span of text and add some graphic interest. And of course it’s a great way to emphasize a point.

Folios & Numbering

A folio is a great way to mark every page with an identical symbol or brand image, like “The Next 45 Years” in the corner of the image to the left.

A folio can be page numbers, a logo, a URL or any combination of elements. One of the cool things about using folios with ebooks (which are usually .PDF documents) is that you can use them to link back to your site. That way, no matter where your book ends up, your readers will be able to track you down by simply clicking on the folio bit in the corner.

Ornaments

I love the finishing touches and ornaments and little things that really give your book personality! There are two methods I use all of the time, if the client wants them of course.

One method is to take the first letter of a sentence or title and then duplicate it in the background. But the trick is to use a more scripty or ornamental font and lighten it a bit, so it ends up as just a ghost of a letter in the background. Depth, baby, depth! Looks great and can help reduce the blockiness of the page…check it out.

The second method is to just use flourishes, ellipses and dingbats at chapter’s end. In the image to the left, that top one there is a dingbat. Yup, that’s what it’s called! Whatever you call it, they make a nice finishing touch and brings resolution to the end of the writing.

So, all in all, there are quite a few ways to distinguish your ebook from the 16,000 others that were published while I was writing this sentence. When done right with proper typography, colors and layout, an ebook can become a very special item indeed. In fact, quite a few bloggers and writers are publishing collector-type ebooks. They’ll produce a series of ebooks, perhaps one per month or season. And while each is similar, they can be individualized with different covers, color schemes or even seasonal ideas.

Special thanks to Alex Blackwell for letting me use images from the recently published ebook he and I designed. I’ve done quite a few ebooks recently, but I have to say that Alex’s book was a real treat to work on. Not only did he allow me quite a bit of artistic freedom, he’s also a top-notch writer. I highly suggest going to Alex’s site to pick up a copy of his book. You’ll be quite inspired, I’m sure. Plus, you’ll see what’s probably my best ebook design ever.

So…you want a sexy ebook? Let me know if you do and I’ll get to work on it!