Proposal (design)

1. Layout

Home page Layout

Attractions page Layout

2. Colour

There are three color in our website. First, we would use Baby Blue (#4AB3D1) to be the theme color in the website and it will apply in the background of menu bar and footer. The text color we would like to use black (#000000), no matter the heading and content, it would also use black color. the last color is baby green, this is the spare color in our website.

3. Typeface

Chalkboard

Courier New

Ariel

We also choose three typeface to apply in our website, the first font is "Chalkboard", the font is very clear and attractive, so we would like to use this font in heading of the post and also the subheading.  In the content, we choose "Courier New" font. Last, As "Ariel" is a common font for every users, so we choose it for the spare font, if browser can not display our font, it would auto change to this font.

4. Images

The images of our website, we would use primary images in each post to explain the attractions. And the format of the images, it would be "jpg" and "png", these two format are the most common format for storing and transmitting images on the website. there two format also can archive the images, it no only can help us to display the images with lower file size, but also can reduce the load time in each page. In the file size of images, As try to avoid increase load time, we would control the size within 1.5MB. 

5. Navigation

Site Map

6. Load Time

As for the load time of our website, we made use of Pingdom Website Speed Test (http://tools.pingdom.com/fpt/) to study the websites we took for reference, which are Discover Hong Kong, Hong Kong lazy travel, and Weekend HK. And we got the following result:

Discover Hong Kong (http://www.discoverhongkong.com/eng/index.jsp)

Discover Hong Kong is the official website set up by Hong Kong Tourism Board. It is believable that the large amount of images is the main reason cause the visitors took around 30 seconds for loading the homepage. Although the performance grade is 70 marks, it is the largest website size for three websites that is almost 10MB. The website’s homepage is informative that full of different image. It is about 90% pictures and only around 10% for the Html document, CSS file and Javascript file.

Hong Kong lazy travel (http://www.hklazytravel.net/)

Hong Kong lazy travel is the smallest size of three websites that we studied on. And, it gains the highest performance grade which is 76 marks. It is only 1.4MB for the homepage. The image contents of the homepage is only about 20%. However, it is not the fastest load time of these three websites. The visitors might take around 9 seconds for loading the homepage. It should be because of the big size of Html document, CSS file and Javascript file on the website.

Weekend HK (http://www.weekendhk.com)

Weekend HK is the fastest load time of three website. It took around 7 seconds for loading the homepage. However, the performance grade of Weekend HK is only 64 marks, the lowest of three websites. It is around 3.2MB that the website made use of around 50% images to the content.

Taking those websites into consideration, the fastest load time of a website doesn’t mean that the well performance it is. Comparing three websites we have studied on, Hong Kong lazy travel, the second fast load time, got the highest performance grade. For these result, it might tell us that to build up a better quality of a website, we must keep an closed eye on and strike a balance between the images’ size and the other content files such as the Html document, CSS file and Javascript file. Especially, the CSS file that might help improving our designed website to provide the better users experience to the visitor.

7. Mobile

Last but not least, our team is planning to adopt the vertical screen slide view to present our website, because it could match with the mobile section. For instances, the landscape design consist in two columns, the main content is in a wide left column and three side sections are stacked vertically in a narrow right column, which is not fit in and too wide to view for the mobile user.

Comparing with the portrait design, the layout changes to a single column design and the main content fills the full width of the screen and the three side content areas are positioned horizontally as three columns under the main content. Users can through portrait mode in their smartphone and easily slide down the website from the top to the bottom in one single page (home page) instead of the landscape mode. Thus, our team believes in the vertical screen design in order to provide a platform with simple, reliable and user-friendly for visitors to browser.