Flush — A Design Blog by Ivan W. Lam at ivanwlam.com

A little more than four months ago, my designer friend Alan Wells recommended me to his friends Kai and Nate for a freelance gig to build a website for their newly founded viral video production company. He sent me the link to their site at the time, which he had quickly put together showcasing their past video projects. I quickly did more research on these guys to get a sense of the type of work they do. (And by research, I meant watching all of their videos in one sitting.)

One of their larger projects was a video blog called Huge in Asia, where they lived in Vietnam and other Asian countries for a couple months documenting their adventures. (I mentioned this in my monthly review last December.) After watching the fifty-episode vlog series, I knew that these guys possessed the potential for excellent content and success, and despite the upcoming busy holiday season at Peet’s, I decided that I would help these guys out and build a site for their company Portal A Interactive.

Pre-work Work

Being a typical recent-graduate designer, I couldn’t help but start coming up with ideas for the site. (I suppose I was still in school mode, where I was compelled to act on any ideas I thought of without considering ownership and compensation.) At the same time, though, having completed a design project for my relatives a few months back without a contract, I definitely learned my lesson and was determined to do everything I was supposed to as a freelancer this time around to protect myself and the client from unnecessary unhappiness.

I looked up tutorials for drafting freelance design contracts, and like the advice that young designers receive from experienced designers for preparing portfolios, there was an unbelievably overwhelming wealth of types of ways that one could go about this. There was so much conflicting advice that I could seriously curl up under my covers and cry. I asked my freelancer friends for advice and tried to write my own contract, but I was still concerned that I might be missing something that would come back and bite me later on.

Fortunately, I remembered that AIGA’s site has a section for business practices. I found the AIGA Standard Form of Agreement for Design Services that designers can use as a template. I adapted the AIGA agreement and took out one or two clauses that didn’t apply at all and had no way of hurting me or the client. I also put together a project-specific proposal, and quickly tried to get all that legal stuff taken care of so I could stop turning off the part of my brain that is responsible for thinking of ideas for the site.

The Logo

After the administrative stuff was taken care of, the first task in the agenda was creating the logo. I enjoy designing logos not because it’s easy (it’s not). I love that good logos look simple, yet are highly complex. Generally, the more different elements there are in a logo, the weaker the logo becomes. So with this project, I tried to keep the logo as simple as I could, sticking to the criteria of using a “one” letterform design and projecting a light-bulb signage mood that the client had envisioned.

Here’s the basic concept of the logo:

Here’s the final version, lit up and against a dark background:

Since this logo doesn’t include the name of the company, I developed a secondary logo mainly for the website.

Details of the neon:

While the neon isn’t the same type of lighting as the light-bulb logo, incorporating both into the site creates a mood that could not be achieved by using just one. This results in a mix, a melting pot of ideas, something that is not completely established and boring, and something that is flexible and can change as it grows, which is, in a way, what this company is about.

WordPress

Before I took on this project, I had never touched WordPress. I had heard about it, but I always thought it was a paid service, and I just didn’t want to pay to create a blog that I could do the same thing for free somewhere else. But turns out it was free, and it gives you mad power for customization… in PHP. I was new to PHP, so this was both a challenge and an opportunity to learn.

As I worked on this project, I became more familiar with the WordPress setup as well as with PHP and MySQL, which I was also new to. But I quickly grew to like it. In fact, I liked it so much, I set up the video thumbnail section in the header that is based on MySQL. Furthermore, when I will be done with this project in a few weeks, I’m going back to my own site and convert it to accommodate the use of MySQL, such as my portfolio and experiments pages, which is currently based on PHP and XML.

Interactivity

This project has also allowed me to experiment with interactivity that I would not have needed with my own site. The video thumbnail section in the header has a slider that shows more thumbnails when you click on the arrows. It’s a simple function, but there’s a lot of planning involved. It’s even Javascript-disabled-safe in that, if you disable Javascript, the arrows disappear so you won’t have non-functioning arrows which would weaken user experience.

Another interactive feature is the Grayout. When you click on a thumbnail video in the header or a Featured video in the sidebar, the whole page darkens and displays the video on that page. The size also adjusts based on your window size (except for IE) up to certain max/min values. Again, it’s Javascript-disabled-safe; if you disable Javascript, the images act as normal links and bring to a different page so you can still watch the videos.

Finally, launched two weeks ago, a video player that plays more than one video in sync. This was something that Kai and Nate had first suggested, way in the beginning, before we even met and agreed to work together. Currently, the controls are basic, but using the YouTube Chromeless Player API, I set up a player that plays two or more videos at the same time, so that one (or more) video(s) can sync with one another. Here’s an example of what they did with this player. I’ve added volume control that Kai and Nate can determine beforehand to maximize viewer’s audio experience.

What I Learned

There’s a lot more to talk about than what I can cover here (or that you’re willing to read), so let me wrap up by briefly going over the many things that I have learned through this project.

• Contracts. This once nerve-wracking issue has been resolved thanks to AIGA.
• Neon. I never had to draw neon before, but thanks to Bert Monroy, I’m proud to say that I did a pretty good job with the neon I created on the site.
• WordPress. Move over Blogger, I’m with WordPress now.
• MySQL/PHP. My new best friends whom I still have much yet to learn.
• Interactivity. Much love for scripting (and a little bit of hate for troubleshooting).

Flush.

This entry was posted on Friday, March 27th, 2009 at 14:57 and is filed under General. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.