21 August - Preliminary Research - Analyzing Existing Solutions

I have been looking at popular and functional website templates that different companies have been using for their promotion. Here are a few examples of good website that I can learn from, and be able to acquire good ideas/innovations from:

Nestle http://www.nestle.com
From this website, you can tell it prioritizes the important parts of the website by position and size. The main news/picture gallery that is able to scroll through was made the largest and most accessible by putting in the center of the webpage. Apart from that, they also put a search bar on top for accessing hard to find information. All of the information that customers/clients/business partners will look for would be on the horizontal tab on top that is sorted into groups. Other sources of information about the company that is important, but not as important as the central news gallery, is on the sidebar where the price of their stock, contact methods, FAQ, and social media is listed. The logo is, of course, pasted on the top of the website so that it can be easily identified as their website. What I think that I can take from this, is the main 'news gallery' part to show what's new and updated on the webpage, and possibly the menu bar.

Comodo http://www.comododesign.com/
I chose to analyze this website because this is a company similar to the company my mother works for. They both design the interior of a building/estate and I think there are lots aspects of this which would fit into a website I make for them, more than aspects from unrelated corporate websites. When you first enter this website, I shows examples of different interior designs that most likely were designed by them. The tab/menu bar is different from Nestle's menu tabs because it is now vertical, and is located on the left side, underneath the logo on top. The bar can be minimized using the 'x' button next to the logo, and brought back up again using an arrow on the top left corner. The main picture that takes up most of the space on the homepage, changes with a fading animation to show different previous projects of this company.

- An example of the changing homepage, as here it has changed to another image.

Unlike the website Nestle hosts, this website provides many different animations with fading, and sliding animations as well which prove to be elegant and visually appealing. When hovering over tabs, the text will turn from grey to black and certain ones will bring up even more tabs with a sliding animation (picture on left).






On the projects part of this webpage, it is split up into two parts - residential and commercial. The projects are brought up into a grid tile format with the name of it at the bottom of each picture. Clicking on one of these will result in a picture gallery coming up, along with a short paragraph to go with it. I think this is a brilliant feature, and I would think that I should adopt this and improve it by adding dots aligned horizontally on the bottom (for each different picture) so that if one is clicked on, they will be highlighted and it is able to switch the picture viewed. This grid style is also used in the video section of this website.
- The grid style view of the residential projects

- Clicking on one of these pictures will bring up another screen, which shows enlarged pictures and a gallery which can be swapped by clicking the arrows on the left and right side on the picture. The caption on the bottom describes the picture and, buttons on the bottom also bring back the previous screen, and previous/next projects.

Another feature I found interesting, and I would like to adapt and improve would be the social media links. Located on the bottom of the vertical bar, there are links to their Facebook, YouTube, Twitter and Google+ pages. However, I think what could be improved would be the size, and color. When you look at them, on the website, there are 3 different tabs for YouTube, Facebook and Google+. When hovering over them, they turn to a bright blue color. However, I think they are too small, and might not be easily noticeable, and ignored. Instead, making them bigger and also making them different colors would be better. For example, Facebook would be dark blue, Twitter would be light blue, YouTube would be red and Google+ would be orange. When hovering over the icon, they could, instead, fade to the color this website uses when the mouse isn't hovering over the icons.

The current language is also shown on the bottom left corner of the menu, indicated inside a filled light blue box. When hovering over that, it would fade in 2 more options for language choice, bringing up to 3 different language options (Traditional Chinese, Simplified Chinese and English). This might be useful later on, but I don't think that I would need it now as I don't think I will be making more than one language for the website I am making.

- Xava Interiors http://www.xavainteriors.hk/
 This website is also a Hong Kong based interior design company, and I think that I would be useful to note down what I like about this website since it also is similar to the one I will be making. The homepage for this one has a picture of a sofa, and some tabs, along with a slogan. This one is similar to the second one I analyzed and they both provide simple results.

This website has a different style to their 'projects' page, or 'interior' as they have phrased it. Due to the small amount of projects on their website, they can put the brief description of the root directory, instead of having to click in as well. The picture is also bigger, and has the location of the design noted.

This is something I quite like about this webpage, is the picture gallery. I mentioned in the previous website that I wanted to make a picture gallery like this, and I this website made this pic gallery very nice. It shows all the pictures and lets you immediately pick any picture, without having to scroll through to get the one you wanted.





In my opinion, the profile page for this website could be improved. There is too much text in the page, and might prove to be very confusing, and too much for the client to read. Instead, I think I might only add some text for each person, and a border around their picture. A brief description would be fine as people are generally not looking for the information about the people, but the projects instead.

What I am going to use to inspire myself from these websites, it the news/picture gallery from the Nestle website homepage since it is very practical and provides easy access for updated information. Also, I would like to use the animations/picture gallery/project grid view from the Comodo Design website, as I think it would make my website look very neat and appealing. From the Xava Interiors website, I think I can adopt and improve the picture gallery, and the profile section as I think they are very functional and closely related, and suitable for what I am doing.

The reason I think that the news/picture gallery is the best choice, since it helps their clients to easily find information that they might need as it is updated, which can solve the problem that my mother's company has. For the picture gallery, their clients also need to look at their previous projects, so that would be very suitable for them to easily find the pictures, and scroll through. The grid view for the projects page also gives them easy access and quickly find what they want to view since there can be more projects viewed on screen at one time. Also, the profile page layout is a good choice as they can easily find out who does what, since sometimes the clients have some confusion on who to contact, if they want to suggest something or point out an error.