F.4 C.I.T.

Module D
Web Site Planning and Design
 Site Planning
 Why?
 To attract visitors -- Increase hit-rate
Increase notability ( 知名度 )
Attract potential customers and investors
Attract advertisers
E.g.
 XuJinglei’s (徐靜蕾) Blog and related news
 YouTube –
 “In October 2006, Google Inc. announced that it had
reached a deal to acquire the company for US$1.65
billion in Google stock.” -- Wikipedia
 Site Planning
 Pre-requisite
 Definition and Analysis
Why? (aim, objective, …)
What? (requirement, constraints, theme, …)
Who? (target audience, involved parties, …)
How? (execution environment, technology, …)
…
 Site Planning
 How can the analysis affect the planning?
 Page contents
 Page layout design
…
 E.g. Difference in aim
Onlineportfolio: Saizen Media Studio
Government Website: Taiwan
 E.g. Difference in target audience
Fish Leong’s Official Website
Khalil’s World
 Site Planning
 What web pages in your website?
 Division according to
Aim of page
Content length

 Sub-division may be needed

 Organization
 Grouping according to the aim and contents
of pages
 Site Planning
 Schematic diagram of site architecture
Home Page

Group 1 Group 2 Page 3

Page 1.1 Sub Group 2.1 Page 2.2

Page 1.2 Page 2.1.1

Page 2.1.2
 Site Planning
 E.g. Fish Leong’s Official Website
Home

Ticketing Site

News About Images Interact Links

Activities Personal Photos Forum Official

Latest News Album Videos Contact Recommended

Awards Downloads Members

Endorsement Login

Diary Join

……
 Site Planning
 Consideration
 Avoid unbalanced architecture / Long Navigation
 Site Planning
 Draw the architecture of the website of a
well-known organization or individual
 What is your site plan?
 Include a schematic diagram of your website
in your 2nd phase report
 Page Content
 Common Components
Header

Navigation Menu
Main Content

Footer
 Page Content
 Common Components
 Header
Logo / Title in graphics (Why?)
Site Functions (Common in large scale websites)
 Search
 Search keywords in the site
 Site map (May appear in footer)
 Provide site architecture
 Links to all pages in the site

E.g. Body Shop

 Page Content
 Common Components
 Navigation Bar / Menu
Provide
links to different main pages
Some may show a pop-up submenu
Sub-menu
 Providelinks to the sub pages under certain topics
 Can be combined with the navigation menu

E.g. Body Shop

 Page Content
 Common Components
 Main Content
Page title in larger font (or in graphical form)
Usually use sans-serif font
Some may include path
 Path to the current page
 Ancestors are expressed in terms of hyperlink
 E.g. http://www.emb.gov.hk

Sub-menu may appear in this part

E.g. Body Shop
 Page Content
 Footer
 Information
Company’s information
Contact
Statements
Copyright
……

 Not a must
 Page Design
 Color Scheme
 Consistent with analysis results
 Factor keeping visitors to your website

 Page Layout
 Position
of different page components
 Readability

 Fonts
 Fontsfor different components
 Readability
 Page Design
 What feeling do these websites give you?
 Monoedge Inc.
 Grand Life Hiraya
 Avril Lavigne
 Khalil’s World
 SFS Kids
 The Body Shop
 Page Design
 Psychology of Color
Soft ( 柔和 )

Saturation ( 飽和度 )
Static ( 靜態 )

Dynamic ( 動態 )

Brightness ( 亮度 )

Hard ( 生硬 )
 Page Design
 Psychology of Color
 E.g. Monoedge Inc.
Primary:
Secondary:
Highlight: Soft ( 柔和 )

Dynamic ( 動態 ) Static ( 靜態 )

Modern

Hard ( 生硬 )
 Page Design
 Psychology of Color
 E.g. SFS Kids
Primary:
Secondary:
Highlight:

Soft ( 柔和 )

Lovely
Dynamic ( 動態 ) Static ( 靜態 )

Hard ( 生硬 )
 Page Design
 Psychology of Color
 Red
Bright
 Excitement
 Danger
 Fire,
bloodshed
 Energetic
 McDonald’s – HK

Dark
 Elegant
 HeadFirst.nl
 Page Design
 Psychology of Color
 Blue
Modern
Deep
 Serenity
( 寧靜 ) and Tranquility ( 平靜 )
 Dependability ( 可靠 ) and Constancy ( 恆久 )
 Nivea

Light
 Clean
 Energetic
 ASA Official Website
 Page Design
 Psychology of Color
 Green
Natural
Freshening
Healthy
Greenpeace - International
 Page Design
 Psychology of Color
 Yellow
Energetic
Always combined with dark colours
Light
 Cheerful,
inviting
 Cole Haan

Bright
 Draw attention
 SFS Kids
 Page Design
 Psychology of Color
 Orange
Red + Yellow
Energetic
Festivity
Happy Events
Fanta
 Page Design
 Psychology of Color
 Brown
Earth and dirt
Chocolate, coffee
Luxurious
Positive or negative feeling
Blank and cables
CFOC
 Page Design
 Psychology of Color
 Purple, Pink
Artisitic
Loyalty,
elegance
Feminine
Barbie
Mary Quant
 Page Design
 Psychology of Color
 Black and White
Grief
Sophistication
Power
Elegance
Elite
Urban, Modern
Chanel
MondoRondo
 Page Design
 Analyze the colors of a website which you
chose before
 What is the color scheme of your site?
 Include the color scheme with explanation in
your 2nd phase report