Process Of Producing My Website Tiffanie Chan 11W

Main Sections

1. Creating the Homepage

2. Creating all other pages

3. Summary

1. Selecting an appropriate

theme/layout

This was my first experiment with the themes as I showed in my “Analysis & Research on Website Creators” PowerPoint. I had already changed the main photo to the Hong Kong skyline. However, as my users wanted a specific colour scheme, I believe the rainbow spectrum in the background would affect this too much. For that reason, I decided to choose another layout.

Photo of HK – Suitable for my website

Too many colours in the background distracting

Clear Title

For this theme, I liked the 3D effect of the shadow around the photo. I believe this immediately attracted users and is very eye-catching. Furthermore, it is good that the titles and headings are in bright magenta. This is clear as it doesn’t clash with the background, also, it is visually appealing. The different headings are at the top of the page so navigation is simple. On the other hand, I still wasn’t satisfied with this layout as the background ended up looking quite dull.

Eye-catching 3D effect of the photo’s shadow

Good choice of colour for the main headings

The background colour is dull

Compared to the two previous themes, this one appeared much brighter and gave off a relaxed/vacation atmosphere. I realized this from the light colour tones of white, orange and green. This was useful as a specific colour scheme was now in place. I also liked how there was some pattern surrounding the headings this time i.e. the leaves sprouting out. However, I would like there to have been more because without it, the white background lacks depth and interest. The website might not attract users easily.

White background can look relaxing but also boring

Large space for main banner photo – users will easily find out what the website is about

Interesting pattern surrounding the heading – draws attention

This theme is similar to the one on the previous slide however, I believe it fixes the weaknesses I found on that theme. First, there is a tan coloured background, which like white, provides a serene atmosphere, reflecting vacation. Tan is also more attracting than white because it is less plain. Second, as I mentioned earlier, I liked the pattern surrounding the headings. This theme goes further by adding darker leaves around the main headings and then also adds faint white bigger leaves in the background. This is eye-catching but also relates to tourism as the leaves demonstrate a start to an adventure. Hence, I have chosen this theme for my website.

Faint white leaves in the background add depth

The leaves are darker which makes them clearer and bolder

Tan background is less plain compared to white

1. Changing & Editing the main banner

The first thing I had to do was change the main banner photo. I chose a photo of the Hong Kong skyline because this immediately tells the clients/users what the website it about. It is a tourism website hence, the banner should advertise Hong Kong too. I also chose this photo because I believe it is very eye-catching so users will want to continue looking around the site.

I then edited the photo slightly to make it even more appealing and informative. First, I added the slogan of Hong Kong, “live it. love it.” I chose the font “marketing script” because it is very cursive, representing a “signature” that stamps Hong Kong. Then, I added a red glow around the text to make it stand out even more against the white text. After that, I also added a quote at the top.

This time I chose white “honey script” font because I thought it resembled the type of handwriting used in journals. For example, a travel journal. I also added a shadow effect to make it more eye-catching. I also added a slight fade effect to the photo to create a sense of “memory”.

This is the web tool I used to create the main body text of the homepage

I edited the settings of this theme. First, for the title, I made the font “Vanilla”. I did this because the letters of this font are very thick and therefore, extremely clear. They also give off a “fun” atmosphere which is essentially, what vacations are about.

I chose the text to be dark brown for several reasons. First, it fits in with my colour scheme, in which the tones are tan, white, yellow, brown, orange. Then, I also think the dark brown stands out very well against the tan background, making attract users immediately.

I didn’t want to make the name of my website too ambiguous by using puns because it might confuse users. This way, it is clear what the website’s purpose is.

I added a border to the photo which provided an effect of burnt edges. Although this helps it look more visually interesting, I also think it resembles an old, valuable photo taken on holiday.

I edited this photo slightly on a program called pixlr. I increased the exposure and contrast in order to bring out the colours in this photo more.

For the main body text, I chose the font “Journal”. It has a handwriting which has the style of scribbling. This is good for my website because I want the information here to seem as if someone is sharing their thoughts in a travel diary.

I decided to keep the main text black because I believe this is what looks most professional and also, it stands out strongest against the light background.

I first added all the pages I would be doing. I chose “fashion, electronics, shopping malls, local food markets and antiques & furniture”. At first, I was worried that antiques & furniture would not fit with my clients but then I remembered that Hong Kong also has shops like “G.O.D” which sell small household goods that are good for teenagers to give as gifts. Therefore, I concluded this five sections would cover everything my users would like.

I used this web tool to create separate title boxes. I kept all my titles the same font and colour because I wanted all the pages to look united and professional.

This is the main web tool I used throughout my site.

For this fashion page, I used a web tool to divide the page into 4 separate columns. I did this because I think it looks more organized.

2. Creating the pages

Using a photo editor called Pixlr (very similar to Photoshop), I altered the saturation to bring out more vibrant colours, making the photo look more eye-catching.

