- Wong Chin Hui 0307877 (Leader)

- Lok Ly-Sha 0307964

- Kuan Jie Yi 0308246
- Kristine Goh Junyi 0314697
- Chan Jia-Qi Janice 0307993
MC 2314: Inleraclive Media
Leclurer: Ms Ivy Chen
In this slides, an overview of building a webpage
layout design is being studied supported by
opinions
Focus of the important criteria in designing a
webpage
! Interesting Layout
! Website Speed
! Navigation
! Colour
Dont bore your readers
Use an interesting layout for your website
A simple yet interesting website will
create great interest for the viewers.

An informative and easy to read
website to engage the readers
attention
The conlenl musl be reIevanl lo lhe niche, business, or comany lhal il's being vriuen
aboul (The Hunglon Iosl, 2014)

" Agree
From Harbeck, 2012
Studies show that people read information
differently on the web than they do in print.
o For example, website users only tend to read small amounts of
information at a time, and they are less likely to read all of the
information especially if the information is poorly organized
or if there is too much text on a page.
Users are less likely to read information that
they must scroll down to find. (Harbeck, 2012)
From Hufngton Post,
2014
The content should provide valuable and
useful information to the reader. It should
teach them at least one or two things or
answer at least one question they have.
This can be adjusted depending on where
the content will be published
o such as a bIog, vebsile, add or sociaI media) and
vhal lhe main urose of lhe conlenl is.
You have to keep in mind that real people
are reading this content, so it has to be
interesting; the content needs to catch
and keep their attention from the title to
the last period

The content must be relevant to the niche,
business, or company that it's being
written about
Examples Of
Interesting Website
Layouts
Screen Shots
Of
Interesting
Content
Websites
Source from The Hunglon Iosl, 2014
Source from Harbeck, 2012
Il's a simIe vebsile as il is easy lo access.
Iasier for readers lo read
Nol messy
Slraighl lo lhe oinl
Iiclure from Hongkial, 2014
SimIe design
Calures auenlion of lhe readers easiIy

Iiclure from rovn, 2014

Summary of Article
Web designer put top-notch graphics and sound into
their web page
Only 216 colours can be seen through the screen that
is between 15 and 19 inches wide
And most of the viewers view the screen at the inches
wide, can only download at 28.8 kb per second
Size of the page should be cut down, if viewers need
to wait for the page to fully downloaded
We agree with the article that website speed is
much more important then those fancy images and
sound.
No matter how great the web design, impatient
visitors will not wait around for slow-loading pages
Website Speed
Compare
This vebsile:
IIIecla Inleraclive, 2010
Versus
This vebsile:
Rochesler Inslilule of TechnoIogy, 2011
Which attracts?

And

Which loads faster?
In terms of visual, 1st website is more visualize
compare to 2
nd
website

But less graphic website like 2
nd
website, do
load faster compare to 1
st
website
We know that effective web pages have to
look great, and images play a huge role in
that.

We also know that images play an equally big
role in degrading performance.

As you increase the number and size of
images on your pages, load time uniformly
increases (Pinto, 2013)
Some facts
With the amount of content out there on the web,
a page or site that loads slowly is going to have
fewer visitors than one that loads quickly (Kyrnin,
2014).
47% of consumers expect a web page to load in 2
seconds or less, said Sean Work, Minister of
Propaganda, KISSmetrics (Neeley, 2012).
Therefore, loading speed is very important for web
sites.
Common Causes
Of A Slow Website
Large volume of unoptimized Images

Too Much Fancy Flash

External Media Usage
And so, here is some tips to speed up your website!
To speed up the website
i. Web images should be small
ii. Use graphic more, design less
iii. Use special effects sparingly
Web Images should be... SMALL
Web images take up the majority of the
download time in most web pages.
But if you optimize your web images you will
have a faster loading website.
The one way that will improve your speed the
most is by making your graphics as small as
possible (Kyrnin, 2014)
Iiclure from Visia, 2014
Ior examIe:
As mention from the article, web page should be no
larger than 50K and not lesser than 30K.
The number one visited web site home page is
under 21k.
Example given is Yahoos home page which is 20K
# More Design

