The Whitehawk

*note* - I had a small problem with the Wordpress “more” so the later part of the article looks a bit weird at the momment. I will fix this later this evening and I’m sorry for any trouble caused.

Now that I have a basic layout, all the last step is to arrange the most important aspect of the design. The area where the content will be. If any (real) designers are reading this, they will probably be thinking “Hey… how come the area where the content will be is the most important aspect? Isn’t the rest of the interface more, or at least as important?”. To answer that question, I ask them another one:

When you’re reading a blog, or any other website, how much of your time do you use looking at the interface, and how much do you use looking at the content?

Of course it’s important to have a good looking layout, but it’s very common to see websites with great designs with little or no care for the content area. On the other hand, sometimes you can also find websites with great design, good typography, but with inconsistency in the layout.

Regarding the design, there is no way I can please everyone that visits. Most of the heavy visual elements are in the header, so if you scroll down a bit, you can simply focus on the content, rather than on anything else. And regarding typography, I intend to make the site as easy and nice to read as possible.

Content is king, but if it’s difficult to read the content due to the wrong colors, or length of the line or visual interruptions of the text (like advertisement); you’re better off using your writting skills elsewhere (unless, of course, you’re being payed to write for a website with those conditions).

After much fiddling about, I came to relatively satisfying conclusion.

So what aspects did I consider when making this?

First, I needed a visual element that would make it easy to distinguish when an article begins. In the case of the current version of the design. You can obviously see where the article begins due to the customized background, however, that visual element had a flaw that I only noticed after. If my article’s title exceeds a certain number of characters, you can’t read the exceeding text because it’s color is white.

Since I couldn’t use that same method, I needed something else, a visual cue of some sort. That is when I started considering one of the common “web 2.0″ visual elements. I’m not sure what it’s name is, so I’ll just call it the “date square”. Since the site is already blue enough, or already has too much blue, as some might point out, I decided that using orange as a secondary color fits it very nicely.

From there on, the rest just came naturally, but of course there were many aspects of the text itself that I tweaked, and I will now try to explain some of them.

Contrast - in the very first version of thewhitehawk, the color of the text was gray. At the time, my idea was to give the website colors of the sky exclusively, but then I came to realize that goal came at the expense of readability, and a lot of people commented on how light the text was. When version 1.5 came along, and I was testing out some stylesheets, as soon as I changed the text to black, everyone liked the design much more.Matt Brett, who designed the feedicons website gives a good example on how to use contrast properly.Although there are various different color schemes you can use. If you’re unsure on what you use, or not, you can always go with black against white. And as for all the colors different from all the shades that go from black to white, try to pick one, or a couple, that contradict the background you’re using.

If you’re using a dark background, like Matt, try to use light or strong colors that are easilly distinguishable from it. If you’re using a white, or very light background, like this website, you can pretty much choose any color you want as long as you can easilly tell it apart. Black or dark backgrounds limit you a bit more than light or white backgrounds, because there are some colors which can’t be easilly applied to them, like, for example, purple, or brown.

I could write a whole article about colors, but I’ll leave that for another occasion, or for a future book I might write
Letter/Word/Line/Paragraph spacing - yes, there are all those ways to separate your text, and even more if you really like digging into the CSS, but let’s leave it at those.Despite all fonts having a generic space between characters, some fonts are “heavier” than others. Tahoma, for example, is a good example. All of the characters are “tall”, and when used with default settings, it makes a text look very concise, and hard to read.If you want to use Tahoma as your website’s main font, do your readers a favor and a bit of spacing between the letters.

Line and paragraph spacing are a bit harder to justify. To understand why they need to be adjusted, you need to understand the differences between reading a document, or text, on a computer monitor, from reading it on a piece of paper. I don’t have precise numbers with me at the momment, but several studies have been made and showed that people take much longer to read text that is shown on a computer screen than on a piece of paper.

That is why, as a designer, you should be concerned with making your site as easy, and pleasant to read as possible. When you apply a justified allignment to a text, you are decreasing the speed at which people will read your articles. Why? Because the human eye has to adjust to difference word spacing with each line.Although it may look a bit nicer it difficults reading a little bit.

(As you have probably noticed, the current design of this website has many of the flaws I’m pointing out here, so feel free to consider this a bad example in terms of spacing)

Another thing that difficults reading is the lack of proper line spacing. When you’re reading a piece of paper, a book, you usually use, even if you don’t notice, some sort of guide-line from one line to the next. Some people use their thumbs, others use random objects, but the fact is that when you’re reading a text on the a computer monitor, it becomes harder to follow a text, specially if it’s written in long lines (see next pointer) and has very little space between each line.

There is no golden value for the space you should add between lines. It depends on the font, on how long the line is, and even on the color you use. But if you’re using good contrast, and not too many words-per-line (once again, see next pointer), a good value to start off for the line-height with is the height of one of the smaller characters: for example, the pixel height of the character “e”.

As for the paragraph spacing, once again there is no golden number, but the value of it should be, at the very least, twice as big as the value of the line spacing, to make it distinguishable enough from a line break.

Words per line - The most common, and less aceptable, typography mistake you can make in your website, is to allow the text to have too many words per-line. Some people are fans of liquid design, and for a brief period of the webdesign history, liquid design was very popular. But, as you may notice, most of the modern websites don’t have liquid designs, and it’s not just because it was a fad from the 90’s that faded away.

As I already mentioned above, depending on how many words you have on a line, it may or not become harder for you to follow the text. One of the reasons, as small as it may be, why I believe that blogs became incredibly popular, is because most of them didn’t have liquid designs, compared to forums or BBSs. And those two types of websites are a perfect example on everything you can do wrong in typography.

On 99% of all forums I’ve visited, there are too many words per line, because the design is liquid, there are too many visual distractions that difficult your reading: avatars, images (specially animated ones).

Of course you can adjust the length of your browser to fit your prefference, but that isn’t functional. If that was the case, you would have to adjust your browser’s width for every different website you visited. Obviously that isn’t a very good alternative to having static designs, or designs with static text areas.

And now, I think that I’ve written enough for one Design Journal entry. It might be a few days late, but I think that the size of the post compensates for that.

Griffith Design