Opacity Strikes Back

Here it is, the new design for Ejecutive, which I’ve dubbed Opacity Strikes Back (or Opacity2).

Being a Minimalist, I was never completely happy with the original Opacity. The initial design was too complicated, and so when I tried to implement it, the complexity got out of hand, to the stage where the CSS alone was split into seven different files and totalled over 20KB.

I didn’t put enough thought into the whole design procedure, and in the end design aesthetics won over usability. Even though the design was eventually scaled back and improved, a dark blue background made text hard to read for all but the lucky few with high contrast monitors. I also choose to justify the text, without doing much research into why this would make the text harder to read.

The problem lies in the current trend of having fancy graphics, reflections and bold colours, when the real design issue is typography. Information Architects explains the problem well:

Information design is not about the use of good typefaces, it is about the use of good typography. Which is a huge difference. Anyone can use typefaces, some can choose good typefaces, but only few master typography.

I’m not saying I’ve mastered typography, but I can tell the difference between good typography, and bad typography. Opacity had bad typography, and I was a little ashamed to have designed and used it on my website.

Opacity2 is the expression of my Minimalistic ideals. Every superfluous feature has been striped out, and replaced by white space. In fact, you’ll notice that there is a lot of white space between almost everything. I’ve optimised and tweaked the line spacing, letter spacing and word spacing to create what I believe is currently the most usable typography I can muster out of Georgia. You may also notice there are lots of white space between posts and between paragraphs, and all the white space is relative to each other, so the space between posts is three times that of the space between paragraphs, and so on.

It’s about time us so-called “designers” starting educating ourselves about the real design, and face the fact that over 95% of the content you create will be text, so you number one priority when designing should be how to treat the text.

Going off on a tangent here, but this is also the first design and theme I’ve made using completely open source tools, not relying on Macromedia Dreamweaver or TextMate as I usually do1 but instead using the excellent Notepad2 by flo. Thumbs up for using the right tool for the job.


  1. Although I admit that if I had access to my Macbook during the time I spent designing Opacity2, I probably would’ve used TextMate instead.
css.php