COLD MITTENS

Research Topic:
1. Efficiency of transmitting of message
2. Web design

Lena
Yuen Lai
Yan
0309481
Leong
Xin Lei
0312957
Siau Yeu
Jiun
0314142
Chong
Lily
0310016
Chan Kar
Kei
0307612
Research Topics:
1. Efficiency of Transmitting of
Message
2. Web Design
Layout
Navigation
Bar (Links)
Accuracy of
Transmitting
Message
Colors
LAYOUT
1
Keep it SIMPLE
2
Keep the Audience Interested and
Engaged to the Website
3
Natural Flow of Information
4
Time Taken to Download
Keep The Audience
Interested and Engaged to
the Website
It is important to keep the audience interested and
engaged to the website.

Well organized websites are easier to comprehend as
opposed to websites that has information all over the
place.
L
A
Y
O
U
T

Time Taken to Download
Content
It is frustrating if the files take a long time to download.

Images should be uploaded with the smallest possible
size and yet to maintain the quality of the images.
The audience would have a positive impression on the
website if the files could be downloaded quickly.
L
A
Y
O
U
T

K.I.S. Keep it SIMPLE
Besides having eye-catching designs, simplicity
has to be taken into considerations.

Well organized websites are easier to
comprehend as opposed to websites that has
information all over the place.
Having different kinds of shapes may seem
creative, but it would complicate the layout of
the website.
It is encouraged to have squares than other
shapes, especially for commercial business
websites as it indicates formality and clarity.

Audience would not stay on the page if
the website is hard to comprehend

L
A
Y
O
U
T

Natural Flow of Information
Natural flow of information should be included in the
website providing the consumers the basic information
of the organization.

Information provided should be easily accessed by the
users.
Information included contact information, background of
the organization and etc.
L
A
Y
O
U
T

Examples
of Good
Website
Design
Open
Mind
Resou-
rces
Apple Microsoft
Groupm
ad
L
A
Y
O
U
T


OPEN MIND RESOURCES

Information can be easily understood and found.
The colored squares highlighted what the website wants
the audience to see.

http://www.openmindsresources.com

L
A
Y
O
U
T



APPLE INC.

Only the most significant information is sown on the
home page.
The tabs are displayed clearly for the audience to explore
more about their products and services.

https://www.apple.com


L
A
Y
O
U
T


GROUPMAD

There is only one shape could be found on this website.
The texts on this website are also easily read and
understood.

http://groupmad.asia


L
A
Y
O
U
T



MICROSOFT

The colors used are attractive and simple.
Important information is being highlighted on the website.
The tabs are really simplified, it is very easy for audience
to click and go to their desired destination.

http://www.microsoft.com/en-my/default.aspx


L
A
Y
O
U
T

Daniel (2011) The navigation bar is the most important design element on a website. Not only
does it guide your users to pages beyond the homepage, but its also the singular tool to give
users a sense of orientation. With this in mind, it is important to adhere to time-tested design
and usability conventions. Doing so will give your users a comfortable and easy reference point
fully engage with your content.
Navigation Bar
1
Good Quality navigation is a must when it comes to
designing a website.
2
Navigation allow visitors to explore the website
without having to hunt for hidden treasure.
3
Optimus (2013): It will keep your visitors happier
as they ease through your website and return time
and again.
Some Basic
Rules:
1
Start With Contents.
2
Dont Overwhelm Visitors.
3
Keep It Simple
4
Actions On The Right
N
A
V
I
G
A
T
I
O
N

B
A
R

N
A
V
I
G
A
T
I
O
N

B
A
R

Start With Contents
Some websites start backwards.

Designers often suggest navigation
items before the design process is ready.
Often the content isn't ready before the
design process begins.
Properly analyzing and organizing
content into logical and highly usable
structure.
Its important to organize contents into usable structure before
even considering design choices, then only add complexity if
necessary.


This isnt entirely unusual.

Jeffrey Zeldman:
Content
precedes design.
Design in the
absence of
content is not
design, its
decoration.
N
A
V
I
G
A
T
I
O
N

B
A
R

Dont Overwhelm Visitors
Main role: To provide user with a choice.
Visitors overwhelmed with too many options impedes
his/her ability to quickly make a choice.
Sufficient organization: a navigation bar with 5-7
channel items.

it fits perfectly with the width of most
website designs.

N
A
V
I
G
A
T
I
O
N

B
A
R

Keep It Simple
Use precise and recognizable words.
Refrain from long phrases: limiting to
12 or less characters.
Use average words that is commonly
known or understood.
Lure on the side of familiarity: people
are used to conventions.
Leave out unnecessary words

For example, use Contact Us instead
of Get In Touch or Lets Talk.


Words that do not add any
meaning

