sd3100 web design & technology · sd3100 web design & technology sit ngai 07310856d suen...

`````

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

Email

Click: Go to Garden website (Pop-up window)

`````wireframe

Platform

LoginPassword


Email

Login for bidding

Bidding

Promotion

Game

Download

`````wireframe

Platform

LoginPassword


Email1 2 3

Sam@e ******

Bidding

Promotion

Game

Download

`````wireframe

Bidding

Promotion

Download

Platform

LoginPassword


Email

Acsjhsjkfhsfksjfhsjfshfskjfhskfshkflslwrewtrettetevfdgvdfggddfgdgdfdfdgddfgddfdfdfdfgdgdfdfgddgdfdfddgdfretterterteryrtyyyrtyryryryryrrryyyyyrrrgkjeffhwkhweuwjssjfbnsjfweuewwjfbjsfcbsjfbejfewfhejfhefjkbcsbcfwkhejfhwjkej

Mouse over

Privacy Policy

`````wireframe

Bidding

Promotion

Download

Platform

LoginPassword

Contact

Email

Acsjhsjkfhsfksjfhsjfshfskjfhskfshkflslwrewtretteteyyrtyryryryryrrryyyyyrrrgkjeffhwkhweuwjssjfbnsjfweuewwjfbjsfcbsjfbejfewfhejfhefjkvfdgvdfggddfgdgdfdfdgddfgddfdfdfdfgdgdfdfgddgdfdfddgdfretterterteryrtybcsbcfwkhejfhwjkej

Mouse over

`````wireframe

Bidding

Promotion

Game

Download

Platform

LoginPassword


Email

The menu icons are shaking

Promotion

Children’s Day

Products

`````wireframe

Bidding

GameDownload

Platform

LoginPassword


Email

Mouse over

Life Bread

Promotion

Children’s Day

Products

`````wireframe

BiddingGame

Download

Platform

LoginPassword


Email

Sisisic

Mouse over

Information

Promotion

Children’s Day

Products

`````wireframe

Bidding

GameDownload

Platform

LoginPassword


Email

History

Mouse over

Information

Promotion

Children’s Day

Products

`````wireframe

Bidding

GameDownload

1.2.1Promotion> Children’s Day>

Information

LoginPassword


Email

History

Click

`````wireframe

Bidding

Promotion

Game

Download

Introduction

ID #0Title Home

1 The platform shows the introduction and the recent news.

LoginPasswordEmail


News

`````wireframe

Bidding

Promotion

Game

Download

ID #1Title Promotion

1 There are some motion graphics as icons

LoginPasswordEmail


1.1Products

1.2Children’s Day

Description Description Description Description

`````wireframe

Bidding

Promotion

Game

Download

ID #1.1Title Products


LoginPasswordEmail


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


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


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


LoginPasswordEmail


Product name 2When mouse over,


Product name

Product name

Product name

Product name

Product name

`````wireframe

Bidding

Promotion

Game

Download

ID #1.2Title Children’s Day


LoginPasswordEmail


1.2.1Information

1.2.2History


`````wireframe

Bidding

Promotion

Game

Download

ID #1.2.1Title Information-C

1 The platform shows different country names and flags

LoginPasswordEmail


Country name 2When mouse over,


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


Country name 2When mouse over,


Country name

Country name

Country name

Country name

Country name


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


2 Back, next and pause button to control the animation


Back NextPause

`````wireframe

Bidding

Promotion

Game

Download

ID #2Title Bidding

1 There are short introduction at top, click introduction to read the detailed

LoginPasswordEmail


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


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


LoginPasswordEmail


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


LoginPasswordEmail


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


Mouse over

`````wireframe

Bidding

Promotion

Game

Download

ID #2.2.1Title Information-P

1 The platform shows different photos of the product

LoginPasswordEmail


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



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





Product name


999 fun

Bid!


fun

to bid the product?

Back


You have 3000 fun

Success!


`````wireframe

Bidding

Promotion

Game

Download





Product name


999 fun

Bid!


fun

to bid the product?

Back


You have 3000 fun

Retry!


`````wireframe

Bidding

Promotion

Game

Download

ID #2.3.1Title Record

1 Click the product name or photo to view the information page



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


2 Please check email

Email

Submit


Passwordcsdcsddskshfjshsdfsfsrefrfrsfrg

`````wireframe

Bidding

Promotion

Game

Download

ID #2.4Title Register


Email

Submit


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


LoginPasswordEmail


3.1How to play

3.2Play


`````wireframe

Bidding

Promotion

Game

Download

ID #3.1Title How to play

1 There are some motion graphics to teach the player

LoginPasswordEmail


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


`````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


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


SaveShoot

`````wireframe

Bidding

Promotion

Game

Download

ID #4Title Download


LoginPasswordEmail


4.1MSN icon

4.2Download


`````wireframe

Bidding

Promotion

Game

Download

ID #4.1Title MSN icon

1 Click to download

LoginPasswordEmail


`````wireframe

Bidding

Promotion

Game

Download

ID #4.2Title Wallpaper

1Mouse over to show detailed

LoginPasswordEmail


2 Click to download

`````wireframe

Bidding

Promotion

Game

Download



LoginPasswordEmail


2 Click to download800x6001024x768111111

1111111111111

Mouse over

`````wireframe

Bidding

Promotion

Game

Download



LoginPasswordEmail


2 Click to download

Click

800x6001024x768111111

1111111111111

sd3100 web design & technology · sd3100 web design & technology sit ngai 07310856d suen...

Documents