For over a year now a new project has been brewing, OpenPress. It isn’t a secret but nobody took the bait and built it so we are going to do it, something that I am over the moon about. The ‘we’ that I am talking about is Roché Compaan, Steve Song, and myself. We’ve just started out on this journey and there will be a lot more written about this in coming months.

We need to establish a bit of a brand identity and we’re currently sourcing a logo. Rather than tying ourselves to one designer, we want to access the largest possible creative pool we can find to try to come up with something inspired. Given that we want to run this project as cost-effectively and efficiently as possible and an army of designers doesn’t come cheap, we’ve agreed to try the crowdsourcing (a definition I like) approach. In this approach one essentially makes a bounty available for the final product and makes an open call so that any and all can have a crack at the problem.

There are web-services that facilitate the process by managing the bounty, providing a central location where a community of designers convenes and provides a loose framework for managing the process, keeping things roughly fair. We decided to use 99 designs for our process but also considered crowdSPRING. I was dragging my heels a little bit about getting the competition started but Roché jumped straight in and ran a contest for a new web-site design for Upfront Systems. The results of which you can see here.

Yesterday at around noon we launched a competition for the OpenPress logo. In the web-site design contest Roché launched it took a few days before designs really came in. Logo contests are a little simpler and in the first 24 hours of the competition we received 72 entries, which I thought was a phenomenal response. They are definitely not all in the running, it is clear that some people didn’t even read the brief. However, there are already some that I could probably live with and we’ve yet to give any feedback.

I am now a complete convert to crowdsourcing. Given my experiences with the Siyavula logo and web-design processes I think that a site like 99 designs, that has a critical mass of designers, really provides a light-weight, cost-effective and rapid solution for most of my design needs. I will launch a contest, in the near future, to start improving the look of this site I just need to bolster the content so the purpose and scope are clearer

Originally, it was my intention to get a designer to build a theme for this website. However, budgetary constraints have dictated that I either do it myself or use a free theme. Themes never seem to do quite what I want, or, if they do, they’re so popular that I can’t bring myself to use them. They’re always tweak-able but that usually just ends up getting messy as the tweaks are usually counter to what the original designer had in mind. So I decided to just build one from scratch. This isn’t hard at all and there is nothing remarkable about doing it. Budgetary constraints turned out to, in fact, be a blessing in disguise!

Good web-design is going to be key to the success or failure of some of my upcoming projects and so spending some time immersing myself in trying to apply some of the ideas to my own site allows me to kill two birds with one stone, build my own theme and really engage with some web-design principles so that they sink in. I’ve bookmarked too many articles thinking I’ll come back to them and I never have, so now I’ll apply them to my own site as I find them. My general rule-of-thumb when getting into something new is to work very slowly through the basics and the first few articles so that after a while all other articles are minor increments on what I already know.

I simply followed the tutorial from WPDesigner.com in building my theme, once completed I moved things around a bit. This site currently has the categories in the header rather than the sidebar and 4 widget-enabled areas in the footer. I tried to use widgets wherever possible so that I would hard-code very little.

I know that we need to aim for cross-browser compatibility and floating div’s never seem to work the same way on IE as they do on Firefox for me. I’d never used a CSS framework before but stumbled across Blueprint just before starting this site (courtesy of an article on Smashing Magazine). The frameworks allow you to manage your layout (and typography) very simply and effectively from scratch and take care of all browser idiosyncracies. In the end I actually used Bluetrip as my framework, it is built on Blueprint so the transition was painless for me. That took care of the layout.

I’d never intended to have independent sites for my work and personal blogs because there is too much overlap for me. I just wanted to use categories to separate things a bit and make sure that users could immediately select articles on the project of their choice by selecting the icon based on the project logo from my header. I made some simple icons in the GIMP which can be seen in the graphic below.

The original header for the site, showing the icons for the categories.

I’m gonna skip the rest of the details about the basic site structure and move to my activities for today. I’m following Smashing Magazine on Twitter and this tweet was released today:

Apple vs. Microsoft – A Website Usability Study – http://tinyurl.com/mkjm4t – An interesting read.

The article has a nice comparison, from a designer’s perspective, of the websites in question and is much more objective than I expected. One point that web-designers keep driving home, as in this article, is that users need to know what to do next. They must quickly and easily know what options are available to them on your website. I want users to immediately make the choice of whether or not they want to know more about FHSST, Siyavula or my personal posts. However, if they’re not familiar with the projects already then my icons are meaningless to them.

I decided to try to do something about this immediately. I can’t rely on the mouse-over text to explain what the icons mean so I need to do something more. The GIMP and I attempted to incorporate the category name into the icon. My header now looks like this:

The header including the new, more explanatory, icons.

They certainly aren’t masterpieces but I think they’re better than they were. Of course, visitors to my site are still faced with knowing what FHSST and Siyavula are, but they’re more likely to know that than be familiar with the icons I made from the logos.

Some things that are priorities on my to-do list are:

• make custom category pages so that the project description and full logo are included in the sidebar when a user selects the category
• integrate the RSS feeds for the categories into the theme in some way (perhaps just in the sidebar when one selects the category but I’d prefer to get them into the header somehow)

I’ll also have a very good spec for a designer should I ever have funds for professional help on this. In the meantime, I think tinkering with this site will be fun.