I took a crack at my initial idea for an original WordPress theme. I did up some quick and dirty graphics using Inkscape and muddled my way through the CSS and came up with this:
I wasn’t impressed with it. I fiddled and diddled with it, but it didn’t look like anything too promising. But hey, you’ve got to start somewhere right? And better yet, as I sat staring at it, I came up with a couple of other ideas. I was adamant about keeping a nice clean and simple layout (for now) that would be light on the graphics and degrade nicely. Therefore I was determined not to go heavy-handed on the graphic treatment, but I figured a little drop shading might better achieve what I was looking for. Here is what I’ve got so far. I’m much happier with it:
I know a lot of you might look at that and say, “Whoa.. dude it’s very Apple-ish” or maybe “Whoa.. dude, it’s very antiseptic”. But there’s only one god-dang reflection on the whole page!
And a few rounded corners never hurt anybody. You don’t see any gradients do you? Defensive.. I know.
I actually played around with putting a staple on top of each post and even a crease in the upper right corner of each post (ah, the miracles of a desktop scanner) but neither looked right.
Whatever your feelings on it, please leave me a comment and let me know how retarded looking it actually is.
I’ve still got to generate the sub pages based on the rearranged markup (single.php, archive.php, search.php etc..), but that shouldn’t be much of a problem. Of course there will be problems popping up left and right once I decide to actually upload the theme, but that’s to be expected.
It actually hasn’t been too bad, although the CSS is a complete dog’s breakfast at this point.
And to heathenx, if you’re reading… doing all this crap has actually generated a decent Inkscape screencasting idea, so maybe, just maybe I’ll get one done this coming weekend. Wonder of wonders.


I like.
I normally do not read such filth but since I saw my name tied to it…
I think your mock-ups look pretty good. Definitely the drop shadow one.
Yes, maybe we’ll get a screencast from you. I have been telling people that you stop making screencasts due to loosing a testicle on that horse riding incident. It’s hard to recover from a loss like that, I’m sure. Maybe soon you’ll get back in the saddle again, so to speak.
“…very Apple-ish”
Hey, you know with baiting like that I have to comment!
I agree with heathenx, the drop shadow one. To keep the peace I’ll just say that it’s very un-Microsoft-ish.
Another effect that I really like is a “comment cloud” around posts like on planet ubuntu.
@OmegaMom - Me like that you like.
@Earl - Be careful agreeing with heathenx.. it’s a slippery slope.
Actually I heard that Apple actually codes their main site statically (and doesn’t use a CMS per se) but that’s strictly heresay. I agree with the un-MS’ish part. Although with the high-shiny-ness quotient of Vista there are a lot of sites that might qualify.
@heathenx - Let’s keep my nuts.. er nut, out of this. I didn’t realize this was so similar to planet ubuntu’s comment cloud thingy. But if I did that you’d have to see my ugly mug beside every post - and that, my friend would NOT be good for readership! I might lose the 4 I’ve got already!
I dig it. although, I had imagined something a lot more minimal from your last post, with the corners being only a pixel or two wide….
Still the second one is pretty cool.
love the current theme, though those mockups are nice.
I think I like the dropshadow one better, too; the content seems more separated and easier to take in. The first mock up is a little too overwhelming; I’m not sure where to look first. Some typographical hierarchy structuring would do it some good! Try using not only different fonts, but different colors, too. For example, the post titles could be blue and set in a serif (like Georgia) and the normal text in a black sans (like Verdana).
I would also suggest backing off on the intensity of the dropshadow; it’s a little too dark and too big, particularly around the corners. Of course, it does have the illusion that the corners are curled up, which is kinda cool.
I like your header image on both of them (well, “sider” I suppose would be the better term). But take a look at the font you chose — is it giving off the message you want it to? It’s a little odd, a silky reflection with such a textured and bold font (though the bold is reduced because of the grey color). Also, “Renaissance” says refined to me, and a Ren Man is someone fairly well-versed and interested in a well-rounded variety of subjects. So does your graphic say that? Perhaps it does: “grunge style to fine living, this guy knows it all.”
I’m always so impressed by what people who are not professional designers come up with! Good job so far, now you just need to add the polish
Try picking out the details you like about other websites (not just blogs) out there and incorporating them into your theme.
And make up your mind! Is it post twenty or post ten?!
@LaurenMarie,
Thanks for the great commentary.
Yeah, I think I’ve just about abandoned any hope of going with the first iteration. The more I look at it, the less it appeals to me.
As far as typography goes, I’m still tweaking that. I’m not opposed to going to a serif font for the headers, I was actually thinking of that but the serious limitations of web fonts just kills me. I’d love to use a chunky modern serif font like the one used on the cover of Ellen Luptons Thinking with Type but the realistic choices are so limited.
Interesting your comments on the header/sider image and it’s connotations. Fine living I know not.
But it was just something I grabbed to make a quick image. Perhaps this is one place where I’ll come up with something a little different when all is said and done.
I’m also thinking of changing the corner treatments a little. I want to add some character but I’m a little nervous of losing the ‘cleanliness’ theme. I’ll have to do some experimenting.
Thanks again for the comments, they’re much appreciated.
ps - when I created the dummy posts you basically create 10 marker posts and 10 special posts (to test different things). Creating the first 10 is easy, but the last 10 are a little more tedious, so needless to say I was glad when that was over and completely forgot that last one was actually the twentieth! Hey, it adds character.. or mystique.. or something.
[…] all about how IE treats the css box model like a red headed stepchild, I finally hit a milestone in the journey (how’s that for overstatement!). I have a new and almost passable (and fluid) theme on this […]