$ Less Grahic
Instead of one long page.
The more you separate your content the faster it will
download.
Iiclure from HaIf Crealive, 2014
Use Special Effects Sparingly
Make sure that the site needs the effect you want
Iul imorlanl ones onIy.
If exlra grahics can seII lhem, kee il, if nol, deIele il!
Iiclure from HaIf Crealive, 2014
Ways To Gel
SmaII Size Images
Using the right format
Image dimensions
Color of images
Using The Right Format
GIF
JPEG
Ior al coIor images.
Images vilh |usl a
fev coIors
Ior holograhic
images.
Images vilh miIIions of
coIors.
PNG
Good for bolh al coIor
and holograhic images
Transarenl background
There are onIy lhree image formals for lhe veb: GII, }IG, and ING
Image Dimensions
Most cameras take photos that are way
bigger than the average web page can
display.
By changing the dimensions to
somewhere around 500 x 500 pixels or
smaller, you will create a smaller image
Color of Images
216 is the number of colors you have on a
web safe color pallet.
Use solid colors when designing your
image.
The more color you have in an image the
bigger its going to be.

For example
This vebsile consisls of more coIors for lhe image, lherefore,
lhe image size is bigger
Iiclure from IIIecla Inleraclive, 2014
However
This vebsile consisls of Iess coIor for lhe image, lherefore, lhe size of lhe
image is smaIIer
Iiclure from Rochesler Inslilule of TechnoIogy
Therefore,
a web page to be successful it
needs to download quickly and
look good.
WHAT IS
NAVIGATION
Ease of navigation is
one of the biggest keys
to the usability of a
website. If visitors can
easily find what they
are looking for they will
be more likely to stay
on the website rather
than leaving and
going to another site.
Navigation is the way
to guide users through
a website, so that they
know how much
content is available
and exactly where to
find what they are
looking for.



% WHIRI AM I`
% WHIRI CAN I GO IROM HIRI`
% WHIRI WAS I ALRIADY`
Your websites navigation should answer the
following questions :

!"#$#
&'
()
Should a visitor randomly arrive at your
website, it should let them know exactly
what website they are at, and what they
are reading.

The name and Iogo of lhe comany shouId
consislenlIy be al lhe lo / lo Iefl of every
age in lhe vebsile, and Iink lhe user back lo
lhe homeage.

Websiles shouId aIvays incIude a search bar.

Some siles use a '+,-./0,12+ 3,.45' near lhe
lo of lhe age lhal usuaIIy Iooks a bil Iike
lhis:
Home > Products > Women > Bottoms >
Skirts
!no second guessing.

Iuegg's brovser lilIe slales exaclIy vhal lhe comany is , !
#$%&'($ )$&'*+, %-!+)'+* !+) )$&'*+ !*$+./ '+ 0!-)'1.
The lilIe / Iogo is consislenlIy Iaced al lhe lo of every age
and a singIe cIick viII bring you back lo lhe main age.

WHIRI AM I
Iiclure from Iuegg, 2014
Another way to ensure the user knows where they are
is by highlighting the icons in a darker color as an
indication for the currently opened subpage, as
shown by Bloom Search Marketings website.
WHIRI AM I
Iiclure from Ioom Search Markeling, 2014
75B s website, while innovative in their use of icons
instead of words, is confusing because while mousing
over one icon, the user might have forgotten what the
other icons are for.

WHIRI AM I
Iiclure from 75
!"#$#
6&7
(
89
:$9'
"#$#)

People leave websites that they cannot

navigate. Thus, your website should be
understandable, clear and intuitive and
utilize the three click rule.
Sile navigalion shouId aear in lhe same
Iocalion on every age of a sile. This viII
enabIe users lo gel used lo a sile and feeI
comforlabIe brovsing il. If navigalion vere
lo |um from lhe lo lo lhe Iefl, disaear, or
change coIors from seclion lo seclion,
fruslraled visilors are more IikeIy lo go
eIsevhere.
Links musl be IabeIed smarlIy and leII lhe
user vhere il's going vilhoul lhe user
having lo oen lhe Iink lo hnd oul. AIso,
users shouId be abIe lo gel vhere lhey
inlend lo go in lvo or lhree cIicks. !be creative, but
organized.


Naks' navigalion is cIear, concise, and lhe menu bar
consislenlIy sils by lhe Iefl hand side no mauer vhal age
you are al.

WHIRI CAN I GO IROM HIRI
Iiclure from Naks Iood, 2014
Hovever, Larissa Ness's vebsile has loo many navigalion
buuons. A Iong Iisl of olions is messy, unnecessary and
confusing. Aim for a maximum of 7. Sub-ages shouId be
groued under reIaled lilIes, and sociaI media Iinks can be
incIuded as icons.

WHIRI CAN I GO IROM HIRI

Iiclure from Ness, 2011
Iurofurnilure uses dro-dovn navigalion, vhich shovs Iover IeveIs
of lhe cIassihcalion vhen lhe mouse roIIs over a arlicuIar Iink.
SimiIar ilems can be groued inlo a Iisl of hyerIinks lo shov lhey
have a reIalionshi. This aIIovs lhe reader lo navigale furlher inlo lhe
vebsile if lhey vish, vilhoul being messy and inlrusive.
WHIRI CAN I GO IROM HIRI
Iiclure from Iuro Iurnilure
!"#$#
!&;
(
&<=
$#&>?)

It is helpful to let users know what they
have already read instead of having
them to open and check each page
over and over again. That way, they can
spend more time on the things that
matter.

Visiled Iinks shouId be highIighled in a
dierenl coIor, or underIined (since some
veb users are coIorbIind) afler being
oened.
Avoid making ages loo dee and hard lo
hnd. Users may Iose inleresl if lhey hnd il
dicuIl lo hnd vhal lhey vere Iooking
for.
.have I been here
before`

