Designoplasty Web Design and Development Blog

I just finished a new theme for Doxie News and I’m really happy with it. I think it’s my best theme yet and I couldn’t want any more from it. As you can see it shares a lot of design concepts with Designoplasty but is distinctly its own. I love the shading in the the theme. As I learn to get better at manipulating color and texture, it’s really adding depth to my designs.

This was a goal of mine almost from the start. You can get somewhat nice themes using well selected solid colors but they’re always going to look fake. In the real world, all colors have shading. For instance, if I have a booklet with a solid white cover, it is actually going to appear as a gradient from gray to really bright white depending on where the light sources are. On the web, though, when you say white, it means literally white.

This gives a naturally fake look to everything. And we, as users, have come to understand that, and relate to it. But then when you add the shading in, people kind of have an, “oh yeah” moment.

I’ve done a lot of experimentation with applying various gradients to achieve this look, and nowhere has it turned at better than Doxie News. It really make me happy.

Arial vs. Helvetica

IE and Windows are always second class citizens with me because they render so poorly. I think it’s important to make sure the people with the best browsers get the best experience, not the lowest common denominator. That’s why I design on Safari. I make sure everything works and looks right on other current browsers, of course, but those browsers bring their drawbacks that I can’t help.

One example is Helvetica vs. Arial and fonts in general. Here are a couple of screen captures from a Mac and Windows.

The above screenshot is Safari 4 running on a Mac. Notice how wonderful that classic Helvetica “1″ looks next to the comment. The name and time look great and still retain the characteristics of their font even though they are smaller. The text just looks normal, very similar to how it would look on a printed page.

This is IE8 on Windows. What the heck is up with the Arial “1″? Wow. That is one ugly “1″. Arial was meant to avoid licensing costs while still essentially being Helvetica. Why did they choose to make this very important character so horribly different? The fonts on Windows are rendered in a very chunky fashion. Look at the “z” in Eliza. The body text also looks choppy.

Microsoft is very stuck on this idea of making fonts align to pixels. But Apple does a great job of making fonts look like they are supposed to look. Again it goes back to the idea of trying to approximate the real world. I know that the fonts on a Mac start off looking fuzzy to people. I came to a Mac while working at Microsoft, so I definitely noticed at first. But after a while you really appreciate the readability and don’t even think of them as fuzzy, just correct.

I’m really happy with the theme. It looks great on great browsers, and it looks as good as it can on the rest. I really do love the way those Helvetica comment numbers look. The concept of large bold numbers surrounded by white space is such a Helvetica thing. It’s reminiscent of Sesame Street, don’t you think? It’s fun to have that touch.