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

ContactPrivacy Policy

Email

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

Email

Acsjhsjkfhsfksjfhsjfshfskjfhskfshkflslwrewtrettetevfdgvdfggddfgdgdfdfdgddfgddfdfdfdfgdgdfdfgddgdfdfddgdfretterterteryrtyyyrtyryryryryrrryyyyyrrrgkjeffhwkhweuwjssjfbnsjfweuewwjfbjsfcbsjfbejfewfhejfhefjkbcsbcfwkhejfhwjkej

Mouse over

Privacy Policy

`````wireframe

Bidding

Promotion

Download

Platform

LoginPassword

Contact

Email

Acsjhsjkfhsfksjfhsjfshfskjfhskfshkflslwrewtretteteyyrtyryryryryrrryyyyyrrrgkjeffhwkhweuwjssjfbnsjfweuewwjfbjsfcbsjfbejfewfhejfhefjkvfdgvdfggddfgdgdfdfdgddfgddfdfdfdfgdgdfdfgddgdfdfddgdfretterterteryrtybcsbcfwkhejfhwjkej

Mouse over

`````wireframe

Bidding

Promotion

Game

Download

Platform

LoginPassword

ContactPrivacy Policy

Email

The menu icons are shaking

Promotion

Children’s Day

Products

`````wireframe

Bidding

GameDownload

Platform

LoginPassword

ContactPrivacy Policy

Email

Mouse over

Life Bread

Promotion

Children’s Day

Products

`````wireframe

BiddingGame

Download

Platform

LoginPassword

ContactPrivacy Policy

Email

Sisisic

Mouse over

Information

Promotion

Children’s Day

Products

`````wireframe

Bidding

GameDownload

Platform

LoginPassword

ContactPrivacy Policy

Email

History

Mouse over

Information

Promotion

Children’s Day

Products

`````wireframe

Bidding

GameDownload

1.2.1Promotion> Children’s Day>

Information

LoginPassword

ContactPrivacy Policy

Email

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 funSam@email.com

`````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 funSam@email.com

`````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 funSam@email.com

`````wireframe

Bidding

Promotion

Game

Download

ID #2.3.1Title Record

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

3000 funSam@email.com

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

Email

Submit

3000 funSam@email.com

Passwordcsdcsddskshfjshsdfsfsrefrfrsfrg

`````wireframe

Bidding

Promotion

Game

Download

ID #2.4Title Register

ContactPrivacy Policy

Email

Submit

3000 funSam@email.com

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