PINK { k` u r a g e }

Moodboard

2008-02-04T00:15:00.000-08:00

Basically, the site will contain real images as well as graphics.
Hence all the solid colors and shapes in the moodboard.

I plan to go with a very nature-related color scheme, which consists of mostly green and blue, in different shades and tones.
The other colors are there to sharpen specific sections or place more importance or hierarchy onto the layout.

Mission Statement & etc.

2008-01-25T06:45:00.000-08:00

Client: Zoo Negara
URL: http://www.zoonegara.org.my/

Mission Statement/Site Objective
My first aim is to give the site's visitors a "pre-experience". To give them a slight glipmse of what they will be able to experience in the zoo so they will want to experience it fully - hence, encouraging the real visit to Zoo Negara.

Secondly, I want to portray the image of Zoo Negara in an attrative way to make it a must-go place for tourists. Not only tourists from overseas, but also Malaysian from outstation. Here, good quality images will be of help, whether in enchancing the "pre-experience" I mentioned above, or just by giving stronger visual aid.

Next, I want to send out the message to EVERYONE that Zoo Negara is a good recreational place. They uphold these four concepts: education, conservation, researcg and recreation. You don't just go there to blandly learn about animals, you're there to have fun while you learn! And this wonderful offer isn't just limited to Malaysians, it's to EVERYONE! Limitless of nationality, gender, race or age.

Information on the site will also be presented in a more attractive way. Or at least, not only with text, but with more visual aids and such. Sub-importance will also be given to the research done by Zoo Negara, and also their conservation efforts and adoption program. I feel these are not neglectable as it is part of their zoo conept.

Last but not least, important visitor's information will be made as to be easily-accessable. Information like the zoo's opening hours, ticket prices, maps and so on.

Goals
▶easy-to-navigate site
▶ easily and quickly accessable information
▶ encourages users to visit Zoo Negara
▶ portrays the "open concept" enclosures

Sub-goals
▶ promote awareness on conservation
▶ promote the adoption programme

Target Audience
▶ overseas/outstation tourists
▶ local parents
▶ local teens
▶ local kids
▶ in short, EVERYONE

Competitors & Site Analysis

2008-01-22T22:03:00.000-08:00

Site Analysis of Zoo Negara
URL:http://www.zoonegara.org.my/
There is pretty decent splash page before one enters the site. A flash of different animals featured in the zoo (sound effects included), along with the logo of Zoo Negara at the bottom right corner.

Despite the spiffy splash page, I think the website itself is a bit disappointing.

I’ll start by talking about the colors used. Grey does NOT match the green at all. In fact, it gives of a weird feeling. Green is refreshing and reminds people of nature – which I think is why they used that color; but grey gives off an old, faded feeling. Both the colors don’t compliment each other at all.

The navigation bar on top isn’t working properly.
I had to click once to activate it, and click again to access another page.
The static links suddenly looked like buttons, and it was just really misleading.
It took me awhile to figure out it wasn’t a one-click link.

The sidebar on the right isn’t very nicely designed. There’s a nice wavy line on top but suddenly, there’s a box below.

The links on the right of the main page, that are introducing the animals, lead to a page that feels like it doesn’t even come with the site. It has white background and the layout has a sudden alignment to the left. There’s not even a back button for users to go back to the site.

The news section opens up into not-very-nicely scanned newspaper articles as well. And in PDF format.

They have a badly done map in their “Visitor Info” section. Though I think the flash “guide” makes up for it.

Despite all the flaws on the inconsistency and color scheme of the site, I think its content is very rich, though not to say very nicely presented.
All the information a visitor to the zoo would want is listed on the website.

Competitors of Zoo Negara

1. Taiping Zoo & Night Safari
http://www.zootaiping.gov.my/

As soon as I thought of zoos in Malaysia, I thought of Taiping Zoo. Like the site says, it is located in a lovely natural setting in Taiping Lake Gardens close to the foot of the Larut Hill. Despite being a zoo in a small city, it’s still interesting.
They have embarked on an expansion program which includes the building of new "Open Concept" animal enclosures. These enclosures take into consideration the natural habitat of the respective animal.

There is a splash page before the user enters, that enables them to choose either English or Bahasa Malaysia. Even at the main page, the user can still choose which language to view the site in, which I think is very convenient.

All the pages are consistent, following one same grid.
Pages with longer content have an additional scrollbar between the top and bottom navigation, which I really like.
Make the content seem neater, instead of having to scroll all the way to the bottom.

I really like the colors they used. Of course, it’s not the best, but it does seem much better than the Zoo Negara one. The green and black bring out a cool nature feeling – I think it suits their night safari theme really well.

2. Aquaria KLCC
URL:http://www.klaquaria.com/index.html

I chose Aquaria KLCC as one of the competitors as, even though it is not a zoo, they also have a turtle conservation program and aim to educate the public on marine life. It is also local, so I thought it would be nice to do a site analysis on it too.

The main page features and advertisement on Endau Rompin, Johor’s National Park.
Navigations are below the banner and after clicking into a section, there are sub-navigations available.

The content is limited to the little space they have, and “next” buttons are available to see the remaining information. (Although I noticed there’s a slight problem with the layout in certain pages – the slices weren’t joined well.)

I really like “The Journey” page. By using that image to categorize the information and give visual implementation.

Overall, I think the site is full with information a visitor would need, which is good.
The layout is alright as well. The icons used are also consistent. The site is not very impressive, but it passes as a decent site that aims to promote Aquaria KLCC to visitors.

3. Singapore Zoo
http://www.zoo.com.sg/

After analyzing so many sites, I still see a lot of white backgrounds.
I wonder if it’s a trademark?

Anyway, when I first saw the Singapore Zoo website, I gave off a really oriental feeling – reminded me of Chinese New Year.

I thought the layout was pretty decent, until I clicked into on of the sub-pages.
The whole site was aligned to the left all of a sudden.

The navigations are simple – the usual rollover, and sub-menus come out.
All the sub-pages have the same grid. With a sidebar on the left, and content on the right.

There’s nothing exceptionally interesting about the site, but like the others I mentioned above – there is sufficient information presented.

4. San Diego Zoo
http://www.sandiegozoo.org/

I wanted to research on a site that belongs to a zoo not in South East Asia, so I analyzed San Diego’s Zoo. Just to understand and see for myself the similarities and differences.

I think the colors used are nice. Not the best, but it really gives a friendly feeling – warm and welcoming to nature.
It has a simple layout with a header and a sidebar.

What I really like about the site is the top navigation bar. The rollover effects are really to my liking. The color scheme is also consistent throughout the site – may it be text, paragraph dividers or background colors.

I think the images are also appropriately used.
They’re in fine quality (no pixilated, blurred images) and they’re inserted at the correct place. They don’t flood the whole page yet they manage to catch my attention.
Not to forget, it is also packed with information.

~{ * }~

There were other competitors of Zoo Negara that could be found in Malaysia, but as they didn’t own a site, I was not able to do the comparison of sites.
Here are the other competitors I mentioned: A' Famosa Animal World Safari, KL Bird Park, and Langkawi’s Underwater World

Conclusion:

After going through this research, I felt Zoo Negara plays a big role in educating the public about animals.
Not only information about animals, but also on how to keep them from extinction, on how to preserve their habitats and how important it is to protect them.
Charity functions and field trips are often held there too.

The site aims to promote the zoo – of course. Aiming to attract more visitors, to either just have a visit, class field trip or to have an event there.

I think they already achieve a little bit of that, by providing so much information on the zoo – the highlights and the animals.

The problem is – no one really visits a zoo’s site.

Hence, my aim is to make the site more attractive, not so that the users would just visit the site – but they would actually want to visit the zoo itself. To experience the four pillars Zoo Negara stands on: education, conservation, research and education.

2008-01-13T07:58:00.000-08:00

1. Asiasoft.net
URL: http://www.asiasoft.net/en/main_en.htm

What is Asiasoft.net?
AsiaSoft is an online game operator in Thailand, Vietnam, Singapore, and Malaysia. Its headquarters is located in Bangkok, Thailand.

The more popular game published by Asiasoft.net in Malaysia is MapleSEA.
Other games under it are the upcoming CabalSEA and Ragnarok II SEA.

This is the main page.
Navigations are under the banner, and they light up in red when you rollover.
Sub-menus appear when you rollover as well.
The sidebar consists of a map where users can acess to the Asiasoft.net website pertaining to their own country.

*Sub-menus*

After clicking into one of the sub-pages, the grid is still kept, although the navigations are changed. It was a bit confusing at first, since the navigation bar suddenly disappeared.

Upon further inspection, I found a link back to the main page under the banner, on the right.
By clicking on the logo, one can also access the main page.
However, that fact is not obvious at all.
No rollover effect, nothing to indicate so.

Here's the grid analysis on the main page and the sub-pages.

Main page

Sub page

Overall, I think the site's very clean. Though a bit too clean.
Not that being clean is a bad thing - I think it helps users to find the information they want quickly.
However, from the aesthetic point of view, it loses out slightly.

Although it's consistent with the Asiasoft.net logo, the website is just too white.
Like any other big corporate site that is based in many countries, I think it's nice as they put up links to the individual corresponding site to each country.

2. Gururu Journal
URL: http://www.gloomybear.net/index.php

What is Gloomy Bear?
{ I'm not sure if this is counted as a corporate website, but I've heard of corporate blogs, so I'm wondering if this is counted as well }

Mori Chack is the artist name of a Japanese graphic designer, who was born in Sakai, Osaka, Japan. He is famous for his Chax product line, especially Gloomy Bear, a 2m tall, violent, pink bear that eats humans. The design is an antithesis to the excessively cute products produced by Disney, Sanrio's Hello Kitty, and other companies. Mori Chack believes that humans and animals are incompatible, and an animal is wild by nature. This is expressed most pronouncedly by the Gloomy Bear, which is often shown blood stained and striking humans. Gloomy Bear is also available in different colors with slightly different designs.
*Taken from wikipedia*

This site is a slight mix of a blog and a brand site.
Information of Gloomy Bear ( under the Chax product line ) are posted up as updates.
There are shopping information, medias, FAQ etc.

A sub-section of the Shopping page

The entire site follows one single grid system.
No matter you're browsing the shopping page, or the updates, it's the same.

Grid analysis

There's a sidebar on the left that contains a small calendar.
Through it, users can have fast access to previous updates.

On the right, there is a sidebar with external links.

The site keeps the image of the Gloomy Bear brand.
Gloomy Bear graphics and themes all over.
I really likfe the fact that they kept the same grid system throughout all the pages as well.

3. Loius Vuitton
URL: http://www.louisvuitton.com/

The Louis Vuitton Company (more commonly known simply as Louis Vuitton) is a luxury French fashion and leather goods brand and company, headquartered in Paris, France.

As soon as I got to the site, I fell in love with the grid.
Personal preference of non-scrolling sites.
All the pages do not need unneccessary scrolling.

The grid is consistent as well, as you can see from the analysis below.
Just that sometimes, an extra sidebar appears in the content area.
I think it's a good way to keep the consistency of the site.

From the brand name, to the navigations to the content.
Simple yet nice.

Althought there is a white background, and I did mention earlier how white background seem slightly bland, I think it's alright for this site.
The central section is already filled with boxes of images and flash, the white helps tone it down.

4. Pepsi Malaysia
URL: http://www.pepsimalaysia.com/

The Malaysian-based website of Pepsi.

A sleek, shiny, cool-blue site with spiffy button rollover-effects.
Here's the main page.

After clicking into one of the submenus, the grid changes.
The grid is the same for all the sub-pages.
Despite the fact that the navigations move to another location when a sub-page is clicked, because this is a flash website - the user KNOWS where the navigations went.

Like I mentioned before, the sub-pages have a completely different grid compared to the main page.
Yet, because of the animation, it makes it less confusing.

5. Nitendo
URL:
Nintendo Company, Limited s a Japanese multinational corporation founded on September 23, 1889 in Kyoto, Japan by Fusajiro Yamauchi to produce handmade hanafuda cards. Over the years, it became a video game company, growing into one of the most powerful in the industry and Japan's third most valuable listed company with a market value of more than $85 billion. Aside from video games, Nintendo is also the majority owner of the Seattle Mariners, a Major League Baseball team in Seattle, Washington, USA. They are also the partial owner of the Atlanta Hawks, an NBA team based in Atlanta, Georgia, USA.

The main page and the sub-pages have the same hierarchy.
The only difference in grid happens ever so insignificanly.
It's either a different column system in the content section, or the sub-navigation bar.

Like the Gururu Journal, it has a second navigation bar at the bottom of the page, followed by the disclaimer.

The basic grid is like this:

Just the variation of columns and rows in the content section.

It is also might WHITE like the asiasoft website, but because the contents are much more compared to asiasoft's website, it doesn't look so empty.
Of course, I think a bit more design elements wouldn't hurt.

I really like the way they have little boxes for each specific information they want to present.
And despite that many boxes, because they are still following the grid - it doesn't seem messy at all.

The navigations on top are also nicely planned in my opinion.
They didn't cram "What is Wii and NDS" in one single "Products" section, but seperated them.
And in the Wii page, much more information can be accessed to from the sub-navigations.

~ { * } ~

Just a conclusion based on my own opinions:

I think the most important thing a corporate website has to achieve is how to let the user acquire the knowledge they are looking for as easily as possible.
Hence, the grids should be less complicating - same goes with the navigations.
Grids should NOT change much, especially not every page.
It isn't just hard for the user to naviagte, it also gets ANNOYING.

The design should also be clean, but not to say bland.
White is a bit too overrated, but I think with certain extra touches, even a site with white background can seem more interesting.

For example the LV site.
The central part is full of images, flash and videos - the white actually helps to them tone down.

Using graphics that are related to the brand's identity, logo, conept are very helpful in supporting a simple design for these sites.

For example the Gururu Journal.
Each update has a gloomy Bear head next to the date.

Corporate sites aren't always just sleek and elegant.
I think any design goes, as long as the above criterieas are met.

2007-12-10T02:10:00.000-08:00

Before I forget and procrastinate more ^^;

The URL to my final project:

O-bento

Enjoy :)

Comments and critiques are welcome of course :3

How to make...

2007-11-05T06:59:00.000-08:00

Before I start on what I'm doing on the project, I'd like to share some references on instructional websites.

Here are the links I referred to:

1. Niku no Mansei

A website on Japanese paper crafts.

Once you have selected what you want, you get to this page...

Each step is accompanied with an image - which I think really helps to get the message across.

2. Instructables

The world's biggest show and tell.

Haven't went through the whole site, but from what I've seen, it's a pretty spiffy DIY site.

The naviagtion and search engine are very user friendly.
One can find what they're looking for very quickly.

Once you find the item you want, you can choose either to view all the instuctions on one page or go step by step.

3. wikiHow
Just as much as everyone likes dropping by Wikipedia for quick information once in a while, wikiHow is also a site with tonsof tips on DIY.

The content is rich (although I can't guarantee if they're 100% correct), and the whole layout is organized. The hierarchy itself is very useful, complimenting a step-by-step website.

~ { * } ~
I haven't decided on what I'm going to do for my website yet.

For now, I have two options, it's either toys or food.

Toys, but slightly to crafts - if that's possible.
*Koinobori
*Daruma
*Teru Teru Bozu

If food, I would do a site on bento (Japanese lunch box) and the snacks inside.
*Onigiri
*Sushi
*Curry rice
*Dango

Final

2007-11-01T10:24:00.000-07:00

Just some additional stuff before submitting the assignment tomorrow:

www.thehorizontalway.com
A very useful site I referred to while doing the assignment.
It has many links to many other horizontal-scrolling sites.

Here's the link to my uploaded site:
http://mikuen.bravehost.com/
There's advertisements in my iframes though...not very sure on how to fix that ;_;

In conclusion, handcoding a site is fun when the site works.
But hair loss is sure to come when it doesn't work.

Really appreciate Jo and Chong helping me out so much, thanks alot :)

To those who are interested, I uploaded my site with http://www.bravenet.com/.
If you have Java, you can upload straight to the ftp.
If not, they still let you upload your files like in photobucket.

But you can upload 504385793457839 files at once.
( Okay, I really don't know the maximum, but it is more than what photobucket allows the user to upload at a time. )
Just click the "new file upload box" when you're in the uploading window :)

2007-10-22T09:16:00.000-07:00

As my layout is in one piece and is VERY long, I shall not post the whole image here.

Please click the links below to view section by section.
Just keep in mind that they are in one piece.

*Images are uploaded in lower quality due to the file size*

{ Befores }
Start
Main
First page of story
Second page of story
Thrid page of story
End

*Text is not included as it will be typed in XHTML later*

{ Finals }
Start
Main
First page of story
Second page of story
Third page of story
End

Comments and constructive criticism are welcome.

Reference for "What if I am..." website

2007-10-01T05:05:00.000-07:00

Here are some websites that I referred to while thinking of my website's flowchart, layout and design.

1. http://www.jonathanyuen.com/

A portfolio site of a designer from Singapore.
Generally, this site scrolls to the right everytime the user rolls over the little red circle.
It's like telling a story.
However, there are still links that lead the user to more in-depth information in each section of the scrolling page.

2. http://www.junkokawashima.com/

*These images were taken with a phone camera from a magazine, hence the low resolution and bad lighting*
She uses scribble-ish lines and fills them in with bright colors.
It's not her website that I used for reference, but her art direction.
Her online gallery isn't much, but I've seen better artwork from her in magazines.

Since I'm doing snake charmer, I feel as if there isn't too much photos for me to take as images to support my site.
Instead, I'll do my own illustrations slightly infused with this art direction.

3. http://www.sectionseven.com/

I'll be using cartoon-ish vector for some of my pages as well.
( Namely the start page, main page and end page. )
Section Seven has some nice clean vectoring under the Illustration part.

This website also scrolls to the right, in a way like someone would read a fold out pamphlet.
It's quite slow though, when you want to open and close a certain section.
I'll remember not to imply that into my site.

4. Taiko no Tatsujin/

I'll be taking the art direction of this game while designing for my vector-images as well.
With solid outlines and bright colors.

Research on 5 websites

2007-09-12T04:46:00.000-07:00

For this research, I chose two sites that I visit frequently, and three less frequented sites.
This is so I can give my opinions as a long-term visitor to that particular site, or from a perspective of a new user.

1. http://www.neopets.com

I think this is a spiffy site : )
Registered users can have pets, earn money by playing games, holding shares and much more!

Having visited it for more than a year, I personally think the navigations are very organized. They even let users change between four color moods.

The hierarchy is normal: the title, with a sidebar, contents then disclaimers.

Here are some examples.

This is the 'pet central' page.
It's like a library to many other pages, yet the hierarchy is kept, and boxes are used to keep everything in order.
Gutters are still there so users can breath from the amount of information given.

This screen shot is actually a map of shops in Neopia ( the shop central in Neopets ).
They could've used normal texts and made the page longer, but they used this single picture instead.
It saves much more space and is more interesting to interact with.

I don't think there's anything bad to the site - I mean, they could use more amazing graphics for the navigation bar and less advertisements - but that would mean more bandwidth used.
Also, less advertisements would mean it won't be free to play anymore.

Perhaps they could change the background color to something instead of just white.

Otherwise, I'm quite okay with the site : )

2. http://www.beautifully-webdesign.net/#

A site with links to other artsy, creative sites.
Looks a bit messy at first glance, but the navigation is actually quite smart.
The navigation bar is on top - a single button.
When you click it the whole bar comes out.
I think it keeps the whole site neater.

Same goes with the sidebar.
Whenever you click on one, it slides to show the links.
Saves space, looks simpler, neater.

Title and logo are on top, but I can't see any disclaimers.

Whenever you rollover on the thumbnails, the name of the site and a screen shot of it shows.
I think it's a good way to let users know what they're expecting of the site they might click to visit next.

They also update the links at the sidebar.
The first one is called "Last Link". It's still slightly ambiguous to me, as I'm not sure if it refers to the last link another user clicked, or the last link I clicked on that site.
The second option is something like a featured site from their many links.
I think it's a good way to get people clicking on the links, as some people might just not know which site to visit.

Overall, I think the site can improve on the navigation.
It is a good thing they did with the button sliding - but it's a bit ambiguous at first glance.
The advertisements on top should also be put to the bottom of the page.

3. http://lftovr.projectsd.net/index.html

A joint portfolio of Eric Sin and David Garvin.

The usual hierarchy: title ( in this case the logo ), a sidebar, contents then disclaimer.

Where is the navigation?
Well, if you did read through the long block of text - it states that when you click that little red "x" above - you can go to other pages (namely home, and the two artists' individual pages).

Not very clear navigation, in my opinion.
Here's the screenshot of the navigation one you rollover.
It's so tiny!

But otherwise, the site is pretty neat and decent.
The gutter, margins are all very organized.
Not too spacious, not too cramped.
The graphics are a major bonus too!

4. http://www.onemanga.com/directory/

An online manga site is STILL a website >)
A very useful one at that.

One Manga - I think the layout is very, very neat and easy to navigate.
All the manga titles are there, and you can even browse with the scroll-down bar at the top right corner.

There's not much I would ask to change, except maybe they can make the overall design nicer with more graphics.
But that would mean it would take longer to load the pages - very annoying if you want to read manga.

When you click on a specific manga, it will bring you to this page.

On the sidebar, there tons of information about the manga.
A cover of it, a summary, the mangaka etc.

After you choose which chapter you want to read, you reach this page.
On the top, it lets user go to other chapters and pages.
Ot also lets the users go to the previous and next page.

Nothing's perfect.
I guess in this case the function of the site is the priority compared to the design.

5. http://www.undoboy.com/flashSite/cokeZero/index.html

Awesome motion graphics.
From the loading bar to the transitions, the site never lets the user have a dull moment while waiting.

Just three main colors: whit, black and the red from the product.
Yet they compliment each other so well, it doesn't look as if the site is dully-duotoned.

The frosty design gives out the "cool" feel to compliment the product.

Here's the loading for the main page:

It's basically random shapes making up the bottle.
I was so interested in it I wished the page would take longer to load x)

Here's the transitions from the main page to a sub-page:

The hierarchy is totally different from normal websites.
The title is on the left, followed with the navigation, slogan on the right.
Content comes after you click the buttons.
And when you're at the content page, the hierarchy is different.
Still the navigations are clear and you won't get lost.
Here's the screenshot of a page:

You'd notice the label is slightly larger than the bottle itself.
It's actually a rollover effect to let the text and details on the label clearer.
This, on it's own has proved that simple, boring things can be made into something interactive and interest the user.

Except for the slight confusion of the navigation at first, I think this is a pretty awesome site :)