The Message is Distorted

It's been 7 years, 5 months and 23 days. Never have I felt so drained after preparing a website for this domain before, but this really brings light to the phrase, "you get what you put in." I've had long hiatuses before. However, none have seemed as long or drawn out as this one, and with this post and this new design I am proud to put an end to it. So, let's start at the top shall we? I'm sure you'd like to know a little more about the 25th version of Avalonstar I call Distortion.

Project Distortion’s formation was fueled sheer anger I had towards the last version of the namesake, which ironically, has found its way off the internet. You'll hear it straight from the Filipino's mouth--that version was a copout. I knew I could do better than that and I realized that Avalonstar had fallen into a pit it couldn't find it's way out of. As a designer, I too was in a pit; taking my newfound loves of grid design and Django and hastily putting it in front of the crowd like something fresh out of Dr. Frankenstein's closet. I had to refine both skills before I could ultimately bring all of it back to Avalonstar, tour-de-force fashion.

Note: The purpose of this post is more of an overview than anything, specifics will be touched on in the coming days (or weeks, it all depends... maybe).

I gave myself some guidelines: I had to have complete Photoshop documents of each view. I forced myself to not touch any CSS until the corresponding Photoshop versions were complete. The process had to be flawless.

The first try at the design was pretty basic and I quickly got tired of it after finishing the header. Actually, to be honest, all the first revision contained was a black header, a white content background, the first version of the navigation and some yellow placeholder text. I left it alone for a while and went back to other work, but my mind didn’t feel complete with the utter lack of an Avalonstar. However, I needed to keep my own promise and not budge until I was finished. Time passed and my design abilities began to suffer. Out came a second revision that was scrapped just as fast as the first revision, only improving on the first by adding some texture and lightening the black background. Again, time passed and the design started to gather dust. A third revision wouldn’t appear until at least a month later and the only element that the design had added was the rest of a entry page.

Things didn’t start getting interesting until I hit the fourth revision, fresh off of a design “high” I experienced while working on a hypothetical 5th version of my now defunct Ragnarok Online private server, Nyxsis. I took the header, which was a picture of Juno—one of the game’s central locations—and an inverted picture of the night sky and threw it onto a duplicate version of revision three. A few layer duplications, gaussian blurs and overlay modes later, I found the green tint and the beginnings of a header I wanted. I pulled out the font I had used for the Nyxsis logo, Cabourg and applied that to the headers. The navigation was finalized, the section headers materialized and the quirky sayings were born. I was getting somewhere. I promptly designed the content (which honestly wasn’t that hard, designing copy isn’t one of my strengths), and a few dummy comments and a comment form, which was very... square. A home page started to materialize as well, and then I got stuck.

Where? On the home page of course. So I said to myself, “screw the guidelines,” and I started to code it. Then I hit roadblock number two. I had broken my own rule and designed it within the bounds of Photoshop’s canvas.

Cue headdesk.

It was almost scrapped like all of the others, but I had put in so much work that I didn’t want to stop there. So after spilling my thoughts to Jen, I decided to iterate. Keeping revision four open, the first part of revision five would be the boundaries to the left and right of the content area. The rest... seemed to come together quite quickly. Quickly—in the sense of a week or so in comparison to the months it had taken me to get to this point. After removing the picture of Juno, I settled on a header that introduced the shade of red that you now see. The “pills” and the rest of the content elements would stay the same; the only elements dying under the knife being the comment list layout and comment form layout. I was personally glad for that, since I really disliked the conventional box method from revision four. The shadows came in, everywhere. Then the opacity was played with. Then the grunge was thrown in. Then the transparent PNGs.

The production version was finally taking shape. My heart soon of leapt into my throat. Blog page: down, home page: down, about page... sort-of down, archives page: down.

I was ready to code.

Code. I quickly gave the first Django version of Avalonstar’s codebase a look and spat at it. It was the exact same feeling a person would get after looking at the first site they made—coded in tables. The thing needed a complete rewrite. And so it began, model-by-model, view-by-view. It needed to be leaner, more modular. I was finding myself questioning fields that I put in, asking if they would retain any information that would be worthwhile in the future. It was quite odd. I’m not a programmer, but I certainly was questioning my own code like one. This blog application was the easiest part. Then the topic application came along; actually being pulled from the original codebase. The rest? I couldn’t have done any of it without the spectacular knowledge of Blue Flavor’s Jeff Croft, the very person who got me interested in the framework in the first place. He introduced me to features and applications that I had wished for while I was developing projects like Nyxsis. Inlines, geocoding, media handling and his many examples gave me a better understanding of APIs; knowledge that seems to be essential when building a blog. Why he hasn’t killed me for asking him so many questions, I don’t know. I’m inviting him to my little birthday bash next month, maybe he’ll pull the trigger then. ;)

Although, even after all this work, my attention turned elsewhere and the eventual completion of two other personal projects would fuel the final tank I needed to get to where I am now.

Those projects are obviously bryanveloso.com and Revyver. It had been a good half-a-year since I had released anything, and releasing the newly designed Tubmlr-based site quickly led to the release of the new Revyver. Now there was nothing left for me to redesign, no personal projects left to work on, I had to finish Avalonstar. Nudges from Dan Oliver at .net Magazine, Kory Twaites, and Rob Goodlatte signaled the beginning of the end.

So since then, I have been grateful that I have a bit of control over my workload. Avalonstar leapt to being a top priority and I began to code day and night to finish it. I put my server administration knowledge to the test, building a stack of Django being served by mod_python behind a nginx proxy which served the media. I even spent hours debugging Javascript, something that I would always scrap and throw away as being too hard for me (honestly, reverse engineering the jQuery demos helped tons). Ninety percent of my waking hours for the last week have been spent coding, slicing, breaking, testing and re-coding Distortion. Never have I put so much time into something which a good number of people perceived to be an inconsequential or needless part of my life. Maybe working on it so hard was me trying to prove how important a site that has taken almost seven-and-a-half years of my life is to me. But it’s more than just that, it’s experience I’ll take with me to future projects. I’m still quite the jack-of-all-trades, but I’ve gotten that much better in all of them. All I have to say is thank you to Nobuo Uematsu, Morning Musume, °C-ute, Hans Zimmer and Kimura Kaela for the utterly spectacular music that (while on repeat-once) helped me to survive hours upon hours of development.

After all of this, I made a vow. A vow that from now on Avalonstar will never reflect my style at the time of release. Avalonstar will always be an experiment and an exploration, just like it was always meant to be. It is an experiment in more than just design, but in process and in personality. With that, I welcome you to avalonstar:distortion.