To celebrate the launch of my newest design, I tought I’d explain how I did it and what tools and plugins I used. Not to say that I did anything special. The blog (Blue China) is pretty simple, and not supposed to make it to the top of all CSS galleries overnight (although it would be cool if it did). But even so, I think designers are always interested in seeing how others work.
At least I know I am. Reading about how a master webdesigner like Jesse Bennet-Chamberlain redesigned the Expression Engine site was a great source of inspiration, and made me realize the importance of icons in web design. And reading about some high school kid designing his Dragon Ball Z fan site (no, I’m not talking about myself, I’m not in high school anymore !) can give you that warm feeling of knowing that some people are even worse at design than you are.
The design: simple & clean
For this project, there was no need for something too fancy. This would be an informative blog (about water management issues in China), not someone’s personal blog. So I wanted to keep it as clean and readable as possible, while at the same time having a water theme. The use of light blue tones seemed quite natural given the theme. I used sxc.hu to find free images of water drops (in the header and the bottom of the sidebar), and also decided to add an OSX-like background for the sidebar to give the site a modern feeling. I wondered if it was too much, and for a more design-ish site I might have chosen a more minimalist approach. But since the audience here would not be as concerned with design, I chose to keep the different elements to send a strong message (namely: this blog is about water).
At that point I looked around on the web for other sites using a similar layout but didn’t really find any. Only later did I notice that the Salmon theme kinda looked similar. Depending on your point of view, this can be a good thing (you’re creating original work !) or a bad thing (if nobody else did it, it must suck !). I’m not sure yet to which school of thought I belong…
The logo
As you can see the logo is extremely simple. I just took a previous version which used a 3D water bubble and dumbed it down even more untill all that is left is two blue circles. As far as logos are concerned, I’m a firm believer in KISS ! One thing to note when you’re picking your blog’s chinese name (could happen, right ?) is that it sounds much better if your name is 4 characters long. Almost all chinese proverbs are 4 characters long, and this gives a good rythm to a phrase.
A magazine layout
Another thing to note: I voluntarily chose to depart from the traditional way of presenting blog posts. Let’s face it, dumping your 20 latest posts in one big list on the front page is more lack of design than active choice. I decided to automatically feature the latest article (like on this very blog) so that new readers automatically know what’s important and what they should read. One potential downside of course is that if you write a post to tell people about your dog, it’ll get featured too. A good way to avoid this is to put important posts in a “featured” category and only display this category in the featured area.
WordPress Plugins
I also used a few wordpress plugins to augment the blog’s features. Since there are so many plug ins out there, it can be nice to know which ones other people are using, so here’s the list:
- cforms II: contact form plugin
- share this: ads a small share this icon which lets readers bookmark your site in a number of social bookmarking sites. Very handy, this plugin is almost a must-have !
- SimplePie: wonder how I got Yahoo’s News RSS on the front page ? I used a very simple RSS reader plugin to display Yahoo’s News custom rss feed.
- Identify External Links: this should be built-in in WordPress. It lets user know which links lead outside of your blog (and I should really put it on this blog, too !) by adding class=”external” to all outgoing links. You can then add a background image to the class. I combined it with Iconize which adds contextual icons to all kinds of links. I feel that these small details can often improve a site’s usability tremendously.
So there you have it ! To be complete, this article should also include SEO, but since I know next to nothing about it you’ll have to go somewhere else for that. I hope you enjoyed reading about my work, and hopefully this can encourage other designers or coders to explain their own work process.