Wednesday, February 25, 2009

New Year, New Website, and a Recap on Lessons Learned

So I must say that the daunting task of having a website that I can be proud of has been finally accomplished!

The new current layout is contemporary, simple, intuitive, and best of all - functional and fast! That combined with the content management system up (thanks to an awesome programmer buddy who helped me out a TON by supporting the technical end), the framework has been laid to easily add and present my design work :) Yippee! Btw, comments and feedback are always appreciated so long as they are constructive!

This milestone forced me to look back on the progression from putting up my first design-related website in 2004/05 to now in early 2009, along with all the embarrassing yet essential mistakes made along the way and lessons learned which I will now narrate:

So my first design-related website was launched in 2004/2005 after our design instructors taught us the 'designer-who-is-clueless-about-how-to-launch-their-own-visually-appealling-design-website' friendly way of putting up our own website to feature our portfolios. That process they taught us consisted of starting out by making the visual layout of the website screens on Photoshop, placing guides over the areas which would separate the body and the buttons from one another, transferring it to ImageReady for splicing, followed by some Dreamweaver magic to layout and add links to the spliced image.

In all fairness, it was great as a crash course at the time that served its purpose. It was an easy way for a visual person to launch a website without having to undergo the complexities of understanding or writing code - and it certainly helped myself and many others grab our own domain names just in time, too.

A snapshot of my attempt back in 2004/05:


But over time, it became painfully obvious that:
a) The content would take a little while to load. Even at 72 DPI.
b) The loading process in of itself - image after image - wasn't pretty. At all.
c) Editing and maintaining the content was a hassle because the steps would have to be repeated each time. Yes. Imagine the tedious process of correcting a typo, should one have been overlooked - or even basic updating.
d) Chances were the website would not show up in search results because the content - even the text - was part of the image. This wasn't ideal because you would want yourself to be easily searchable and accessible unless you prefer to have your website be low-profile.

Shortly following my graduation in 2006, I again attempted to get my website up using this same technique. This is as far as I got:

A snapshot of my attempt back in 2006:


Unfortunately, after having landed my first post design schooll job a few months later, this project remained on the backburner until 2008 when I again had the opportunity to get my much neglected website back up. By now I had been involved on a few basic website-development related tasks but only to the extent of producing visual layouts and downloadable content (ie: PDFs). Moreover, being one who usually prefers to do their own dirty work, I wanted to learn how to get my website up myself so I could maintain it myself without having to rely on anyone else. After reviewing many tutorials, I realized that learning the languages is mandatory and picking up this necessary knowledge would require significantly more time - this meant that I would have to figure out a temporary solution, a shortcut so to speak simply to have something up in the meantime.

That solution ended up being a hybrid between the first technique taught in design school and what little tricks I had gathered to use Dreamweaver. I basically set the image as a background and overlaid it with a table filled with text content. For the more experienced programmer/web developer, this was "cute" but hey - it got something up for the meantime until I could teach myself more to optimize it! Given, I wasn't entirely satisfied with it for a few reasons - but it was one giant image that loaded at once and I allowed me to quickly edit/maintain the text content, too. The source code generated by Dreamweaver was nothing to be proud about, however, it sufficed for the time being and allowed it to come up in search results, too.


A snapshot of my website index in mid 2008:


A few lessons I learned here included:
a) The painful challenge of cross-browser compatibility. What looked great on Firefox didn't necessarily look all that great in Explorer and vice versa. Yes. THIS was a revelation to me. Surely an embarrassing indicator of my noob status.
b) The overall layout utilized a combination of colors and art deco-ish styles that I felt added a nice personal touch. Problem with this was that it didn't take very long for me to look at it with a more skeptical eye and realize a week later that it already began to seem obsolete to me. Oh the sorrow.
c) Due to my overall dissatisfaction - I could not spend that much time to upload too much content knowing that I wasn't going to be happy until I got something better, more lasting up where I quit worrying about the layout of the website itself and could finally focus on the content itself.

In Fall of 2008, I was listing the languages I needed and wanted to have under my belt so I could easily launch/maintain websites in the future but after a few insightful conversations from the more experienced programmers/web-developers, it became clear that it would not be wise for me to become a jack-of-all-trades, and master of none - which is what would end up happening if I was trying to learn things on the fly without devoting the appropriate time and focus required for it. With a growing and serious interest in UI for interactive media (ie: websites, applications, etc), I am sure that I will continue to work towards it. But for now, I should work with someone who knows what they're doing if I want something good. Following this realization, I worked in conjunction with my programmer buddy, resulting in a great website that looks awesome, functions great, is simple to maintain and I am extremely satisfied of.

What my website looks like currently in 09:


That and a handful of embarassing, yet insightful lessons along the way... :)