Koodilehto
Koodilehto Site
This site is probably the most important project for our co-operative, at least marketing wise that is. Hence it is extremely important that it looks good and manages to convey the right things about us. I believe we have succeeded in this to some extent.
Building the site wasn't a walk in a park. It took quite a bit of conscious effort to shape it to the way it is. In this article I'll briefly discuss how we ended up with the result now visible.
Old Site
A screenshot of the old site index
The old site, pictured at right, was based on Plone CMS. Even though the site was somewhat functional, it really didn't look that good. It was also quite taxing on our server.
Given our meager needs Plone was just a bit too much. Sure, we could have reskinned it to make it pretty. That still would have left us the hosting problem.
Based on this premise we started to seek for something more fitting to our purposes. We already knew quite well what content the site should have. We just needed some nice way to present it.
Concept
It took a while to find the right direction with the design. As you can see in the carousel below, the early concepts were quite different than the result. Initially it was a single page design. Later on it evolved into its multi-page form.
Some of the early attempts were quite far from conventional. In the end we ended up with something more conservative. Neutral colors, textures and subtle effects chosen we ended up with fit our style and the message we want to convey.
The frontpage of the site is the most conversational one. It meshes together the doings of the members and gives a quick glance at the action. A casual visitor should understand what Koodilehto is about without having to exert herself too much. More curious one might delve further and discover what Koodilehto truly has to offer.
How did we end up with the current version? By bit of a chance, really. After fiddling long enough with vanilla CSS I decided to give Bootstrap a go. It provides nice base templates to build upon. I picked one, added some rounding to the main container and off we went. The remaining elements of the design sort of just appeared there navigation included.
You can see how the design work progressed at jsbin. Change the number at the url to see some specific revision. Here are some shortcuts: 1, 10, 20, 30, 40, 50, 64.
It is almost amazing how small, subtle things matter in design. Just something as simple as using a texture instead of a plain color or dropping in a nice font makes the result seem more aesthetic. It's little things like this that make a good design even a better one.
I'm not claiming our design is perfect, probably far from it. I do believe it's a lot better than what we had before, though. There are still probably some things left to tweak. Perhaps we'll end up redoing the whole site at some point to match the current trends better.
Early Concepts
The following carousel contains screenshots of some early concepts. They're quite far from the current version but provided a way for my associates to give concrete feedback.
In the first conceptual prototype I played around with thesaurusish outlook. What if all the content was hidden in a minimal yet modern outlook?
The first idea looked a bit too bland "as is". As a result I added a photo there to represent Koodilehto (codegrove literally).
In this prototype I took a painterly direction. The content would be hidden between two trees. The whole would represent the core of the brand, the code grove.
This just takes the previous concept a step further. I rendered the trees in a painterly style.
In this case I decided to try something more traditional with a twist. This was just one of those ideas that never really took off.
Technology
There is plenty of technology behind the site. It is hosted on GitHub Pages. This is a free service that works surprisingly well. There are some downsides and gotchas to it but overall its advantages outweigh these.
If you decide to use Pages, you'll be stuck with Jekyll static site generator. It uses Liquid for templating. This isn't a bad combo. There are some technical limitations I'm not too fond of but overall this has solution has suit our purposes fine. Jekyll has been designed mainly blogging in mind but it seems to work well enough for whole sites too.
As I mentioned earlier we utilize Twitter's Bootstrap. It provides some scaffolding (CSS, JS and such) that helps you to build your own sites, apps and such without having to reinvent the wheel too many times.
In addition we utilize jQuery to make it a bit easier to implement various interactive functionality and RequireJS to manage it all.
In the process I ended up releasing a carousel, a lightbox and an ellipsis plugin I developed for the site under MIT license so you are free to use them for your own purposes as long as you retain the attribution.
Conclusion
Koodilehto site is a good example of what we are capable of. It gave us a chance to learn and apply various technologies in a concrete context. In the process I picked up a thing or two about web design.