Vous êtes sur la page 1sur 50

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/RCh
isholm1/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! :)

Vous aimerez peut-être aussi