Web Plan Design

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.  Xu

Jinglei’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 Why?

and Analysis

(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 Online

portfolio: 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

of pages

according to the aim and contents

Site Planning  Schematic

diagram of site architecture Home Page

Group 1 Page 1.1 Page 1.2

Group 2

Sub Group 2.1

Page 3 Page 2.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  Provide

links to the sub pages under certain topics  Can be combined with the navigation menu E.g.

Body Shop

Page Content  Common  Main

Components

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 Contact Statements Copyright ……

 Not

a must

information

Page Design  Color

Scheme

 Consistent

with analysis results  Factor keeping visitors to your website  Page

Layout

 Position

of different page components  Readability  Fonts  Fonts

for 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  E.g.

of Color

Monoedge Inc.

Primary: Secondary: Soft ( 柔和 )

Highlight:

Static ( 靜態 )

Dynamic ( 動態 ) Modern Hard ( 生硬 )

Page Design  Psychology  E.g.

of Color

SFS Kids

Primary: Secondary: Highlight: Soft ( 柔和 ) Lovely Static ( 靜態 )

Dynamic ( 動態 )

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  Purple,

of Color

Pink

Artisitic Loyalty,

elegance Feminine Barbie Mary Quant

Page Design  Psychology  Black

of Color

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