The ALT Guide to Komatsu

So my time is coming to an end on the JET Program and I remember that when I came to this small town, there was barely any information available about life here. There was some things, but not enough. So I decided to make this page. It’s still a work in process.

Design Process

Basically drew the design in my sketchbook. While wireframing is my usual go to, you never have a computer on you at all times to whip one out. The site went through about several looks before settling on the current design. I wanted to make it a bit interesting by incorporating weird shapes. I also wanted to make it a bit interactive, so a lot of CSS3 Animations were implemented into the design.

The top was originally Google Maps, but I figured that just looked dumb so I took a plunge and threw up a video instead. It’s a terrible video, and I plan to reshoot a decent “loop” static video than the one currently being used. Also take note of the introduction. Rather than just resorting to squares, I decided to make it more like a magazine layout push the text down in a diagonal direction. This was probably my hardest challenge, mainly because there’s currently no way to do this in CSS and the math involved to write the jQuery code was just annoying (I suck at math).

It’s a sloppy approach but until the day CSS shapes actually gets multibrowser support, sometimes crude hacks are needed.

The next big piece about this design is the train map. It’s 100% pure CSS with a boost of jQuery toggling.

The circles represent stations. Upon hovering them, they blink a pulsing highlight. The station information then pops up, with

colors associated with what type of train arrives (limited express, shinkansen, etc).

The only bad side about this is the fact that it’s static and not responsive. But then again, responsive wasn’t really the focus of this design. I didn’t envision that people would access via their mobile devices, and considering all the animations, it would be useless in effort.

This is still a work in progress, but the main points are done. I’m pretty proud with how it came out. It definitely was a learning experience in seeing what I could do without having to make graphics or go all out with canvas/svg/javascript. Goal was simply crude, simple code.