Minisite 3 Review

As I already said, minisite 3 was up. There are a couple of updates compared to minisite 2.

Navigation
Now users who browse minisite 3 will enjoy skimming through the interactive pop up boxes. When an user browses through the different categories, they will be given the option to quickly browse through all thumbnail images. Then if the user wants to view a particular image, then can click on the image to enlarge the image, then they will have to click either on the image or outside to close the large image to see all the smaller thumbnail images. This mutli-image gallery is all done in CSS.

In addition, more images have been uploaded now. This includes model photos, construction photos more concept sketches.

Site Design
The website now has a more clearer focus on the robotic theme. There are random micro text, some random abstract art to give the website a very futuristic, digital feel. An image of cylons from the popular tv show Battlestar galactica is also shown.
However I wanted white lines to boarder around the lower image, so I used tables in the html code such that the long cylon image doesn't look like it's just plonked there. The table also gives website some structure.

Opacity
When the user browses through the links, there will be transparencies. This gives the website a more sophisticaded depth. However there is a problem with this. It works fine in Mozilla Firefox, However there are some compatibility problems with internet explorer. For some reason, when you click to enlargen an image, the small thumbnails appear over on top of it as well. Strange...I had spent hours trying to fix it and I can't solve the problem. I may have to start from scratch to find out the problem.

Final Product Photos
The final product is finally documented in the form of photos. Some photos have different resolutions and this had created problems. Some photos are landscape and some photos are in portrait form. Since the thumbnail preview boxes are in landscape form, I also chose to display all the images in a landscape format. This required me to do some photo editing in photoshop so that the portrait photos' resolutions aren't warped.

Of course I could of portrait form sized versions of those thumbnail preview boxes, but I wanted all the thumbnail images to be of the same image format to keep the same consistency.

Minisite 3 Background

I have made an image which I created in photoshop cs2. Since my website theme will be related to robotics, I chose a brushed metal material as a industrial theme. It will form the background image for my minisite 3.

Minisite 2: Image Viewer

As mentioned previously, I have to work on how to show and present the images I will use on my website in a better way such that it gives more value to those images.

On cssplay.co.uk There is a layout called "Multi-page photo gallery". I have downloaded the source file to understand how it works.

The example file shows 3 tab. Portraits, Landscapes and Birds. When you hover your mouse over the category tabs, it changes colour and it also brings up the photos in a thumbnail array view. (see screenshot above)

When you hover your cursor over the images, the image enlargens by a certain percentage and when you click on it, it maximise to its biggest resolution so you can see a bigger view. However when you move you cursor away and out from the viewing box, the enlargened photos shrinks to it's original thumbnail size in the array view.

Link: http://www.cssplay.co.uk/menu/lightbox3

I think this is an interesting way to allow users to preview multiple images quickly all at once and then gives the user flexible to enlargen what he or she chooses to zoom in at.

I will explore this option a bit further and see how I can implement this technique into my minisite 3.

Minisite 2 Feedback

Yesterday, I got feedback from Justin for my minisite 2. There are 3 things I can improve on.

1) The presentation of images - The way images are placed on the page seems a bit too dull or barbaric..."like it's just plonked there". I should find a more aesthetic or interesting way to present these images. CSS play seems to have a good examples of how to just do that.

2) The navigation menu - This also needs some work on. Seems a bit plain... Needs to show some more interactivity.

3) The overall site design - Since I'm using a futuristic robotic-ish theme, I should focus on how I can use visual elements to represent that on my webpage.

Product documentation continued...IV

I've been doing some more experimenting with form and functionality with the ambitious robot CD stand. I've found some inspirational images which I would like to fuse and incorporate into my design.

Images shown below:


Figure 1: Guan Yu, (Famous Warrior of the 3 chinese dynasties)



Figure 2: Guan Yu on horse with chinese halbard



Figure 3:Medieval Knight in Armour



Figure 4: Medieval European Knight Helmet Armour



Figure 5: Japanese Samurai on Horse with banner on back

These are the inspirational images I will use to design my CD stand.

Stay tuned...

Product documentation continued...III

Today, I found recovered some concept sketches of my CD stand product in my sketch diary. As you can see from the sketches, I was playing around with some forms and I was also endeavouring to explore how I can integrate the functionality of a CD slot case into the form of a mechanical being known as a robot.

In the first sketch, I concentrated on form and I was trying to sketch a military robot model called "MADCAT". It is derived from a popular computer game titled "Mechwarriors" and the MADCAT is one of the most popular mechwarriors in the series. This is because of it's size, the stylish way it moves, it's ability to mount multi-missle launcher and of course it's cool name. However there was no interesting way of mounting a Mini-CD case within the robot unless the CD robot stand was massively huge like a monument.



In the 2nd Sketch, I focussed on trying to figure out how to fit a CD slot into the robot form. I remember from the Mechwarrior PC game, there was one mechwarrior which had large round arms (I forgot it's model name) and I was thinking of slotting a mini-CD case into it's shoulder-arm joint. I did some 1:1 scale calculations on paper and since a mini CD-stand is roughly 8cm, this would make the shoulder-arm joint massive. Therefore I would have scale up the size of the entire robot body, but that would make the size of the body huge too! This would be inappropriate as a CD stand, since it's going to hold 1 mini-CD anyway. Therefore this idea isn't really feasible.