N
A
V
I
G
A
T
I
O
N

B
A
R

Actions On The Right
People naturally expect action links on the right
whereas informational links on the left.
Exception: The Home link should be furthest left
because it is used as a backward action.

As people read from left to right, it is natural for them
to expect that moving right is moving forward.

Why Is It So Important?
Without navigation, websites
appeared unstructured and
unorganized.
Navigation bar is a clear indication
that your website is filled with in-
depth knowledge.
People are encouraged to explore
more when they are able to clearly
see the navigation bars and links.
Your readers dont want to figure out
how your websites works.
Good navigation speeds up viewers
search.
Mainly used to give the readers a
good idea about the website.
Simple understandable navigation
will make viewers stay longer and
return = it is a pleasure to use.
Good navigations place websites
highly on search engines.
Necessary to ensure that the
website is accessible and
functioning.
Good navigation allows visitors to
search with ease and confidence
with what they receive from the
website.
N
A
V
I
G
A
T
I
O
N

B
A
R

1
Large image could lead to
lagging in terms of
scrolling.
2
Large images could cause
slowness in loading the
website page as it takes
longer time to load.
3
No images website is dull
and plain website.
4
Animation cartoon images
makes the website looks
interesting and attractive.
IMAGE TRANSMITION
5
Use a mascot as a
website logo
6
Uses realistic images
(real life images)
7
Scattered images will
cause dizziness and
confusion for the
visitors.
8
GIF images.
Large Images Could Lead to
Lagging In Terms of Scrolling
When large images is uploaded/placed in a web during its design
it will affect the speed of a particular website where it will be slow
in loading the page as well as scrolling.
Long web pages filled with large images resolutions take longer
time to load and scroll. This will bore visitors from waiting and
irritate or annoy them because they could not scroll further down.
I
M
A
G
E

T
R
A
N
S
M
I
T
I
O
N

Stackoverflow.com (2012): Large images accupied the whole width and
height of the browser, causing the browser lag and choppy.
Large images could cause
slowness in loading the website
pages as it takes longer time to
load.
Displaying smaller images on the page has lend a
helping hand to many visitors avoiding slow sites.
It is more preferable to upload images that are sized
suitably and enhanced your webpage when designing.
For instance, the large images resolutions below are
the examples that affect the website to load slowly.
I
M
A
G
E

T
R
A
N
S
M
I
T
I
O
N


Propoto (prophoto.com, 2014) introduced an image
downsizing feature allowing a downsized version of an image
to be created.


Despite, a downsized version of a large image can be large
in actual file size, which will still slow down the loading
process.

I
M
A
G
E

T
R
A
N
S
M
I
T
I
O
N

RESOLUTION: x 1600

Reference: Green Abstract Balls 2012, Green Abstract
Balls Desktop Wallpapers and Backgrounds,
Wallsforpc.com, viewed 5th October 2014,
http://www.wallsforpc.com/wallpaper/green-abstract-
balls/>.
I
M
A
G
E

T
R
A
N
S
M
I
T
I
O
N

RESOLUTION: 2880 x 1800

Reference: Lake Chapala Jalisco 2012, Lake Chapala
Jalisco Desktop Wallpapers and Backgrounds, Wallsforpc,
viewed 5
th
Octoner, 2014,
<http://www.wallsforpc.com/wallpaper/lake-chapala-jalisco-
2/>.
I
M
A
G
E

T
R
A
N
S
M
I
T
I
O
N

RESOLUTION: 2880 x 1800

Reference: Both hegemony 2013, Both hegemony
Desktop Wallpapers and Backgrounds, Wallsforpc.com,
viewed 5th October 2014, <
http://www.wallsforpc.com/wallpaper/both-hegemony/>.
I
M
A
G
E

T
R
A
N
S
M
I
T
I
O
N

No Images Website is Dull and
Plain Website
Websites without graphics nor any designs make the
webpage looks dull and plain could not attract the
visitors attention and interest.
Visitors prefer to visit an interesting website that is
colorful.
The importance of web design is to the extend it
differentiates between a responsive design and a
dedicated or mobile-only design.

It is essential to have at least colors
and images in the webpage.


The common differences between those two: The content or
features that are delivered to the browser.

I
M
A
G
E

T
R
A
N
S
M
I
T
I
O
N

Reference: IM Creator 2012, Web Tool
Feed WordPress, WordPress.com, viewed
5th October 2014,
<http://webtoolfeed.files.wordpress.com/20
12/06/imcreator.jpg>.

I
M
A
G
E

T
R
A
N
S
M
I
T
I
O
N

Reference: No Style 2010, Final Testing,
Robert Chisholms Site, viewed 5
th
October
2014,
<http://stuwww.dcs.shef.ac.uk/people/RChi
sholm1/com1004Site/site-index.html>.

