Theme Playground

This morning I received a notice from Vladimir Prelovac that he has just released his newest theme which he is calling Amazing Grace. Since he was nice enough to send me a note about it, I thought I could be nice enough to review it.

Quick Links for Amazing Grace

• Visit the author’s site
• Visit the download page
• See a demo site (Sites using it: me)

The Color

The first thing that jumped out to me about Amazing Grace is that the colors are wonderful. I love how subtle they are; they remind me of Copyblogger and Pearsonified.

This sort of color scheme doesn’t carry with it the usual web 2.0 trends. These colors are very serene, and have a sort of calming effect on me.

The Trimmings

Sometimes a list is just the right way to do something.

• A cutesy RSS icon — every site has something like this nowadays (and with good reason, actually) and this one ties in nicely.
• A nice border effect on all images used in posts/pages (something I’m always intrigued by)
• General CSS styles which are flexible. You can add new sidebar elements with ease of mind, as the styles here truly cascade.
• Polite use of social bookmarks at the end of the most recent post (only del.ici.ous and Digg, which I am okay with)
• Beautiful font choices — main content in a clean sans-serif and outlined in Georgia, yes!
• Two layered navigation

Two Layered Navigation

I would actually like to dive into this one a bit, mostly because I never thought about how useful this separated navigation could be for a blog. The top level navigation is for pages, ideally. There is enough room spread across to easily fit eight or ten pages, if need be.

The second level navigation is intended, by Vladimir, to be used to house a few categories. Me, I chose Philosophy, Church Theory, and Dorky Code — three topics very dear to my heart. But there is room for another or two, and is a nice way to offer a few starting points for new visitors to your blog.

Works for Personal Use

I approve of this theme so much that I am now using it myself (thanks Vladimir!). I installed it only minutes after looking it over, which is always a good sign. And I will say this, too: any theme that can make you want to examine your blog to improve its overall quality is a great theme. Anyone agree?

I made a number of adjustments to Amazing Grace so far (due to my own personal preferences, not Vladimir’s incompetence) including:

• Tweaking the search bar’s appearance, and
• Switching out his photo in the header with a random pull from my Flickr feed.

If you are interested in hearing how I did either of these things, just keep an eye on my personal blog and I’ll post on it in the next couple of days. If some time goes by and you really want to know, just poke me.

I would recommend checking this theme out, whether you are interested in a new theme for your site or are just interested in some quality design in practice. Nice work Vladimir, and keep us informed on your future work.

If you have a theme you would like reviewed, please let me know. I have a number in the pipes, as they say, so it may be a minute before yours hits. But I will get to it. If you are one of those in my pipe, I appreciate your patience with me.

The WordPress theme design deadline has been extended again, and the new “deadline” is December 19. I’m not complaining—it just give me more time to work on my submission NewsPlay.

I listened to a really interested podcast last week: an interview with Matt Mullenweg, creator/founder of WordPress. Matt mentioned it today on his blog (good one to subscribe to, if you are a WordPress fan) and it reminded me that I took some notes to post for those who might be interested in the bullet points without spending a half an hour listening to the cast.

First off, there is a great topic-by-topic breakdown at Search-This, the site responsible for the interview. See the podcast page for a breakdown of the entire interview. I’m just going to mention my favorite parts.

• Matt said that one of the biggest changes we’ll see in WordPress 2.4 (due early 2008, and delayed for the sake of the developers enjoying Christmas) will be in the interface. He didn’t go into detail, but just said that this will be the biggest interface update since 1.0. Any guesses as to what will change?
• When asked if there were any Plugins that Matt would consider incorporating into WordPress by default (like what happened with sidebar widgets) Matt mentioned the Google Sitemaps Plugin, which creates a dynamic sitemap for your blog. See our tutorial on the Plugin or go to the Plugin’s site.
• Matt also talked about the photo gallery Plugin he has in use on his own blog (heavily modified) which he would like to incorporate into WordPress at some point. I was glad he acknowledges that WordPress could improve the handling of uploaded images, since I have been thinking that for a while.
• Some exciting news on bbPress, the forum developed by Automattic and in use currently as the WordPress.org support forums: Matt thinks highly of it, and recently hired on someone named Sam to work specifically on bbPress. Apparently, since bbPress came after WordPress, the code is even more beautiful than WordPress’ code is. They are planning a hosted version as well. It sounds like it would be a lot like the WordPress.com/.org setup.

Yesterday was a really eventful one for the design and development of NewsPlay. I can’t take all of the credit, either. There were quite a few friends and readers involved in different elements. But I’m getting ahead of myself.

I lost a lot of sleep developing this concept. And I think (hope) it was worth it. I’m still a ways from complete, but I think it’s finally something worth looking at and talking about.

Borders and Color Palettes

I always have trouble with color choices, and this case was no different. I was chatting with someone I work with at Aspiring Indie about it (via Campfire) and she made a good point.

She made a good point. If I want this to really take on the look and feel of a newspaper (and be mold-able by others) I need to keep the canvas somewhat open. Thanks, Ashley!

Oh, and I’m really excited about the border style. It’t pretty unique (that’s what she said) but it’s really growing on me.

…that’s what she said.

Teaser Images in the Masthead

This one really took some playing with. I mentioned this in an earlier videoblog, but basically I want the top section of this theme to operate the way the topmost portion of a newspaper does; that is, to highlight stories within the publication.