Both of these were used to increase the brightness of the photo.

I altered these three as well to slightly alter the colours.

By changing the levels slightly, I brought out more of the blue tones. This was useful in my photo because the overall colour was boosted, making the photo more eye-catching.

The original photo is on the left whilst the one on the right has been edited. I believe the edited one grabs the users’ attention quicker.

These are the four different sections I divided the webpage into. I chose this for the fashion page because referring back to my survey, many of my potential clients chose these as places they were interested in most. Furthermore, they are very well known in Hong Kong for being popular shopping districts therefore, I believe they would become useful information for my users. All the photos above have also been edited through the same process I showed you in the previous slides. I did this because the page suddenly appeared more visually intriguing and users would enjoy surfing the website more too.

After conducting my survey, I realized users preferred websites which provided maps as well as directions. Hence, I embedded Google maps which showed the exact locations.

My clients wanted the website to include “how to get there” sections therefore, I ensured each page would have this. I showed the different methods by using bullet points.

I kept the main banner on every page because I needed to show that each page belonged under the homepage as sub-sections and not, separately. I also think the banner constantly reminds users that the website’s main purpose is a HK tourism site.

I included a rating system because I knew that my clients wanted it and believed it was useful. I also think it adds more informative features to the site.

Because I couldn’t make the photos in between the text too big, I created a slideshow of photos at the bottom of the page. These photos were taken by me and edited by me on Pixlr. I edited them because I think they would then look clearer and more attractive.

After creating a slideshow, I also added captions which explained to foreign tourists what the photo was showing. This would make the website more informative.

I made the slideshow run on “autoplay” for the users’ convenience.

For the “Electronics” page, I decided to try something different by rotating the photos. I titled it slightly because I thought it resembled snapshots a camera takes. It also adds more variety to my website in appearance. This photo has also been edited previously by me to bring out the vibrant orange in it. This time, I didn’t add any borders because I thought it would distract users from the informative text around it.

I made use of the column web tool again because I wanted to present two completely different shopping areas users can go for electronics.

I included the addresses of several stores and their opening hours as well as contact telephone because it would definitely be useful to users.

I also embedded hyperlinks to the official website of some of the stores. Through this, users who are interested in electronics can research more supplement knowledge about the shop.

For my whole website, I used orange text for keywords which tended to emphasize the specialties of that particular shopping spot.

I chose orange because it fits into my colour scheme but it also acts as a good highlighter colour.

Although I always add Google Maps, where possible, I also included which MTR exit would be closer for the client. I did this because it would become much more convenient and useful for my clients, therefore, they will be more satisfied with my website.

However, I still included the actual address of the store too.

Similar to the “Fashion” page, for the “Shopping malls” page I also used a divider web tool to help make my website look more organized and neat. This also makes the overall appearance seem more professional.

I chose four malls from four different districts in order to increase the variety and range of information provided.

For all four malls, I embedded hyperlinks to their official websites. This would provide the client more sources and information.

I also included the full address and directions for the best mode of transport. This would be extremely useful to users.

For the “Local markets” page, I split the page into only two sections. I wanted to present two different views. The Central market is a representative of the general Hong Kong markets whereas Aberdeen market specializes in only seafood.

I edited all the photos but in particular, this photo has a blue hue because I wanted it to represent the sea and fish, like the photo’s subject.

As some of my clients wanted, I wrote more journalistic descriptions of the markets. I highlighted the specialties.

When possible, I tried to include walking distance times for my clients.

For markets, I would mention when the best times to go were.

Similarly, I used orange text to highlight the unique aspects of the Aberdeen market.

I provided a list of the buses users could take to Aberdeen as I wanted to give them a wide range of choices. I included a map with it too as this showed the road names, making the directions easier to understand.

I created a photo slideshow on the local markets as well. I did this because I wanted foreign tourists to get a view of how our markets are very different from normal supermarkets.

I edited this photo to have a “glowing” effect because I wanted to emphasize the translucent plastic bags preserving the Chinese herbs.

For “Antiques and Furniture”, I also wanted to present two different aspects. First, G.O.D Chain store which displayed the designs of local Hong Kong artists. Then, Hollywood Road which consisted of many Chinese antiques. Presenting two different views meant the site could appeal to more users.

I also included criticisms of the sites so the reviews would be fair and useful to my clients.

Addresses and contact numbers were provided too.

One very important aspect I needed to include was the ability to comment on my website. Through my survey, I found out that a large majority of my clients wanted to be able to comment on my site and share their own reviews and opinions. I therefore created a short application form that they could use and I embedded this at the bottom of every page of my website.

Summary

I have now completed the process of making my Hong Kong Shopping Tourism Website.

Throughout this process, I have learnt and improved my technical skills in using web tools and editing photos.

I have also included the aspects my clients told me about in the survey. For example, “How to Get There” section, commenting and Google Maps.