Inspirational Designs 3

Looking into elements I wanted to implement into the NOTA Design website, I've come across several similar interactive navigation system. I looked into 2 method, 2 different major corporation used in their GUI. One is Apple Mac OS's Dock. The other one is Sony Playstation 3's XMB

1. Mac OS Dock

The items in the Dock for Mac OS (the bar at the bottom), will be enlarged when rolled over. But it won't be the only item enlarged, the items beside it will be slightly enlarged too, giving the viewers an illusion of magnification.

2. XMB (Xross-Media Bar)
XMB is an award winning Graphic User Interface developed by Sony used in some of their products, notably in Playstation 3, Playstation Portable and some of their Sony Ericsson mobile phones.

Instead of using cursor, the navigation moves the icons horizontally. fixing the screen its layout.

Inspirational Designs 2

The 2nd website that I really like, in terms of how they designed their navigational bar, is Fahrenheit 451.


Looking at Sub Zero Wine and this, it is clear that I'm inclined towards sites with center alignments. By positioning the content in the center of the screen, it allows the viewer to have a clear understanding of the positioning of the content, without getting confused.

Upon opening the site, we are greeted by a short introduction of Fahrenheit 451. There isn't much animation in it other than some plain fade in, staying faithfully to the company's policy of keeping things simple.




I'm impressed by how this site's navigational bar works. After clicking on the links, a short loading bar will appear and then a space will roll up from below, displaying sub-menus for that particular main link.


Because of the way the site is designed to be, viewers never navigate away from that one page. As you click along, contents will be loaded on the frame without moving away to another page.

Inspirational Designs

Among the sites I've visited for this particular project, a few of them meet what I was looking for in the design for NOTA Design. One of them is www.SubZeroWine.com and the other is a web design company's website Fahrenheit 451.

1. SubZeroWine.com
SubZero Wine structured their website in a way that it is easy to navigate, interesting to browse (with all those interesting animation) and still remain simple and elegant. Exactly what I need as a model to based on for the NOTA Design website.

Though the main four images on the main page isn't their product, instead it is 4 key enemies of wine. But I think the idea of animated icons such as these are effective and it engages the visitor as the icon will be enlarged and animated when rolled over.


After clicking on it, the icon will be enlarged even further and several key links will appear on the bottom left of the image.


Clicking on those links, the image will then be moved to the side, and the information will be loaded on-screen. This is an effective feature to present to the visitors the product information without opening a new page. As the information loaded are just text, it drastically reduces file size and allows instant interaction to the viewers.

The actual product page of this site is rather dull compared to the 4 Enemies of Wine pages. With minimal animation, the product page strives to deliver information fast and direct. Visitors can print the page, mail the company, get the specifications, and also download user manuals of the product.

A Study of Sites -Part 2

2. www.team7.at

The main color of Team7 is gray as you can see. Their splash page was so-so, not that spectacular but not that bad either. The site had had its worst times. Before this, the logo used to be this, obviously photoshoped, beveled button with bright orange that doesn't goes with the design of the site at all. But, luckily, they changed it lately.

Going into the main page, things got better. The color scheme matches, the photo have this cold color that matches the design of the site. But even though they have changed the design of their logo, it still stands out from the rest of the site's style.

Next, is their product page. It doesn't link us directly to the products, it does bring us to this page where they divided the products into categories. I find this page totally unnecessary because they don't really have that much products to begin with.

After clicking at the product link, it'll bring us to the product category page. After clicking on the product category link, let's say Dining Room, we'll then be directed to ANOTHER page where they breakdown the products into MORE categories. I find this totally unnecessary and annoying, after loading so many screens and still no signs of the product.

The design of this site isn't that amazing. There are a lot of elements in it that doesn't match with each other. And the navigation is simply to complicated. Personally, I prefer to access the information I want quickly. As a buyer, I STILL prefer to access the product info quickly.

A Study of Sites -Part 1

Along with the brief supplied by the client is a list of websites doing similar furniture design. In this post, I'll breakdown the structure of their websites to see how they deal with problems related to web designing.

1. www.gabrielabellon.com

The first site that I visited was the Gabriela Bellon's website. Immediately after I opened the page, I was bombarded with this bright orange color on the screen, which I think is really interesting. Especially with their combination of orange, white and gray. It really guides the eye to the main logo and the links. There are several language options for the site Dutch, English and Spanish. This is mainly because of the background of the designer, Gabriela Bellon from Argentina, and the target audience of the company.

The color of the design remains consistent throughout the design on the website. Browsing through the pages, you can see the usage of orange bars, white fonts on orange background or on pictures and several others. Though there are several cases when the white font have been overused. An example of this is the quotation on the main page. The white fonts are overlaid on top of pictures with similar color almost blending the wordings with the background.

GabrielaBellon.com uses simple css layering for its menu bar. With drop down menu that leads more links, this is an effective way to navigate the users around the site without getting lost.








As you navigate towards the product pages, you will continue to see the theme of the site. The usage of white lines to cut out the products seems to make the image more interesting and robust. Rather than just one plain image.

The product page also allows the viewers to click on a link which will brings out a window with more pictures of the product.

Overall I think design is pretty pleasant to the eyes, and I really like the way the designer arrange the pictures and how it goes along with the warm color of the overall design. Though I would like to know more of the product itself instead of just their dimensions on the site. Maybe other color choices, or what material they are made of etc.