The Thinning Zhang-Suen Application Method in the Image of ...
SD3100 Web Design & Technology · SD3100 Web Design & Technology Sit Ngai 07310856D Suen Lok Yiu...
Transcript of SD3100 Web Design & Technology · SD3100 Web Design & Technology Sit Ngai 07310856D Suen Lok Yiu...
`````
SD3100 Web Design & TechnologySit Ngai 07310856D Suen Lok Yiu 07301075D Yung Chi Ying 07314113D
Garden
Brand value requirement:Garden is a brand that full of warm and fun. It cares about people’s
life.
User experience requirement:User except garden’s product is fresh and healthyGarden bread are affordable
They can buy garden bread convenientlyThey can create dishes by using garden product easily
Requirements
`````Garden
RequirementsSemiotic requirement :Joyful and happy, interactive
Data and Information requirement: For local people
Functional requirement :Background of garden, types of product, Games
Technical requirement :Let more people can attend to this event, play the game on this website.
`````Garden
4
`````Garden
Site Map
`````Garden
Site Map
On the left hand side
Use contrast of new and old style to show the product and history.
In the middle
Use the tidy interface to make parents feel
comfortable.
In the middle
Cooking for the babiesMore colorful and
movement, to attract children
On the right hand side
It will provide diffident size of wallpapers for
user.
Home page:House and garden
Specifications`````
Garden
`````Garden
1 Architecture
Bidding
Promotion
Game
Download
Platform
Feature, Content, Interface, Interaction Code, and also the Usability
`````Garden
2 Voice and ToneColorful, Joyful
3 MetaphorSmiling face=Kids and Garden’s logoHand=Take care and Help
4 Visual DesignCartoon and warm color
`````Garden
5 Content-Promotion-Bidding-Game-Download
6 TechnologyFlash, Illustration and Photoshop
MetaphorSmiling face=Kids and Garden’s logo
`````Garden
Garden use a smiling baker as a logo, which symbolize the satisfaction and good cheer felt by people who enjoy their food.
Garden provides fresh, healthy and tasty food for children. Smiling face can symbolize their healthy and joyful life.
MetaphorHand=Take care, Share and Help
`````Garden
Hand symbolize giving helping hands to others who are in need. Hong Kong children are satisfied with plenty of materials. They may not understand how to take care of and share with others.
`````wireframe
Bidding
Promotion
Game
Download
Platform
LoginPassword
ContactPrivacy Policy
Click: Go to Garden website (Pop-up window)
`````wireframe
Platform
LoginPassword
ContactPrivacy Policy
Login for bidding
Bidding
Promotion
Game
Download
`````wireframe
Platform
LoginPassword
ContactPrivacy Policy
Email1 2 3
Sam@e ******
Bidding
Promotion
Game
Download
`````wireframe
Bidding
Promotion
Download
Platform
LoginPassword
ContactPrivacy Policy
Acsjhsjkfhsfksjfhsjfshfskjfhskfshkflslwrewtrettetevfdgvdfggddfgdgdfdfdgddfgddfdfdfdfgdgdfdfgddgdfdfddgdfretterterteryrtyyyrtyryryryryrrryyyyyrrrgkjeffhwkhweuwjssjfbnsjfweuewwjfbjsfcbsjfbejfewfhejfhefjkbcsbcfwkhejfhwjkej
Mouse over
Privacy Policy
`````wireframe
Bidding
Promotion
Download
Platform
LoginPassword
Contact
Acsjhsjkfhsfksjfhsjfshfskjfhskfshkflslwrewtretteteyyrtyryryryryrrryyyyyrrrgkjeffhwkhweuwjssjfbnsjfweuewwjfbjsfcbsjfbejfewfhejfhefjkvfdgvdfggddfgdgdfdfdgddfgddfdfdfdfgdgdfdfgddgdfdfddgdfretterterteryrtybcsbcfwkhejfhwjkej
Mouse over
`````wireframe
Bidding
Promotion
Game
Download
Platform
LoginPassword
ContactPrivacy Policy
The menu icons are shaking
Promotion
Children’s Day
Products
`````wireframe
Bidding
GameDownload
Platform
LoginPassword
ContactPrivacy Policy
Mouse over
Life Bread
Promotion
Children’s Day
Products
`````wireframe
BiddingGame
Download
Platform
LoginPassword
ContactPrivacy Policy
Sisisic
Mouse over
Information
Promotion
Children’s Day
Products
`````wireframe
Bidding
GameDownload
Platform
LoginPassword
ContactPrivacy Policy
History
Mouse over
Information
Promotion
Children’s Day
Products
`````wireframe
Bidding
GameDownload
1.2.1Promotion> Children’s Day>
Information
LoginPassword
ContactPrivacy Policy
History
Click
`````wireframe
Bidding
Promotion
Game
Download
Introduction
ID #0Title Home
1 The platform shows the introduction and the recent news.
LoginPasswordEmail
ContactPrivacy Policy
News
`````wireframe
Bidding
Promotion
Game
Download
ID #1Title Promotion
1 There are some motion graphics as icons
LoginPasswordEmail
ContactPrivacy Policy
1.1Products
1.2Children’s Day
Description Description Description Description
`````wireframe
Bidding
Promotion
Game
Download
ID #1.1Title Products
1 There are some motion graphics as icons
LoginPasswordEmail
ContactPrivacy Policy
1.1.1Life Bread
1.1.2Sisisic
Description Description
GardenWebsite
Description2 Click “Garden
Website” will open Garden website in a pop-up window
`````wireframe
Bidding
Promotion
Game
Download
ID #1.1.1Title Life Bread
1 The platform shows different product names
LoginPasswordEmail
ContactPrivacy Policy
Product name 2When mouse over,
the description shows
Product name
Product name
Product name
Product name
Product name
`````wireframe
Bidding
Promotion
Game
Download
ID #1.1.1Title Life Bread
1LoginPasswordEmail
ContactPrivacy Policy
Product name 2Product
nameProduct name
Product name
Product name
Product name
The platform shows different product names
When mouse over, the description shows
Description Description Description Description Description Description Description Description Description Description
Mouse over
`````wireframe
Bidding
Promotion
Game
Download
ID #1.1.2Title Sisisic
1 The platform shows different product names
LoginPasswordEmail
ContactPrivacy Policy
Product name 2When mouse over,
the description shows
Product name
Product name
Product name
Product name
Product name
`````wireframe
Bidding
Promotion
Game
Download
ID #1.2Title Children’s Day
1 There are some motion graphics as icons
LoginPasswordEmail
ContactPrivacy Policy
1.2.1Information
1.2.2History
Description Description Description Description
`````wireframe
Bidding
Promotion
Game
Download
ID #1.2.1Title Information-C
1 The platform shows different country names and flags
LoginPasswordEmail
ContactPrivacy Policy
Country name 2When mouse over,
the description shows
Country name
Country name
Country name
Country name
Country name
`````wireframe
Bidding
Promotion
Game
Download
ID #1.2.1Title Information-C
1 The platform shows different country names and flags
LoginPasswordEmail
ContactPrivacy Policy
Country name 2When mouse over,
the description shows
Country name
Country name
Country name
Country name
Country name
Description Description Description Description Description Description Description Description Description Description
Mouse over
`````wireframe
Bidding
Promotion
Game
Download
ID #1.2.2Title History
1 There are a short animation about the history of children’s day
LoginPasswordEmail
ContactPrivacy Policy
2 Back, next and pause button to control the animation
Description Description Description Description Description Description Description Description Description Description
Back NextPause
`````wireframe
Bidding
Promotion
Game
Download
ID #2Title Bidding
1 There are short introduction at top, click introduction to read the detailed
LoginPasswordEmail
ContactPrivacy Policy
Short Introduction
2.1Introduction
2.2Product Rewards
Signup Free! 2 Click the signup
free icon to go to #2.4
`````wireframe
Bidding
Promotion
Game
Download
ID #2.1Title Introduction
1LoginPasswordEmail
ContactPrivacy Policy
Introduction
Signup Free!
Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description
Click the signup free icon to go to #2.4
`````wireframe
Bidding
Promotion
Game
Download
ID #2.2Title Product Rewards
1 The platform shows different product names
LoginPasswordEmail
ContactPrivacy Policy
2When mouse over, the description shows
Product name
Product name
Product name
Product name
Product name
Product name
3 Click to go to the product information page
`````wireframe
Bidding
Promotion
Game
Download
ID #2.2Title Product Rewards
1 The platform shows different product names
LoginPasswordEmail
ContactPrivacy Policy
2When mouse over, the description shows
Product name
Product name
Product name
Product name
Product name
Product name
3 Click to go to the product information page
Description Description Description Description Description Description Description Description Description Description
Mouse over
`````wireframe
Bidding
Promotion
Game
Download
ID #2.2.1Title Information-P
1 The platform shows different photos of the product
LoginPasswordEmail
ContactPrivacy Policy
2 Click the bid icon to bid
Product name
Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description
999 fun
Bid!
`````wireframe
Bidding
Promotion
Game
Download
ID #2.2.1.1Title Bid
1 Enter how many fun you want to use to bid
ContactPrivacy Policy
2 Click the bid icon to bid
Product name
Description Description Description Description Description Description
999 fun
Bid!
Are you sure you want to use
fun
to bid the product?
Back
3 Click the back icon to go back
You have 3000 fun
3000 [email protected]
`````wireframe
Bidding
Promotion
Game
Download
ID #2.2.1.1Title Bid
1 Enter how many fun you want to use to bid
ContactPrivacy Policy
2 Click the bid icon to bid
Product name
Description Description Description Description Description Description
999 fun
Bid!
Are you sure you want to use
fun
to bid the product?
Back
3 Click the back icon to go back
You have 3000 fun
Success!
3000 [email protected]
`````wireframe
Bidding
Promotion
Game
Download
ID #2.2.1.1Title Bid
1 Enter how many fun you want to use to bid
ContactPrivacy Policy
2 Click the bid icon to bid
Product name
Description Description Description Description Description Description
999 fun
Bid!
Are you sure you want to use
fun
to bid the product?
Back
3 Click the back icon to go back
You have 3000 fun
Retry!
3000 [email protected]
`````wireframe
Bidding
Promotion
Game
Download
ID #2.3.1Title Record
1 Click the product name or photo to view the information page
3000 [email protected]
ContactPrivacy Policy
Please enter the code on the package to get fun
Product name999 fun
Product name999 fun
Product name999 fun
Thanks!
2 Enter the code in the box to get fun
`````wireframe
Bidding
Promotion
Game
Download
ID #2.4Title Register
1 Enter your information in the box and click submit
ContactPrivacy Policy
2 Please check email
Submit
3000 [email protected]
Passwordcsdcsddskshfjshsdfsfsrefrfrsfrg
`````wireframe
Bidding
Promotion
Game
Download
ID #2.4Title Register
ContactPrivacy Policy
Submit
3000 [email protected]
Passwordcsdcsddskshfjshsdfsfsrefrfrsfrg
Please check email!
1 Enter your information in the box and click submit
2 Please check email
`````wireframe
Bidding
Promotion
Game
Download
ID #3Title Game
1 There are some motion graphics as icons
LoginPasswordEmail
ContactPrivacy Policy
3.1How to play
3.2Play
Description Description Description Description
`````wireframe
Bidding
Promotion
Game
Download
ID #3.1Title How to play
1 There are some motion graphics to teach the player
LoginPasswordEmail
ContactPrivacy Policy
How to playDescription Description Description Description Description Description Description Description Description Description Description Description Description Description
Play
`````wireframe
Bidding
Promotion
Game
Download
ID #3.2Title Play
1 There are a mini game
LoginPasswordEmail
ContactPrivacy Policy
`````wireframe
Bidding
Promotion
Game
Download
ID #3.2.1Title Webcam
1 Use the webcam to take a photo and use the garden logo as the mask
LoginPasswordEmail
ContactPrivacy Policy
SaveShoot
`````wireframe
Bidding
Promotion
Game
Download
ID #3.2.1Title Upload
1 Upload your own photo and use the garden logo as the mask
LoginPasswordEmail
ContactPrivacy Policy
SaveShoot
`````wireframe
Bidding
Promotion
Game
Download
ID #4Title Download
1 There are some motion graphics as icons
LoginPasswordEmail
ContactPrivacy Policy
4.1MSN icon
4.2Download
Description Description Description Description
`````wireframe
Bidding
Promotion
Game
Download
ID #4.1Title MSN icon
1 Click to download
LoginPasswordEmail
ContactPrivacy Policy
`````wireframe
Bidding
Promotion
Game
Download
ID #4.2Title Wallpaper
1Mouse over to show detailed
LoginPasswordEmail
ContactPrivacy Policy
2 Click to download
`````wireframe
Bidding
Promotion
Game
Download
ID #4.2Title Wallpaper
1Mouse over to show detailed
LoginPasswordEmail
ContactPrivacy Policy
2 Click to download800x6001024x768111111
1111111111111
Mouse over
`````wireframe
Bidding
Promotion
Game
Download
ID #4.2Title Wallpaper
1Mouse over to show detailed
LoginPasswordEmail
ContactPrivacy Policy
2 Click to download
Click
800x6001024x768111111
1111111111111