Because in a world where everyone’s a designer, designing isn’t enough anymore. Clients want to know what’s behind their projects and the people that do them.

Some say technology is making our world smaller but it’s really just making it more anonymous.

There are professionals from every field available online. You can order groceries, do your banking and hire a lawyer whose face you’ll never see, all from the comfort of your keyboard. Whatever you’re looking for is available in legions.

So the question is no longer whether or not you can find someone to do the work. You can.

The question is: who’s going to do it? It’s about you and me and our personal branding. It’s about the people behind the scenes, what they do and how they arrive at their magic.

It’s about the quality you’ll present to this growing world of quantity.

In all the speed of our modern world we’re all still seekers after beauty. We can get the news anywhere, but where do we find the poetry? For me the poetry is in the process and in the end result. You’ve got to take a ride and make the ride enjoyable for those around you. You’ve got to be responsible about where you’re going and how you get there.

This manifesto is about us, what we do and how we arrive.

Why do we design?

We design because we love it.

We design because design is beautiful.

We design because making something look better earns us the right to complain about things we don’t like. And then change them.

We design because this is our world and if we don’t like it we’ve nobody to blame but ourselves.

Apple computers are gorgeous; that’s half the story. They also work phenomenally well, which is the other half. But were they boxed in matte black sheet metal they’d lose appeal. You could say beauty is not tangible, but anyone who’s opened the box of a new shiny gadget and felt that rush knows the truth.

Design is tangible; beauty is tangible. You can’t cut either of them with a knife but that’s a physicist’s definition of tangible and we’re not interested in that here. The truth is, we all know, deep down where the real things reside, there’s another universe of tangible and it sits right there in your chest.

It’s the place where Christmas as a child lives and where it hurts when you lose someone. There’s more reality there than in any block of concrete.

That’s why we design: because it matters.

How do we design?

Very carefully. That’s the truth disguised as a flippant answer.

It’s the truth because good design is functional, and without the end goal and end user in mind, there can be no true function and hence no design.

We design when we know where we’re going, and no sooner. There is beauty in functionality, in purpose.

You know the feeling you get when you flip on the light switch and nothing happens? That’s bad design. Bad design is improper function and something not working like we suppose it should.

Is a website any different? Should there be ten images when one will do? Should the navigation require the wits of a neurologist to figure out? Should every last pixel be packed with eye candy?

One glance around the ‘net will show you that not everyone in our field agrees, but there’s one sure thing we’ve come to know over the years:

When there are millions of websites, ebooks and products available at the flick of a “dot com,” quality is of utmost importance.

The web is about content. Anyone who comes to your site is looking for something. Our purpose as designers is to deliver this something, make it live, make it breathe and present it as it should be presented.

Or at the very least just make sure people can find it, for God’s sake.

Design is the route the crow flies from dry utility to brilliant interesting function.

If it doesn’t work, it isn’t designed well. And if it does work but people don’t want to use it…it still isn’t designed well.

Good design works and people want their hands all over it.

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.

Somewhere, wallowing in the gigantic sea that is the internet, is your site.

It’s not alone. It’s got a lot of neighbors and more than 100,000 new ones every single day. Is your site down there at the bottom, in the cold darkness with the suckerfish? Or is it up at the top where food is plenty and the sunlight still streams in?

If I were to venture a guess, I’d say your site is somewhere in the middle. After all, you’re here at Charfish and you’re reading this blog post. That means you probably already care about design. And if you care about design, you certainly aren’t wallowing around at the bottom of the ocean with the rusty old anchors.

But what can we do to get your site a little closer to the surface, where the sun is warm and you’re more visible to the world at large? Well, lots of things. Way more than 10 but that’s the number we’re going to deal with in this series.

The 10 ways to make your website look better series is going to deal with each of these in detail:

1. Eye trails
• Does your site effectively lead your visitors’ eyes? And if so, where does it lead them to? It may seem like a small detail, but if you’re not leading them somewhere, you can bet the one thing they’ll be looking for is the “Back” button.
2. Line-height
• Wouldn’t it be nice if you could add a bunch of luscious white space to your site with one simple line of code? Well you can, and it could make a world of difference.
3. Color Unity
• Gone are the days of using every color of the rainbow in your site. People know better now. But while you’re busy not making that mistake, are you making others? Or, the more subtle possibility, is your site just being…average?
4. Paragraph breaks
• Everything your language professor taught you was wrong. Okay…not everything. But he certainly made a bad call on this one.
5. Images
• It’s good to have images in your posts. But where do you put them? Are you actually making your website less usable and less friendly by poor image placement?
6. Contrast
• There are no faster ways to make a website less legible and more annoying than dealing poorly with contrast. Here’s what and what not to do.
7. Advertising
• There’s nothing really wrong with advertising on your site. Anyone who tells you so is jealous of your income or is just a generally smelly person. That said, there are numerous ways to advertise really really poorly. This post will teach you about effective advertising design and show you how to make a few extra bucks. This post alone is well worth its weight in pixels.
8. Font fun
• We know about bold and italics. But is that all we can do to make our fonts a little more fun and our sites a little more user friendly? Nope, and I’ve got a couple ways for you to improve your site in about three minutes
9. Discipline your fonts!
• Fonts are fun and there are plenty of insanely bitchin ones out there. But how do you choose which is best for your site? Which ones go in the header and which in the body copy? How about the headers and impulse copy?
10. Size problems, aerial photos and magnifying glasses
• Look, I may have lousy eyesight but you don’t need to rub it in. And what’s with the medley of sizes and shapes? Is this an IQ test or something?

This is going to be a great series, full of simple and fast changes you can make to your site to bring it to a higher level of professionalism.

You’re not going to want to miss any of these posts so Subscribe now!