Author Archives: griffith

How to Build a Web Design Around a Logo

If you have ever designed a website for a company or organization with a pre-established logo, you’ve probably found yourself between a crossroad. The customer will come to you because he needs to revitalize or strengthen his company’s image, and purchasing a website is one of the most cost-effective ways to do so.

The problem starts when you are given the logo to work with. There are various types of logo designs: some are mono-colored, others are multi-colored; some are based on text, some are based on a symbol and finally some are a combination of both. Continue reading

Mistakes in Design: JohnCow.com

After the rambling that took place in August, against ProBlogger.net, David invited me once again to criticize the design of another popular blog: JohnCow.com.

I have to say that my first reaction when he gave me the link was “don’t you mean JohnChow.com?”, but after clicking on the link, and comparing it with the site that inspired it, I found it surprising that it is actually nicer to look at than the original.

I don’t mean to say that John Chow’s website has a bad design, but I think it has a very exaggerated amount of advertisement. Then again, he didn’t become a dotcom mogul by sparing on the ads.

After the initial sympathy I had for John Cow’s website, I quickly realized that it had it’s own flaws, and after the beautiful header loses it’s grace, what’s left underneath it leaves much room for improvement.

The “Pretending” Tabbed Container

First of all, the first thing that strikes the user, after looking the banner, is the list of orange buttons that feel completely detached from the rest of the design. They do not fail to look like buttons, so after clicking them the rectangle underneath them changes.

johncowweb20box.jpg

The height of the content area also changes, so that made me wonder how it would look like if JavaScript was disabled. The result wasn’t pretty…

johncowweb20boxnojs.jpg

The content you see underneath the rectangles is the content that appears individually on all of the options you can choose. And, obviously, the rectangles don’t work. Some might say “every browser has JavaScript”, and that is almost true. But whenever good web designers make a website, they usually have some concerns regarding the site’s graceful degradation, or in other words, how the site will look like if it the browser is outdated.

In terms of usability, that whole area would much easier to understand if it was design as a tabbed container. Even though they don’t look like tabs, they act like them, so common sense would say that they should indeed be tabs. Also, the selected “tab” button should have a different look from the other buttons. As it is right now, you don’t know which tab is active unless you click on it and see that it doesn’t do anything.

The Subscribe Options

Moving a little to the right we find yet another section of the website that feels out of place due to the awkward colors chosen for it’s elements.

johncowsubscribe.jpg

Starting from the top we have the green-outlined and blue-backgrounded search box can missed very easily unless you’re paying attention to it. The site’s background (in the container) is green, so I think that common sense would say that we wouldn’t use green as the border of an element we’re trying to make evident.

Then we have a black white and yellow/orange RSS icon, followed by a dark gray Feedburner button, next to a green and orange box. There’s nothing wrong with those elements separately, but since they’re placed so close together they should have all shared similar, or contrasting colors. As it stands, this is probably the “messiest” part of the site, in terms of colors.

The newsletter field also has a few mistakes. For example, the input field doesn’t look like an input field. This site seems to have something against making visual elements appears as they should. When you click on the input field which has the words “Enter email here”, that text doesn’t go away.

If I had to put my money on which of the two elements, the text field or the submit button, was the submit field, if it didn’t have any words in it. I’d certainly say the button was the text field. It has most of the visual elements that we’d expect from a text field: a very light background, a light border and even a slight indentation.

Sidebar Links

Moving down, and past the six ads, of which I don’t really have anything to comment upon, we have a few lists of links, and those have two problems. First, they have the same color as the color of the text in the articles. Secondly, the font size is bigger than the text in the articles. Once again, this breaks the consistency behind the whole design.

The Articles

In the articles, we find another coherence, and usability, flaw. The title of the articles has a different font that is found nowhere else on the site. I didn’t check this, but from a quick look at the top part of the page, I can see three different font faces, which once again (say it with me people) breaks the site’s consistency.

