No. You're not dreaming. This page is finally 503 no more. I've had delays getting things done on this site before, but I know this one was the longest. But I do have a good reason this time. Well, not really.

The design part of the process did not take much time. Sure, I did some tweaking on more than one occasion, but that was not it. Having recently changed countries, we were preoccupied with the many things that comes with that. If you have done that before you would know what I mean. Stuff like settling in, job hunting, getting things together never gave me a chance to do what was left to do to go live with the redesign, and that is simply just re-writing the parts that needed to be rewritten here. Besides, I'm the laziest person on the planet when it comes to writing.

The new design that you're looking at right now, introduced a few extra pages which the site did not have before. Mainly, the portfolio section. I wanted a place where I can organize the few project that I've done (and hopefully will do) over time and where it is easily accessible to readers. And while it's still rough around the edges, I think I do have a solid ground on which such "catalogue" can evolve.

The Concept

The design itself, codenamed Sky, is intended to focus on optimism and light. The colours, though may not be completely tweaked yet (and I blame my cheap laptop screen), are meant to inspire simplicity and warmth with the abstraction that often reminded me of the sorts of art I used to enjoy as a young boy.

The initial scene and colour combination, codenamed Summer Day (Yep, I do like codenames), is the initial and the only one at the moment.The idea is to to eventually be able to add more combinations and to display them on certain dates, times, or occasions. This should provide a renewable experience to visitors without altering the layout and as a result, affecting its familiarity and navigability.

The Design

Before getting more into the layout details, it's worth mentioning a few points about the scene part of Summer Day. The scene is comprised of layers, each acts as a wrapper to the next one with the last layer wraping the foreground, which is the actual content area. The content of these layers are positioned in a way that when the width of the browser window is changed, these layers scroll at different rates and to different directions to generate an effect similar to the parallax effect. Rather useless, but often intriguing and supposedly fun to play with as it does add some life to the static nature of the layout. In addition to the decorative elements, a few interactive elements, namely the search box and the twitter bird, are added to the background scene to act to serve as a connection between the scene and the content area.

The layout of the content area is different depending on the page currently displayed. The most important one, the home page, is preceded by the commonly displayed top bar, providing navigational links and affirming site identity. An excerpt of few paragraphs from the most recent blog post is then presented to highlight what is the "latest and greatest" addition to the content. After that, a quick welcome is made and a few suggestions of on and off site articles are given. The following section of the content area basically focuses on the history of the site. Providing the visitors with a glimpse of the next recent blog posts on the left, and the most recent projects to the right but in a more visually focusing manner.

The Making

For sites powered by Habari, putting a new redesign together is basically writing a new theme. And not to stress it more than I should, Habari has always been the best platform to create themes for. The degree of flexibility and potential to make great and dynamic themes still dazzles me.

At first, the portfolio part was intended to be integrated within the theme code, but I then decided to have a plugin do that just for the sake of flexibility and layer separation. The plugin is named portfolio and is yet to be cleaned up and released. In addition to a few custom fields that were added to blog pages, everything else is handled by Habari's superb template system.

Credits

The bird is created by rocketgenius and shared under the CC-BY license. Social media icons are from KomodoMedia's Social Network Icon Pack and are shared under the CC-BY-SA license. The font used with cufón is Lane by GemFonts. Finally, the original tree is part of Designous's abstract trees vector pack. Everything else is done from scratch by yours truly.

Acknowledgment

It can never go without thanking some of the guys who provided help, feedback and encouragement througout the development process. Thank you Mike, Owen, Rick, Adam, Michael and Donal. Hopefully, I've not forgotten anyone else. But if I somehow did, thank you!

Feedback?

Several aspects of the new design is still a bit rough around the edges but I would still love to hear about the thoughts you may have of any part of it. Please be generous with your feedback and tell me what you think!