A very prominent example of using highlights to

distinguish visited websites is Google. By doing
this, users can save time instead of re-clicking
links.
WHIRI WAS I ALRIADY
Color should be one of your first concerns
when it comes time to starting your web site
design.

You should always use a browser safe color
when using solid color as a design element.

You should NEVER irritate the visitor with bright
colors.
Agree?
OF COURSE!
WHOS ABLE TO STARE AT THIS??
Iiclure from Accel }esus, Iorever Iorgiven
Or these?
Iiclure from Cheesies, 1999-2012
Iiclure from urnsed C 1995-2009
Iiclure from Ienny }uice
These websites used lots and
lots of colors, causing it to hurt
the audiences eyes!
How about now?
Iiclure from Iric, 2010
Picture from Speed Motion, 2006-2014
This website, only used a few
colors. Therefore, making the
audiences eyes feel
comfortable
Lets take a
look at a few
more

eye soothing

webpages..
Iiclure from Iaraguay, 2011
Iiclure from Thomas IriLalrick, 2014
Iiclure from These Are Things
Iiclure from Aclivale Media, 2014
As you can see,
a website
doesnt
need tons of
colors to
attract

Who are your sile's olenliaI
visilors`
Whal are your roducls or
services`
Whal are your sile's key
ob|eclives`
(IaIIasarl Web Design, 1996-2014)
Before selecting colors, we
ask the following questions:
A good number of designers
recommend using only 3 main
colors on your website. (Bowers,
2011)
Create a strong contrast between a
pages background and its text. (Avangate, 2004-2014)
Iiclure from MassimiIiano, 2013
Understand the meaning
behind different colors
RED: Energy, passion, excitement, power
Blue: Depression, spirituality, freedom, loyalty
orange: Friendliness, warmth, playfulness
BLACK: Power, elegance, secrecy, mystery
(Avangale, 2004-2014)
Less veII-knovn businesses shouId carefuIIy
consider lhe coIors lhey choose for lheir Iogos and
vebsile.

Cerlain coIors vork veII vilh secihc lyes

if businesses.
(IaIIasarl veb design, 1996-2014)
For Business Websites
For Example,..
Warm colors like , , and work
well for food sites and restaurants that offer spicy fare.
RED YILLOW ORANGI
(IaIIasarl veb design, 1996-2014)
Iiclure from ChiIIis, 2013
Cream, white and dark brown can be used
successfully on websites that sells chocolate.
(IaIIasarl veb design, 1996-2014)
Iiclure from Dove ChocoIale, 2014
Cool colors like and
complement outdoor products, airlines, medical
services, law firms and intellectual content.
BLUE GREEN
(IaIIasarl veb design, 1996-2014)
Iiclure from M&M Ouldoor Iroducl, 2010
Website Layout
o Simple yet interesting web layout attracts
o Text in web should be concise however informative
Website Speed
o Too much graphic and design would slow down loading of webpage
Navigation
o Easy navigation to explore the web should be easily access
Colour
o Too much colour would affect negatively on the web, keep colours to the
theme
o Readable colours are important especially for text
Simplicity is the key to sophistication &
REFERENCES
75, |ONLINIj, vieved 9lh Oclober 2014, < hu://vvv.75b.nI/>
Accel }esus, Iorever Iorgiven, |ONLINIj, vieved 8lh Oclober 2014, < hu://vvv.dokimos.org/a|/>
Aclivale Media, 2014, Aclivale Media Uniled Kingdom, |ONLINIj, vieved on 8lh Oclober 2014, <hu://
aclivalemedia.co.uk/>
Avangale, 2004-2014, 0233&'+* (2$ 4'*2( 0353-& 63- /37- 8$% 9'($, |OnIinej, vieved 1sl Oclober 2014, < hu://
vvv.avangale.com/avangale-resources/arlicIe/coIor-veb-sile.hlm >
Ioom Search Markeling, 2014, MonlreaI, |ONLINIj, vieved 9lh Oclober 2014, <hu://vvv.makeilbIoom.com/>
Iuegg, 2014, Iuegg, Uniled Kingdom |ONLINIj, vieved 8lh Oclober 2014, <hu://vvv.bIuegg.co.uk/>
overs, T 2011, :3# (3 .233&$ ! *-$!( .353- &.2$;$ 63- /37- #$%&'($, |OnIinej, vieved 2nd Oclober 2014, < hu://
remium.vmudev.org/bIog/choose-coIor-scheme-your-vebsile/ >
rovn, D 2014, <2$ =>?$-'$+.$, |OnIinej, vieved on 1lh Oclober 2014, <hu://media.crealivebIoq.fulurecdn.nel/siles/
crealivebIoq.com/hIes/images/2012/11/derren.|g>
urnsed, C 1995-2009, <2$ @5(';!($ ABC& 93+*&, |ONLINIj, vieved 8lh Oclober 2014, <hu://
vvv.uIlimale80ssongs.com/index.hlmI>
Cheesies, M 1999-2012, D!;!A& 02$$&'$& :!+);!)$ 053(2'+* E F..$&3-/, Dynamic Drive Uniled Slales, |ONLINIj,
vieved 8lh Oclober 2014, < hu://mamascheesies.com/>
ChiIIis, 2013, T.A.S IubIisher, MaIaysia, |ONLINIj , vieved 2
nd
Oclober 2014, <hu://chiIIis.com.my>
Dove ChocoIale, 2014, Dove ChocoIale, Mars, |ONLINIj, vieved 8lh Oclober 2014, <hu://vvv.dovechocoIale.com/>
IIIecla Inleraclive, 2010, :3;$ G!*$, |OnIinej, vieved 1sl Oclober 2014, <hu://vvv.eIIeclainleraclive.com/-/home>
Iric, C 2010, F55 F-37+) HI, |ONLINIj, vieved 8lh Oclober 2014, <hu://vvv.d|ericc.nI/>
Iuro Iurnilure, |ONLINIj, vieved 9lh Oclober, < hu://vvv.eurofurnilure.com/>
HaIf Crealive, 2014, :3;$ G!*$, IixeIenlily, |OnIinej, vieved on 3rd Oclober 2014, <hu://lhemes.lf/reviev/`
haIfcrealive_v>
Harbeck D 2012, :3# (3 D!J$ ! 8$%&'($ K+($-$&('+* !+) =!&/ (3 4$!)L9'($ G-3 M$#&, }ayde OnIine, |ONLINIj, vieved 9
lh