The article’s text has a justified alignment, which does in making the content feel very organized. But for a content driven website, article texts should never have a justified alignment because it makes reading the articles very tiresome because your eyes have to adapt to the space between each word on every different line.

The Header and Conclusion

Thankfully, the critiques end here with the header, and that ends up being one of the most pleasant parts of the site.

John Cow Header Image

Personally, I find it a damn shame to see a design that starts off so well at the top turn into a mess during the middle. The header of a website is, for most modern designs, the most important design element, which will define whether the content is of a high quality or not, and JohnCow.com’s is great.

If you want to do a bit of homework, you can visit John Chow’s own website and look at how he implemented a similar type of content, with even more advertisements, without breaking the site’s consistency.

Mistakes in Design: Problogger.net

A couple of minutes ago, I was writing an article about blogging, and in the middle of it I decided to refer to Darren Rowse’s highly popular ProBlogger.net. When I visited the link to confirm it was the correct one I was surprised, and then shocked, by the new design.

Although it is much more sophisticated than the previous one, in some aspects the design leaves a lot to be desired and, dare I say, makes a lot of mistakes in terms of usability. It wasn’t an easy decision to choose to write this article, but I decided to do it as an example that even great names can sometimes make mistakes.

One of the most basic rules about interface design, is that when a person is visiting a website, or a new program, there will always be four simple questions that cross our mind: Who? What? Why? and How?. When one of those questions is unanswered, we start to lose focus on what’s in front of us, and when that happens, people tend to start getting loss in the interface.

If you are relatively tech-savvy, you’ve certainly witnessed this sort of behavior a few times, like, for example, when you try to explain to someone who isn’t experienced with computers how to work with an application that is (supposedly) easy to work with, like an e-mail client. I know how many times I’ve had to try and explain my father how to check his inbox. Although the old Problogger design had quite a few limitations, like for example:

  • it gave some key articles a lot of focus;
  • it gave other articles very little focus;
  • finding an article in the archives wasn’t as easy;

There were some other aspects that that designed achieved very well. As soon as any person came to the webpage, not only did he instantly know where he was, but he was already answered to some of the most basic questions that someone might want to know about like, for example, “What is a blog?” or “How blogs make money online”. Which was all thanks to the “Introduction” square which was correctly placed underneath the banner and the tagline, as you can see in the screenshot below.

oldproblogger.jpg

Despite sometimes having some very technical content, the site was very user-friendly, and it made even the most inexperienced Blogger want to learn more. It didn’t feel like some Elitist website where only those who are very familiar with the subject are welcomed. The new design fails in all of these previous aspects.

The New Problogger.net

Top of the Page

On the new design you are greeted with non-intrusive links at the top, which say nothing about the content itself, a banner, the latest article, different ways to subscribe to the website followed by a huge amount of content. If I were to change this top part of the website, I could include a similar, or identical, tag line to the previous one. And then I would address another issue that hurts the whole site in general: the font size.

Font Size

One of the most stunning technological achievements that we’ve been witnessing lately, in the computer industry, is the number of pixels we are able to fit in the smallest of screens. A good example of a gadget with an amazing number of DPI (dots per inch) is the newly released iPhone which can display 160 pixels per square inch. What I’m trying to say with this is that the mediums that which use for internet browsing are changing.

Every year a new device comes out with a better resolution than the previous one but with almost, or exactly the same size. In Japan, people already have cellphones with a resolution twice as big as the iPhone’s. But this isn’t an essay on that, this is about ProBlogger. And one of the things that is bad about the design is that the overall font size is too small by today’s standards.

Left Column

Moving below from the top section, we are greeted with three columns. The first one has a list with the title, and a small excerpt taken from the beginning of each article. The equivalent of this, in the past design, was a big percentage of the article, which usually used an inverted pyramid scheme.

Darren Rowse starts with the conclusion, or explains what the article will talk about in the first phrase, and then develops from there. It is an excellent way to motivate people to read the rest of your articles, and a technique that is becoming very common in the internet, due to how little time a visitor usually stays on a website. So this left column actually works really well. The biggest problem with it is really the lack of width and, once again, the size of the text.