Here’s what I started with.

That’s from the gray box design I started with. From this I went through a few different renditions. Least of which was this.

Pretty nasty, right? I should get points for disclosure in showing you the steps I take!

After some design and deliberation, though, I came to this. I think it’s a pretty cool way of showing off what’s new.

Oh, and thanks to Scott from Phoreo for pointing out that the color in the header was tough to read. Fixed it, for the sake of eyes everywhere.

I like this way because it gives lots of space, has a nice tight size of the display image, and doesn’t take too much away from the header. What do you think?

The Sidebar, Before and After

I had some nice feedback from readers in my last post regarding the sidebar, and hopefully this will reflect some of those ideas.

Click the image for a bigger version.

I’m playing with the idea of adding the date and breadcrumbs to the top of the sidebar, thanks to the suggestion from Neil in the comments the other day. It’s not quite in the header, Neil, but I’m hoping it might pull off a similar effect. Thoughts?

I really like this way of bordering (is that a verb?) the images in this theme. What do you think?

Choosing Fonts

Typography truly can make or break a design. I will talk about keeping a vertical grid later (something which greatly improves a site’s design) but right now I want to explain the decision to switch from sans-serif to serif on this theme.

One reason for the switch is that serif type better reflects print typography, in that many printed publications will use serif since it’s (arguably) easier to read on paper. Another reason for the switch is that I think Georgia looks prettier than Helvetica for this theme. Screens below.

Using Helvetica.

Using Georgia.

As always, I’m open to suggestions. And changing this part of the theme will always be pretty simple, thanks to the beauty of CSS!

Thoughts Moving Forward

This post was much easier as a regular text post than a videoblog. I look forward to some more screencasting as I start cutting the theme together, but that’s a few days away right now.

Here’s the most recent PSD, as recent as the one sitting open on my laptop. I’ve incorporated Ulrich’s thoughts and contribution into this new one, so be sure and take a look. This is starting to take life a bit! (Thanks for the ideas, Ulrich!)

I will be experimenting next with a fluid two or three column option. What this means is I will want to have a design that looks good in a number of different ways. We’ll see how it goes, but I think it will really make this theme. Oh, and of course it will be built on Sandbox, if anyone is familiar.

Thanks for reading and participating in my little experiment here. I look forward to more feedback!

Other Posts in This Series

• Getting Started in Photoshop
• Initial Concepts and Sketches
• First Videoblog, Announcing an Idea

It’s been a few days since I’ve updated this project, and I’m pretty excited about where this is headed now. The pressure is definitely on to develop something awesome, since Cory Miller has released NewsPixel and Adii has released Premium News Theme in just the past week or so, it seems. (Reviews of each will be on the way this week.) They are both pretty solid, and the last thing I want to do is start some sort of rivalry. I only hope my little project still makes a difference in what is quickly becoming a crowded market.

So, with that I offer the videoblog/screencast below if you wish (YouTube this time, which will hopefully work a bit more consistently) and some more information on my progress so far underneath the video.

From Paper to Screen

My last post of this series showed some of the designs I have been doodling in my notebook, and I received some good feedback in the comments. Not it’s time to start moving from paper to screen, and in doing so start to flesh out some of the decisions I’ve been considering both on my own and here at Theme Playground.

Above you’ll see a slightly small version of what I’ve been working on. It’s not complete by any stretch of the imagination.

I call this first version of the design a gray box design. I try to get all the basic proportions down and jot down the purpose of each area, but I don’t spend much time, if any, on fine tuning any of the design elements. The goal, in this stage, is to get the ideas down and to get them down fast.

Teasers in the Nameplate

One of the first things that exicited me about putting this theme together was the possibility of putting in teasers, like printed newspaper would, in the nameplate of the design. (The nameplate is the area where the logo resides, and the space is used to identify the publication.)

In the image above you can see I’ve only blocked out this space, but there are a few different ideas I have for actually making it happen. At first I considered only using blocks of color and text, as that would be simplest, but I really like the idea of using images if they are made available by the blogger. I will be working on this area soon to get some possible design concepts worked out.

Links to “Page Two”

I think it’s cute.

You know how in newspapers there is always that reference at the end of the column on the front page telling you to turn to another page to keep reading? Well, what if that same sort of direction was at the end of each shortened post on the NewsPlay homepage?

The page referenced will be the name of the category the post is associated with. I may have to make it display only the first category, though, since people tend to go crazy when adding categories to posts (don’t do that, by the way).

Have Ideas? Let Me Have ’Em!

I want to make this as available as possible to anyone who wants to take part. By that I mean that (like I said in the video above) I am making this Photoshop file available for download for anyone who wants to play with it in its current state. There isn’t much there, but have at it.

Download the NewsPlay Gray Box Design for Photoshop

I’ve left notes throuhgout the document and I hope that if you have ideas, you will contribute to this process. If you have a great idea, drop it in the comments or add it to the PSD and shoot it back my way. I really am excited for any feedback!

Remember, only about ten more days until this theme has to be completed. So don’t hesitate if you have ideas, this thing will be done before you know it.

Brainstorming More Ideas

And don’t think you can’t throw out ideas for this theme, even if they don’t seem useful at this stage. Here are some things that come to my mind:

• Kick butt print and mobile views
• The option to run with two or three columns
• Drop down menu (with actual pages, not just categories)

What do you think?