I’m proud to announce that the design and coding I made for the University of Baguio Science High School website is again an entry for the 11th Philippine Web Awards in the schools category! This is the second year in a row that we’ve joined the “annual” competition. We ended up being a Finalist in the 10th Edition, just beaten by Enderun Colleges by a teeny-weeny margin.

We are joined with 4 other pre-finalists: Aquinas University of Legaspi City, STI Philippines, and Southwestern University MHAM College of Medicine. Quite honestly, the other sites look a bit dated (yabang!)… although I have to say my design feels so different from all the others. I’m not sure though if the judges will find it more appealing.

I’m keeping my fingers crossed… you know Pinoy designers naman, mahilig sa borloloy!

Hopefully, the cheating and other oddities (even from the organizers themselves) will be cleared out for the 11th Edition. Vote for us as soon as online voting is started on November 03, 2008.

Visit the UB Science High School’s new website.

Website redesigns have always fascinated me. “Modernizing” an old tabled-HTML design into a standards-compliant website is both an opportunity to design something fresh AND a test of patience when it comes to retaining the identity of the client. Sadly, I’ve seen some website reboots that may have created a brand-new online experience like never seen before, but also consequently muddied the original identity of the website. This, of course, would be trivial if we were just designing for our personal blogs and portfolios.

The unique challenge with the UB Science High School website was it already had an award-winning design that I made about 18 months ago. In fact, the site has been featured in almost all the CSS design galleries that I know of, counting by the number of hits we get from those sites; it’s been one of the web’s most popular high school websites. The site was also a Finalist at the 10th Philippine Web Awards in the Schools Category. Version 3.0 of the design I made in early 2007 sported a prominent horizontal red gradient with a white header and gold-yellow highlights. The front page randomly presented the visitor with the top-performing students/alumni with a “verb” accompanying each featured person, depending on his or her achievements. So significant was this “Verb Campaign”, originally conceptualized exclusively for the website, that it eventually affected all the school’s ad campaigns for the next 18 months… even the school paper!

The “Version 3.0” really didn’t have many problems, it was easy to maintain and the design was unique but simple enough to make it design-worthy for a couple of years. And like most other easy-to-navigate sites, simplified tabbed navigation made site-wide browsing generally painless. One issue kept cropping up though; the sub-navigation of inside pages seemed to baffle the non-internet-savvy, most notably the parents! The sub-navigation for the main sections of the site was simple text links at the right side of the main content. It was gold when the current page was selected, or gray when just a hyperlink. Apparently this arrangement wasn’t obvious enough for noobies. Every now and then I would get an email asking about information which was already on the website, and I always replied back with a direct link to the page they needed and some minor scolding. I tried different styles of menu navigation for that area but it just didn’t seem to fit well with the overall look of the site. The conspiracy theory I’ve been playing with is that Windows users aren’t “oriented” properly with all their desktop icons on the left-side, having the menu on the right probably baffled them (Mac users have the icons on the right side… which is the right side, since the Mac OS did come before Windows). I guess in this case function-follows-form.

We made plans to join this year’s 11th Philippine Web Awards after last year’s disappointing defeat to Enderun College’s non-compliant website. It was also a chance to reboot the Science High website and play around with concepts.

I’ve grown tired of the red in all the designs I’ve created for the Science High School, I couldn’t help it, IT WAS the school’s colors; Red, Gray and White. I’ve dreaded using Gray since I felt it would make the site dreary and lifeless… and even remind old-timers of Netscape’s default background color back in the day. White was out of the question as it was too common nowadays. After surfing through some sites, I ignored my apprehension and went ahead to use Gray as the primary color for the redesign.

Plain Gray (usually 50% of pure black) is just plain ugly if used improperly, not to mention hard to match colors with. The solution it seemed, if Gray was to become the primary color, is to use a gradient of dark Grays with the darkest almost set to Black. The new site now sports the vertical gradient with a steep darkness change midway, placed in such a way as to create the effect of a darkened room with gray floors and dark gray walls. Honoring the previous design, I just used a white background for the content areas with text. The upside to using Gray was it made the colors standout more than it would normally do if placed on another color. Instead of gold, bright Red is now used as the highlight color. The tabbed navigation has given way to simple text links at the upper right corner.

Less is more, and true to my design philosophy any unneeded design embellishments have been banished. Probably the only “borloloy” (a penchant of Filipino designers) left is the colorful photograph at the top of the content areas.

Overall, I’m quite happy with the new design; even though it isn’t as loud as the old one it’s a bit more straightforward. Hopefully the relocated sub-menu navigation on the left side shouldn’t confuse noobs anymore.

I hope you like it!