MySpace Design Do’s and Do Not’s #1: Make your text readable

January 13th, 2009 by: Josh

One of the things I really like about MySpace is that it gives users the ability to design their own profile pages. By doing so, MySpace promotes basic HTML literacy to the masses and has likely motivated countless youth to learn a technology they otherwise would have neglected. Unfortunately, the majority of user created websites are complete design train wrecks. Now with over 100 million MySpace profiles in existence (source: wikipedia), it is time to take out the trash. Welcome to my 1st installment

I’m sure everyone reading this, at one point or another, has had to highlight the text in a friends MySpace profile just to make it legible, yes? UNACCEPTABLE. Text should present itself clearly and legibly without any need for modification. When browsing MySpace I’ve come across two issues that consistently compromise readability, let’s examine some examples in an attempt to diagnose and cure these problems.

Issue A: Text on a busy photographic / graphical background

I think I just had a seizure trying to read these – what month is it?

Clearly, the text on these profiles is not legible. Having to highlight text to read it is unacceptable. The only circumstances in which it is acceptable to use text directly over a photographic / graphical background is when the image was designed explicitly for that purpose. So, something you shot on your phone-camera at a party probably doesn’t qualify.

Issue B: Improper background / foreground contrast

Ah, black text on a dark grey background, kinda feels like getting poked in the eye, doesn’t it?

Let’s get into a little bit of color theory / typography. The goal in mixing background and foreground colors (with text) is HIGH contrast of light/dark values. Simply put, use dark text on a light background and light text on a dark background. Mind you, this is different than color contrast, for example, the following composition uses colors at completely opposite poles of the color wheel (red and green), but because both colors have similar light/dark value, the text is completely jarring to read:

So, when choosing colors for type and background, remember that the most important contrast is that of light and dark, not color (hue) and please, keep your backgrounds chilled out.

I hope that this has been informative. Stay tuned for more design tips, internet exploration, online enlightenment and snarky comments.

January 13th, 2009 | Tags: Color Theory, Design, MySpace, Typography

Posted in: iD Tech Bloggers

1 Comment »