Where to stay?
As proposal mention before, our website page have several link to let our user get more information to travel to Selangor Subang Jaya. The link which I will be conduct is “where to stay”.
Accommodation is a concern of every traveller, whether looking for a place to pitch a tent or a luxury suite in a fancy resort. Booking accommodation, dealing with the vast array of accommodation options, and considering alternative lodging options are all issues that travellers face. Finding accommodation can be one of the most frustrating aspects of planning your travels.
Objective of the link
I planned to specific each types of accommodation, ie: budget hotel, luxury hotels, resort or home stay. The user can simply select which types of accommodation they wish to stay? So as we know, the user must be tried to know more details of the accommodation which he/she wish to stay. They will do the research from price, photo, facility, start rating or command from others, so those of information we should provide clearly and our website will be very helpful for choosing the hotel that suits users best after 1 click.
Design of GUI
This is the basic design of the GUI after click each category of accommodation, the user will get more detail of the hotel.
After the user select a type of accommodation it will result more detail information, especially is the image of accommodation, rating, price, those if them will influence the decision which hotel they will take.
Flowchart of the individual site
Tools apply and process
at first, i would like to say, the progress of description its seem is very simply and easy to get it, but actually i spend a lot of time to study how to add the new content, how to let my webpage more tidy, how to make the menu bar and so on, i try and error in several time and get the result which i am not so satisfy, because at begin of GUI design i want to do a slide show at beside, i thought is every easy before planning, but i found that is software is no human brain, it need follow command and use the code to progress. but at least i have try.
at first, i would like to say, the progress of description its seem is very simply and easy to get it, but actually i spend a lot of time to study how to add the new content, how to let my webpage more tidy, how to make the menu bar and so on, i try and error in several time and get the result which i am not so satisfy, because at begin of GUI design i want to do a slide show at beside, i thought is every easy before planning, but i found that is software is no human brain, it need follow command and use the code to progress. but at least i have try.
dreamweaver
Basically we will use of tools in Photoshop, Dreamweaver and Flash.
This is the final home page with my "where to stay" part.you can see that, we try to let our page in 1 page, another mean is user no need to much row can direct see the information when visit the page, but if too many information, we just allow user to row down and doesn't have horizontal row.
after the flash banner, we have add the spry menu bar to let user to select each title of our website, and its follow our flow chart website,http://2.bp.blogspot.com/-75DLuoAsgIY/Tg8604HVKNI/AAAAAAAAAH0/yoYOm5oDbvY/s1600/Untitled2.png
to design the spry bar menu, you have to click insect and select spry bar menu. after then, select the layout you would like, horizontal or vertical. after select click 'ok'. the design page will come out a empty bar with item name. you can add the item which click the + symbol, and also the sub item. after finish edit name, we insert the link into each item.
i have specific each types of accommodation on my webpage, ie: stars hotel, budget hotel, resort and home stay. i found each representative photo of each type of accommodation, do some edit with photoshop and adjust the pixel and size, after placed the photo, insert the the link in properties toolbar.
after finish the where to stay homepage, i will design each type of accommodation page and giving the information with details. to let the users easy to explore every brand of hotel, i decided to have a side bar and gather every hotel name to let users select.
to insert a side bar, we have to insert Div tag, and select the insert position after then chose the class/type tag which you want. after insert, add the content for class "sidebar1" inside the bar. after finish the contents, highlight the word and right click to make a link to explore the details of hotel.
Photoshop
the website of background i have applied the photoshop to some edit. compass of background to coordinate our website theme. so i have found some nice picture of compass and do edit.
i used quick selection tools and crop down the compass, cut the layer to the background which i prepared.
besides that, i have design a logo which at insert in every photo which our website own by photoshop.
i used layer style with the effect of drop shadow and let the word more 2d with shadow effect and at into background of website be a header.
for the photo edit, i did do the adjustment for the Hue/saturation, contrast, curves and etc.
Flash
we have planned add some animation the 1st page of our website to attract our user to continue look into. so we use adobe flash for our software to create the animation. 1st we find the treasure hunt map picture as our background. file>import>import to stage>select and open the picture.
i use photoshop edit 4pcs of same compass but in different indicator, and recover the original compass of background and add into timeline to let the compass indicator moving.
to key in the word, i use the text tools and do so effect to moving the word.
right click on layer, select the create motion tween, then pull the layer/word to the position u want. at process you can click play and play the frames.
besides that, i added some background sound when the animation playing.
file>import>import library>select MP3 file and open.
edit envelope by select the pen symbol, and adjust the repeat time.
for the flash banner i only apply the compass moving effect and the changing word color from degree of depth. do different frames from the light color to deep color in timeline.
references
Some of details of website information, we are referring from http://www.tourismselangor.org/accom_list.aspx
and for the hotel
http://www.tripadvisor.com/
after the flash banner, we have add the spry menu bar to let user to select each title of our website, and its follow our flow chart website,http://2.bp.blogspot.com/-75DLuoAsgIY/Tg8604HVKNI/AAAAAAAAAH0/yoYOm5oDbvY/s1600/Untitled2.png
i have specific each types of accommodation on my webpage, ie: stars hotel, budget hotel, resort and home stay. i found each representative photo of each type of accommodation, do some edit with photoshop and adjust the pixel and size, after placed the photo, insert the the link in properties toolbar.
after finish the where to stay homepage, i will design each type of accommodation page and giving the information with details. to let the users easy to explore every brand of hotel, i decided to have a side bar and gather every hotel name to let users select.
to insert a side bar, we have to insert Div tag, and select the insert position after then chose the class/type tag which you want. after insert, add the content for class "sidebar1" inside the bar. after finish the contents, highlight the word and right click to make a link to explore the details of hotel.
Photoshop
the website of background i have applied the photoshop to some edit. compass of background to coordinate our website theme. so i have found some nice picture of compass and do edit.
i used quick selection tools and crop down the compass, cut the layer to the background which i prepared.
besides that, i have design a logo which at insert in every photo which our website own by photoshop.
i used layer style with the effect of drop shadow and let the word more 2d with shadow effect and at into background of website be a header.
for the photo edit, i did do the adjustment for the Hue/saturation, contrast, curves and etc.
Flash
we have planned add some animation the 1st page of our website to attract our user to continue look into. so we use adobe flash for our software to create the animation. 1st we find the treasure hunt map picture as our background. file>import>import to stage>select and open the picture.
 |
| do adjust the size of picture to fit for the screen, and also do edit with the photoshop with click the 'Edit" |
i use photoshop edit 4pcs of same compass but in different indicator, and recover the original compass of background and add into timeline to let the compass indicator moving.
 |
| original compass of picture |
 |
| select the layer copy the frames, and pull it till how much duration i would like. |
to key in the word, i use the text tools and do so effect to moving the word.
right click on layer, select the create motion tween, then pull the layer/word to the position u want. at process you can click play and play the frames.
 |
| using 'create motion tween' to have a effect moving the feather.the green line is the journey you set. |
besides that, i added some background sound when the animation playing.
file>import>import library>select MP3 file and open.
for the flash banner i only apply the compass moving effect and the changing word color from degree of depth. do different frames from the light color to deep color in timeline.
references
Some of details of website information, we are referring from http://www.tourismselangor.org/accom_list.aspx
and for the hotel
http://www.tripadvisor.com/
No comments:
Post a Comment