Producing website

Click here to load reader

download Producing website

of 33

Embed Size (px)



Transcript of Producing website

  • 1. Process Of Producing MyWebsiteTiffanie Chan 11W

2. Main Sections1. Creating the Homepage2. Creating all other pages3. Summary 3. 1. Selecting an appropriatetheme/layoutPhoto of HK Suitable formy websiteToo manycolours in thebackgrounddistractingClear TitleThis was my first experiment with the themes as I showed in my Analysis & Research onWebsite Creators PowerPoint. I had already changed the main photo to the Hong Kongskyline. However, as my users wanted a specific colour scheme, I believe the rainbowspectrum in the background would affect this too much. For that reason, I decided tochoose another layout. 4. Eye-catching 3D effect of the Good choice of colour for The backgroundphotos shadowthe main headings colour is dullFor this theme, I liked the 3D effect of the shadow around the photo. I believe thisimmediately attracted users and is very eye-catching. Furthermore, it is good that thetitles and headings are in bright magenta. This is clear as it doesnt clash with thebackground, also, it is visually appealing. The different headings are at the top of thepage so navigation is simple. On the other hand, I still wasnt satisfied with this layoutas the background ended up looking quite dull. 5. Large space for main bannerInteresting patternWhite background can look photo users will easily find out surrounding the headingrelaxing but also boring what the website is about draws attentionCompared to the two previous themes, this one appeared much brighter and gave off arelaxed/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 alsoliked how there was some pattern surrounding the headings this time i.e. the leavessprouting out. However, I would like there to have been more because without it, thewhite background lacks depth and interest. The website might not attract users easily. 6. Faint white leaves in the The leaves are darker which Tan background is lessbackground add depthmakes them clearer and bolder plain compared to whiteThis theme is similar to the one on the previous slide however, I believe it fixes theweaknesses I found on that theme. First, there is a tan coloured background, which likewhite, provides a serene atmosphere, reflecting vacation. Tan is also more attracting thanwhite because it is less plain. Second, as I mentioned earlier, I liked the patternsurrounding the headings. This theme goes further by adding darker leaves around themain headings and then also adds faint white bigger leaves in the background. This iseye-catching but also relates to tourism as the leaves demonstrate a start to an adventure.Hence, I have chosen this theme for my website. 7. 1. Changing & Editing themain bannerThe first thing I had to do waschange the main banner photo. Ichose a photo of the Hong Kongskyline because thisimmediately tells theclients/users what the website itabout. It is a tourism websitehence, the banner shouldadvertise Hong Kong too. I alsochose this photo because Ibelieve it is very eye-catching sousers will want to continuelooking around the site. 8. I then edited the photoslightly to make it even moreappealing and informative.First, I added the slogan ofHong Kong, live it. love it.I chose the font marketingscript because it is very This time I chose white honeycursive, representing ascript font because I thought itsignature that stamps Hong resembled the type of handwritingKong. Then, I added a redused in journals. For example, a travel journal. I also added a shadowglow around the text to make effect to make it more eye-catching. Iit stand out even more against also added a slight fade effect to thethe white text. After that, Iphoto to create a sense of memory.also added a quote at the top. 9. I edited the settings of this theme. First, for theThis is the web tool I title, I made the font Vanilla. I did this because theused to create the mainletters of this font are very thick andbody text of the therefore, extremely clear. They also give off a funhomepage atmosphere which is essentially, what vacations are about.I chose the text to be dark brown for several I didnt want to make the namereasons. First, it fits in with my colour scheme, inof my website too ambiguous bywhich the tones are tan, white, yellow, brown,using puns because it mightorange. Then, I also think the dark brown standsconfuse users. This way, it isout very well against the tan background, makingclear what the websites purposeattract users 10. I added a border tothe photo whichprovided an effect ofburnt edges.Although this helpsit look more visuallyinteresting, I alsothink it resembles anold, valuable phototaken on holiday.I edited this photoslightly on a programcalled pixlr. I increasedthe exposure andcontrast in order tobring out the colours inthis photo more. 11. For the main body text, I chose the fontI decided to keep the main textJournal. It has a handwriting which has the black because I believe this isstyle of scribbling. This is good for my websitewhat looks most professionalbecause I want the information here to seem as if and also, it stands out strongestsomeone is sharing their thoughts in a travel against the light background.diary. 12. 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 hasshops like G.O.D which sell small household goods that are good for teenagers to give asgifts. Therefore, I concluded this five sections would cover everything my users would like. 13. 2. Creating the pages I used this web tool to This is the create separate title main web tool boxes. I kept all my titles For this fashion I usedthe same font and colourpage, I used a throughout my because I wanted all theweb tool to site. pages to look united anddivide the page professional. into 4 separate columns. I did this because I think it looks more organized. 14. Using a photo editor calledI altered these three asPixlr (very similar to well to slightly alter thePhotoshop), I altered thecolours.saturation to bring out morevibrant colours, making thephoto look more eye-catching. Both of these were used to increase the brightness of the photo. 15. By changing the levelsslightly, I brought out moreof the blue tones. This wasuseful in my photo becausethe overall colour wasboosted, making the photomore eye-catching.The original photo is onthe left whilst the oneon the right has beenedited. I believe theedited one grabs theusers attention quicker. 16. These are the four different sections I divided the webpage into. I chose this forthe fashion page because referring back to my survey, many of my potentialclients chose these as places they were interested in most. Furthermore, they arevery well known in Hong Kong for being popular shopping districts therefore, Ibelieve they would become useful information for my users. All the photos abovehave also been edited through the same process I showed you in the previousslides. I did this because the page suddenly appeared more visually intriguing andusers would enjoy surfing the website more too. 17. After conducting myMy clients wanted thesurvey, I realized userswebsite to include how to preferred websitesget there sectionswhich provided maps astherefore, I ensured eachwell as would have this. IHence, I embeddedshowed the different Google maps whichmethods by using bulletshowed the exactpoints.locations. 18. I kept the mainbanner on everypage because Ineeded to showthat each pagebelonged under thehomepage as sub-sections and not,separately. I alsothink the bannerconstantly remindsI included a rating system because I knew that my clients users that thewanted it and believed it was useful. I also think it adds more websites maininformative features to the site. purpose is a HKtourism site. 19. Because I couldnt make the photos in between the text too big, I created a slideshow ofphotos at the bottom of the page. These photos were taken by me and edited by me onPixlr. I edited them because I think they would then look clearer and more attractive. 20. After creatinga slideshow, Ialso addedcaptions whichexplained toforeign touristswhat the photowas showing.This wouldmake thewebsite moreinformative.I made theslideshow runon autoplayfor the usersconvenience. 21. For the Electronics page, Idecided to try something differentby rotating the photos. I titled itslightly because I thought itresembled snapshots a camera takes.It also adds more variety to mywebsite in appearance. This photohas also been edited previously byme to bring out the vibrant orange init. This time, I didnt add anyborders because I thought it woulddistract users from the informativetext around it. 22. I made use of the I included thecolumn web tool again addresses ofbecause I wanted to several stores andpresent two their opening hourscompletely differentas well as contactshopping areas userstelephone becausecan go for electronics. it would definitelybe useful to users. 23. I also embedded hyperlinks to theofficial website of some of the stores.Through this, users who are interested inelectronics can research moresupplement knowledge about the shop.I chose orange because itfits into my colour schemebut it also acts as a goodhighlighter colour.For my whole website, I used orangetext for keywords which tended toemphasize the specialties of thatparticular shopping spot. 24. Although I always add GoogleMaps, where possible, I also includedwhich MTR exit would be closer for theclient. I did this because it would become However, I still included themuch more convenient and useful for my actual address of the store too.clients, therefore, they will be moresatisfied with my website. 25. Similar to the Fashion page, for the Sho