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...

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

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 :)

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

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

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 :)