Oclober 2014, <hu://vvv.sileronevs.com/2012/04/18/hov-lo-make-a-vebsile-inleresling-and-easy-lo-read/>
Hongkial, 2014, <2$ M33)5$ %3>, |OnIinej, vieved 10lh Oclober 2014, AvaiIabIe al: < hu://media02.hongkial.com/designing-
reslauranl-vebsiles/10-lhe-noodIe-box-reslauranl-vebsile.|g >
Kyrnin, } 2014, H3+N( @&$ M$&($) <!%5$&, Aboul.com, |OnIinej, vieved on 4lh Oclober 2014, < hu://vebdesign.aboul.com/od/
seed/a/donl-use-nesled-labIes.hlm>
M&M Ouldoor Iroducls, 2010, Nev erIin, |ONLINIj, vieved on 2
nd
Oclober 2014 <hu://mmouldoorroducls.com/
home.asx>
MassimiIiano, 2013, arni Design, |OnIinej, vieved 3rd Oclober 2014, <hu://vvv.barnidesign.il/>
Naks Iood, 2014, ig Red Dog, |ONLINIj, vieved 9lh Oclober 2014, <hu://naksfood.com/(>
NeeIey, } 2012, O'P$ 8!/& (3 9?$$)L7? Q37- 8$%&'($, Hosling Services, Inc. Midhase, UK2 Grou, |OnIinej, vieved on 5lh
Oclober 2014, < hu://vvv.midhase.com/bIog/hve-vays-lo-seed-u-your-vebsile/ >
Ness, L 2011, Larrisa Ness, |ONLINIj, vieved 9lh Oclober 2014, < hu://Iarissaness.com/>
IaIIasarl, 1996-2014, 8$%&'($ H$&'*+, 8$% D!-J$('+*, E <$.2+'.!5 <'?& ;!J$ /37- &'($ ! &7..$&&, |OnIinej, vieved 2nd
Oclober 2014, <hu://vvv.aIIasveb.com/coIor.hlmI>
Iaraguay, A 2011, MeIonfree, |ONLINIj, vieved 8lh Oclober 2014, <hu://meIonfree.com/>
Ienny }uice, |ONLINIj, vieved on 8lh Oclober 2014, <hu://vvv.enny|uice.com/hlmIversion/vhois|.hlm(>
Iinlo, A 2013, 82/ Q37- 8$%&'($ K& 953#R K;!*$ G$-63-;!+.$, Youa, |OnIinej, vieved on 4lh Oclober 2014, < hu://
vvv.youaa.com/bIog/bid/293406/Why-Your-Websile-Is-SIov-Image-Ierformance>
Rochesler Inslilule of TechnoIogy, 2011, VisuaI Communicalion Design al RIT, Rochesler Inslilue of TechnoIogy,
|OnIinej, vieved on 3rd Oclober 2014, <hu://comulergrahics.ril.edu/>
Seed Molion, 2006-2014, |ONLINIj, vieved 8lh Oclober 2014, <hu://seed-molion.com.ua/>
The Hunglon Iosl, 2014, Informalive, Inleresling, ReIevanl: Three RuIes for Crealing QuaIily Conlenl in DigilaI
Markeling, |ONLINIj, vieved 1lh Oclober 2014, <hu://vvv.hunglonosl.com/roger-bryan/informalive-
inleresling-r_b_4914330.hlmI>
These Are Things, |ONLINIj, vieved 8lh Oclober 2014, hu://vvv.lhesearelhings.com/
Thomas IriLalrick, 2014, |ONLINIj, vieved 5
lh
Oclober 2014, <hu://hLhLalrick.com/>
Visia, 2014, :3;$ G!*$, IixeIenlily, |OnIinej, vieved on 3rd Oclober 2014, <hu://lhemes.lf/reviev/`
haIfcrealive_v>
END