ikreateit.com

Tak­ing some­thing exist­ing and trans­form­ing it into some­thing new and bet­ter: it’s what every designer aspires to and the web­site of the fan-made pod­cast ‘Voices of Baby­lon’ pro­vided me with that oppor­tu­nity. I will take you through the re-design process and share with you the chal­lenges we faced.

Uhm, why _that_ page?

Well, that ques­tion is eas­ily answered. Next to being a designer and devel­oper, I am also a geek with hob­bies and pas­sions. One of them hap­pens to be the cult sci-fi show Baby­lon 5, revolv­ing about a space sta­tion. If you don’t remem­ber it, you are prob­a­bly too young. It was on dur­ing the first half of the 90s. ‘Voices of Baby­lon’ is an audio drama pod­cast, set in the uni­verse estab­lished by the orig­i­nal TV show. As much as I loved the pod­cast, I always cringed when I went on the orig­i­nal website:

Screen­shot of the devel­op­ment version

That the cur­rent look of the page did not truly rep­re­sent the awe­some­ness of the pod­cast was an opin­ion that was shared by the main pro­ducer, Jarsto, and his part­ners. Approach­ing them as a fan and as a designer with the best in mind for the pod­cast, they proved to be open and thank­ful for sug­ges­tions. Even­tu­ally, we agreed on a shared project: iKreateIt would pro­vide a com­pletely new design and Jarsto would code it into a Word­press template.

Brain­storm­ing

The actual design process was pre­ceded by a cou­ple of Skype pow­ered brain storm­ing ses­sions with the pro­ducer, Jarsto. I needed to know his ideas for the new site — func­tion wise. Would he need pre­view images for posts; would he like to post com­plete arti­cles or pre­views; would he need a side­bar for cer­tain infor­ma­tion to make them acces­si­ble faster? Also, I needed to know which kind of designs I should avoid at any cost and how com­pli­cated a lay­out I could design. Espe­cially the com­pat­i­bil­ity with dif­fer­ent browsers was a ques­tion since I wanted to go for trans­parency and as we all know, IE6 is no buddy of ours when it comes to that.

How to approach a re-design?

It is so sim­ple, some design­ers actu­ally for­got to do it:

As with design projects where you have to start from scratch, you need to make your­self famil­iar with the com­pany, the club, the indi­vid­ual or the project you are work­ing for. Only once you gained a thor­ough under­stand­ing of what the client does and wants to accom­plish with the web pres­ence you can truly come up with some­thing that will work.

For exam­ple, if you are design­ing for a law firm, you should stick to sub­dued col­ors and ele­gant fonts, while you may go wild with crazy col­ors and Comic Sans when design­ing a site for a kinder­garten. You get the idea.

Hav­ing seen the orig­i­nal TV show five times (I said I am a geek!), I had a very good under­stand­ing of the uni­verse the pod­cast was set in, but of course I needed to lis­ten to the pod­cast as well. It has it’s own sto­ry­line and char­ac­ters that needed to be taken into account. Only a cou­ple of episodes into the pod­cast, I had the new design in front of my eyes … of course it needed to be a ‘spacy’ theme, as the events where set in space, but it should also intrigue the site’s vis­i­tors on first sight.

The first sketch

I chose to pick up on the main sto­ry­line and con­flicts and to depict them (I won’t start with terms like ‘PSI Corps’ and ‘Narns’, don’t worry). This is what my first sketch looked like:

Yes, I am not the world’s great­est sketcher and and while Jarsto, being a devel­oper him­self, under­stood the lim­i­ta­tion, many clients dont:

Unless you are a wiz­ard with a real life pen­cil (not PS), don’t show the client your drafts. As much as you’d like to have feed­back and maybe even some praise, a lot of clients expect the final prod­uct to mag­i­cally appear and are aghast when you show them some­thing that is not yet ready to be put online.

If you are just look­ing for a sim­ple mockup, there are many sites that offer online apps that can help you with that if you don’t want to do it in PS. I myself find that it often helps me to start in my Mole­skin book and then move to Photoshop.

Spe­cial chal­lenge: Find use­able images

Obvi­ously, even though the pod­cast was set in the same uni­verse as the TV show, we could not just go and use any image. Being a non-profit fan pro­duc­tion made it eas­ier, but still, you never know when some execs go crazy with copy­right issues towards fan projects, even if they are not mak­ing money but instead gen­er­ate profit for the movie com­pa­nies. Long story.

Well, suf­fice to say that I spent hours search­ing for suit­able images in fan data­bases and on fan sites ded­i­cated to the show. The huge back­ground image was eas­i­est to find: the free image gal­leries at NASA are a fan­tas­tic source.

The other objectives

Each page should fea­ture mul­ti­ple post excerpts at a time, but not scroll over the back­ground but with it. To avoid huge images and a down­load strain on vis­i­tors, I decided to go with a black part in the mid­dle of the page (top faded into it, bot­tom out of it). In addi­tion, to accom­mo­date users with dif­fer­ent screen res­o­lu­tions, the space back­ground would fade to black on the left and right.

To empha­size the close­ness of the pod­cast to the TV show, I also used abstract imagery that would be rec­og­nized by every fan instantly and some smaller design details that just rounded the design up nicely. The gallery of the com­plete redesign process below (click on images for full view).

The evo­lu­tion of a title

The Evo­lu­tion of a fight scene

For the true fans, the name ‘Zocalo’ makes per­fect sense as the home but­ton and the image of sword refers to the show itself

The tiny image of a galaxy was used as a post divider

Reit­er­a­tion of the show icon in the footer and use of the image of a galaxy to cre­ate a divider between the footer con­tent and the main page

The last task for the design was the best one: since the pod­cast was named Voices of Baby­lon, it seemed only nat­ural to include some sort of ref­er­ence to that. I decided to go with quotes pulled from the orig­i­nal show and include them very sub­tly into the site’s header. They might be hard to read because of that, but for the fasn who know the show and the pod­cast, only some words will suf­fice to know which line is quotes. While I picked my favorites, I tried to quote as many dif­fer­ent char­ac­ters as pos­si­ble to really make sure I was using voices and not just one.

Quotes in the header of the site (here marked for bet­ter read­abil­ity) to refer to the mul­ti­tude of char­ac­ters on the show