I
M
A
G
E

T
R
A
N
S
M
I
T
I
O
N

Animation Cartoon Images
Makes The Website Looks
Interesting And Attractive
People tend to feel the fun and joy to visit the website more
often and longer.
It breaks the dullness between words and plain websites
especially when your background for the website is in white
color.
CreativeBlog (creativebloq.com) indicates few sets that uses
illustrations and animations for educational purpose, create
awarenes and deliver important messages to visitors.

There is no guarantee that everyone would like or
love the appearance of animation cartoon on the
website.

I
M
A
G
E

T
R
A
N
S
M
I
T
I
O
N


Reference: Every Last Drop 2014, Learn about
the problems of water conversion through this
brilliant parallax scrolling site, CreativeBloq.com,
viewed 5
th
October 2014,
<http://www.creativebloq.com/web-
design/parallax-scrolling-1131762>.

I
M
A
G
E

T
R
A
N
S
M
I
T
I
O
N


Reference: Costa Coffee 2014, The Graphite
Design team chose an illustrative approach for
more flexibility, CreativeBloq.com, viewed 5th
October 2014, <http://www.creativebloq.com/web-
design/parallax-scrolling-1131762>.

I
M
A
G
E

T
R
A
N
S
M
I
T
I
O
N


Reference: The Royal British Legion, The Poppy Appeal
site uses illustrations and animations to educate both a
young and old audience, CreativeBloq.com, viewed 5
th

October 2014, <http://www.creativebloq.com/web-
design/parallax-scrolling-1131762>.

I
M
A
G
E

T
R
A
N
S
M
I
T
I
O
N

Use A Mascot As A Website
Logo
Purpose of branding: By creating a closeness
experience with the visitors as well as creating a
powerful image in their visitors minds.
It could congeal your marketing subject and have a
more remarkable branding effect.
It is easier to create an anticipated emotional effect
as it brings a massive impact by using the image of
mascot in branding.
I
M
A
G
E

T
R
A
N
S
M
I
T
I
O
N

Reference: Consider using a mascot
2014, A mascot can solidify your
marketing motif, KISSmetrics.com,
viewed 5
th
October 2014,
<https://blog.kissmetrics.com/boost-
conversions-using-images/>.


Reference: Consider using a mascot
2014, A mascot can have a much more
memorable branding effect,
KISSmetrics.com, viewed 5th October
2014,
<https://blog.kissmetrics.com/boost-
conversions-using-images/>.

Reference: Consider using a mascot
2014, Its much easier to create a
desired emotional effect,
KISSmetrics.com, viewed 5th October
2014,
<https://blog.kissmetrics.com/boost-
conversions-using-images/>.

I
M
A
G
E

T
R
A
N
S
M
I
T
I
O
N

Uses Realistic Images (Real Life
Images)
Allow website to gain higher trust and belief from the
visitors.
Get the prospects of visitors to focus more and able to draw
them towards a common point of interest.

Making the visitors to believe whatever is
said and shown in front of their sight is
genuine.

I
M
A
G
E

T
R
A
N
S
M
I
T
I
O
N

Reference: Real life never stops 2014, AIA Group
Limited, viewed 5
th
October 2014,
<http://www.aia.com/en/resources/932e65804046
0e7b8c9acd0dfc3c5ea9/aia-wedding.jpg>.

I
M
A
G
E

T
R
A
N
S
M
I
T
I
O
N

Scattered Images Will Cause
Dizziness And Confusion For The
Visitors
Having images scattered all over the webpage without any
arrangement will confuse the visitors.
Reading Room (readingroom.com, 2014): There is a
proper way to arrange and showcase images, to avoid the
webpage to look untidy and leads visitors in puzzlement.

If a web designer prefer to have
scattered images in his/her website,
he/her will need to showcase images in
a proper way.

I
M
A
G
E

T
R
A
N
S
M
I
T
I
O
N


Reference: Attempt 6 Screenshot,
Scattered images and not so
random numbers 2014,
ReadingRoom.com, viewed 5th
October 2014,
<http://blog.readingroom.com/wp-
content/uploads/2012/01/screensh
ot-attempt6.jpg>.


Reference: Attempt 4 Screenshot,
Scattered images and not so random
numbers 2014, ReadingRoom.com,
viewed 5th October 2014,
<http://blog.readingroom.com/wp-
content/uploads/2012/01/screenshot-
attempt4.jpg>.

I
M
A
G
E

T
R
A
N
S
M
I
T
I
O
N

GIF Images
Excellent at compressing images that have relatively few
colors with no gradations.
Most small web graphics which are saved in GIF format
should never exceed 10kb.
It is suitable for websites that require plenty of actions
and movements which need to situate all in images form.
I
M
A
G
E