Since the lines in this section are really short, the designer should have taken better care of the typography, and including a bigger space between the lines and between each character would do wonders for the legibility of the text.

Middle Column

The middle column is slightly wider than the left one, so one would assume that it’s content is more important than the left one. That may be partially true, since it does focus on Darren’s video post, and on the most popular, or personal favorites, or introductory articles (like the old design used to feature at the top). I will comment on the organization of the information, and on this section once again, when I talk about the footer.

Right Column

There’s not much to say about this column, but at the top there was a small mistake made, which some of you might have noticed, with the e-mail subscription button. In most computer interfaces we use, confirmation buttons are usually placed at the right, or bottom right, of the field we’re typing in. In this case, they placed it at the bottom left and placed the link for the RSS feed on the bottom right instead. Another thing that is noticeable, is the amount of whitespace that this section has, compared to the rest of the site (with the exception of the banner and the footer). This is the section with the least relevant information, but with the most whitespace.

Footer

Instead of simply being something that concludes the design, in this case, the footer holds more information about the site itself, and the who, the what and the why, than the rest of the design. We can find out What the author writes about in the categories, How we can make money and become Professional Bloggers, and last, and certainly not least, Who the author really is.

So, basically, most of the things that were done correctly in the previous design, we’re flipped around and sent to the bottom of the page, where they’re less likely to be seen.

What I Would Change

There is no easy way to make the design better without compromising the current changes and the new features that were implemented, but my suggestions are these:

  1. Improve the typography – Like Darren Rowse himself said on the video post of the 27th of July, we need to find ways to differentiate ourselves from the rest of the blogs out there. Most of those blogs suffer from typography problems, and this new design is plagued with them. But to improve typography do so in some sections, like in the left column, would mean that you’d have to change the layout considerably…
  2. Change the front page to a 2 column layout – the easiest way to improve the typography of the website would be to move the content of the center column to the right one and give the most recent content more relevance. Doing this would also improve the site’s whitespace considerably.2.1. A possible alternative: If getting rid of a column is not an option, I would decrease the width of the right column considerably, and possibly move the left column to the middle, having it occupy the extra space.
  3. Read this article again – most of the things I looked at, and criticized, can be done an infinite number of times. There is no flawless or golden-ration equivalent for a perfect design, but it’s important to question what kind of content you want to emphasize the most: the recent, or the most popular? And what kind of readers you want to satisfy the most, the new ones, or the returning ones? Right now the site is focused almost entirely on the later.

Conclusions

So what was achieved with this new layout, and the new design? Each section has a small title explaining what’s in it, but has less focus than the section itself. If this was the intention, it was well-achieved, but in terms of usability, it’s better to know what you’re looking at before you start reading it.

In three column designs, people instantly assume that the largest column is the most relevant one. Since this is the case, then that means that this design emphasizes more on the past articles than on the recent ones. If it were up to me, I would flip the left and middle column’s content around.

By sending the categories, the small picture and story, and the resource links to the bottom, the site becomes less friendly to newcomers, but easier for returning visitors to access the latest information, rather than having to see the information they had already seen in their first visit once again. This is both a positive, and negative, aspect of the new design.

In terms of whitespace, some sections are incredibly well divided in terms of space and content, like the right column and the footer. Unfortunately, the areas with the most content suffer a lot from this problem. The most important part of a blog is it’s content, period. And in terms of content, Problogger.net is very well served, but, with this new design, the links to the most recent, or featured, content are the least attractive parts of the site to look at.

In conclusion, the site is a bit easier to navigate than the previous one. Returning visitors will be able to quickly read the titles and catch up on unread articles, but newcomers will probably feel intimidated by the amount of information that is crammed up in the same place. It’s not a design that you can’t get used to, but it is a design that takes a while of getting used to, and for new visitors, and even returning ones, that is bad.