This is the story of a guy, a design and a domain. After almost a year of nothing substantial, the domain decided to take matters into its own hands and promptly beat the guy into submission; telling him to put the damn sniper rifle down and finish the design he started.
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.
Oh. Em. Gee.
I feel like I stepped into the lands of the Chozo or something. It’s gorgeous, mysterious, beautiful, inspiring… and I can see why it took you forever! ;-)
It’s going to suck up a serious amount of my time, exploring all of this, now. But, I know I’ll enjoy every moment of it :-)
Congrats on a fantastic relaunch, Bryan!
Hard works pays off Bryan. Again, the design is nicely done. Congrats on the relaunch! Looking forward to your blog posts in the future :)
Loving it. Despite its uh, distortion, it has a touch of elegance. Bravo.
Wow…
I really regret the fact that this came out now because I need to get some work done. But now I’ll be spending the next few hours here checking out the nooks and crannies.
Stunning work. Great to see you back Bryan!
Back with a vengeance, eh? ^_^
I’ve had the privilege of seeing this during each of its various stages, and I have to say you’ve done it right. I expect to see this featured everywhere soon, and challenging the judges at next year’s SXSW Web Awards once again.
Congrats, man. As I told you already, I love how this design feels like a new and different approach for you, but still retains the same attention to detail that you’re known for. It sort of simultaneously feels like a bold new direction and good ol’ Bryan. I like that.
Well-done, my friend. I’ll leave my gun at home when I head over for your birthday party. :)
Glad to see you back online and slinging Bryan! This version is absolutely beautiful. (If nothing else, this definitely signals the end of your slump.) ; )
I have to say it was worth the wait, a truly stunning design that will really make me push myself. Love the texture the background noise gives the site too, only question why no rollovers on the main nav but on other links?
Again, congratulations on the launch, good to have avalonstar back :)
Wow, distortion is hands-down the most detailed website design I have ever seen in my entire life, even more so than sites from Apple. The attention to detail is miraculous—there isn’t even a single pixel flaw anywhere to be seen and the typographical weightings of every text element is in perfect balance on every page. Well done!
I would absolutely love to get my grubby little hands on all your Django code but as there is most likely some Veloso-Croft Super Code in there I guess I can live with just awing from the other side of the curtain. =D
Ignoring the genius of it’s visual design, this latest version of Avalonstar has a half dozen elements that have seriously made me say “wow, I’ve never seen that before”. This comment form, for example. The attention to detail and completeness of thought behind each design decision for the site are off the charts. The care you’ve put into this shows both how much this project means to you and how great of a designer you are.
Congrats on re-launching something pretty special.
I just want to say that I really, really like this comment form.
And, y’know, the rest of the site too.
As I knew you would, you’ve done it again; utter perfection. Of course, I would have expected nothing less from you though ;)
Absolutely brilliant job, man!
Not that your ego needed to be fed anymore, but damn fine work here. Love the new look. Love the details. You’ve outdone yourself.
Thank you everybody. :) It really feels quite different coming into this process this time, mainly because of two reasons. I completed my idea and I didn’t set a deadline until I knew I’d be finished. I’ve always intentionally rushed myself, thinking I was better under pressure, but I was wrong and I’ve proven that time and time and again from version 22 to 24.
But I feel, relieved and proud to say the least. This is my chance to change my ways. Iterate more, like I’ve mentioned. I want to treat it more like an application than a blog. Applications aren’t redesigned as much as blogs are, and it seems more official in my brain that way.
To be honest, this is my first “worn/grunge” site. I’ve used the textures before, but I have never bought into it so I was truly afraid that I would do it wrong. Thankfully that hasn’t happened, yet. ;)
Now the true test starts, the test of time. We’ll see what happens. (And I should style my own posts differently… tomorrow.)
Congrats!
Looks very nice. Reminds me of some sort of post apocolyptic video war game. Very atmospheric.
Huge congrats Bryan! The teasers on Flickr didn’t do the site justice at all, it’s above and beyond anything I could have expected.
I also love this comment form, really nicely done. Although, the cursor seems to be really tall as I type this for some reason (it’s normal height in the first three fields).
Great job man. I look forward to coming back again and again.
Nice one mate :) Im loving the little intriacies of the design, especially on the front page. Also, you did great for you first grunge style, I’m working in the same situation at the moment.
Good luck :)
Love it Bryan. Now I know why you don’t sleep.
Just awesome! this is actually the first time i comment on a blog, but you deserve it.
We have known each other since the end of 2001 and I have to say w/respect after seeing you gain a big head and losing your way after version XX, it’s good to see you return back to your true form. Keep it pure, fun and Bryanized in all your new projects. Because if you don’t this time, I will have to make an example of you. -_-
From one of many long time friends and fans, Great Work B!!! Can’t wait to see what’s next.
Ha after 7 years of complaining and poking you, I get into your special thanks area and you get my domain wrong. :p You know I am only kidding…it’s much appreciated
I love it Bryan, looks amazing, really amazing. You’ve done well.
In Django, you don’t use the scaffolding thing right?
Superb comeback. Nuff said.
Nicely done, Bryan! I haven’t had a chance to take a good look around yet, but the first impression definitely knocked me back. A couple things I really like right off the bat, though…
The shadow on type makes it really pop, especially in areas like the beginning of the post where the background is heavily distressed.
This comment form is super nice! Very unique and quite elegant.
Very beautiful site! I was eagerly awaiting this release, and had heard wonderful things from those fortunate enough to get a sneak peek. Definitely not disappointed.
Especially love the use of png’s to create the nice ‘flourish’ on blog post titles!
Very well done m8!
Looking good! Lots of really interesting effects here. Good job! I can’t wait to explore a bit more. Oh and this comment form rocks. :)
Epic work, bro.
Glad to see ya back! I definitely dig the new look. Absolutely loving the archives pages… just can’t get enough of of ‘em.
Beautiful, beautiful site, Bryan! Great work! The textures, headers, and all the little details too. Wow. Coincidentally or not, I now have a strong desire to dig out of one of the classic Final Fantasy games.
Also, great to hear of another Djangonaut!
Great work! Very different from the stuff I usually notice from you. Clean + dirty at the same time. Rock and roll.
This is brilliant, beautiful, a dark theme not hard on the eyes, and almost makes me want to touch the screen and feel the subtle texture.
Great job with the site!
It makes me want to scrap my current redesign-in-process and start over..
Well done my friend. It’s still awesome every time I come back, even despite my repeated sneak-peeks. Now, get back to some paying work… >_<
Glad to see the user/pass prompt gone and this page appear. Looks great Bryan, awesome job.
Each re-design is taking more time, but each one is getting more interesting. ;)
This is starting to become a site I view more like a random design showcase - than an actual blog.
Next it would be cool if you would put up some tutorials. Keep up the good work!
Ouch I just burned my hand.
HOT!!!
The design is great, but seriously, the best part of this is all the work you clearly put into the organization of your content. I saw all your posts pop up again in the RSS feed with the new excerpt/summary and was already impressed. Opening up the browser and seeing your new design on top of it, my jaw dropped. Fantastic work, and I would love to see a post from you discussing how you organized things behind the scenes. Keep up the great work!
Congrats Bryan. Way to push the boundaries with this one. You’re also going to have to tell me how you did this gradient on the text inputs. Awesome.
Hey Bryan.
I noticed you romanized your header as “avaronstaa he youkoso” but grammatically へ (he) is pronounced & romanized as え (e) when used as a particle.
I love the design, very stylized yet not over grungey. I especially like your comment form field!
Hope to see more!
〜パットリク〜 ＜：コミ〜
This is awesome Bryan. The attention to detail is second to none (including this comment form). You’ve certainly inspired me to look into Django and try something experimental of my own. Thanks!
OMG was my first word when I saw this. Amazing stuff here. Brilliant and original color scheme, and great attention to detail. Congratulations on the new look :)
Is it bad that I’ve been checking back here slightly obsessively for months? Everything I expected and more.
The detail is just ridiculous — I’m guessing that PNG overlay on a whole content block (post title/meta) has been done before, but I haven’t seen it, and it looks great.
Glad to see AS is back in action! Really great job with this; hope to see more great stuff from you in the future.
Dear Bryan, This is fantastic. Glad to see Avalonstar back, and in business.
Don’t stop being awesome. ^__^
Welcome back! Loving the new look.
Bravissimo.
“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.”
Very well said Bryan.
you’re a f*in rockstar.
Very nice work! The Design is awesome :-) Congrats…
I LOVE the design, it is grungy unique smooth beautiful, the work you put into it really shows!
I’ve been a fan for a long time and it is good to see you back with a huge bang.
Wow, this looks truly amazing. From all the grunge and the transitions.. really easy on the eyes and great to look at. From the typographical weightings to the type, it all looks fantastic. I’m liking the grunge/worn look.. looks really unique.
When I first looked at it, I didn’t notice the pills on the side - like “history”, “wtfroflmao”, etc.. It didn’t really stick out enough for me to see them first and see what the information associated with the pills was talking about. But now that I look at it I can see it clearly, weird enough ha ha.
@bryan veloso Wiki link for Juno without the extra /
omg … it’s beautiful!
the only thing i miss (a bit) is the prominence of the logo (and the eggrolls)
Wow… You relaunched!
Nice to see it—I dig the dope textures! I was sad that http://Blingo.com doesn’t use Google any more, but after seeing this… who cares =)
Awesome.
Again, thank you guys so much. :) It’s really great to be back and I’m so elated that Distortion has gotten such a warm welcome from the community. I’m trying to think of how I’m going to go about explaining a lot of my so-called “process” with Distortion, and I thought the best way would be to screencast it, so that’ll be next. I’m “rushing” to get 25.1 up (yes, treating it like an app), so bear with me!
After that, we’ll have to see if you all missed my writing or not. :P
Amazing design! Simple, but with a very awsome background and lines. 5 stars!
Welcome back from the dead Bryan! The site is absolutely mind blowing.
A comeback par excellence…
Hey Bryan. The site’s looking great. I love the “noisy” background textures.
Wow Bryan! This is a great design. It is good to see you back and blogging again.
I still believe that dropping the Django from your list of things to do would have helped speed up the process, while allowing you to focus on what you do best, but I guess you’re keen on being a Jack of all Trades, which is good. On that note, I’m glad you dropped half of the original codebase; the site now will be easier to process for you and all of us as well.
I only wish that you would bring back the entire archive of avalonstar content.
glad to see you back. best site ever.
This is the most amazing comment form ever. Love it!
Haha, the comment form totally distracted me — but YEAH. Really nice redesign! Tres cool textures!! I heart it tremendously.
Very nice. I love that you are fearless enough to try something new with a site that is so associated with you as a person.
Are you brave enough to take the one image challenge yet?!
And the only thing I have to say is that the contrast between the comment text and the background is a wee bit too low I think. Makes me squint my old eyes.
Of course if that is the only thing I can say that doesn’t contain “OMG, love it” and m/ then I can imagine you know what that means.
I’ve been too busy crawling around your new digs over the past couple of days to leave a comment.
You and this site were the sole reasons that I started using an RSS reader. I can’t tell you how many times I would visit your site a day awaiting some humorous and informative content from the A*. Hopefully you’re back for good.
I, as well as the rest of your fans are awaiting some great content from the good ol’ Bryan that we remember.
B. this version is stunning! I can finally stop hitting the refresh button on the Avalon Star splash page!
Not sure how I didn’t see this until just now, but it’s nice to have you back Bryan.
I’m clipping it :) Thanks for the inspiration. /gg