T
R
A
N
S
M
I
T
I
O
N

Reference: David Szakaly 2013,
Innovative animated gifs, Mind-
warping animated patterns are
typically black and white, with
occasional bursts of psychedelic
colours, Webdesignerdepot.com,
viewed5th October 2014,
<http://netdna.webdesignerdepot.
com/uploads/2013/04/Dvdp3.gif
COLORS
Common
Colors Used
Orange Yellow Green
Blue Red
C
O
L
O
R
S

BLUE
Relates to one-to-one
communication, especially voice
communication.
Blue is a safe color: It is a
universally liked color.
Blue is the color to inspire
selfless love and fidelity.
S
K
Y
P
E

Did good in choosing blue color
as their website layout.
Uses blue color to allow the
users to express their selfless
love and fidelity to their beloved
family and friends through online
conversation.
Skype also uses blue color to not
let their users feel irritated but
feel more peaceful and calm.
C
O
L
O
R
S

RED
Can promote the needs for
action.
On the other hand, using the
color red as background color
may irritate, agitate and anger
the visitors.
A
I
R
A
S
I
A

In order to grab attention of the
visitors.
The color red helps AirAsia to get
more visitors to purchase their
tickets online.
AirAsia uses red color on prices
to gain attention.
The color red also functions as a
signal to inform the visitors that
low fare tickets provided are
worth the money.
ORANGE
C
O
L
O
R
S

U

M
O
B
I
L
E

Representing the social
communication and interaction.
Also represents vitality.
U Mobile uses some orange
touch in their website design, but
cannot be spotted easily because
of a bright background color.
Orange color will stand out if the
background color of the website
is black or dark colors.
They targeted the young age
people because orange color has
more balanced energy compared
to red color.
C
O
L
O
R
S

YELLOW
D
I
G
I

Used yellow color to show an intense
curiosity and interest in investigating
the finer details of the smartphone.
This color encourage more visitors to
visit them to search for smartphones
information.
Downside: Background is too bright
which do not match the bright yellow
used.
This make visitors feel impatient to
close the website.
Has more advantage in matching
yellow with black color as
background.
Text in bright color is more easily to
read on dark backgrounds.
Bright yellow should matched with
black color to maximize the clarity of
text on website.
C
O
L
O
R
S

GREEN
F
R
U
I
T

B
O
X

Green is the color of growth, rebirth,
renewal, harmony and spring.
Fruit Box use green color to promote
their love towards nature.
Uses green color to show that their
products are good for health because
green color represents the color for
natural on earth.
The color green is suitable for the
websites to promote pets, nature,
family, home and friends.
Websites using green color have the
ability to lead their visitors to feel
harmony when they browse the
website on the Internet.
REFERENCE
AirAsia, (2014). AirAsia [online] Available at:
http://www.airasia.com/my/en/home.page?cid=1 [Accessed 5 October
2014].

Alves, D. (2011). How to Design the Best Navigation Bar for Your Website.
[online] Mashable. Available at: http://mashable.com/2011/12/08/design-
navigation-bar/# [Accessed 4 Oct. 2014].

Blog.kissmetrics.com 2014, 7 Tips to Boost Your Sites Conversion Rate
Using Images, viewed 5th October 2014,
<https://blog.kissmetrics.com/boost-conversions-using-images/>.

Blog.readingroom.com 2012, Scattered images and not so random
numbers, viewed 5th October 2014,
<http://blog.readingroom.com/2012/01/27/scattered-images-and-not-so-
random-numbers/>.

Digi, (2014). Digi. [online] Available at:
http://new.digi.com.my/cs/Satellite/Page/devices/default/smartphones_over
view [Accessed 5 Ocotber 2014].

Empowered By Color, (2014). Meaning of Colors in Color Psychology.
[online] Available at: http://www.empower-yourself-with-color-
psychology.com/meaning-of-colors.html [Accessed 5 Oct. 2014].

Fruit Box, (2014). The Fruit Box [online] Available at: http://www.thefruit-
box.co.uk/ [Accessed 5 October 2014].

Kettle, (2014). Kettle [online] Available at: http://kettlenyc.com/#about-us
[Accessed 5 October 2014].

Optimus01, (2013). Importance Of Website Navigation. [online] Available at:
http://www.optimus01.co.za/importance-of-website-navigation/ [Accessed 4
Oct. 2014].

REFERENCE
Skype, (2014). Skype [online] Available at: https://support.skype.com/en/
{Accessed 5 October 2014}

Umobile, (2014). Umobile [online] Available at: https://www.u.com.my/
[Accessed 5 October 2014].

REFERENCE
THE
END
Thank You For Your Time!
Have A Good Day! :)