University of Baguio Science High School @ the 11th Philippine Web Awards

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.

The Baguio Centennial Logo

The following is the original narrative i wrote of the Centennial Butterfly’s symbology as it was originally intended.

While the most common symbols of Baguio may be the pine tree and the sunflower, many fail to appreciate another city resident, the butterfly. You can even see them floating around Session Road in the morning before the traffic rush sets in. With beautiful, fragile yet resilient, and multi-colored wings, it is quite easy to create an analogy to the current and future state of Baguio City: we have to care for the delicate balance of nature, society, culture and progress to maintain its beauty… a near perfect symbol for the Baguio Centennial and its theme of “fostering a culture of caring”.

Why a butterfly? The butterfly is a multicultural symbol of the beauty of Nature, appearing in numerous examples of nature scenes of many artistic styles. Butterflies are included as elements of these scenes because they most effectively represent all positive characteristics of Nature. It is also a symbol of the human spirit, love, freedom, and change… the keyword here being metamorphosis. The growth of the city from a grassy plateau to a hill station, to a summer retreat, to a spiritual oasis, to a bastion of knowledge, and to the Baguio we know today is represented by this butterfly. It also symbolizes the hopes and dreams of Baguio to transform into a model city of the future.

The logo is visually divided into four main parts making up the wings of the butterfly. Each distinct part is given a specific color that suggests the four elements of earth (green), fire (red), air (yellow), and water (blue). Within each wing are stylized forms that portray the city’s physical, cultural, and social aspects:

Blue Wing: dancing figures symbolize the people of Baguio, its cosmopolitan population, and vibrant city life. It depicts a place where different cultures converge and live in harmony.

Green Wing: portrays the physical icons of Baguio, the pine forests, and landmarks that have made the city famous for the past one hundred years; the Cordillera hut-inspired Convention Center, the City Hall, the Our Lady of Atonement Cathedral, and the historical Camp John Hay Bell Ampitheater.

Yellow Wing: dominated by a sunflower that symbolizes the spirit of Panagbenga: the celebration of life, the blossoming of our native culture, the promotion of art, and a united community.

Red Wing: a stylized strawberry, one of the city’s most popular market produce, symbolizing Baguio’s history as a center of commerce in the Northern Philippines. While the strawberry may not be a “native” Baguio product, it is placed here to pay homage to our municipal neighbors. Baguio could never have been, and would never be, if not for our neighboring towns.

The butterfly logo is skewed at an angle to provide a visual sense of movement, flight… and an upward trajectory depicts the future-forward thinking of the City.

It is hoped that this logo becomes a catalyst for change so, when September 1, 2009 inevitably arrives, we can honestly tell the world that Baguio is a city that cares.

Rebooting the University of Baguio Science High School website (v3.5)

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!

Baguio Centennial Logo plagiarized!

A person named Yogesh Darge, based in Mumbai, India, has just plagiarized the logo I created for the Baguio Centennial 2009. The final version of the logo can be seen above.

Here is his Flickr page and the website of his “professional” Design-Studio.

Ay naku these plagiarists!

++++++++++++++++++++++++

UPDATE: 16 January 2008

I sent one warning FlickrMail and a Cease and Desist Order via eMail.

The plagiarist has so far removed the butterfly logo from most of the branding on his website, although the favicon is still the same copied logo based on this one.

The photos/graphics on his Flickr page are also now hidden (not deleted)… but his avatar is still the same plagiarized logo.

Whoever you are, if you want to make it big in the design industry you’ll have to be incredibly ORIGINAL and IMAGINATIVE. You can probably use somebody else’s work as INSPIRATION but never as a stencil for your own work.

Bad karma, bad karma, bad karma to you.